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:

• baseline is used for representing the lower character in fractions and abbreviations, alongside super for the upper character
• text-top is used for going above the ascender line, such as to represent footnotes
• sub is 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-align has NOT been set to text-top or baseline.
• 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”.

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even 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.