A Brief Introduction To Web Accessibility (A11y)

My first encounter with web accessibility was during my second job as a programmer. There, I realized the importance of the topic and was surprised that I had not known about it before. 

Through seminars I attended, I discovered that web accessibility often does not receive the attention it deserves. Even worse, it is frequently necessary to convince stakeholders of its importance. As programmers, we often develop from a position of privilege and fail to consider the conditions of others, which is problematic. 

As a web accessibility professional, I am often asked why web accessibility is important. I always think of three main reasons: inclusivity, better user experience, and legal compliance. Inclusivity is crucial because about 15% of the world's population has some form of disability that makes it difficult to use traditional technology. Including these individuals is not only morally right but also beneficial for expanding the reach of a product. Additionally, products designed with accessibility in mind improve the experience for all users, offering greater comfort and efficiency. Finally, accessibility is a legal requirement in many parts of the world, such as under the Americans with Disabilities Act (ADA) in the U.S., which protects the rights of people with disabilities. Prioritizing web accessibility is essential for safeguarding a company's reputation and integrity.

In this blog post, we will explore the fascinating and expansive world of web accessibility, highlighting its importance and the fundamental principles of the WCAG. We will argue why every company and web developer should consider these principles both as a guide and an ethical obligation. Additionally, we will review some available tools that can simplify the task of making websites accessible.

What Is Web Accessibility?

Web accessibility is the practice of ensuring that everyone can perceive, understand, navigate, and interact with the web, especially those who do not interact with content in traditional ways, whether due to a disability or special circumstances.

Web accessibility is often represented by the shorthand notation 'A11y', where the number 11 represents the number of letters between the 'A' and the 'y' in the word "accessibility". 

Why Is Web Accessibility Important?

As we mentioned above, the World Health Organization (WHO) reports that 1.3 billion people live with some form of significant disability. This figure represents a considerable portion of the population, and it is reason enough to focus on creating accessible products that ensure positive experiences for our users. However, it’s important to remember that by creating accessible products and websites we help people with different kinds of disabilities have access to digital products, experiences and services.

Here are some examples of accessible products that have had a significant impact on people with different disabilities:

1. Vibration Mode: In the realm of auditory disabilities, vibration mode was created for people with hearing loss, allowing them to perceive notifications through vibrations instead of sounds. Today, this feature is widely used by everyone, not only for its convenience in quiet situations but also for its effectiveness in noisy environments.
2. Dark Mode: Another great example of an accessible feature is dark mode, which helps reduce eye strain and prevent migraines. Originally developed for people with neurological disabilities, such as light sensitivity or epilepsy, it is now widely appreciated by many users for its comfort, battery-saving potential, and attractive aesthetic.
3. Reading Mode: For cognitive disabilities, the reading mode in browsers and applications is a great example. This mode simplifies web pages by removing distractions such as ads and side menus, which is particularly helpful for people with dyslexia or attention disorders. This feature enhances focus and comprehension and is also used by many people without disabilities for a more streamlined reading experience.
4. Voice Assistants: Voice assistants have been transformative for individuals with physical disabilities. These voice-controlled assistants allow people with limited mobility to control devices, search for information, and perform everyday tasks using voice commands.
5. Screen Readers: For visual disabilities, screen readers are indispensable. These programs convert text and other visual elements on a screen into speech or braille, enabling blind or visually impaired individuals to navigate the web and use applications. Screen readers are vital for digital independence and can also assist other users in situations where reading the screen is not possible.

Who Is in Charge of Web Accessibility?

Another important aspect of A11y is the legal issue, since in many places, web accessibility is a legal requirement. 

For example, in the United States, it doesn't matter if you don't live in the country or if your product was developed outside of it. As long as your users are in the United States, they are entitled to accessible products. 

