No ARIA is better than bad ARIA
w3.org
w3.org
I'm not convinced at all by most of the heuristic-driven ARIA scanning tools. I don't want to know if my app appears to have the right ARIA attributes set - I want to know if my features work for screenreader users.
What I really want is for a Claude Code style agent to be able to drive my application in an automated fashion via a screenreader and record audio for me of successful or failed attempts to achieve goals.
Think Playwright browser tests but for popular screenreaders instead.
Every now and then I check to see if this is a solved problem yet.
I think we are close. https://www.guidepup.dev/ looks extremely promising - though I think it only supports VoiceOver on macOS or NVDA on Windows, which is a shame since asynchronous coding agent tools like Codex CLI and Claude Code for web only run Linux.
What I haven't seen yet is someone closing the loop on ensuring agentic tools like Claude Code can successfully drive these mechanisms.
On macOS it can record audio too.
What simonw was describing is something the author can do, and end user can benefit whether they use AI or not.
NVDA Speech viewer: https://download.nvaccess.org/documentation/userGuide.html#S... Caption Panel: https://support.apple.com/guide/voiceover/use-the-caption-pa...
I still want them to be accessible!
(The amount of accessibility testing I want to do would bankrupt me very quickly.)
> I'm not convinced at all by most of the heuristic-driven ARIA scanning tools.
ARIA scanning tools are things that throw an error if they see an element that's missing an attribute, without even attempting to invoke a real screenreader.
I'm arguing for automated testing scripts that use tools like Guidepup to launch a real screenreader and assert things like the new content that was added by fetch() being read out to the user after the form submission has completed.
I want LLMs and coding agents to help me write those scripts, so I can run them in CI along with the rest of my automated tests.
Guidepup already exists, if people cared they'd use it for tests with or without LLMs. Thanks for showing me this tool BTW! I agree testing against real readers is better than using a third-party's heuristics.
Actually it could be even easier to write tests for the screen reader workflow, since the interactions are all text I/O and pushing keys.
Testing is a professional skill -- not all blind people are good at accessibility testing, just as not all sighted people are good at GUI testing.
My team has carved out an accessibility budget so that every couple years we can hire an accessibility consultancy (which employs a couple blind testers) for a few tens of hours of work to review one of our application workflows. Based on the issues they identify we attempt to write tests to prevent those classes of issues across the whole application suite, but our budget means that less than one percent of our UI has ever been functionally tested for accessibility.
It comes down to cost/benefit. Good testers are expensive, good accessibility testers doubly-so. And while I personally think there's a moral imperative and maybe a marketing angle, improving accessibility truthfully doesn't seem to meaningfully improve sales. But if the testing costs came down by a couple orders of magnitude it would be a complete game-changer.
Also, try using your app/site without a mouse. I've found it funny how many actual, experienced, sighted testers don't actually know the keyboard navigation for things like triggering menus, select boxes, etc. Personally, I don't think I could get used to the voice navigation myself, it's not that it doesn't work, it's just kind of noisy. Although, most sites are excessively noisy visually imo.
But usability testing with blind users presents some unique challenges. A past org I worked at ran some usability studies with blind users [1] and while I was only tangentially involved in that project it seemed that subject recruitment and observations were much more complex than typical usability studies. I haven't managed to run a usability study with blind participants at my current org though we have discussed ways we could recruit blind users for studies -- our software is complex enough that we'd need someone who is both blind and a prospective user of our software.
[1] https://www.bloomberg.com/ux/2018/08/28/visually-impaired-wo...
It's not something I'm comfortable enough with to do on a regular basis though.
But a lot of firefighters are people who simply did not do well in school, even the very senior ones, and that's because they are often very clever people who are of an age where things like dyslexia were just not diagnosed early or often.
So now I deal with a lot of people who use assistive technologies to help with dyslexia and related comorbidities. I have dyscalculia that wasn't diagnosed until I was 19 and at uni, and even then it was diagnosed initially by my mate's Educational Psychology undergrad girlfriend in the pub one evening. That was in the early 90s and we're better at it now - but not by much.
o_O
All of them?
There's a door at the front and the back with a gentle ramp down to street level, flat access into the building, and the door is like twelve feet wide and fourteen feet high which is big enough for even the most impractically large wheelchair, surely?
It’s pretty eye-opening (heh) to do it and then try to use your websites.
Before you even get to aria labels, you’ll find a lot of things to fix like:
- Add or remove components from tabindex
- Esc should close the modal or the slide-out sidebar
- Closing the sidebar/modal should return focus to the button the user toggled to open it (this one is huge for UX)
I recommend it. These things are useful for keyboard nav in general.
Also seems the large companies that have to have compliance only care about it from a legal standpoint and are fine with just making the tests pass from whatever compliance company they use.
NVDA hasn't worked for me since Windows 11.
Narrator + IE and Narrator + Chrome basically work but make ARIA look like vandalism. It will just be reading the text and blurt out "LANDMARK WILL ROBINSON!" in the middle of the text for no obvious reason and doesn't do it the same very time. It's basically possible to use either one of those but Narrator + Firefox is especially spastic and blurts out random landmarks and ARIA junk to the extent that it's really difficult to evaluate.
I mean, that's part of the problem, there is a spec for how HTML is supposed to be rendered, but ARIA is not specific about how ARIA markup is rendered which might means tools could bend to meet users' needs but it also means there is no such thing as "I've convinced myself that my ARIA markup is proper and will work for everyone with mainstream tools"
For example it could show you or read to you a list of all the nav landmarks on the page, which would be (1) helpful for end users, and (2) sure as hell helpful for me as a dev so I can know how the landmarks work as a system. All screen browsers really seem to do is blurt out "NAVIGATION LANDMARK!" randomly before or in the middle or after the <nav>
1. Follow a checklist
2. Buy my software
3. Hire blind people to test your app
I'm not saying that these are bad (although some overlay software is actually worse than nothing), but aren't people even a little bit curious to try the user experience you're shipping?
There are popular, free screen readers out there and using one can teach you a lot.
Especially with flexbox and other more modern layout options.
Simply testing with a screen reader is missing entire groups of users.
I cannot tell you how many times I've experienced modals with buttons literally off screen and no navigation option in apps from multi-billion and trillion dollar tech companies. Almost as bad is gmail allowing text to scale so insanely large that it's equally unusable.
Adjacently, I cannot state enough how much I wish other toolkits would offer component libraries as cohesive as MUI is for React... the use of Aria is "just right" IMO and is far more broad, complete and cohesive as a whole (aside from some poor default color/contrast choices in Material defaults inherited from Google).
Another thing that bugs me to no end, since I've developed some visual impairments, is sites/apps that don't function on mobile devices with text/display scaling cranked up. Modals where the buttons are off-screen and no way to scroll to them are useless, similarly allowing text to go too big (gmail) to where an 8-letter word gets split and wrapped.
All around, I definitely think that if you're spending 8+ figures on application developers you can afford testing by a few people who are visually impaired and blind.
Earlier in my career, I sat with a blind user through testing a bunch of eLearning content and it was really eye opening back then... the establishment of aria labels helps a lot... but as the article mentions, you need to use them right. I find that more often than not, using the right elements/components, labels, titles, etc in the first place goes a long way.
Accessible is an also-have at best for the vast majority of software. This would open a lot more software to blind users than is currently available.
I'm also not going to shirk my responsibilities as a developer based on a hope that the assistive tech will improve.
A custom local model trained only for this task seems like a possibility, and could be way smaller than some general purpose model being instructed for this task. I’m thinking screen reader and UI assist only. Could probably be like a 7B quantized model. Maybe smaller.
I've done some UI testing via the agent mode in chat gpt and I got some pretty decent feedback out of that. I've been trying to do more of that.
Accessibility testing might require a bit more additional tooling than comes with chat gpt by default. But otherwise, this could work.
I.e. ChatGPT and Cursor can probably remediate adding screen reader support for a solving a Captia for the blind, but do you want to really do that? There’s likely a better design for the blind.
Either way, I agree. This is a big area where there can be real impact in the industry. So far we’ve gotten scans back in record time compared to human in the loop scans.
Ex: a search control is built as <div aria-label="Search"><input type="search"/></div>. An agent driving a screenreader is trying to accomplish a goal that requires search. Perhaps it tries using Tab to explore, in which case it will hear "Search, edit blank" when the input is focused. Great! It moves on.
But voice control users can't say "click Search". That only works if "Search" is in the control's accessible name, which is still blank, the outer div's aria-label has no effect on components it wraps. Would an agent catch that nuance? Would you?
You could realign to "I want to know if my features work for screenreader, voice control, switch, keyboard, mobile keyboard [...] users", but you can imagine the inverse, where an improvement to the voice control UX unintentionally degrades the screenreader UX. Accessibility is full of these tensions, I worry an multi-agent approach would result in either the agents or you getting bogged down by them.
I think a solution needs to incorporate some heuristics, if you consider WCAG a heuristic. For all its faults, a lot of thought went into rules that balance the tensions reasonably well. I used to be more of the "forget WCAG, just show me the UX" attitude, but over the years I've come to appreciate the baseline it sets. To the example above, 2.5.3 Label in Name clearly guides you towards setting an accessible name (not description) on the search itself, patching up support for screenreaders and voice control.
Not that WCAG concerns itself with the details of ARIA (it packs all that complexity into the vague "accessibility supported"[1]). We do need more seamless ways of quickly evaluating whether ARIA or whatever markup pattern has the intended rendering in screen readers, voice control, etc, but at a level that's already constrained. In the example, WCAG should apply its constraints first. Only then should we start running real screen readers and analyzing their audio, and to avoid the footguns that analysis should be at a low level ("does the audio rendering of this control reasonably convey the expected name, state, value, etc?"), not a high level ("does the audio rendering contain the info necessary to move to the next step?").
Unfortunately both agents and heuristic-driven accessibility scanning tools struggle to apply WCAG today. Agents can go deeper than scanners, but they're inconsistent and in my experience really have trouble keeping 55+ high level rules in mind all the time. In the example, an agent would need to use the accessibility tree to accomplish its goal and need to reject a node with label "Search" containing a role=textbox as an option for searching (or at least flag it), which is made trickier by the fact that sometimes it _is_ ok to use container labels to understand context.
I think the answer might be to bundle a lot of those concerns into an E2E test framework, have the agent write a test it thinks can accomplish the goal, and enter a debug loop to shake out issues progressively. Ex: if the agent needs to select the search control for the task, and the only allowed selector syntax requires specifying the control's accessible name (i.e. Playwright's getByRole()), will the agent correctly get blocked? And say the control does have an accessible name, but has some ARIA misconfigurations — can the test framework automatically run against some real screenreaders and report an issue that things aren't working as expected? We've done some explorations on the framework side you might be interested in [2].
[1] https://www.w3.org/TR/WCAG22/#dfn-accessibility-supported [2] https://assistivlabs.com/articles/automating-screen-readers-...
My observations:
- most web developers have never seen a screen reader version of their application; or any application.
- most teams don't have visually handicapped people that use a screen reader that could provide feedback
- so, no bugs ever get reported regarding accessibility
That is, unless developers go out of their way to use proper tools and do proper testing for this. And testing practices for Aria probably is at the same level as it is for other application features: sketchy to non existent at best.
Let's face it, mostly Aria is pure box ticking for developers. There has to be some (regulations, and PMs insisting because of that). But it doesn't have to be good since nobody really checks these things. Including the PM.
Without a feedback loop, it's not surprising that most web apps don't get this even close to right. IMHO, over time, agentic tools might actually be more helpful to blind people as they can summarize, describe, and abstract what's on the screen. Agentic testing via a screen reader might also become a thing. I've done some testing via the agent mode in chat gpt and it was shockingly good at figuring out our UI. Not a bad process for automating what used to be manual QA. I've been meaning to put more time in this.
I actually have as a very low priority target to start driving some of this in our own application. Mostly that's just a hunch it might come up because of some government customers. But this is Germany and they seem to have lots of blind spots on software quality. I don't actually expect any feedback whatsoever from actual customers or anyone on this. I just want to pre-empt that.
I have found the Web Content Accessibility Guidelines [1] to be especially useful when thinking through what I need to implement and why.
It is _impossible_ to thoroughly test any of your accessibility concerns only with automated tooling. You will need to have an experienced user of screenreaders go through your site, especially if it contains complex JS enabled controls and other dynamic updates. This is because the habits of individual users and the combination of a particular screenreader application / browser can often produce different results. It's important to know what the common "patterns of use" are for, say, a JAWS user vs a VoiceOver user.
Last thing I'll recommend is that if you are testing a11y yourself on a Mac using VoiceOver, do all your a11y testing in Safari. In our research, most VO users on Macs/iOS use Safari because it has the best screenreader integration on that platform, and other browsers miss basic things.
That's somehow intriguing to write an article that says "no" without providing "yes" examples. I don't view this as very generous.
Looking for further updates.
https://www.w3.org/WAI/ARIA/apg/practices/
and generally:
Perhaps that will be an improvement? I don't know.
I will add that a good component library should also handle some of this for you... in particular menu navigation, popouts/drawers etc. That said, can't say how many sites/apps have really broken behavior with this.
If you are developer, just write semantically clear HTML instead. Just doing something is worse than doing nothing in accessibility.
There are a few ARIA "widgets" that have no HTML equivalent, such as Tabs or a spreadsheet-like Grid. Those are heavily documented so you can basically copy and paste whenever you need them.
Avoiding sprinkling ARIA on already-semantic HTML, because this can lead to confusing or inconsistent behaviors for the end user.
What role="application" means to assistive tech is: “I’m building a really complex application, so I’m going to handle absolutely everything for you, I don’t want you to have any default behaviour.” This meant that the web app in question was 100% unusable for any people using assistive technology, as that was broadly as far as they’d got with accessibility support.
[1] https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...
Should we remove the role attributes?
If you don’t know, and you’re not doing research, your best bet is to match the standardised semantics and interactions as best as possible, or at least have backlogged items to do so.
In my browser that "Page Contents" box is hovering above the end of the line, so I can't read the full text. Kind of ironic, that this is on w3.org
That's only true if the markup and JS are also good. If, for sake of argument, the HTML had been badly authored such that the links in that menu were DIVs with click event handlers, rather than real links, then removing CSS would likely make the experience worse rather than better.
I guess that a key point underpinning your comment is that progressive enhancement is still better than assuming all potential users are on the bleeding edge, despite the evergreen update pattern for the most popular 3 or 4 browsers.
When I need to add a toolbar to my app, and I want it to be accessible. I look at the APG, the APG has a toolbar example with markup, CSS, and JS, but apparently I'm not supposed to use it. I've been at this for years and it's incredibly frustrating. I usually use the APG code in production anyways. It's probably not catastrophically wrong, but it always makes me feel like I'm screwing something up. The alternative is to use a bunch of divs, spans, and buttons because not all of the patterns have semantic HTML equivalents.
[1] https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/layou...
They really needed to show what the proper way to implement those scenarios was, as well as the proper way to use those aria properties.
As it stands, they look good, and someone that isn't paying attention is going to think they're correct and use them.
It feels like we've gone so far away from semantical code that ARIA is now being used a crutch to replace semantical approaches to coding.
ARIA should only be needed relatively sparingly assuming you're using appropriate semantic elements. Testing with keyboard only navigation can reveal a lot as well.
Related, and one I experience a lot are issues on mobile devices with text/display cranked up... too many modal interactions with buttons off-screen.
ARIA = Accessible Rich Internet Applications
Part of the W3 consortium's Web Accessibility Initiative.
Ie. Don't make the web page accessible to some ancient screen reader software - instead make sure AI agents can interact with it so the real user can instruct the AI to perform the task on their behalf.