Your weekly frequent11y newsletter, brought to you by @ChrisBAshton:
Brief Note on Super- and Subscript text
Adrian Roselli explores how different screen readers deal with superscript and supscript text.
Firstly, it’s useful to note that there are multiple different positions of super/sub script, set using the vertical-align CSS property:
baselineis used for representing the lower character in fractions and abbreviations, alongsidesuperfor the upper charactertext-topis used for going above the ascender line, such as to represent footnotessubis used for going below the baseline, such as to represent the numbers in chemical compounds
This is hard to describe textually, and difficult to represent visually due to the limitations of WordPress, so I suggest you check out the examples on CodePen!
But that’s all really more of an aside. Adrian’s focus here is on what screen readers do with the <sub> and <sup> elements. What isn’t hugely clear from Adrian’s article is what he actually hopes to hear from his screen reader. That can be deduced from one of his bug reports:
I expect to hear the sub- and super-script text as marked up by
<sub>and<sup>. Failing that, I expect there is at least a setting… to expose superscript and subscript text audibly to users.
Adrian tests each screen reader in turn. Where the super/sub text is not ‘enabled’, it’s unclear whether the contents are simply not announced as <sub>/<sup> elements, or whether the contents of those elements are ignore completely, which would be far worse! In my experiment with VoiceOver, the elements’ contents were announced but not the markup. Anyhow, these are Adrian’s findings:
- NVDA has a setting to enable them, but this only works if
vertical-alignhas NOT been set totext-toporbaseline. - VoiceOver has no such setting, but does have an option for exposing the contents to Braille readers. There is also an option to increase text verbosity to the level that it exposes sub/super text, but this also announces the typeface and font size, for everything, so is completely impractical.
- JAWS has no settings, and “ignores them completely”.
accessguide.io
A handy resource for learning about accessibility guidelines for the web. It covers common design patterns such as saving data after session timeout. It covers how to prevent interesting buggy edge cases such as accidentally hitting a button when trying to scroll past it. And it covers common accessibility problems such as identifying and describing form error messages to users.
Two new bots can help newsrooms prioritize accessibility and alt text
An interview with Patrick Garvin, former worker of Boston Globe.
Patrick noticed that a lot of newsrooms tended to omit alt text on their social media, excluding a lot of people from reading that content. So he built an @AltAwareness Twitter bot, which listens for tweets that contain journalism-related hashtags and, essentially, calls them out when they include images but no alt text.
He was inspired by an earlier bot by Matt Eason, which performs a similar service for people who use the #accessibility hashtag but fail to provide alt text. He’s also built a similar one that scans tweets from the UK government.
Patrick found that his bot would get blocked a lot, and not have the effect he was hoping. So he built an @A11yAwareness bot which is more advisory in tone. “It doesn’t retweet anyone, it doesn’t call anyone out” – it tells people “Here is stuff that you might not know”. This has had a much more effective response from people who had been tweeting inaccessibly.
Did you know that you can subscribe to dai11y, week11y, fortnight11y or month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.