The Americans with Disabilities Act (ADA) is the law that establishes a set of legal considerations to protect people with disabilities. In general, prioritizing web accessibility is crucial for safeguarding the company's integrity and reputation. While this legislation applies specifically to the USA, legal implications are increasingly relevant worldwide. ADA mandates that companies provide suitable accommodations for individuals with disabilities, which includes ensuring digital A11y for their online services.

Similarly, in Canada, the Accessibility for Ontarians with Disabilities Act (AODA) mandates web accessibility. The European Union also has the Web Accessibility Directive, ensuring accessibility across member states.

Also, the Web Accessibility Initiative (WAI), which is part of the World Wide Web Consortium (W3C), is an international organization that establishes guidelines for proper web development. 

There have been significant legal cases concerning A11y, emphasizing the necessity of adhering to these requirements.

The most notable cases, which occurred in USA, include the following:

• In 2019, a landmark case involved a blind man suing Domino's Pizza for not being able to order food online through a screen reader. He claimed this was an ADA violation due to lack of A11y features. The court sided with him, leading to Domino's being ordered to enhance the accessibility of its website and app for users with disabilities.
• An early instance of legal repercussions for lack of web accessibility was the 2000 complaint to the Human Rights and Equal Opportunities Commission regarding the Sydney Olympics website's inaccessibility. The blind plaintiff argued this breached the Commonwealth Disability Discrimination Act. The landmark 2001 decision underscored the importance of incorporating accessibility into web design practices.

These cases underscore the necessity of integrating accessibility from the initial stages of web application development. Neglecting accessibility can lead to lawsuits and fines. It's crucial to recognize that adhering to A11y standards enhances usability for everyone, not solely for individuals with disabilities.

Ensuring the proper importance of the products we develop is essential to avoid legal breaches and subsequent fines, as well as to protect our company's reputation.

How Creating Accessible Products Contribute to an Accessible Web?

Creating an accessible web experience requires the collaboration of many disciplines. From designers and developers to content creators and user experience experts, each plays a crucial role in ensuring that web content is usable by everyone, including people with disabilities. 

Ultimately, to achieve true web accessibility, it is essential to follow established standards and guidelines.

If you are a developer, designer, or someone who creates content for the web, you can and should follow the WCAG guidelines to build your products.

The Web Content Accessibility Guidelines, also known by their acronym WCAG, were created by the Web Accessibility Initiative (WAI). The WCAG comprises a set of recommendations that ensure web accessibility, broadly based on four fundamental principles, each with different levels of compliance. The level of compliance to be defined depends on the level of accessibility you require for your site.

There are three levels of compliance: The first level, called A, is the most basic. The second level, AA, is an intermediate level and the most widely implemented. Lastly, there is the AAA level, which corresponds to an advanced level of accessibility required for products in industries that must be accessible to the entire population, such as health, education, and government.

The 4 Principles of Web Accessibility

There are four fundamental principles that constitute the WCAGs:

1. Perceivable: It focuses on ensuring that all content crucial to the user can be interpreted in different ways, considering text as the most accessible option.
2. Operable: It aims to ensure that the user can use and navigate using different methods, such as a keyboard and/or mouse.
3. Understandable: It ensures the site is understandable to a wide variety of people, from those who need some type of assistance technology to those who simply use the web in an unconventional way. To comply with this principle, it is generally recommended to use appropriate text sizes, color contrast, predictability in interacting with the page, providing instructions for use, and ways to avoid or correct errors.
4. Robust: It aims to ensure that the content works in various environments, regardless of the user's location, device, or browser. 

By meeting the above requirements, we can contribute to making the web more accessible to everyone.

Web Acessibility Standards: A WCAG Overview 

To understand these principles, it is critical to recognize the significance of each guideline that comprises them.

For that reason, we summarized each guideline in WCAG, presenting them in an easily understandable format below:

1. Perceivable

Guideline 1.1 Text Alternatives
For all non-text content like photos, videos, or audios, please include a text description. For interactive elements, make sure to explain their function in text. In forms, use clear descriptions and correct labels to aid understanding and usage. Decorative content, which does not provide relevant information, should be added in such a way that assistive technology can easily ignore it.

