Accessibility of using <sup> to indicate powers (such as 4^2)?

Question

Is using the <sup> tag the proper way to indicate powers? In a screen reader, wouldn't 3<sup>2</sup> just read as three-two or thirty-two? It seems like there has to be a more accessible way to do this.

Answer 1

There is no other markup element in HTML to indicate powers. Even the sup element does not mean exponent; it means superscript, which in turn may mean different things. According the HTML5 drafts, sup and sub should be used “only if the absence of those elements would change the meaning of the content. But they still show examples like <span lang="fr"><abbr>M<sup>lle</sup></abbr>, where superscripting is stylistic.

The treatment of sup varies by browser, but we cannot really expect browsers to read 3<sup>2</sup> as “three superscript two” or “three to the power two”. If they do such things, M<sup>lle</sup> will sound really odd.

Similar remarks can be made about the use of superscript characters, such as “²”. Their inherent meaning is to be superscripted, not to denote exponentation.

This also implies that you can reasonably consider using other markup, like 3<span class=sup>2</span>. The span element is semantically empty, but it’s not that much worse than span, which has “presentational semantics.” The reason for doing so might be that there is no really satisfactory way to style sup elements; with span, you start from a clean desk.

Answer 2

In general, when there is an Unicode equivalent for the subscript/superscript, you should use that character directly instead of the sub/sup element (it's not a must, just a recommendation, so go on using whatever you like more).

You can find some of those subscripted/superscripted Unicode characters in these Wikipedia articles:

• Unicode subscripts and superscripts
• Latin-1 Supplement (Unicode block) (for ¹, ² and ³)
• Phonetic symbols in Unicode

You could enter (or copy/paste) these chars directly in your document, if you set the charset to an Unicode encoding like UTF-8. Example for HTML5: <meta charset="utf-8">. Otherwise you'd use character entities.

Exception: in a mathematical context, you should use MathML with msub/msup (so don't use these special subscripted/superscripted Unicode characters there). You can use MathML in HTML5 within the math element.

Source for these two "shoulds": Unicode in XML and other Markup Languages: 5.6 Superscripts and Subscripts (via blog post in German)

It seems like there has to be a more accessible way to do this.

By marking up these subscripts/superscripts equivalents with the sub/sup elements OR by using the relevant Unicode chars, you are doing exactly your job: telling user-agents the "meaning", so they can know how to process the text, e.g. for in-document search ('CTRL + f' in browsers), text-to-speech (screenreaders), web search (search engines), …

If a screenreader wouldn't correctly read/announce 3² or 3<sup>2</sup>, it would be a (serious) bug which they should fix.

The only problem for such user-agents would be if people misuse these characters/elements. It's not relevant in this case, but maybe for other readers: When the subscript/superscript is stylistic only (and carries no new meaning by being subscripted/superscripted), you should use CSS (instead of the special Unicode characters or sub/sup elements): vertical-align with sub/super (and you'd have to adjust the font size, too. See this answer to a different question.)