Accessibility refers to the design and development of products, devices, services, or environments to be usable by people with disabilities. The goal is to provide equal access and equal opportunities to all individuals, regardless of their abilities or disabilities.
Accessibility guidelines are a set of rules and standards that help ensure that products, devices, services, or environments are accessible to individuals with disabilities. These guidelines cover a wide range of topics, such as text alternatives for non-text content, contrast ratios, resizing text, sign language interpretation, extended audio descriptions, and more.
The accessibility guidelines are divided into different levels of conformance to indicate the level of accessibility required. The most widely used set of guidelines, WCAG 2.1 (Web content accessibility guidelines 2.1), is divided into three levels of conformance: A (minimum), AA (intermediate), and AAA (advanced).
The A level provides the minimum level of accessibility, while the AAA level provides the highest level of accessibility. The AA level is considered the industry standard for accessibility. The choice of level depends on the needs of the target audience and the resources available for implementation.
In this series, we will be looking at the different common areas of a website where accessibility testing is necessary. This part covers the first basic sitewide checks that are the basis of accessibility tests.
Basic high-level checklist for accessibility
Based on the guidelines and the standard, there is a basic high-level checklist for accessibility that is followed at all accessibility levels :
1. HTML validation
HTML validator tools like the Wave tool can easily analyze the HTML validation process. This tool verifies the webpage's compliance with accessibility guidelines and detects any accessibility obstacles. As quality assurance professionals, it is crucial to ensure that the Wave tool does not detect any errors.
In the event of an error, the screen reader may not work. Upon resolution of all errors identified by the Wave tool, it can be asserted that the fundamental principles of accessibility have been satisfactorily addressed.
Eg: Alt text is missing, a nested heading is missing, a form label is missing, contrast issues etc.
Wave tool example with issues in details
Another similar tool that can be used is AxeDev tools, which can be used to validate a whole website at a time, but only limited features like full-page scans are available for free version. It gives a list of issues with details, and issue severity.
Axe Devtool example
Another tool that can be utilized is Google Lighthouse. This can be easily integrated with the dev tools in Chrome and executed on each page of your website. The reports also can be exported.
For More detailed implementations of these tools please refer to our other blog.
2. Keyboard accessibility
All links, drop-down menus, and form controls must be operable via keyboard accessibility. Failure to do so will obstruct users from accessing related functionalities and features. This requirement falls under the levels of A, AA, and AAA in terms of accessibility standards.
Verify that the tab order follows a logical sequence. DOM order should match the visual order in the front end which will help improve navigation for assistive technology.
Example of a dropdown menu accessible via screen reader additionally link interaction with screen reader , which announce we can click link using the following keyboard shortcut
3. Semantic HTML
Semantic HTML plays a crucial role in making web content more accessible and understandable for both users and automated systems. All this is required as per the WCAG A, AA and AAA standards. When testing the semantic structure of HTML, consider the following checklist:
- Usage of right HTML tags for semantic elements such as some text
- <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer>.
- For media elements <img>, <audio> and <video>
- Tables must use structural elements like <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td>.
- List must have <ul> and <li> tags
- Heading elements (<h1> to <h6>) are used in a logical and hierarchical order to provide a meaningful document structure
- Ensure that all links have descriptive and meaningful text.
- Use ARIA roles and attributes appropriately to enhance the accessibility of dynamic content.
- Use semantic grouping elements such as <div>, <span>, <fieldset>, and <legend> appropriately.
Example of a simple semantic HTML structure :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic HTML Example</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Hello</h2>
<p>This is our Website</p>
<img src="sample-image.jpg" alt="A descriptive image">
</section>
<section>
<h2>Services</h2>
<ul>
<li><strong>Web Design and development</li>
<li><strong>Quality Assurance</li>
</ul>
</section>
</main>
<footer>
<p>2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>
Here in the above example:
- The <header> contains the main heading of the page and a navigation menu.
- The <main> element contains two <section> elements, each representing a distinct section of content.
- Inside each <section>, there are semantic elements like <h2> for subheadings and <p> for paragraphs. <img> element for an image with descriptive alt text.
- The navigation menu uses an ordered list (<ul>) with list items (<li>) and hyperlinks (<a>).
- The <footer> element at the bottom of the page includes copyright information.
4. Focus visibility
It is imperative from an accessibility standpoint that the currently focused element is consistently visible on the screen with an outline. This is crucial in order for the user to accurately identify the cursor's position. It falls under the levels of A, AA, and AAA in terms of accessibility standards.
Two main checks must be done to verify if the elements are focused in the right way
Focus with no screen reader
Focus with screen reader
5. Contrast ratio
It is crucial to follow the accessibility guidelines to ensure that users with visual impairments can easily read the text. The appropriate contrast ratio should be maintained for all text on the website, including headings, body text, and buttons. This is to prevent confusion and improve readability for users with visual impairments.
Ignoring these guidelines may result in a negative user experience and should not be overlooked. It is the responsibility of both design and development teams to make sure the website follows the accessibility standards.
The contrast ratio can be easily verified by the WAVE tool extension. This really helps in detecting the variation in any contrast ratio standards , which is a bit difficult to find manually.
Wave Tool Contrast detection
Conclusion
So these are the basic high-level criteria that are mandatory in every website which are following A, AA, AAA and help in maintaining a high level of accessibility. By prioritizing and testing these, you contribute to creating a more inclusive web experience for all users, including those with visual or motor impairments.
In the next coming series of blogs, we will look into the different common elements in websites.
Happy Testing!