Too bad that @AccessiBe’s overlay does not make this organization’s website accessible. Text with 1.31:1 contrast ratio (minimum for text this size/weight is 3:1) while having the “Vision Impaired Profile” switched on.
And if a person with low-vision is also using a screen reader, the “vision impaired profile” is switched off. You really have to decide to which bucket of disabled person you belong to.
And in this example, the “Vision Impaired Profile” does nothing to make the text that overlays the image more readable (which can be done, see Windows High Contrast Mode). It instead increases the photo’s saturation in a way that makes everyone look sunburned.
I briefly looked over the site, and it is minimal stuff to fix. A couple of colors to change, some background colors for text on images, a missing button label here and there. No rocket science.
Another example: On the home page, there are three portraits and if you hover over them, they are replaced by tiles with geometric shapes. The images are mostly decorative and have no alt text in the generated HTML. That’s probably what I have recommended.
Now #AccessiBe adds alternative text to the images (which is actually quite OK – but is also becoming a standard feature), but then it panics because there is mouse interaction, so it creates another tab stop on the images, only when the user arrives there with the keyboard, …
… the image is obscured by the colored tile, creating a mismatch between what is displayed and what is read by a screen reader. The video shows this behavior:
(Video shows focus moving from one photo to the other, the actually focused image being obscured.)
The organization is not to blame. They try to be inclusive and accessible, and they fell prey to the lofty promises of a company that will probably claim that I used it wrong. Or that it will be fixed in the next release.
Heck, I wished it would just work. If there was a one-click solution that made the web accessible without anyone needing to do the work? Sign me up.
The tactic of using the fear, uncertainty and doubt of website owners as a weapon to sell a non-working solution is something we should all frown upon. It is just unethical.
If you want to learn more about these tools and why they do not work, look at the overlayfactsheet.com or watch my YouTube video about these AI tools:
• • •
Missing some Tweet in this thread? You can try to
force a refresh
1. The Web Content Accessibility Guidelines are a Web Standard. 2. If you want to make websites you need to follow them as much as you follow other Standards like HTML or CSS. 3. They are an integral part of the Web.
I know “Guidelines” is a bit easy to misunderstand as non-binding, but it is not. The guidelines are in place to help you keep track but it also has Success Criteria that tells you exactly when you have left those guardrails and made something inaccessible.
WCAG has a double functionality:
1. It can guide you (as Design Principles) to an accessible, usable user experience and tells you what the minimum requirements are.
2. It can tell you when you have failed to provide accessibility.