Guideline 1.2 Time-based Media
Provide alternatives for time-based media, including captions for prerecorded audio, audio descriptions, or alternatives for prerecorded video content. For live content, provide captions. At higher levels of accessibility, include sign language interpretation and extended audio descriptions to ensure the content is accessible to users with various disabilities.

Guideline 1.3 Adaptable
Create content that can be presented in different ways (for example, a simpler design) without losing information or structure. Instructions for understanding and operating the content should not rely solely on sensory characteristics such as shape, color, size, visual location, orientation, or sound. The content should not restrict its view and operation to a single screen orientation, unless it is essential. The purpose of each form input that collects information about the user should be accessible by assistive technologies.

Guideline 1.4 Distinguishable
It's important to make content distinguishable for users by facilitating the viewing and listening experience, including the separation of background and foreground elements. Color should not be used as the only means to convey information or indicate actions. Text and images of text must have a contrast ratio of at least 4.5:1, to get more information about it please visit the section about Accessible Fonts and Typography for Section 508 Compliance. Text should be resizable up to 200% without losing functionality. Text is preferred over images of text for conveying information, except for exceptions like logos. Images of text should only be used for decoration or when they are essential. Regarding content that appears on mouse hover or focus, it should be easy to dismiss, persistent, and navigable.

2. Operable

Guideline 2.1 Keyboard Accessible
It's important to ensure that all content functionality is accessible via keyboard and without specific timing for key presses. If keyboard focus can move to a component with the keyboard, it should also be able to move out of that component using only the keyboard. If something more than arrow keys, tab, or other standard exit methods is required, the user must be informed about how to move the focus.

Guideline 2.2 Enough Time
Provide users with enough time to read and use the content. Every set time limit should allow the user to turn it off, adjust its duration, or extend the time before it expires. For content that moves, blinks, scrolls, or updates automatically, there must be a mechanism that allows the user to pause, stop, or hide this information. Time should not be essential for the activity or event presented, except for non-interactive synchronized media and real-time events. When an authenticated session expires, the user should be able to continue the activity without data loss after re-authenticating.

Guideline 2.3 Seizures and Physical Reactions
This guideline focuses on preventing seizures and physical reactions caused by web content. Web pages should not contain elements that flash more than three times in a one-second period. Animation triggered by interaction can be disabled unless the animation is essential for the functionality or the information being conveyed.

Guideline 2.4 Navigable
This guide focuses on improving the navigability of websites by providing methods to help users navigate, find content, and determine their location. A mechanism should be offered to bypass blocks of content that are repeated on multiple web pages. Headings and labels should describe the topic or purpose. Focusable components should receive focus in an order that preserves meaning and operability. Keyboard-operable interfaces should have a mode where the focus indicator is visible.

Guideline 2.5 Input Modalities
This guide focuses on making it easier for users to operate functionalities through various input modalities beyond the keyboard. Any functionality that uses multipoint or path-based gestures should be operable with a single pointer without the need for path-based gestures, unless they are essential.

3. Understandable

Guideline 3.1 Readable
It's important to make text content readable and understandable. The language displayed on web pages should automatically match the one spoken in the user's country. There must be a mechanism to identify the meaning of abbreviations, idioms, and jargon.

Guideline 3.2 Predictable
The guide aims for web pages to function in a predictable manner. If the user selects something on the page, it should not take them somewhere else unless this action is predictable.

Guideline 3.3 Input Assistance
The guide focuses on helping users avoid and correct mistakes. If an error is detected, the element with the error should be identifiable, and the error must be described to the user in text. Instructions should be provided to the user to prevent or correct errors.

4. Robust

Guideline 4.1 Compatible
The guide focuses on maximizing compatibility with assistive technologies. In content implemented with HTML, elements must have complete start and end tags, be nested correctly, not contain duplicated attributes, and have unique identifiers. In content implemented using HTML, status messages must be identified through role or properties, so they can be presented to users by assistive technologies without needing to receive focus. This ensures that users are aware of important status changes.

