Five Common Web Accessibility Mistakes You Should Avoid

We take a look at five web accessibility mistakes we commonly see. Hopefully identifying them will help you to deliver quality digital experiences.

Making your website accessible is of critical importance. In many cases there is a legal as well as moral obligation to ensure that anybody, regardless of ability or disability, is able to use your site. Not only does an accessibility-friendly website increase your number of potential visitors, it may provide significant financial benefits by enabling all users an equal opportunity to engage with your products.

This article includes references to WCAG 2.0, an internationally recognised standard for web accessibility. It’s recommended that websites are developed to achieve at least WCAG 2.0 Level AA standard and that’s what we typically test to here at Zoonou.

Even if you don’t have a strict client requirement to meet the WCAG guidelines, you still have a responsibility to ensure you’ve built your website with accessibility in mind.

Julia, one of our Accessibility Specialists, takes a look at five common accessibility mistakes we see here at Zoonou. Hopefully identifying them here will help you to avoid them in the future!

1. Missing or Insufficient Alternative Text

A common issue we see is images with no, or insufficient, alternative text, potentially meaning a user who is visually impaired is unaware of what the image details.

A sufficient description for all non-decorative images on the page should be contained within the alt attribute, for example, alt=”a flock of birds flying towards a stationary ship in the distance”. Assistive technologies such as screen readers, commonly used by those with visual or cognitive disabilities, will read to the user what is contained within the alt attribute usually when the image is hovered over or interacted with. Since screen readers cannot analyse an image to determine what the image represents, alternative text must be provided to allow for this.

In addition to this, any decorative images must have either null alternative text (alt=“”) or be implemented as CSS (Cascading Style Sheets) backgrounds, to allow the screen reader to disregard this content.

Mozilla CSS Background Image copy

2. Keyboard Inaccessibility

It is vital that the entirety of your website is accessible via the keyboard, since some of the visitors to your website may not be using a mouse.

This is often performed using the ‘Tab’ key within the website, allowing the user to navigate through the interactive elements on the page one-by-one and activate or manipulate them using additional keyboard controls. Furthermore, a visible indicator of the element in focus is necessary to ensure the user is aware of what they’re interacting with.

3. Low Colour Contrast

An appropriate level of contrast should be present between text and its background so that it’s readable for people with moderately low vision, without having to use contrast-enhancing assistive technologies.

The WCAG 2.0 Level AA standard has set out requirements for both normal and large text. A contrast ratio of 4.5:1 is required for normal text and 3:1 for large text. However, the WCAG 2.0 Level AAA standard requires a contrast ratio of 7:1 for normal text, and 4.5:1 for large text.

4. Missing Labels

All controls on the page need to be labelled, describing the purpose of the control. For example, a newsletter subscription checkbox within a signup form should have a label ‘Subscribe to our newsletter’ or similar, alerting the user of what the functionality comprises. This is not only recommended for basic usability but is also crucial for screen readers to identify the control correctly. Titles are recommended for where labels cannot be used.

Control Label Example

5. Flashing Content

Flashing content on your website may induce seizures for those with epilepsy, or even migraines. In Japan, an episode of Pokemon watched by 4.6 million households in 1997, contained flashing content and triggered photosensitive seizures in over 12,000 people, resulting in more than 600 children being admitted to hospital. The WCAG 2.0 Level A standard insists that no flashes occur on the page more than three times in any one second period. If this cannot be accomplished, the flashes must be below the general flash and red flash thresholds as determined by the World Wide Web Consortium (W3C).

 

For more information about our accessibility service and to find out how it can affect your design and development, please contact us at info@zoonou.com and one of our team will get back to you. If you’d like to get in touch about anything else, please head over to our Contact page.

Keep up to date with the latest news from Zoonou

Get up-to-date information on our business and services by email. You can unsubscribe at anytime, and we will not share your data with any 3rd party marketing organisations. Read our Privacy Notice.

Blog Update Sign Up Form

  • This field is for validation purposes and should be left unchanged.