Web Accessibility, this is the way
A practical and technical guide to diversity and inclusion on the web and the web accessibility principles.
Diversity and inclusion is such an important topic right now, we hear among our organizations some efforts of creating diverse teams and a more inclusive environment at work and I’m pretty pleased to live in these times when we can experience it. One of the things that motivate me in my current job, is that as a team we not only advocate for our browser, we advocate for a “better web”, therefore our goal extends this diversity statement to the web. Well, as a fellow developer your role is crucial to bring diversity in tech and take this mission into your code. In the following article, I invite you to take the first steps and learn about concepts related to accessibility and bring them to practice.
The Openness of the World Wide Web
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” — Tim Berners-Lee
The Web is meant to be a powerful resource and with a universal reach, it’s created for people and by people, therefore nobody can be left behind the chance to be a contributor. There are around 15 to 20% of people who require accessibility, this means that if we decide to not make our web apps accessible, over 1 billion worldwide won't be able to use your product or service (again, 1 billion). Therefore accessibility is not about just meeting legal requirements, or an optional case scenario depending on budget and time, it’s about people and giving them the human rights of access to information.
Implementing accessibility in our code.
We should take care of the following range of disabilities: auditory, cognitive, neurological, physical, speech, and visual. During the development process, it’s a good practice to create products with a user-centered design method, this means including people with disabilities during the process, as we should consider the different needs of our users and in consequence, we will be aware of the different types of disabilities.
Before heading into our code, it’s important to know the following terms:
- Assistive Technologies refer to hardware or software that enables people with disabilities to interact and engage with the digital environment e.g. using a screen reader or switch control.
- Adaptive Strategies are techniques that people with disabilities use to interact with the digital environment such as adjusting platform and browser settings or resizing browser windows.
We will combine both assistive technologies and adaptive strategies tips to create accessible websites.
First, I recommend having some general tools that help you prevent errors related to accessibility and suggest how to fix them. Even though these tools are really useful, they don’t solve most of the things automatically that we need to keep in mind, therefore we still need to take a look at our code.
Tools that help you to review accessibility:
- Web Developer Tool: Your best friend, devtools of your favourite browser, will help you analyze and inspect elements to review their accessibility output.
- Web Developer Extension: The Web Developer extension adds various web developer tools to a browser, it will facilitate a lot of tasks like retrieving headings, display image properties, etc.
- Wave Extension: WAVE is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility features and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content.
From a technical perspective, let’s dive into some practical tips to follow up on the four principles of Accessibility:
- Perceivable
Information can be presented in different ways; for example, in braille, different text sizes, text-to-speech, or symbols, etc. This gives users the chance to not rely on just one option that maybe can cause a missing part of the information presented.
Practical Tips:
1.1 Text Alternatives: Images should have a text alternative, so users with eye disabilities can count on a description and have a context of the content. We will use the alt attribute with our img html5.
<img src=”mandalorian.jpg” alt=”Mandalorian and Grogu legos” width=”500" height=”600">There are three different types of images, this can help you to use the correct text alternative:
- Decorative: if the purpose of the image is decorative, the alt text should leave in blank.
- Informative: the image brings valuable information, therefore the alt text should describe this.
- Actionable: if the image is a call for action, the alt text should contain information about its function.
1.2 Multimedia: Multimedia includes video, audio, and a mix of both. Alternatives to this format are the following:
- Captions: Text synchronized with multimedia for people who cannot hear the spoken words.
- Transcripts: Similar to captions but with important visual information in the media file, to read as an alternative to watching or listening to the media file.
- Audio Description: Audio descriptions are a version of the multimedia file that includes a narrator explaining important visual information
- Sign language: When you add a video of an interpreter who narrates the audio portion through sign language
From a coding perspective, we need to make sure that we at least use media or resources that can provide some of these alternatives to the user.
1.3 Adaptable content: Create content that can be presented in different ways without losing information or structure. Using semantic HTML element can help to make your content adaptable, this means, using tags that clearly describes the meaning of the content to both the browser and the developer. Besides maintaining semantic HTML, the proper use of headings, navigation bars, and a proper structure of your document make sure that people that use assistive technologies can distinguish relevant information.
1.4 Contrast Ratio: Make it easier for users to see and hear content including separating foreground from background. In order to achieve this, there are several tools to help you calculate the contrast ratio and select appropriate color combinations, you can check contrastchecker.com or use what my colleague Ada Rose Cannon built, an extension https://ada.is/contrast-widget/ to verify the current contrast ratio of your content. The contrast ratio should be at least 4.5:1 and ideally 7:1 for text. For graphical objects, such as charts, and for large text, a contrast ratio of 3:1 may be sufficient.
2. Operable
The functionality of your web app can be used in different modalities; for example, keyboard, mouse, sip-and-puff, speech input, touch, etc.
2.1 Keyboard accessible: Make all functionality available from a keyboard, it’s pretty simple to implement this if you are using semantic HTML and the correct element's label. It is important for users to know where they are on a page at all times and make easier navigation using the keyboard. Testing this is as simple as using the tab key to move through the elements on the page.
2.2 Animations: Do not design content in a way that is known to cause seizures or physical reactions. Gifs, animations, and related content can cause physical reactions and be distractive. If your web app will use animations to check the seizure risks in your web content and software, you can use the following PEAT tool to confirm this.
3. Understandable
Information and functionality are understandable; for example consistent navigation, simple language, etc.
3.1 Language: For users that rely on screen readers, it’s important that these devices read with proper pronunciation of the specified language, you can add the language to your htmlby changing the lang attribute of the element to the desired language.
<html lang="en">
...
</html>3.2 Forms: Having different ways to input information help users to interact with your web app using alternative assistive hardware. One common example to input data is using forms, which should help users to avoid and correct mistakes. Some practical tips to create accessible forms are:
- Don't just rely on colours to indicate that one field is mandatory
- Provide clear feedback and descriptive error messages when there’s a mistake and make the right suggestions to correct it.
- The user should have an opportunity for final review and correction before submitting.
4. Robust
Content can be interpreted reliably by a wide variety of browsers, media players, and assistive technologies.
This is where we talk about WAI-ARIA (Accessible Rich Internet Applications), which provides semantics so authors can convey user interface behaviors and structural information to assistive technologies (such as screen readers). The WAI-ARIA specification provides an ontology of roles, states, and properties that define accessible user interface elements. A good example of why completing ARIA attributes are important are tabs, you can use role attributes to repurpose HTML elements used for tab controls and panels.
<button role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id">Tab label</button>When the aria-selected attribute is set to “true”, it exposes the status of the tab controls and tab panels which indicates that the tab control is activated and its associated panel is displayed. By doing this it also implements the keyboard support needed and it’s accessible to screen reader users and sighted keyboard users.
Responsive Design can bring accessibility to your code
A lot of users adapt their content to their necessity by for example changing the size of the website. The problem is that when the content is magnified and the website is not fully responsive, it can result in more scrolling, including horizontal, which leads to more mouse usage. Pages full of text mean that users can be constantly scrolling left to right to read the content. Responsive design can fix this and not only helps your web app to look great across devices but also helps users with disabilities to have more readable content.
Accessibility, essential for some, useful for everyone
Web accessibility it’s all about people and removing barriers of people with disabilities around technology, but at the same time it also benefits people without disabilities, for example, people using mobile phones, smartwatches, smart TVs, and other devices with small screens, different input modes, or the recent voice assistant technologies. If we are lucky enough, we will grow old, and older people with changing abilities due to aging make use of web accessibility. People with “situational limitation” such as in bright sunlight or with a temporary disability like a broken arm also benefit from this.
I hope all these concepts were useful for you, starting with small changes in your code and making your organization aware that accessibility is not optional, you are collaborating to making a more diverse and inclusive web.
Below you can find some other helpful resources that can help you during your successful accessibility journey.
THIS IS THE WAY.
