Some small accessibility fixes
I’ve been doing a bunch of testing with VoiceOver recently, helping to prepare the digital guides for a new exhibition at work. I like to think my site is already pretty accessible – I put alt text on my images and I use semantic HTML – but I did find a few rough edges to fix. None of these were big or tricky, but I hope they make the site a bit nicer for screen reader and keyboard-only users.
Skip to main content
A skip navigation link allows a screen reader or keyboard-only user to jump straight to the main content. This saves them paging through any navigation links at the top of the page. It’s invisible to sighted users, who can skip to the main content by just looking down.
Even my fairly small nav wants you to page through ten elements to get to the main content – and now you can skip that in a single tap.
This took less than two minutes to add, and given I’d definitely heard of them before, there’s no excuse for not having done this sooner.
Better telephone numbers
The Wellcome Collection website has quite a few phone numbers on it, and while testing I discovered that they don’t scan so well. This is read all in one go:
plus forty-four zero two zero seven six one one two-thousand two hundred and twenty-two
This doesn’t sound like how most people read phone numbers.
I found a blog post by Joni Halabi, which suggests using an aria-label attribute to help screen readers. I’ve added these throughout the site, and now numbers sound more natural:
plus four four (pause) zero two zero (pause) seven six one one (pause) two two two two
This includes a function to create the labels, so this behaviour can be applied to all numbers on the site (and not just the hard-coded number in the footer, where I first found this issue).
Pronunciation hints for proper nouns
Using aria-label for phone numbers made me think of customising other text too. There are a few places on the site where I have proper nouns which screen readers struggle with – compound words are a particular challenge.
These are a few of the nouns where I’ve added alternative pronunciations. I think they sound better, and you’re more likely to understand what’s being said:
| text | default pronunciation | aria-label | improved pronunciation |
|---|---|---|---|
| alexwlchan | al-ecks-well-chun | alex w l chan | al-ecks-double-you-el-chan |
| IIIF | eye-eye-eye-eff | triple I F | triple-eye-eff |
| urllib3 | err-lib-three | url lib 3 | you-are-ell-lib-three |
| nosetests | noz-tests | nose tests | know-se tests |
| 3½″ floppy disk | three and a half floppy disk | three and a half inch floppy disk | three and a half inch floppy disk |
These were slightly more complicated, because not all of these nouns appear in semantic elements where I can use aria-label. If they’re in the middle of a longer bit of text, I’d want to use <span>, but screen readers ignore labels on that tag.
Instead, I had to create two tags:
<span class="visually-hidden">triple I F</span> <!-- for screen readers -->
<span aria-hidden="true">IIIF</span> <!-- for sighted users -->
The CSS for the class on the first span means it will be hidden in the visual presentation of the page; the aria-hidden attribute on the second means it will be ignored by screen readers.
I also had to add the text role to parent elements, so VoiceOver on iOS would read the text as a continuous string – rather than pausing on the proper noun.
To avoid Braille users getting the spelled-out version, I’m also setting the aria-braillelabel attribute. Unfortunately I don’t have a Braille display to test with, so this is somewhat speculative.
So far I’ve only done this on a handful of pages, because I suspect trying to fix this automatically would create more problems than it solves – but I’m considering it, and I’ll definitely try to remember to do it on new posts.
I have plenty more to learn about accessibility, and it’s not something that’s ever “done” – but I hope these are steps in the right direction.