Tools and Browser Extensions for Implementing and Improving Web Accessibility

In order to promote the accessibility of our products, we should assess them and understand what needs to be done. 

To achieve this, a wide variety of tools exist that not only provide us with a clear view of the areas that require improvement but also offer us practical recommendations and detailed guidelines to address and solve the identified accessibility issues.

Here’s a curated list of tools that we've found to be incredibly beneficial for those aiming to enhance the web accessibility of their projects. This guide features a step-by-step approach, focusing on the options available through browser extensions. Additionally, we include detailed descriptions of the most important features of each tool, highlighting the aspects that are most useful or interesting for our work.

Lighthouse

This tool was created by Google to improve the quality of web pages. It is extremely useful and automatically included within the browser, making it very accessible for users. For us, the most interesting feature of this tool is that it provides comprehensive reports and metrics.

The score provided by Lighthouse is significant as it serves as a familiar benchmark for many. It's always beneficial to obtain this score and use it as a reference point. 

Here’s the step-by-step process on to get it in your browser:

1. Launch the Google Chrome browser and open the website to analyze.
2. “Inspect“ the page to see Chrome Developer Tools panel.
3. Click on the “Lighthouse“ tab. 
4. Select accessibility category and choose the specific device you wish to evaluate.

5. The image displays the Lighthouse tab with the device set to "Desktop." The category chosen is "Accessibility." Clicking on the "Analyze page load" button generates the Lighthouse report.

   
6. The image showcases the Accessibility score, which in this instance is 100.

WAVE Accessibility Evaluation Tool

This tool was made by WebAIM and is available for Chrome, Firefox and Microsoft Edge. It provides detailed information and practical recommendations to correct errors with an educational approach. 

Similar to Lighthouse, WAVE also offers flexible usage options, including a browser extension, direct analysis through its website, and access via WAVE's API. WAVE extension operates entirely within the browser, ensuring that no data is transmitted to external servers. This guarantees a secure and private accessibility reporting experience, safeguarding confidentiality.

WAVE simplifies the identification of accessibility issues by using an intuitive icon system, where each color-coded icon signifies a different aspect of accessibility:

• Red icons indicate errors that directly impact accessibility and should be addressed promptly to ensure the site is accessible to all users.
• Yellow icons represent warnings or potential issues that may not affect all users but require manual verification to determine their impact on accessibility.
• Green icons signify areas where good accessibility practices have been implemented, highlighting the positive aspects of the site's accessibility.
• Blue icons are related to the structural elements of the page, providing insights into the organizational framework that supports accessibility.
• Purple icons focus on the use of Accessible Rich Internet Applications (ARIA) properties. While some of these icons point out well-implemented ARIA practices, WAVE also alerts to instances where ARIA properties may be misused or incorrectly applied.

By employing WAVE to evaluate your site, you gain a comprehensive overview of its accessibility, presented through an easy-to-understand system of icons. This approach not only helps to identify areas for improvement but also acknowledges effective accessibility practices already in place. 

Now, we'll describe the step-by-step guide to using the tool, focusing on the WAVE tool through its Google Chrome browser extension. The process is very similar to using the WAVE Web Accessibility Evaluation Tools webpage:

