An interesting thing about accessibility work on the web is that they bring a completely newmechanism for interacting with webpages - the rotor. The rotor is a mechanism for jumping todifferent parts of the pages by the type of the item, this could be links, headings, tables etc.
The thing about the rotor is that it removes the context you would get normally in a page so forexample if you have download links for different documents in different formats you would have agrouping containing the title of the document and then the different download links just containingthe format e.g. xls, csv etc.
When this example is pulled out into a rotor you get a list of links saying xls, csv over andover again which is really not helpful and would be super confusing to the user.
The solution is usually to add some additional context that only the screen reader would notice.This content is hidden using a very hackish CSS class usually called something like sr-only orvisuallyhidden. These classes are very complex and fraught with danger. If you want some lightreading there is an enlightening github issue aboutthe one in html 5 boilerplate. There is also another interesting github issuewhere the amazing Sara Soueidan raises the possibility ofgetting this built in to CSS all the way back in 2016. This seems like a no brainer to me given thatlots of people are having to add this in user space and that the benefits of a stable solution forusers using a screen would be immense.
So basically we were bound to find places where adding visuallyhidden elements was not going towork and here is one of them.
On VoiceOver for iOS (v13.6.1) the visuallyhidden text is ignored when added inside of a link sofor example from an article page
<a href="/download?id=123&format=xls">
<span class="visuallyhidden">Download table A as</span>xls
</a>
It would read just xls and only show xls in the rotor. Which is very confusing when on anarticle with lots of tables!
So after some digging I found some research from Nick Colley of the gov.uk frontend teamwho had researched this thoroughly. The best solution was to give up on visuallyhidden and switchto using aria-label.
So it became:
<a href="/download?id=123&format=xls" aria-label="Download table A as xls">
xls
</a>
Whilst the change wasn’t drastic the complexity of getting to the solution and finding out how toresolve it was the tricky part. Additionally I did a small amount of research to how well this wassupported in JAWS - the last major screen reader I don’t have access to. In my search I came acrossa tool similar to Can I Use but for screen readers called Screen reader reliability by PowerMapper.
Top comments (0)