Accessibility: One web to include 'em all

Web accessibility is an inclusive practice that aims to make digital content accessible to everyone, including those with disabilities. This does, for example, imply that people who are blind or deaf, as well as people impaired by socio-economic restrictions like low bandwidth or speed, should be able to operate the web without difficulty. Using design lingo, one could say that an accessible web page is universally designed.

Designing accessible web pages is a good and ethical practice that should be followed at all times. Furthermore, conforming to accessibility guidelines usually improves the general user experience for everyone. Universal design avoids discrimination, broadens your user base, and improves the user experience. It’s a win-win situation!

Another reason to design accessible web pages is for economic reasons. Over the past decades, many countries and regions have established laws to ensure that providers of digital content include disabled people to the best for their abilities. The European Union (EU) has, for example, developed a Web Accessibility Directive (WAD) that guides the national laws of many European countries. If a web page fails to conform to these laws, its infringing provider can face fines or lawsuits.

Enter the Web Content Accessibility Guidelines 2.1 (WCAG 2.1): a humongous set of guidelines that helps you make the web more accessible for people with visual, auditory, physical, speech, learning, neurological, and cognitive disabilities. If you’ve ever visited the official web page of these guidelines and felt overwhelmed by its extensive content - you’re not alone! To make your life a little bit easier, here is an introduction to WCAG 2.1, accompanied by four small tips for how to practice accessibility:

To directly quote the official webpage:

WCAG 2.1 consists of four main principles, which contain a total of 13 guidelines. Each guideline provides at least one success criterion:

The numerous success criteria mainly address three concerns - content (e.g. text and images), design (e.g. layout, colors and contrast), and technology (e.g. the code structure). These are concrete, testable measures of your web page’s level of accessibility. Success criterion “2.1.1 - Keyboard” says, for instance, that all content must be operable through a keyboard interface.

1. Make WCAG/accessibility a natural part of the insight and development process

Bother spending some time learning about accessibility and the WCAG success criteria. If you make yourself familiar with WCAG 2.1 and the overarching principles of accessibility, you can both consciously and unconsciously design content that is adapted to disabled users’ needs. This understanding makes it possible to consider accessibility while you develop a web page, rather than after it is finished. The following three tips are focused on how you can achieve this understanding.

2. Seek supporting sources

Some success criteria in WCAG 2.1 are written in a language that demands a Ph.D. in astrophysics to interpret. Or at least, that’s what it felt like to me - a mere designer - the first time I accessed the WCAG web page. For this reason, I highly recommend you use other materials to support your understanding. Personally, I’ve used WUHCAG and Knowability frequently to search for specific success criteria that needed some down-to-earth explanation. Google is your friend!

For Norwegian readers, I also recommend Difi’s online course in universal design and their list of WCAG success criteria in Norwegian.

3. Use supporting tools to assess your website

Numerous tools exist out there specifically (and indirectly) developed to help you discover content on your web page that does not conform to WCAG 2.1. For instance, the organization behind the guidelines - W3C - provides an extensive list of evaluation tools. I have used these a lot myself:

• WAVE’s plugin for Chrome and Firefox and W3C’s validator, which helps you discover lines of HTML code that should be corrected or improved.
• This color contrast checker, where you can fill in your web page's URL or color hex-codes to see whether they conform to three different success criteria.
• VoiceOver - my Mac’s built-in screen reader - which helps me test content from the perspective of e.g. blind or visually impaired users.
• This line-height adjuster for Chrome that specifically helps you test parts of success criterion “1.4.12 - Text Spacing”.

4. Seek to empathize with your disabled users

Empathy - the ability to understand another person's feelings and subjective experiences - is usually a crucial part of user insight. During a busy project with limited time and resources, it can be difficult to locate users who represent the diversity of disabilities you need to account for when practicing accessible design. However, you can try to put yourself in their shoes through some simple measures. To empathize with your blind or visually impaired users, you can, for instance, try to access and operate your web page while blindfolded and solely using a screen-reader and keyboard to navigate; at 200% magnification; or in black-and-white mode.

The essence of these examples is that you should try to put yourself in the position of others unlike yourself. If some content on your web page is inoperable, incomprehensible, or inaccessible when you do so, your web page is not universally designed. And if that’s the case, your newly gained empathy will make it apparent how frustrating it can be to operate a web page that is not adapted to your needs.

Stay strong, fellow UXer. Accessibility and WCAG 2.1 may seem overwhelming, but essentially, it helps you become a better designer. You don’t need to become an expert in the field, but by understanding the main principles of web accessibility, you can advocate the inclusion of universal design in your day to day work life. Good luck and have a lovely December!