Firefox recently added an accessibility inspector in the dev tools which may be of use.
Ask HN: Best way to test accessibility of a website?
21–30 of 118 posts
Re: Ask HN: Best way to test accessibility of a website?
#22Pay me to do it... But in all seriousness, I use aXe-Coconut[1], headingsMaper[2]. Then tab through the page and make sure you can get from top left to bottom right. The cursor[focus state /ouline] should be visible the whole time and you should never lose your place. When you are done that, if you have a Mac turn on voiceover with Command+F5 and use Safari or Chrome (more aria-support). On Windows, download NVDA[3]…
what are your rates and why are you qualified?
Re: Ask HN: Best way to test accessibility of a website?
#23In your test environment send HTML as type application/xhtml+xml, block all CSS and images, and add JavaScript that locks the mouse cursor to the first pixel on the screen. Then test the site for content and usability as you normally would.
Vision impaired persons do not benefit from CSS or images. All images should have proper corresponding alternate text. Changing the media type of the HTML does require a bit more strict syntax, but it also is a cheap trick to ensure the HTML tags and structure are arranged in a valid way.
I do not recommend disabling JavaScript. JavaScript is for interaction and blind persons need JavaScript just the same as the rest of us to navigate through content on complex sites. Inserting code that locks the mouse cursor to a single location forces QA to navigate the site/content using a keyboard.
Doing these things is the cheapest way to test for very basic compliance. In order to achieve AA WCAG 2.0 conformance you actually have to understand accessibility and classes of disabilities. You might be able to get some quick wins with tool automation, but manual testing is much better. There is one exception, color contrast. You absolutely need to use a tool to perform color contrast validation, because people eyes aren't good at accounting for both luminescence and contrast at the same time.
EDIT:
In FireFox (Windows) you can turn off CSS by clicking the ALT keyboard key to bring up the main menu then View -> Page Style -> No Style
Re: Ask HN: Best way to test accessibility of a website?
#24- Use blind accessibility tools with your website. If you're on iOS/macOS enable VoiceOver, figure out how it works, close your eyes and use your website.
- Disable JavaScript and use your website. This may not be relevant for web apps, but regular websites should work normally.
- Try to use your website with only the keyboard.
- Try to use your website with extreme zoom levels and font size overrides.
- Monitor your resource sizes. Anyone with a limited connection (a LOT of people) will abandon your website because it loads slowly, or are paying actual money for the wasted bandwidth.
I'm not aware of automated methods that give better results than using your website with the actual accessibility tools yourself.
Re: Ask HN: Best way to test accessibility of a website?
#25- If you have little time and money, use any of the automated tools mentioned in the other comments
- If you want the best results, do extensive user testing
- If you are somewhere in the middle, do manual testing yourself. Simply turning on a screen reader and covering the screen with a sheet of paper does wonders.
- Think about accessibility from the start, even before you write the first line of code (just like with security). It is very hard to fix it after the fact.
Re: Ask HN: Best way to test accessibility of a website?
#26- Use blind accessibility tools with your website. If you're on iOS/macOS enable VoiceOver, figure out how it works, close your eyes and use your website. - Disable JavaScript and use your website. This may not be relevant for web apps, but regular websites should work normally. - Try to use your website with only the keyboard. - Try to use your website with extreme zoom levels and font size overrides. - Monitor your…
> "Use blind accessibility tools with your website. If you're on iOS/macOS enable VoiceOver, figure out how it works, close your eyes and use your website."
I doubt this is going to be very effective. Sure, it's better than nothing at all, but this is akin to sighted person with zero blindness experience testing the effectiveness of a newly designed white cane, only a website is much more complicated.
You should always find someone with personal experience to test it themselves and provide feedback if you want a clear understanding of how it will actually work for that community.
Re: Ask HN: Best way to test accessibility of a website?
#27You can use chrome dev tools. Right click the window and click 'inspect'. In the 'Audits' tab, you can run an audit for accessibility. It runs your website and checks it against common accessibility criteria, giving you a score out of 100.
On a side note, running this page through the accessibility audit, gives a score of 33. Perhaps HN has some work to do on accessibility.
Re: Ask HN: Best way to test accessibility of a website?
#28In your test environment send HTML as type application/xhtml+xml , block all CSS and images, and add JavaScript that locks the mouse cursor to the first pixel on the screen. Then test the site for content and usability as you normally would. Vision impaired persons do not benefit from CSS or images. All images should have proper corresponding alternate text. Changing the media type of the HTML does require a bit more…
> send HTML as type application/xhtml+xml
What does this change?
Re: Ask HN: Best way to test accessibility of a website?
#29You've received a lot of recommendations for software, but one of the most important things to bear in mind is that software cannot ensure accessibility. It can discover some problems with accessibility, but it has a lot of blind spots. If you care about accessibility, you need to incorporate manual human testing. This is a highly specialised field. The best thing for you to do is to fix the low-hanging fruit by plugging automated tools into your CI system, then get an expert to do a manual test so that you're aware of what other issues there are.
Re: Ask HN: Best way to test accessibility of a website?
#30- Use blind accessibility tools with your website. If you're on iOS/macOS enable VoiceOver, figure out how it works, close your eyes and use your website. - Disable JavaScript and use your website. This may not be relevant for web apps, but regular websites should work normally. - Try to use your website with only the keyboard. - Try to use your website with extreme zoom levels and font size overrides. - Monitor your…
> "Use blind accessibility tools with your website. If you're on iOS/macOS enable VoiceOver, figure out how it works, close your eyes and use your website." I doubt this is going to be very effective. Sure, it's better than nothing at all, but this is akin to sighted person with zero blindness experience testing the effectiveness of a newly designed white cane, only a website is much more complicated. You should alwa…
Even if someone with personal experience is better I would still highly recommend testing these tools as it's not always clear how they work if you haven never used them.
I was really surprised the first time I tested one of these tools and now I know a few dos and don'ts when developing web apps.