HTML accessibility for the vision-impaired

Gurth

I’ve recently been reading up a little on how to make HTML accessible to screen readers etc., and am now confused about the best way to do some things.

There seems to be an overlap between Spoken Presentation in HTML and the CSS Speech Module, but also parts that don’t overlap, not to mention ARIA. Is the idea that you use whichever does the thing you need, or is it better to try and stick to one of the two as much as possible?

This question came up for me because I fairly frequently have things like φούμπαρ (“foobar”) in the text and don’t want a screen reader to say words like that twice. So which of the following would be best practice to mark this up, or something else still?

<span lang="gr">φούμπαρ</span> <span data-ssml-sub-alias="">(“foobar”)</span>

<span lang="gr">φούμπαρ</span> <span style="speak: never">(“foobar”)</span>

<span data-ssml-sub-alias="φούμπαρ"><span lang="gr">φούμπαρ</span> (“foobar”)</span>

<span lang="gr">φούμπαρ</span> <span aria-hidden="true">(“foobar”)</span>

(Inline styles used for illustration purposes only — IRL I’d be using classes, of course.)

(Edited for ry )

Tsaukpaetra

@Gurth said in HTML accessibility for the vision-impaired:

how to make HTML accessible to screen readers

One of these days I'll do the same...