I’m writing fiction in HTML (which will be published as an EPUB – which is a wrapper around HTML), and I want to be sure that it’s as accessible as can be. However, I’m using weird things like non-standard words and inline images as glyphs, and interspersed foreign languages – how do I make screen readers read these as they should be read, without attempting to read the content as-is.
Instead of capping out at, say, 9,999,999, I guessed it would roll over to a graphical tile
located past the numbers in RAM. (Fancy a score of <img src="tile.svg"/>,000,000?)
[…]
Games of that vintage often had a fixed set of place-holding zeroes that was filled in with your score –
0,000,000 points turned into 0,042,040 points turned into 0,869,040 points.
[…]
The sign read “立入禁止”.
How do I get a screen reader to read the following:
<img src="tile.svg"/>,000,000 as “half-a-little-running-man million”0,000,000 as “zero million zeroteen thousand zero hundred and zeroty-zero”立入禁止 as たちいりきんしFrom what I’ve heard, screen readers will ignore an aria-label on a regular span. It’s also important that it’s simply read as though it were the actual text, as opposed to being preceded in the narration by, say, “description:” or some such.
(I’m guessing the last one is a bit different and will include lang="ja" – in fact, the solution for this particular case one is probably simply <span lang="ja">立入禁止</span> [since it’s a common enough word], but pretend it’s a word that’s not only in Japanese but would need the reading supplied or the screen reader would read it wrong.)
You're right that most screen readers will ignore an aria-label on a generic span. That's because spans have implicit roles of generic, and the ARIA spec states that aria-label can't be used on elements with a generic role.
Additionally, EPUB is a tricky format for content authors since there's a wide variety of EPUB readers that may not be compatible with techniques like using an .sr-only class for providing screen-reader-only text.
As much as the semantic purist in me hates it, your best bet may be to use a span with an img role and aria-label. The spec explicitly allows the img role to be applied to text (emphasis mine):
The ARIA
imgrole can be used to identify multiple elements inside page content that should be considered as a single image. These elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner.
So you can think of "0,000,000" as the "content delivering information in a visual manner", and "zero million zeroteen thousand zero hundred and zeroty-zero" as its accessible name, in literary voice.
This approach would probably be your best bet to making something that will be compatible with a majority of EPUB readers, but I suggest testing it.
It would look something like this in practice:
<span role="img" aria-label="half-a-little-running-man million"><img src="tile.svg"/>,000,000</span>
<span role="img" aria-label="zero million zeroteen thousand zero hundred and zeroty-zero">0,000,000</span>
The Japanese example is somewhat different, since it's one word that you want announced as something completely different. I'm not familiar enough with the language to suggest an appropriate approach there.