6 ms·

Equal Access: Automated accessibility checker for web projects

some_furry 6y ago
This looks extremely useful. Ensuring that websites are accessible is important work. I used to work at a company where the CTO personally dedicated several sprints to refactoring the display layer code to better support screen readers. From what I remember, it was a bit of a tedious process, but nonetheless one appreciated by all of their customers who had disabled staff. Tools like this could save a lot of time and make the web more accessible.
ecmascript 6y ago
You should make this as a web service imo.
- rozenmd 6y ago
  FYI - it's possible to run Google Lighthouse against any URL (includes accessibility checking), and there are web services for that.
  - thanksforfish 6y ago
    https://www.webpagetest.org/lighthouse https://www.webpagetest.org/lighthouse is one example.
- frobozz 6y ago
  The trouble with running these sorts of things as a web service is that it often means the assessment has to happen after deployment. Obviously, it doesn't have to be live. You can deploy to test.example.com and try it out there, but I think that's too late. Easily detectable poor accessibility should be as much of a closed gate as having the layout go all wonky and the words all in the wrong place. Ideally, it should be runnable on your local copy as you are writing it, just the same as viewing the page in a browser.
- extra88 6y ago
  There are web services to add accessibility checks to your CI processes. https://tenon.io https://tenon.io is one, Deque has services. Deque makes axe-core, an open source library of accessibility checks that's used by Google's Lighthouse and Microsoft's Accessibility Insights for Web. This code from IBM uses their own accessibility checklist, I'll be interested to see how it compares to axe-core. https://www.ibm.com/able/checklists.html https://www.ibm.com/able/checklists.html
  - thbrunet 6y ago
    The accessibility-checker package provides CI tools for Node and Karma. These tools started out as server-based checkers about a decade ago, but not all DOMs are serializable and you lose a lot of the CSS context that's needed to do proper evaluation. It's fine for fairly static pages, but has a lot of potential for false positives/negatives. The tools provide checking for WCAG 2.0 AA, WCAG 2.1 AA and the IBM checklist. The IBM checklist is basically WCAG 2.1 AA, but has some more strict requirements for defining landmarks for screen reader navigation.