1. First, launch the Google Chrome browser and open the website to analyze.
2. Click on the WAVE Evaluation Tool icon in your browser's extension area. This will initiate the analysis of the currently open website.
3. From the browser extension select WAVE Evaluation tool, on the left side you’re going to see a sidebar with all the information that WAVE provides.
4. Once WAVE has completed its evaluation, a sidebar will appear on the left side of your screen, presenting a detailed breakdown of the accessibility analysis.
5. You'll notice the website now overlaid with various color-coded icons, each representing different aspects of accessibility. For instance, clicking on a red icon will reveal the nature of an accessibility error.
6. After selecting an error by clicking on its corresponding icon, you have the option to further delve into the specifics:
   • Click on the "CODE" button to view the HTML code that is associated with the identified issue. This feature allows you to pinpoint exactly where the problem lies within your webpage's markup.
   • For an even deeper understanding, clicking on the "REFERENCE" option will redirect you to the "Reference" tab within the sidebar. Here, WAVE offers a comprehensive explanation of the error, including "What it means," "Why it matters," "How to fix it," and very importantly, "Links to standard guidelines." These guidelines link directly to WCAG documentation, offering a learning opportunity about accessibility standards.

7. On the left side, you will find all the information provided by WAVE. The icon system is located on the right side.

8. The "Order" Tab presents the sequence, role, and accessible names (as interpreted by screen readers) of all navigable elements on the page.
9. The "Structure" Tab helps to view the comprehensive structure of the webpage, including its headers, main content, footers, and all associated tags, to ensure a semantic layout of the page.
10. The "Contrast" Tab presents issues related to color contrast, offering an immediate and straightforward method to adjust colors and achieve the required contrast ratios.

Like Lighthouse and WAVE, Siteimprove offers versatile options for evaluating web accessibility, including browser extension, via Siteimprove's API integration, etc.

For us, one of the most valuable aspects of Siteimprove is its provision of code examples for rectifying accessibility issues.

Here’s a step-by-step guide on how to utilize this tool. As with the previous tools, we’ll focus on utilizing the Siteimprove browser extension:

1. Launch the Google Chrome browser and open the website to analyze.
2. Click on the Siteimprove Evaluation Tool icon in your browser's extension area. This will initiate the analysis of the currently open website.
3. After the analysis is complete, Siteimprove will display a list of accessibility issues found on your website, organized by issue type. This organization helps you prioritize which issues to address first based on their impact.
4. To get more detailed information on a particular issue, click on it. Then, select the "Code Example" button. Siteimprove will then present you with practical solutions and code snippets to help correct the problem in your web page's code.

5. The image will show a list of issues found on a website, organized by issue type.

6. Finally, the tool provides you examples about how to fix the issues found.

Accessibility Insights for Web

This tool was made by Microsoft and is available for Chrome and the new Microsoft Edge (based in Chromium). This tool is available as a browser extension.

It features two main functionalities:

1. The first one is “FastPass“ an expedited assessment process that shows high-impact accessibility issues. Within FastPass, the tool encompasses sub-features, examples: 

• Automated checks: Offers a preliminary scan that identifies issues automatically, similar to other tools like WAVE, providing an initial overview of potential accessibility concerns.

• Tab stops: This innovative feature distinguishes Accessibility Insights by visually mapping out all focusable elements on a page. It effectively illustrates the path a user would take when navigating through a site using a keyboard. This part is one of the most interesting things about the tool. Alongside the visual guide, Accessibility Insights offers detailed instructions on utilizing the feature effectively. Moreover, it includes options for conducting manual assessments and a dedicated space for annotating observations and corrective actions.

2. The second main functionality is “Assessment“. This page contains a summary that indicates the progress of your assessment. An assessment is a manual experience in which you navigate through a set of tests that cover all WCAG 2.1 AA success criteria.

Considering Web Accessibility From Start to Finish

We suggest considering A11y as an opportunity to innovate and open your digital products to a wider audience instead of just viewing it as a legal requirement or a checklist. By implementing A11y guidelines, you will not only be complying with laws and avoiding potential legal issues but also contributing to a more inclusive and equitable digital world.

For this reason, we invite you to follow the principles and guidelines above, and explore the mentioned tools, considering accessibility from the initial phase of your projects.

Let's remember that A11y is not just a responsibility we have as web content creators, but it is also a fundamental pillar of good web design and development practices.

Learn more about the most common issues and requirements of A11y in our article here.

Need help improving your website's accessibility or want an audit? Get in touch with us today.