Clagnut

Menu

Dynamically underlining accesskeys

§ Accessibility · DOM | JavaScript

Today on the WSG mailing list, Andy Budd asked:

Here’s a quick (and probably stupid) accessibility question regarding screen readers.
<label><span>S</span>earch</label>
I assume the a screen reader will read this out as “Search” and not “S earch”.

Patrick H. Lauke answered:

Tested with JAWS 4.02, and yes, it reads it as “search”.
That’s not to say, though, that all screenreaders behave this way…
Let me guess…underlines for accesskeys? [...] One thing that worries me about doing those sorts of things is that the result is very…non semantic. Not sure how, say, search engines would react to seeing Words broken up like that.

And of course Patrick is right, Google and the like might not see the word as intended. So instead of hand coding the span for each link, why not use some DOM scripting to do so? I had a go, see Dynamically underlining accesskeys in my sandbox. In some ways this could be using JavaScript to increase accessibility, or least stop mark-up getting in the way.


Fatal error: Call to a member function getAttribute() on a non-object in /home/clagnutc/public_html/includes/thirdparties.inc.php on line 97