gregod 6y ago
I have also found https://accessibilityinsights.io/ https://accessibilityinsights.io/ from microsoft to be usefull. It only covers the in-browser test side for web but has a nice ui.
mfontani 6y ago
Automated tools are all fine and dandy and I like to use them. A pet peeve of mine is that "red on white" is considered bad while being, in fact, perfectly legible: > Element has insufficient color contrast of 3.99 (foreground color: #ff0000, background color: #ffffff, font size: 9.4pt (12.6px), font weight: normal). Expected contrast ratio of 4.5:1 I think whatever algorithm is used to determine contrast is deeply flawed for some colour combinations. I remember reading an article here on HN about how luminance (or luminosity?) varied in a way that wasn't easily discernible by inspecting the RGB components of a colour and how there was a different (much harder) algorithm which instead ensured luminosity could be taken into account when picking colours for a site. I'd wish accessibility tests used _that_ instead of taking the easy way out and using known-flawed RGB checks.
- jimcsharp 6y ago
  Red on white is almost indistinguishable to me from black on white. If you're trying to use red to indicate a state, it fails on me and I'm sure many others.
  - extra88 6y ago
    The parent's complaint is while the red may look black to you, you have no trouble differentiating it from the white background. The problem of red text on a white background would be if someone couldn't see red and had another impairment categorized as "low vision"; for them, red-on-white text the size found on HN would not be readable. If the red-on-white text was larger and bold (>18px, weight 700), its 3.99:1 ratio would be sufficient for WCAG's 3:1 large text threshold.
- whylo 6y ago
  The algorithm used is defined in WCAG: https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html#tests https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html#te.... It does attempt to calculate the luminance but you might be referring to a more accurate algorithm. Personally I don't find pure red on white very readable, but I have noticed some oddities such as pure black on orange (#ff6a00) passing the check while pure white on orange fails, despite being much more readable to my eye.
ggurgone 6y ago
Amazing, I had a similar idea last year and I am glad a corporate actually built this https://giuseppegurgone.com/automating-accessibility-tests-puppeteer/ https://giuseppegurgone.com/automating-accessibility-tests-p...
brightball 6y ago
Very cool. It’s hard to find good tools to ensure you’re staying accessible once you’ve made the effort to get there.
josefresco 6y ago
For WCAG work, I use and highly recommend WAVE https://wave.webaim.org https://wave.webaim.org
- dallascoop 6y ago
  WCAG's api just shows the no. of errors per type. Do you run it on your own servers and does it give more info that way?
Vinnl 6y ago
I'm not entirely sure if it's the same use case, but I think the de facto tool here is axe: https://www.deque.com/axe/ https://www.deque.com/axe/ (IIRC, it's also integrated in Webhint and Google's Lighthouse.)
avontell 6y ago
Automated accessibility testing for Android - both static and dynamic accessibility issues, all automated with little to no setup: https://github.com/vontell/Bility https://github.com/vontell/Bility (all open source too)
- avontell 6y ago
  Identifies color issues, keyboard, and user interaction issues, etc... by building up a state diagram dependent on a user's simulated abilities. Generates a report based on WCAG 2.0 specs.
  - avontell 6y ago
    With some help from others, it is also extendable to other platforms like Web and iOS
gnicholas 6y ago
PSA: Global Accessibility Awareness day is tomorrow (Thursday) and will be mostly celebrated on twitter under #GAAD. Most years there are in-person events all over the world.

This looks extremely useful. Ensuring that websites are accessible is important work. I used to work at a company where the CTO personally dedicated several sprints to refactoring the display layer code to better support screen readers. From what I remember, it was a bit of a tedious process, but nonetheless one appreciated by all of their customers who had disabled staff. Tools like this could save a lot of time and make the web more accessible.

ecmascript 6y ago

You should make this as a web service imo.

rozenmd 6y ago
FYI - it's possible to run Google Lighthouse against any URL (includes accessibility checking), and there are web services for that.
- thanksforfish 6y ago
  https://www.webpagetest.org/lighthouse https://www.webpagetest.org/lighthouse is one example.
frobozz 6y ago
The trouble with running these sorts of things as a web service is that it often means the assessment has to happen after deployment. Obviously, it doesn't have to be live. You can deploy to test.example.com and try it out there, but I think that's too late. Easily detectable poor accessibility should be as much of a closed gate as having the layout go all wonky and the words all in the wrong place. Ideally, it should be runnable on your local copy as you are writing it, just the same as viewing the page in a browser.
extra88 6y ago
There are web services to add accessibility checks to your CI processes. https://tenon.io https://tenon.io is one, Deque has services. Deque makes axe-core, an open source library of accessibility checks that's used by Google's Lighthouse and Microsoft's Accessibility Insights for Web. This code from IBM uses their own accessibility checklist, I'll be interested to see how it compares to axe-core. https://www.ibm.com/able/checklists.html https://www.ibm.com/able/checklists.html
- thbrunet 6y ago
  The accessibility-checker package provides CI tools for Node and Karma. These tools started out as server-based checkers about a decade ago, but not all DOMs are serializable and you lose a lot of the CSS context that's needed to do proper evaluation. It's fine for fairly static pages, but has a lot of potential for false positives/negatives. The tools provide checking for WCAG 2.0 AA, WCAG 2.1 AA and the IBM checklist. The IBM checklist is basically WCAG 2.1 AA, but has some more strict requirements for defining landmarks for screen reader navigation.

gregod 6y ago

I have also found https://accessibilityinsights.io/ https://accessibilityinsights.io/ from microsoft to be usefull. It only covers the in-browser test side for web but has a nice ui.

mfontani 6y ago

Automated tools are all fine and dandy and I like to use them. A pet peeve of mine is that "red on white" is considered bad while being, in fact, perfectly legible: > Element has insufficient color contrast of 3.99 (foreground color: #ff0000, background color: #ffffff, font size: 9.4pt (12.6px), font weight: normal). Expected contrast ratio of 4.5:1 I think whatever algorithm is used to determine contrast is deeply flawed for some colour combinations. I remember reading an article here on HN about how luminance (or luminosity?) varied in a way that wasn't easily discernible by inspecting the RGB components of a colour and how there was a different (much harder) algorithm which instead ensured luminosity could be taken into account when picking colours for a site. I'd wish accessibility tests used _that_ instead of taking the easy way out and using known-flawed RGB checks.

jimcsharp 6y ago
Red on white is almost indistinguishable to me from black on white. If you're trying to use red to indicate a state, it fails on me and I'm sure many others.
- extra88 6y ago
  The parent's complaint is while the red may look black to you, you have no trouble differentiating it from the white background. The problem of red text on a white background would be if someone couldn't see red and had another impairment categorized as "low vision"; for them, red-on-white text the size found on HN would not be readable. If the red-on-white text was larger and bold (>18px, weight 700), its 3.99:1 ratio would be sufficient for WCAG's 3:1 large text threshold.
whylo 6y ago
The algorithm used is defined in WCAG: https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html#tests https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html#te.... It does attempt to calculate the luminance but you might be referring to a more accurate algorithm. Personally I don't find pure red on white very readable, but I have noticed some oddities such as pure black on orange (#ff6a00) passing the check while pure white on orange fails, despite being much more readable to my eye.

ggurgone 6y ago

Amazing, I had a similar idea last year and I am glad a corporate actually built this https://giuseppegurgone.com/automating-accessibility-tests-puppeteer/ https://giuseppegurgone.com/automating-accessibility-tests-p...

brightball 6y ago

Very cool. It’s hard to find good tools to ensure you’re staying accessible once you’ve made the effort to get there.

josefresco 6y ago

For WCAG work, I use and highly recommend WAVE https://wave.webaim.org https://wave.webaim.org

dallascoop 6y ago
WCAG's api just shows the no. of errors per type. Do you run it on your own servers and does it give more info that way?

Vinnl 6y ago

I'm not entirely sure if it's the same use case, but I think the de facto tool here is axe: https://www.deque.com/axe/ https://www.deque.com/axe/ (IIRC, it's also integrated in Webhint and Google's Lighthouse.)

avontell 6y ago

Automated accessibility testing for Android - both static and dynamic accessibility issues, all automated with little to no setup: https://github.com/vontell/Bility https://github.com/vontell/Bility (all open source too)

avontell 6y ago
Identifies color issues, keyboard, and user interaction issues, etc... by building up a state diagram dependent on a user's simulated abilities. Generates a report based on WCAG 2.0 specs.
- avontell 6y ago
  With some help from others, it is also extendable to other platforms like Web and iOS

gnicholas 6y ago

PSA: Global Accessibility Awareness day is tomorrow (Thursday) and will be mostly celebrated on twitter under #GAAD. Most years there are in-person events all over the world.