5 Things I Didn’t Know About Web Accessibility
With the increasing pervasiveness and availability of the web, web accessibility is becoming less of a feature and more of a necessity. But these rules do not only apply to public-facing applications, but more and more internal applications are requiring ADA compliance. Some guidelines are difficult (even impossible) to follow while keeping up with current design trends. Public-facing applications need to weigh the cost on aesthetics to decide whether it will help or hinder traffic. It is also important for sites in finance and communication to keep in mind possible law suits that may arise from unintentionally portraying misleading content to screen readers. As I have been developing accessible websites, I have found that there are some small improvements that can be made to dramatically increase accessibility, without hitting your design too hard (and may even help your UX).
At a glance
- Provide text alternatives for non-text content.
- Provide captions and other alternatives for multimedia.
- Create content that can be presented in different ways, including by assistive technologies, without losing meaning.
- Make it easier for users to see and hear content.
- Make all functionality available from a keyboard.
- Give users enough time to read and use content.
- Do not use content that causes seizures.
- Help users navigate and find content.
- Make text readable and understandable.
- Make content appear and operate in predictable ways.
- Help users avoid and correct mistakes.
- Maximize compatibility with current and future user tools.
The big five
- h1-h6 tags must be in order
- Background image vs image tag actually matters
- Colors shouldn’t be the only thing to define meaning
- Can’t skimp on alts
- Sufficient contrast
h3 should be subsection of h2, which should be subsection of h1. If you follow good css and style techniques, this shouldn’t be too much of an issue, but it’s an easy one to forget.
Screen readers interpret background images and img tags differently. In essence, use background images if it is not part of the content and use an image tag if it has some kind of inherent meaning, like a warning icon or an image that you would want part of the page if printed.
In an attempt to be minimalist in your design, it can be easy to use just colors to change the meaning of content. For those that are blind or colorblind, meaning and intention is lost if color is the primary indicator. For example, add an image to your error/success messages, modify text when an element is active, or add a text description when a form field is invalid.
It is really easy to gloss over this, but screen readers fail without alts on images. It’s that simple. It takes a few seconds and is worth your while.
Text becomes unreadable/unnoticeable to some users if it there is not enough contrast between the background and the text. This also goes for background images. Keep this in mind. W3 points out two situations where contrast is not important.
Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Text that is part of a logo or brand name has no minimum contrast requirement.
There are more tools out there than you think
For a fast and easy approach, Chrome has a web accessibility audit tool.
Also, do what this guy did and try out a screen reader for a week. You are bound to learn some things that will be easier to keep in mind when developing.