26.9 million American Adults age 18 and older reported experiencing vision loss according to a 2017 study from the American Foundation for Blind.
Here are 5 things we can do to help promote web accessibility:
1. Be careful with Alert Boxes, Error Messages, and Pop-up Windows
Do not use JavaScript or other client-side scripting to hide warnings, disclaimers, or error messages.
When HTML elements are removed from the DOM the screen reader does not have access to them anymore.
Important messages should be available to all site visitors.
In this case I hid the tooltip using the CSS property opacity: 0. Had I used JavaScript to remove the tooltip from the DOM or the CSS property display: none most screen readers would not be able to read the tooltip without the visually impaired user hovering it because it was removed from the DOM.
NOTE: visibility: hidden does not remove the element from the DOM, remove them from the accessibility tree so screen readers cannot read it too.
Another possible solution to this problem is to develop a server-side solution that rebuilds and serves a modified page with the error message embedded in it.
2. Do not use Color as the only way to convey information
Color can be used for denoting required fields on a form or any input errors. However, some users may be color blind and have a hard time perceiving color, colors are also a problem to those who are blind so, when color is used, do not use it as the only means of conveying information.
It is common to use red as a color to convey error and green to convey success, but some websites only use a red border around the input to convey an input error without any additional cues.
Twitter solves this by also displaying text instead of just using the red color to convey that an error has occurred, this approach is good for people with visual impairments.
3. Provide adequate Contrast
There must be enough contrast between text and its background. This allows people with reduced vision to read and navigate the website site.
The minimum contrast ratio between most text and its background must be 4.5:1. Exceptions include text that is larger and/or bold, they may have a contrast ratio of 3:1.
NOTE: Large can be defined as 18-point text, bold is a 14-point bold text.
Image: https://www.brandeis.edu/web-accessibility/understanding/color.html
Free tools to check contrast
4. Visible Focus
Focus emphasizes the element that is currently selected. It allows users to know that they are about to activate a link, button, form control, etc.
This helps people who have reduced vision or other print-related disabilities have a clear indicator of where they are on a web page.
NOTE: If a border is used to indicate focus on an element, it must have sufficient contrast so it can be clearly noticed.
How to check if your page's elements have visible focus?
Use the tab key to cycle through all the page's elements. As each element receives focus, there must be a clearly visible change to the element.
Keep in touch
Contact me through my social media. Let's talk about accessibility and programming in general, be it on LinkedIn or GitHub.
Share with us what you do to improve accessibility for those with visual impairments.
Top comments (0)