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.
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.
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.
Share this post
Published by Rhodri
on the 11th April 2017
Client Service Director at Zoonou