6 ms·

Is there a lint-like tool that you would recommend to developers to scan their web application for accessibility issues (and ideally suggest alternative best-pr

by cwkoss 7y ago

Is there a lint-like tool that you would recommend to developers to scan their web application for accessibility issues (and ideally suggest alternative best-practices)? EDIT: found this Web Accessibility Evaluation Tools List with 132 items listed! Anyone have advice on which ones are best? https://www.w3.org/WAI/ER/tools/ https://www.w3.org/WAI/ER/tools/

davedx 7y ago
The lint tool in create-react-app does this out of the box. :)
cwkoss 7y ago
On a related note, our app has a lot of charts. What are the best practices for making time-series graphs accessible? I'd imagine just listing the values wouldn't be particularly helpful for graphs with hundreds or more points - and being able to programmatically summarize the interesting takeaways from an arbitrary chart would probably be useful for our sighted customers as well.
- spondyl 7y ago
  I’d be interested to hear more about this as well
- Angostura 7y ago
  Just pondering whether there is a system that converts line graphs into series of rising and falling tones, while a voice reads out the x axis markers. If you have multiple series, you could have different sounds running in parallel - sin wave, square wave or perhaps musical instruments each denoting a different series. That might actually be usable if there was an automated system for creating them on the fly. There's also this kind of approach https://www.youtube.com/watch?v=I9lquok4Pdk https://www.youtube.com/watch?v=I9lquok4Pdk
- sn 7y ago
  Sarah Newman from prgmr.com here. It's funny you should ask this - we just kicked off an effort a week ago to work on this problem. We don't even have a website yet for the software, but please feel free to watch audiplot.org for future developments.
- dbjorge 7y ago
  Highcharts has put a lot of effort into designing charts to be accessible. They did a presentation about it at my workplace a few months ago and I was impressed by the passion and level of user testing they had done. https://www.highcharts.com/docs/accessibility/accessibility-module https://www.highcharts.com/docs/accessibility/accessibility-... is a good starting point to learn more about the sorts of features and considerations they've made (you can find articles, demos, and videos describing more from there)
michaelscott 7y ago
I use https://khan.github.io/tota11y/ https://khan.github.io/tota11y/ which you can add to your browser to run through your site. I also sometimes just close my eyes and run a screen reader through a site to see if I could navigate it reasonably. Neither of these options helps with catching everything but they're better than nothing.
- hopesthoughts 7y ago
  For that, you need to know all the quick navigation shortcuts a screen reader can use. Otherwise you're not doing it very efficiently.
chippy 7y ago
A Chrome extension I've used is Siteimprove Accessibility Checker https://chrome.google.com/webstore/detail/siteimprove-accessibility/efcfolpjihicnikpmhnmphjhhpiclljc https://chrome.google.com/webstore/detail/siteimprove-access...
WrtCdEvrydy 7y ago
We use WAVE tool internally, but it may not be the 'coolest'
dbjorge 7y ago
My team at Microsoft maintains an open source browser extension for this called Accessibility Insights (https://accessibilityinsights.io https://accessibilityinsights.io), which is what Microsoft recommends internally for its own teams developing websites. It offers a fast 5 minute scan for some of the most common/easily detectable issues, and also a much fuller assessment with a mix of automated checks and guided/assisted manual tests that aims to help web developers who aren't accessibility experts achieve full WCAG 2.1 AA compliance. Happy to answer any questions about it!

by cwkoss 7y ago

davedx 7y ago

The lint tool in create-react-app does this out of the box. :)

cwkoss 7y ago

On a related note, our app has a lot of charts. What are the best practices for making time-series graphs accessible? I'd imagine just listing the values wouldn't be particularly helpful for graphs with hundreds or more points - and being able to programmatically summarize the interesting takeaways from an arbitrary chart would probably be useful for our sighted customers as well.

spondyl 7y ago
I’d be interested to hear more about this as well
Angostura 7y ago
Just pondering whether there is a system that converts line graphs into series of rising and falling tones, while a voice reads out the x axis markers. If you have multiple series, you could have different sounds running in parallel - sin wave, square wave or perhaps musical instruments each denoting a different series. That might actually be usable if there was an automated system for creating them on the fly. There's also this kind of approach https://www.youtube.com/watch?v=I9lquok4Pdk https://www.youtube.com/watch?v=I9lquok4Pdk
sn 7y ago
Sarah Newman from prgmr.com here. It's funny you should ask this - we just kicked off an effort a week ago to work on this problem. We don't even have a website yet for the software, but please feel free to watch audiplot.org for future developments.
dbjorge 7y ago
Highcharts has put a lot of effort into designing charts to be accessible. They did a presentation about it at my workplace a few months ago and I was impressed by the passion and level of user testing they had done. https://www.highcharts.com/docs/accessibility/accessibility-module https://www.highcharts.com/docs/accessibility/accessibility-... is a good starting point to learn more about the sorts of features and considerations they've made (you can find articles, demos, and videos describing more from there)

michaelscott 7y ago

I use https://khan.github.io/tota11y/ https://khan.github.io/tota11y/ which you can add to your browser to run through your site. I also sometimes just close my eyes and run a screen reader through a site to see if I could navigate it reasonably. Neither of these options helps with catching everything but they're better than nothing.

hopesthoughts 7y ago
For that, you need to know all the quick navigation shortcuts a screen reader can use. Otherwise you're not doing it very efficiently.

chippy 7y ago

A Chrome extension I've used is Siteimprove Accessibility Checker https://chrome.google.com/webstore/detail/siteimprove-accessibility/efcfolpjihicnikpmhnmphjhhpiclljc https://chrome.google.com/webstore/detail/siteimprove-access...

WrtCdEvrydy 7y ago

We use WAVE tool internally, but it may not be the 'coolest'

dbjorge 7y ago

My team at Microsoft maintains an open source browser extension for this called Accessibility Insights (https://accessibilityinsights.io https://accessibilityinsights.io), which is what Microsoft recommends internally for its own teams developing websites. It offers a fast 5 minute scan for some of the most common/easily detectable issues, and also a much fuller assessment with a mix of automated checks and guided/assisted manual tests that aims to help web developers who aren't accessibility experts achieve full WCAG 2.1 AA compliance. Happy to answer any questions about it!