Accessibility on The Session revisited

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.

Well, fast forward to the past few weeks, when I was contacted by one of the screen-reader users on The Session. There was, once again, a problem with the Ajax pagination, specifically with VoiceOver on iOS. The first page of results were read out just fine, but subsequent pages were not only never announced, the content was completely unavailable. The first page of results would’ve been included in the initial HTML, but the subsequent pages of results are injected with JavaScript (if JavaScript is available—otherwise it’s regular full-page refreshes all the way).

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.

I started pulling apart my JavaScript looking for the problem. Was it something to do with how I was handling focus? I just couldn’t figure it out. And other parts of the site that used Ajax didn’t seem to be having the same problem. I was mystified.

Finally, I tracked down the problem, and it wasn’t in the JavaScript at all.

Wherever the pagination pattern appears, there are “previous” and “next” links, marked up with the appropriate rel="prev" and 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.

Have you published a response to this? :

Responses

1 Like

# Liked by Jan Skovgaard on Wednesday, November 27th, 2019 at 3:14pm

Previously on this day

3 years ago I wrote Teasing

Dribbbling.

13 years ago I wrote Flash on the beach

Brighton plays host to an unmissable Flash conference.

13 years ago I wrote Chiaroscuropod

Product placement in 17th Century Dutch art.

16 years ago I wrote Pet Stories

There’s a special group story up at {fray} right now called Pet Stories.

18 years ago I wrote Modern Humorist - The Holy Tango of Drama

If playwrights wrote plays whose titles were anagrams of their names…

18 years ago I wrote Vector Lounge

This is one amazing piece of Flash. I’m starting to realise just how much can be accomplished with ActionScript.

18 years ago I wrote New Worm

Every Sunday, I send out an email newsletter for The Session to all the folks who have subscribed to receive it.