Accessible websites are higher quality websites. The article mentions SiteImprove, a commercial service that can be used to assess website accessibility. But that's not appropriate for everyone. Want to improve yours but don't know where to start? Here are a few options:
The HTML validator isn't specifically aimed at accessibility issues but it does highlight some low-lying fruit. All 3 of these are free and easy to use. WAVE is the most helpful IMO.
Note: It's entirely possible to build a site that scores a 100 on Lighthouse, but be an abject failure in Accessibility compliance. We've done it ourselves on my team inadvertently (combo-box failure), so never forget that actual, manual testing with screen readers is 100% necessary. Automation often works against you when it comes to achieving compliance.
I used lighthouse to look at a prototype that used an iOS look framework.
It showed that the standard blue on white used by iOS (approx #07F on #FFF) doesn't have enough contrast... Is Apple's dark-mode partly designed for accessibilility reasons?
Just had a play, that wave extension for firefox is really good - I'm going to use it to fix my blog theme (low contrast issues and a missing language declaration but otherwise not to bad - it is just plain html with no JS).
Does anyone know of a site for fixing low contrast. My blog has v.pale grey (like #EEE), on a dark-green background. To me - normal vision - it looks high contrast.
What I'd like is to see what the Lighthouse tool considers fixed text (eg with either foreground or background adjusted, then with both) to help decide how to fix it. Probably showing images of the failing elements put through colour-blindness imitating filters would be useful too.
As it's just my blog I've left it ("works for me"!); but I try to always deliver 100% pass on mainstream automated tools as a first approximation of a working site.
You can try to look at your site on your phone out in bright sunlight, but the thing about contrast is... you don't have to trust your eyes.
You can mathematically know if something has enough contrast.
The guidelines for AA contrast is 4.5:1 for most text and 3:1 for large text. But... it may be hard to understand what those ratios mean. Basically Lightest Color relative brightness:Darkest color relative brightness.
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-cont...
The US Web Design system shows one way to solve it (ie, use their css token system that labels colors to make contrast differences super clear) but they also link to several very good resources on contrast.
Things like the WAVE tool (https://wave.webaim.org/extension/) will also have places where you can see contrast errors. In the WAVE tool, it's the third button at the top of the results [styles][no styles][contrast].
You can then see the contrast errors and try out some different options right there in the tool, until the errors go away, and you know what you can replace in your code.
Does anyone know of a site for fixing low contrast. My blog has v.pale grey (like #EEE), on a dark-green background. To me - normal vision - it looks high contrast
Automated tools are a good start, but they're not the be-all and end-all. They aren't always right because they're mathematical approximations of reality.
For a site I'm working on the art department specified a set of colors that validate perfectly in the automated a11y tools, but are a visual disaster.
One thing that helps, though, is to make sure your computer and monitor(s) are all in the same color space. I discovered a few weeks ago that my main preview monitor wasn't set to the same space as my computer, and changing them to match made a world of difference.
Why are accessible websites higher quality? If someone spends a good portion of their time making their site more usable for non-blind users, wouldn’t it be more likely that the less accessible site would be higher quality?
Because they can work better for users on small screens, low bandwidth connections, who just want to find some information they need, etc.
I was at a conference that had a theme of accessibility about a year ago and one of the repeated points was that accessibility (not just visual) tends to improve access for people under lots of circumstances. (Think closed captioning in a noisy environment or for viewers who aren't fully fluent or have trouble with strong accents.)
I’d go a step further and say confidently that there are strong and mutually beneficial interrelationships between Accessibility, Technical SEO, Site Performance, and General Front-End Best Practices.
Yes, that's a great example. It turns out having ramps widely available is really handy even if someone is just temporarily incapacitated--or is pushing a stroller or a shopping basket. Captions is another.
W3.org has a good article on the business case for accessibility:
> Businesses that integrate accessibility are more likely to be innovative, inclusive enterprises that reach more people with positive brand messaging that meets emerging global legal requirements.
* WAVE add-on for Firefox (free): https://addons.mozilla.org/en-US/firefox/addon/wave-accessib...
* Google LightHouse (free, part of Chrome): Developer Tools -> Audits
* HTML Validator: https://html5.validator.nu/
The HTML validator isn't specifically aimed at accessibility issues but it does highlight some low-lying fruit. All 3 of these are free and easy to use. WAVE is the most helpful IMO.