.png)
Accessible web design and development enable users with different kinds of disabilities to use websites and applications with as few barriers as possible. The most effective way to go about accessibility is following the relevant guidelines and principles from the get-go. However, if you already have an existing website, it’s still worth checking it for (at least) the most common accessibility mistakes and fixing the underlying issues.
By doing so, you won’t only make it easier for millions of potential users globally to access your website or application properly, but you’ll also:
- enhance the user experience for non-disabled users (think better color contrast or fewer distractions),
- improve your SEO (search engine bots work similarly to assistive technologies in many aspects),
- comply with accessibility laws and regulations.
This article provides you with an actionable accessibility checklist that you can use to analyze and fix the most common accessibility mistakes on your website or application.
The checklist includes accessibility errors and their potential solutions related to:
- visual presentation
- text and labeling
- keyboard access
However, note that these are only the most common accessibility mistakes and not an exhaustive list of all issues. You can read more about web accessibility in the Web Content Accessibility Guidelines (WCAG), which are the most widely accepted web accessibility standards worldwide.
Accessibility Mistakes Related to Visual Presentation
Visual accessibility includes the presentation of images, videos, animations, charts, and any other graphical content on the screen.
1. Low Color Contrast
Color contrast ratio is the difference in brightness between the foreground (e.g. fonts) and background colors. It’s calculated using the official color contrast formula defined by the WCAG 2.0 guidelines. Its value ranges from 1:1 (no contrast at all) to 21:1 (maximum contrast; black against white).
To make your content accessible to users with visual impairments, color contrast should be at least 4.5:1 for regular text and 3:1 for large text. This is Level AA compliance, which is the minimum requirement in the WCAG 2.0 guidelines.
For the enhanced level of compliance (Level AAA), color contrast should be at least 4.5:1 for regular text and 7:1 for large text.
Text content counts as ‘large’ up from 18 pt for regular fonts and 14 pt for bold fonts.
How to Fix Low Color Contrast
To check the font (or another foreground) color against the background color, use a color contrast checker tool, such as the ones provided by WebAIM or Coolors.
You can also use Chrome DevTools’ color blindness emulator to test how your website is perceived by users with different kinds of color vision deficiencies.
With a color scheme designer tool, such as ColorHexa, you can quickly find the darker or lighter shade of a color.
Alternatively, you can opt for bigger or bolder fonts that require less contrast against the background color.
If you are still ahead of picking a color palette, you can also use a pre-designed accessible color scheme such as the ones you can find on the Color Safe website.
2. Missing Non-Color Designators
Meaning and state change should never be conveyed only by color because people with different kinds of vision impairments will lose information ― either partially or fully.
This is especially important when you create charts, labels, and actionable elements such as links or buttons.
How to Fix Missing Non-Color Designators
If you have removed the underline from links, add another non-color designator such as an icon or a styled border, or use reverse underline (see more in my case study about link accessibility).
Buttons should always look clickable, so be careful with flat-style designs. Google’s material design principles show how you can use placement, hierarchy, and shapes to make flat buttons look like clickable elements.
For labels and charts, you can use texture such as Trello’s color-blind labels. Always add meaningful text descriptions or annotation to these elements, too.
3. Too Many Animations
Too many animations can cause nausea, headaches, seizures, and dizziness for people with vestibular disorders and distract the attention of many users, including people with learning disabilities. Some subtle animations or transitions are fine, but too much movement on the screen harms accessibility.
How to Fix Too Many Animations
Consider removing non-essential animations that only exist for decoration purposes, such as most of the on-scroll animations, parallax effects, and animated ads.
However, you don’t have to remove everything ― WCAG 2.1 relevant success criterion (2.3.3) allows for “animation that is essential to the functionality or information of a web page”.
4. Unstoppable Animations
If you have infinite animations on the page, users should be able to stop them whenever they want. Animated gifs used for illustration, product demo gifs, and animated ads are typical examples of unstoppable animations.
Short animations and transitions are fine when they are carefully used and relevant to the content.
How to Fix Unstoppable Animations
In CSS, don’t set the `animation-iteration-count` property as `infinite` but use it to specify the number of animation cycles (the default value is 1).
Instead of keyframe animations, consider using the `transition` property for simpler animations. This property defines how a transition should take place between two states of an HTML element (and has no infinite value).
Opt-out of using animated gifs if you can. Rather use short videos (e.g. MP4 files) within the semantic `<video>` tag, or if you can’t serve videos, add an animation manipulation library to your page (e.g. Gifffer).
Accessibility Mistakes Related to Text and Labeling
Besides issues with visual presentation, missing or improper labeling also reduces the accessibility of your website or application.
5. Missing alt Attribute on Images that Convey Information
As a rule of thumb, you should add the `alt` attribute to every image that is part of the content and conveys information. Its name stands for ‘alternative text description’ and should provide a concise description of the image’s content.
The `alt` attribute is important because this is the information the browser displays whenever it can’t show images for any reason, such as when the visitor uses a text-based web browser (e.g. Lynx) or they have opted for not showing images. This is what screen readers access and read-aloud for visually impaired users as well.
How to Fix Missing alt Attribute on Images
To find missing `alt` attributes, you can use an SEO checkup tool such as SEO Site Checkup or SEOptimer.
If you want to add `alt` attributes with an automated tool, be careful and check the descriptions manually after they have been added.
Note, however, that the `alt` attribute should be left empty if the image is only used for decoration purposes. Still, if an image is part of the content or conveys any kind of information, descriptive `alt` attributes are a must.
6. No Captions on Videos
Adding captions to videos is essential for people with hearing impairments and learning disabilities as well as non-native speakers of a language. The latter is especially important for English which is now a global language.
You can choose between two types of captioning: subtitles and closed captions (CCs). Both provide a text alternative for the spoken words, but closed captions also include the description of other non-speech audio elements taking place in the background such as phone ringing, laughter, or music.
Note that when speaking about accessibility, captioning is not about translations but a text alternative provided in the same language (even though you can add translations as well if you have a substantial audience of speakers of a foreign language).
How to Fix No Captions on Videos
As a rule of thumb, you should always aim for using closed captions to make your video accessible for people with hearing impairments.
It’s also recommended to add a transcript that contains the text version of the entire video. Most captioning tools provide you with an option to generate a transcript file.
For accessibility, don’t rely on automatic captioning of services such as Youtube or Vimeo as they are usually not accurate enough.
Never hard-code captions into the video but always upload them as a separate file such as WebVTT. In HTML, you can add video captions using the `<track>` element.
To serve fully accessible videos on your website, you can also use an accessible HTML video player such as Able Player.
7. Empty Form Labels
Forms (e.g. comment forms, subscription forms, or booking forms) collect user data on web pages, so it’s especially important that users of assistive technologies can properly access them.
Empty form labels are the number one accessibility mistake related to forms. Form controls such as buttons and input fields should always be associated with a label that describes their purpose.
A common example of missing form labels is when an input field only uses placeholder text or an icon to identify its purpose instead of the `<label>` element or the `aria-label` attribute.
How to Fix Empty Form Labels
When you add a label to an input field, the `for` attribute of the `<label>` element needs to take the same value as the `id` attribute of the associated labelable element. Also, use a label text that describes the purpose of the field accurately.
If you don’t want to show the label on the page for design reasons, you can hide it with CSS. However, use neither the `display: none` nor the `visibility: hidden` rules, as these also hide the label from screen readers and other assistive technologies. Instead, set the `<label>` element’s size to zero or position it off the screen.
Alternatively, you can add either the `aria-label` or the `aria-labelledby` attribute to the form control to describe its purpose. Use `aria-label` if the label text is not visible on the screen (e.g. for a hamburger icon) while use `aria-labelledby` if the label text is visible. Also, see this guide to ARIA labels by Google Developers to better understand the difference between these two attributes.
8. Misused ARIA Syntax
ARIA stands for Accessible Rich Internet Applications. It’s an extension to the HTML syntax for passing extra information to assistive technologies when no other mechanism is available.
The ARIA syntax was originally created to enhance the HTML4 language. However, HTML5 comes with built-in support for many ARIA features. For instance, the ARIA landmark roles are automatically added to semantic HTML5 elements, such as `<nav>`, `<header>`, or `<footer>`.
As HTML5’s semantic elements have better support for assistive technologies than ARIA, you should opt for them whenever possible, instead of using non-semantic `<div>` tags with added ARIA syntax.
How to Fix Misused ARIA Syntax
Use semantic HTML5 elements with built-in ARIA support and only rely on ARIA when it’s necessary, such as form hints and labels (see above) or error messages.
To get some ideas about how to properly implement the ARIA syntax, check out W3C’s WAI-ARIA Authoring Practices or MDN’s WAI-ARIA tutorials.
Test your ARIA syntax with a screen reader such as NVDA (free, for Windows), VoiceOver (free, for macOS), or another one. You can also use browser extensions to visualize ARIA syntax (and errors) on your page, such as Visual ARIA for Chrome.
Accessibility Mistakes Related to Keyboard Access
Keyboard accessibility is important for people with motor disabilities, amputees with missing limbs (they use specific keyboards such as one-handed keyboards), visually disabled users of Braille keyboards, or regular users with no mouse, broken touchpads, or other technical issues.
9. Missing ‘Skip to Main Content’ Link
Adding a ‘skip to main content’ link to the top of your page allows keyboard users to skip the top menu, logo, banners, and other links in the header section, and go right to the main content.
When this link is missing, they have to click through many links on every page they visit on your website, which can be very tiresome and time-consuming.
How to Fix Missing ‘Skip to Main Content’ Link
The ‘skip to main content’ link should be the first link on the page so that when a keyboard user hits the Tab key (used for jumping through links), it shows up before anything else.
Add a ‘skip to main content’ link to the top of the page in the following way:
Bind this link to the main content part on your page by using its `href` value without the # sign for the `id` value of the container of the main content:
Also, add the global `tabindex` attribute and set its value to -1. This will make the main container focusable with keyboard navigation but prevent it from being clicked (as it’s not a link).
Position the ‘skip to main content’ link off the screen using CSS (don’t hide it using `display: none` or `visibility: hidden`), and test it with your keyboard by hitting the Tab key.
10. Removed :focus Style
The :focus CSS pseudo-class defines the style of a focusable element (e.g. <a>, <button>, or <textarea>) that receives focus by being selected with the Tab key or tapped on a touch device.
Web browsers come with a default styling for the focus state ― usually a dotted outline around the focused element.
However, the default focus style is frequently removed for design reasons and not replaced with any other style.
As a result, keyboard users won’t be able to find out where they are on the page when they are using the Tab key. In other words, your website or application will be useless for keyboard-only users.
How to Fix the Missing :focus Style
Test if you have a visible focus style by jumping through the links and other focusable elements on your site using the Tab key.
If your default focus style has been removed, add an alternative and visible style using CSS, such as a colored border or outline, for instance:
If you haven’t removed the default focus style, you can still add your own styling to enhance visibility, make the focus state look consistent across browsers, or make it part of your branding by using your brand color (though pay attention to color contrast).
Wrapping Up and Next Steps
In this accessibility checklist, we have looked into the most common accessibility mistakes and their recommended solutions. If you go through them and fix the underlying issues, your website or application will be accessible for more users, its usability will grow even for non-disabled users, you will better comply with accessibility law, and your search engine ranking will likely get better as well.
However, using the tips included in this accessibility checklist should be just the first step. The best practice is to start accessibility right from the outset and take an accessibility-first design approach. Testing is also important, not only with accessibility testing tools but also with real users with different kinds of disabilities.
Finally, let’s speak briefly about accessibility overlays. Some companies offer plugins that (supposedly) automatically fix accessibility issues on your website without you having to change the source code (and sometimes include additional accessibility features as well). The accessibility community strongly advises against these overlays, as they come with many issues and usually create more problems than they solve.
If you want to improve your accessibility further, take a look at the success criteria list of WCAG that guides you through multiple accessibility issues and provides you with examples about how to solve them.
