Something I'm desperately keen to see is AI-assisted accessibility testing.
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.
Not a joke. If truly you want a properly functioning website for blind/bad sight/ Step 1 would probably be to put on a blindfold and go through your website with a screenreader (cmd + f5 on a mac).
I always wonder why this isn't a bigger part of the discussion. None of us would develop a visual UI flow without trying it manually at least once, but for some reason this idea isn't extended to discussions about accessibility. The advice always fits into these three groups:
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.
Perhaps a blindfolded person and a person who has always been blind have very different expectations of how to use software, such that they would give divergent opinions on what makes a good screen reader UI.
Can't speak for others... and though visually impaired, I don't think I could handle navigating with a screen reader myself. I've sat through blind testing before and it's definitely impressive and I learned a lot. I will say that I do make an effort to do a lot of keyboard only navigation as part of testing. Just that can help a lot in terms of limiting janky UX.
Especially with flexbox and other more modern layout options.
yeah its a real challenge, but probably the only way to really understand it. It's a completely different way of using the web. GPT can really help understand it while doing it.
Yes, I did this! https://wonger.dev/posts/blindfolded-deployment
I navigated GitHub with Windows' default screen reader, and videoed the process and wrote up my learnings. It changed the way I build websites because I'm always thinking about the screen reader routes in the back of my mind. Highly recommend.
What’s frustrating is you basically are required to use JS when basic css and html would normally work. There’s been some improvements thanks to the dialog and popover apis but it’s still not fully there yet.
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.
Using a good component library goes a long way here... I've yet to see a better overall experience than React+MUI myself. Though you should adjust the default color palette.
I'll add focus the first input field, or the error section at the top, when full-form validation fails. And related, don't allow modals to render buttons off-screen when text/display zooming is maxed out on mobile devices (personally see this a lot).
+1, or simply hire a blind person to run one or more stages of QC on your application.
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.
yeah but at least sit next to the blind person, I've heard so many people talk about aria tags (myself included) without actually trying it once themselves or at least seeing a video how impaired people actually use it.
Keep in mind, this is only one area of accessibility. Neurodiverse users, users with cognitive issues, users that have a hard time using a mouse, low vision users and even deaf users all have specific issues.
Simply testing with a screen reader is missing entire groups of users.
+1 on this one... I've mentioned it a few times in these threads already... but for the love of all that is holy, try your mobile website/app in an actual phone where you have accessibility turned up for text and display.
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.
I would very much like to be better at building websites that handle assistive technologies like screen readers well. I don't have a lot of blind users to worry about because they don't let you be a firefighter if you're blind.
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.
It's funny what you have to do to tick a box on a Government form. A long time ago when I was relatively new in the job I thought I was being pranked (ohoho let's noise up the new guy) because I got asked to take a record when I went to site to repair network stuff, of which sites had a wheelchair-accessible entrance, accessible from the street.
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?
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"
No, I just don't there's a specification for what exactly a screen reader is supposed to with ARIA markup.
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>
We have the exact same problem with visual interfaces, and the combination of manual testing for major changes + deterministic UI testing works pretty well.
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.
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.
That's very different from what I thought you were arguing for in your top comment, though: a computer-use agent proving the app is usable through a screen reader alone (and hopefully caching a replayable trace to not prompt it on every run).
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.
So does hiring a person or tests which rely on entropy because exhaustive testing is infeasible. If you can wrangle the randomness (each has different ways of going about that) then you end up with very useful tests in all 3 scenarios, but only automated tests scale to running every commit. You probably still want the non-automated tests per release or something as well if you can, depending what you're doing, but you don't necessarily want only invariant tests in either case.
> There are thousands of blind people on the net. Can't you hire one of them to test for you?
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.
I think one path that could be used and wholy underrated is simply sitting with a user while they use/navigate your application. The user themselves doesn't necessarily need to be skilled tester, and you will need to have more session time than a skilled tester, but it does work and can help a lot.
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.
Completely agree on both counts. We do usability testing, including with keyboard-focused advanced users.
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.
I’m doing a PoC at work with Workback.ai, which is essentially what you’re asking about. So far it’s early but it seems ok at first brush. We have a firm we pay for traditional accessibility assessments, remediation, and VPATs and my expectation is that the AI tooling does not replace them due to how business needs and product design interact with accessibility.
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.
A more viable path might actually be agentic testing via agents that simply use a browser or screen reader that can work off high level test scenarios.
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.
There might be a great use case here, but the economics make me nervous. Don't the same problems apply here for why we don't have great accessibility? Who is paying for it? How do I justify the investment (AI or not) to management?
Rather than improving testing for fallible accessibility assists, why not leverage AI to eliminate the need for them? An agent on your device can interpret the same page a sighted or otherwise unimpaired person would giving you as a disabled user the same experience they would have. Why would that not be preferable? It also puts you in control of how you want that agent to interpret pages.
I'm optimistic that modern AI will lead to future improvements in accessibility tech, but for the moment I want to meet existing screenreader users where they are and ensure the products I build are as widely accessible as possible.
It adds loads of latency for one. If you watch someone who is a competent screen reader user you'll notice they have the speech rate set very high, to you it'll be hard to understand anything. Adding an LLM in the middle of this will add, at least, hundreds of milliseconds of latency to interactions.
The golden rule of LLMs is that they can make mistakes and you need to check their work. You're describing a situation where the intended user cannot check the LLM output for mistakes. That violates a safety constraint and is not a good use case for LLMs.
I, myself, as a singular blind person, would absolutely love this. But we ain't there yet. On-device AI isn't finetuned for this, and neither Apple nor Google have shown indications of working on this in release software, so I'm sure we're a good 3 years away from the first version of this.
What about just AI assisted accessibility? Like stop requiring apps to do anything at all. The AI visually parses the app UI for the user, explains it, and interacts.
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.
It’s expensive for now, slow for now, online for now, but it’s pretty clear that this is the future. If I were blind I’d want it to go here since it would just unlock so much more. Very little software or sites have good accessibility. Open source and indie stuff often has none.
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.
The agent-driving-a-screenreader footgun is that it's quite easy to build UI that creates a reasonable screereader UX, but unintentionally creates accessibility barriers for other assistive technologies, like voice control.
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].
I've looked a few times at this space. Most of the documentation seems to devolve into a depth first deep dive into here's a bunch of tags and attributes without laying out a coherent goal of what you should be doing.
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.
For those of us in civic tech, this is a higher priority. At the federal level especially, there are laws on the books about website accessibility compliance -- even if, at present, the powers that be are ignoring them.
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.
As someone who has spent a lot of time trying to gain a11y expertise and learn best practices, this messaging drives me a little bonkers. There is so much inaccessible content on the web. The official ARIA guide tells you "you're better off doing nothing". All of the example patterns in the ARIA Practices Guide (APG) tell you the code isn't for production use [1]. They provide an explanation which points back to..."you're better off doing nothing".
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.
Is this really true? Messaging like this will cause a lot of developers to just give up. Most places I've worked at did accessibility at best as a best effort sort of thing. After reading this, there will be no attempts made to improve the state of affairs.
Perhaps that will be an improvement? I don't know.
Let’s give a concrete and catastrophic example of something I’ve seen in the wild in a professional product. A developer there had obviously seen the application role[1] in the ARIA specs, thought “I’m building a web app”, and added it to their html element.
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.
Stories like this make me wonder if we could build a Chrome extension with a collection of crowd-sourced site-specific accessibility tweaks. Things like removing that bad ARIA tag or bodging in proper labels or tabindexes. It wouldn't be perfect, but neither is AdBlock and it offers a lot of benefit.
ARIA is often a compensating technology more than a primary solution. I try to not use ARIA in my own code aside from the role attribute. I instead rely on the clear navigation and order HTML content and events as my primary solutions.
+1 here... <button> vs <a> in particular... if it's programmatic behavior, use a styled button if you want it to look like a link, and vice-versa for navigation behaviors.
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.
This adage has been "the first rule of ARIA" since the beginning.
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.
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.
Tested with WebKit and Gecko. Apparently the position gets fixed up at runtime if JavaScript is enabled. But why have dynamic elements with CSS if you need JavaScript to fix it?
Ok yeah that's really weird. It uses javascript to unconditionally add the has-sidebar class to <body>. Maybe a limitation of their templating system but that's not really an excuse.
Can't +1 this enough... I've found that in practice, outside of images, menu pop/flyout and dialogs/trays, there really isn't too much need for additional aria attributes. Most component libraries should already be configured out of the box imo.
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.
I think it would be very beneficial if the browser vendors, together with screenreader vendors and those who use them, were able to come together to actually unify the approach to how elements/these attributes/etc. are communicated to the end user.
this part is covered. the issue are the web devs who need or decide that they need to repurpose a set of elements into another set of elements and skip informing the non visual user about that.
This is also true of alt text for images. I'm active on Bluesky, and so often I see an image with an "ALT" tag (meaning that the user has specified alt text for the image) only for it to be some meaningless offhand bullshit like "lmao i guess i showed them". Pisses me off.
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.
Something I'm desperately keen to see is AI-assisted accessibility testing.
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.
Not a joke. If truly you want a properly functioning website for blind/bad sight/ Step 1 would probably be to put on a blindfold and go through your website with a screenreader (cmd + f5 on a mac).
I always wonder why this isn't a bigger part of the discussion. None of us would develop a visual UI flow without trying it manually at least once, but for some reason this idea isn't extended to discussions about accessibility. The advice always fits into these three groups:
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.
Perhaps a blindfolded person and a person who has always been blind have very different expectations of how to use software, such that they would give divergent opinions on what makes a good screen reader UI.
Can't speak for others... and though visually impaired, I don't think I could handle navigating with a screen reader myself. I've sat through blind testing before and it's definitely impressive and I learned a lot. I will say that I do make an effort to do a lot of keyboard only navigation as part of testing. Just that can help a lot in terms of limiting janky UX.
Especially with flexbox and other more modern layout options.
Here are notes from last time I tried that: https://tools.simonwillison.net/aria-live-regions
It's not something I'm comfortable enough with to do on a regular basis though.
yeah its a real challenge, but probably the only way to really understand it. It's a completely different way of using the web. GPT can really help understand it while doing it.
Yes, I did this! https://wonger.dev/posts/blindfolded-deployment I navigated GitHub with Windows' default screen reader, and videoed the process and wrote up my learnings. It changed the way I build websites because I'm always thinking about the screen reader routes in the back of my mind. Highly recommend.
MacOS has a VoiceOver tutorial.
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.
What’s frustrating is you basically are required to use JS when basic css and html would normally work. There’s been some improvements thanks to the dialog and popover apis but it’s still not fully there yet.
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.
Using a good component library goes a long way here... I've yet to see a better overall experience than React+MUI myself. Though you should adjust the default color palette.
I'll add focus the first input field, or the error section at the top, when full-form validation fails. And related, don't allow modals to render buttons off-screen when text/display zooming is maxed out on mobile devices (personally see this a lot).
+1, or simply hire a blind person to run one or more stages of QC on your application.
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.
yeah but at least sit next to the blind person, I've heard so many people talk about aria tags (myself included) without actually trying it once themselves or at least seeing a video how impaired people actually use it.
I say through testing with a blind person for e-learning content a while back. It's definitely eye opening, so to speak.
Keep in mind, this is only one area of accessibility. Neurodiverse users, users with cognitive issues, users that have a hard time using a mouse, low vision users and even deaf users all have specific issues.
Simply testing with a screen reader is missing entire groups of users.
+1 on this one... I've mentioned it a few times in these threads already... but for the love of all that is holy, try your mobile website/app in an actual phone where you have accessibility turned up for text and display.
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.
I would very much like to be better at building websites that handle assistive technologies like screen readers well. I don't have a lot of blind users to worry about because they don't let you be a firefighter if you're blind.
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.
Yeah i don't think it's worth doing for every web app. But I do think it's fair that for instance government websites try to meet these criteria.
It's funny what you have to do to tick a box on a Government form. A long time ago when I was relatively new in the job I thought I was being pranked (ohoho let's noise up the new guy) because I got asked to take a record when I went to site to repair network stuff, of which sites had a wheelchair-accessible entrance, accessible from the street.
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?
I'd argue it's pretty hard on Windows.
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"
Sounds like you might have content that’s changing? But what you’re running into is exactly what a user would be running into.
No, I just don't there's a specification for what exactly a screen reader is supposed to with ARIA markup.
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>
There are thousands of blind people on the net. Can't you hire one of them to test for you? Please?
If you don't want this to break eventually, you need it tested every time your CI/CD test suite runs. Manual testing just doesn't cut it
We have the exact same problem with visual interfaces, and the combination of manual testing for major changes + deterministic UI testing works pretty well.
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.
AI in your CI pipeline won't help either then, if it randomly gives different answers
An AI-generated automated testing script in your pipeline will do great though.
And then we're back at your own:
> I'm not convinced at all by most of the heuristic-driven ARIA scanning tools.
That's entirely different.
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.
That's very different from what I thought you were arguing for in your top comment, though: a computer-use agent proving the app is usable through a screen reader alone (and hopefully caching a replayable trace to not prompt it on every run).
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.
So does hiring a person or tests which rely on entropy because exhaustive testing is infeasible. If you can wrangle the randomness (each has different ways of going about that) then you end up with very useful tests in all 3 scenarios, but only automated tests scale to running every commit. You probably still want the non-automated tests per release or something as well if you can, depending what you're doing, but you don't necessarily want only invariant tests in either case.
> There are thousands of blind people on the net. Can't you hire one of them to test for you?
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.
I think one path that could be used and wholy underrated is simply sitting with a user while they use/navigate your application. The user themselves doesn't necessarily need to be skilled tester, and you will need to have more session time than a skilled tester, but it does work and can help a lot.
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.
Completely agree on both counts. We do usability testing, including with keyboard-focused advanced users.
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...
Realistically I'm unlikely to do that for my dozens of non-income-generating personal projects.
I still want them to be accessible!
(The amount of accessibility testing I want to do would bankrupt me very quickly.)
This. I've been doing a lot of accessibility work and it seems like the one thing nobody ever does is talk to a screenreader user.
Most of us can't, no. Sorry. There's just not enough money in the things we make.
Why not both?
I think this is the way, automated testing for all patches, small changes, and manual testing for big releases.
I’m doing a PoC at work with Workback.ai, which is essentially what you’re asking about. So far it’s early but it seems ok at first brush. We have a firm we pay for traditional accessibility assessments, remediation, and VPATs and my expectation is that the AI tooling does not replace them due to how business needs and product design interact with accessibility.
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.
A more viable path might actually be agentic testing via agents that simply use a browser or screen reader that can work off high level test scenarios.
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.
Can screen readers emit their narration as text instead of / in addition to audio?
Yes, they can. NVDA has a Speech Viewer. VoiceOver (Mac) has the caption panel.
NVDA Speech viewer: https://download.nvaccess.org/documentation/userGuide.html#S... Caption Panel: https://support.apple.com/guide/voiceover/use-the-caption-pa...
Yes. Output can be sent to a Braille device too.
Guidepup also includes a Virtual Screenreader[1].
[1] https://www.guidepup.dev/docs/virtual
There might be a great use case here, but the economics make me nervous. Don't the same problems apply here for why we don't have great accessibility? Who is paying for it? How do I justify the investment (AI or not) to management?
Rather than improving testing for fallible accessibility assists, why not leverage AI to eliminate the need for them? An agent on your device can interpret the same page a sighted or otherwise unimpaired person would giving you as a disabled user the same experience they would have. Why would that not be preferable? It also puts you in control of how you want that agent to interpret pages.
I'm optimistic that modern AI will lead to future improvements in accessibility tech, but for the moment I want to meet existing screenreader users where they are and ensure the products I build are as widely accessible as possible.
It adds loads of latency for one. If you watch someone who is a competent screen reader user you'll notice they have the speech rate set very high, to you it'll be hard to understand anything. Adding an LLM in the middle of this will add, at least, hundreds of milliseconds of latency to interactions.
What you are describing is something the end user can do.
What simonw was describing is something the author can do, and end user can benefit whether they use AI or not.
The golden rule of LLMs is that they can make mistakes and you need to check their work. You're describing a situation where the intended user cannot check the LLM output for mistakes. That violates a safety constraint and is not a good use case for LLMs.
I, myself, as a singular blind person, would absolutely love this. But we ain't there yet. On-device AI isn't finetuned for this, and neither Apple nor Google have shown indications of working on this in release software, so I'm sure we're a good 3 years away from the first version of this.
... I just saw Guidepup has an official GitHub Actions setup action, so that's great news! https://github.com/guidepup/setup-action
On macOS it can record audio too.
What about just AI assisted accessibility? Like stop requiring apps to do anything at all. The AI visually parses the app UI for the user, explains it, and interacts.
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.
That's expensive, slow (listen to a screenreader user some time to see how quickly they operate) and likely only works online.
I'm also not going to shirk my responsibilities as a developer based on a hope that the assistive tech will improve.
It’s expensive for now, slow for now, online for now, but it’s pretty clear that this is the future. If I were blind I’d want it to go here since it would just unlock so much more. Very little software or sites have good accessibility. Open source and indie stuff often has none.
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.
The agent-driving-a-screenreader footgun is that it's quite easy to build UI that creates a reasonable screereader UX, but unintentionally creates accessibility barriers for other assistive technologies, like voice control.
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-...
can we just hire disabled people as testers please
How about both?
I've looked a few times at this space. Most of the documentation seems to devolve into a depth first deep dive into here's a bunch of tags and attributes without laying out a coherent goal of what you should be doing.
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.
For those of us in civic tech, this is a higher priority. At the federal level especially, there are laws on the books about website accessibility compliance -- even if, at present, the powers that be are ignoring them.
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.
[1] https://www.w3.org/WAI/standards-guidelines/wcag/
As someone who has spent a lot of time trying to gain a11y expertise and learn best practices, this messaging drives me a little bonkers. There is so much inaccessible content on the web. The official ARIA guide tells you "you're better off doing nothing". All of the example patterns in the ARIA Practices Guide (APG) tell you the code isn't for production use [1]. They provide an explanation which points back to..."you're better off doing nothing".
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...
2 cents here. Let's make this article optimistic and forward looking.
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.
the rest of this website section is exactly that:
https://www.w3.org/WAI/ARIA/apg/practices/
and generally:
https://www.w3.org/WAI/ARIA/apg/
This is the "Read Me First" page on a site absolutely full of documentation...
Is this really true? Messaging like this will cause a lot of developers to just give up. Most places I've worked at did accessibility at best as a best effort sort of thing. After reading this, there will be no attempts made to improve the state of affairs.
Perhaps that will be an improvement? I don't know.
Let’s give a concrete and catastrophic example of something I’ve seen in the wild in a professional product. A developer there had obviously seen the application role[1] in the ARIA specs, thought “I’m building a web app”, and added it to their html element.
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...
Stories like this make me wonder if we could build a Chrome extension with a collection of crowd-sourced site-specific accessibility tweaks. Things like removing that bad ARIA tag or bodging in proper labels or tabindexes. It wouldn't be perfect, but neither is AdBlock and it offers a lot of benefit.
ARIA is often a compensating technology more than a primary solution. I try to not use ARIA in my own code aside from the role attribute. I instead rely on the clear navigation and order HTML content and events as my primary solutions.
Using the right elements (like button instead of a div) will take you very, very, very fair with little to no additional work.
+1 here... <button> vs <a> in particular... if it's programmatic behavior, use a styled button if you want it to look like a link, and vice-versa for navigation behaviors.
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.
The statement is about encouraging folks to use the platform: `<button>Hello!</button>` over `<div role=button tabindex=0>Hello</div>`
It is true. This is not messaging. They are not selling you ARIA.
If you are developer, just write semantically clear HTML instead. Just doing something is worse than doing nothing in accessibility.
This adage has been "the first rule of ARIA" since the beginning.
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.
No CSS is better than bad CSS
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
> No CSS is better than bad CSS
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.
What browser is that?
Tested with WebKit and Gecko. Apparently the position gets fixed up at runtime if JavaScript is enabled. But why have dynamic elements with CSS if you need JavaScript to fix it?
Ok yeah that's really weird. It uses javascript to unconditionally add the has-sidebar class to <body>. Maybe a limitation of their templating system but that's not really an excuse.
Interesting as a developer coming into accessibility, I was repeatedly told, "The first rule of ARIA is not to use ARIA."
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.
Can't +1 this enough... I've found that in practice, outside of images, menu pop/flyout and dialogs/trays, there really isn't too much need for additional aria attributes. Most component libraries should already be configured out of the box imo.
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.
No examples are better than no examples.
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.
Oops. I mean "than bad examples". Guess I should have proofread, huh?
I think it would be very beneficial if the browser vendors, together with screenreader vendors and those who use them, were able to come together to actually unify the approach to how elements/these attributes/etc. are communicated to the end user.
They're working on it in the "Core Accessibility API Mappings" spec
https://www.w3.org/TR/core-aam-1.2/
this part is covered. the issue are the web devs who need or decide that they need to repurpose a set of elements into another set of elements and skip informing the non visual user about that.
This is also true of alt text for images. I'm active on Bluesky, and so often I see an image with an "ALT" tag (meaning that the user has specified alt text for the image) only for it to be some meaningless offhand bullshit like "lmao i guess i showed them". Pisses me off.
people've been confusing the title and alt tags since like IE4
Since the acronym is not defined anywhere in the link:
ARIA = Accessible Rich Internet Applications
Part of the W3 consortium's Web Accessibility Initiative.
https://en.wikipedia.org/wiki/WAI-ARIA
[dead]
[dead]
MMMKAY?
this is why I don't bother with ARIA
The future of accessibility is AI agents.
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.
How does the user know what the page is capable of in order to be able to instruct the agent?