Earlier this year, I wrote about an accessibility issue I was having on The Session. Specifically, it was an issue with Ajax and pagination. But I managed to sort it out, and the lesson was very clear:
As is so often the case, the issue was with me trying to be too clever with ARIA, and the solution was to ease up on adding so many ARIA attributes.
This pagination pattern shows up all over the site: lists of what’s new, search results, and more. I turned on VoiceOver and I was able to reproduce the problem straight away.
Wherever the pagination pattern appears, there are “previous” and “next” links, marked up with the appropriate
rel="next" attributes. Well, apparently past me thought it would be clever to add some ARIA attributes in there too. My thinking must’ve been something like this:
- Those links control the area of the page with the search results.
- That area of the page has an ID of “results”.
- I should add
aria-controls="results" to those links.
That was the problem …which is kind of weird, because VoiceOver isn’t supposed to have any support for
aria-controls. Anyway, once I removed that attribute from the links, everything worked just fine.
Just as the solution last time was to remove the
aria-atomic attribute on the updated area, the solution this time was to remove the
aria-controls attribute on the links that trigger the update. Maybe this time I’ll learn my lesson: don’t mess with ARIA attributes you don’t understand.