What you can do to start making your website accessible right now

Posted: Oct 9, 2020
Design Strategy

Much like braille in an elevator or ramps next to a staircase, web accessibility helps those with disabilities to access websites across multiple devices. As websites are often considered as “public domain,” they need to be publicly accessible to all. If you didn’t know already, government websites (.gov) all must adhere to web accessibility guidelines. These guidelines, called the WCAG (Web Content Accessibility Guidelines) are set and maintained by the W3C (World Wide Web Consortium).

What is the WCAG?

The WCAG is a set of guidelines responsible for different levels of accessibility compliance that every website should aim to adhere to. There are three levels of compliance: Level A, AA, and AAA. Though Level AAA compliance is impossible to attain, websites should do their best to reach Level AA standards if possible. These standards are based on four principles: Perceivable, Operable, Understandable, and Robust. You can easily memorize this with the acronym, POUR. Each of these principles has a number of guidelines and then criteria under those.

Perceivable – If people cannot see it, they need a way to hear it. If they cannot hear it, they need a way to read it.

  • Text Alternatives – “Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.”
  • Time-Based Media – “Provide alternatives for time-based media.”
  • Adaptable – “Create content that can be presented in different ways (for example simpler layout) without losing information or structure.”
  • Distinguishable – “Make it easier for users to see and hear content including separating foreground from background.”

Operable – Users need considerations to comfortably operate and traverse content.

  • Keyboard Accessible – “Make all functionality available from a keyboard.”
  • Enough Time – “Provide users enough time to read and use content.”
  • Seizures and Physical Reactions – “Do not design content in a way that is known to cause seizures or physical reactions.”
  • Navigate – “Provide ways to help users navigate, find content, and determine where they are.”
  • Input Modalities – “Make it easier for users to operate functionality through various inputs beyond keyboard.”

Understandable – Users need as few hindrances to understanding content as possible.

  • Readable – “Make text content readable and understandable.”
  • Predictable – “Make Web pages appear and operate in predictable ways.”
  • Input Assistance – “Help users avoid and correct mistakes.”

Robust - Your website should be compatible with assistive technologies

  • Compatible – “Maximize compatibility with current and future user agents, including assistive technologies.”

Why Accessibility?

Why do we need to do this? Simply put, your users are oftentimes more diverse than you might know, and with diversity comes the opportunity to craft a more pleasing and accessible website experience for more of your users. So, for those who are blind, color blind, deaf, dyslexic, or otherwise, we want our websites to be welcoming and usable to all.

What you can do right now

Here are a number of things you can do right now to begin working towards making your website more accessible:

  1. Add alt & aria tags - for any images, links, and even website elements, make sure they have alt and aria tags so that screen readers can effectively describe what users are interacting with.

For example, screen readers will read out the alt tag of an image like so:
<img src=”img.png” alt=”a picture of a dog”>
Or, for elements that are not images, you can do the following:
<nav role=”navigation”>
Screen readers will read out the roles and alt tags for those who are using them.

  1. Transcripts for Audio and Video Content – for those who cannot hear or see, audio and video content should be accompanied with transcripts.
  2. Written content needs to be readable, understandable, and in an order that makes sense. This also applies to the consistency in topic and labeling between header tags and title tags.
  3. Robust Code – make sure your code is all correct! Broken code can severely hinder someone trying to access your website through keyboard and/or assistive technologies and devices.
  4. Consistent – keep consistent design patterns across your website. These help accessibility so that users can come to understand your website's design language.
  5. Distinguishable – color should not be the only way to distinguish content – use different shapes, sizes, and descriptors to account for those who may be colorblind.

By no means is this a complete list of changes that will make your website easily accessible to all. However, it is a good start. Working towards creating an accessible site is a journey that takes time, care, and an understanding of your users - these are some of the first steps you can take right now in order to better accommodate your diverse userbase.

For more information on WCAG standards, visit https://www.w3.org/WAI/WCAG21/quickref/. If you want to learn more about implementing these standards on your website, Vanguard offers a virtual one-on-one Accessibility Presentation with our strategist. Contact your Vanguard Client Manager to schedule this presentation. 

More Articles
and Topics

Author:

Sean Norton