Tags: voiceover

Introduction to Screen Readers Using Voiceover | Gymnasium

This is a great short introduction to using VoiceOver with Safari by the one and only Ethan Marcotte.

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.

Research with blind users on mobile devices | Accessibility

Some interesting outcomes from testing gov.uk with blind users of touchscreen devices:

Rather than reading out the hierarchy of the page, some of the users navigated by moving their finger around to ‘discover’ content.

This was really interesting - traditionally good structure for screen readers is about order and hierarchy. But for these users, the physical placement on the screen was also really important (just as it is for sighted users).

The Blind Shooting The Blind ∵ Stephen van Egmond’s weblog

If you make inaccessible iOS apps, you really only have yourself to blame.

There are also some handy tips here for getting to know VoiceOver.

My First Week with the iPhoneBehind the Curtain | Behind the Curtain

An emotionally affecting endorsement of the accessibility features on the iPhone.

Audio Atrocities (TM)

"This site is intended to be a constantly growing and changing museum for the study and enjoyment of truly terrible video game voice acting in video games from the very first CD system, the Turbografx until the present day."

My first experience using an accessible touch screen device « Marco’s accessibility blog

A hands-on account of the new accessibility features in the iPhone. Sounds like a great experience.

YouTube - Lord of the Rings - Voiceover

This isn't new but it really is laugh out loud funny.