Web Accessibility: A Comprehensive Guide for Developers
AdvanceWorks
Purpose: to create great software that drives our client’s business forward, while developing the talent of our people.
Preamble
Web accessibility is an essential practice that aims to make online content and functionalities accessible to all people, regardless of their abilities, disabilities, or preferences. This comprehensive guide will explore various aspects of web accessibility, from definitions to practical tools for developers.
Introduction
Web accessibility refers to the practice of ensuring that websites are accessible to everyone, promoting full participation in the digital society. This approach not only meets legal requirements but also contributes to an inclusive online experience for all users.
Technical Standards and Regulations for Web Accessibility
Technical standards, such as EN301549 and the Web Content Accessibility Guidelines (WCAG) 2.1, provide comprehensive recommendations to enhance web accessibility. The Web Content Accessibility Guidelines (WCAG) establish fundamental principles like Perceivable, Operable, Understandable, and Robust. These standards serve as a foundation to ensure that websites meet acceptable criteria.
Regulations like the EU Accessibility Act, ADA, and WCAG are fundamental to ensuring global compliance and accessibility. These regulations cover different jurisdictions and have a significant impact on website accessibility.
Technical Standards:
EN301549:
Web Content Accessibility Guidelines (WCAG) 2.1:
Regulations:
EU Accessibility Act:
Americans with Disabilities Act (ADA):
Web Content Accessibility Guidelines (WCAG) - Part of Both Standards and Regulations:
WCAG:
In summary, while technical standards like EN301549 and WCAG provide guidelines for web accessibility, regulations such as the EU Accessibility Act and ADA establish legal requirements in specific regions. WCAG serves as a common reference point, aligning with both technical standards and regulations globally
Tools and Techniques for Web Accessibility
Developers play a crucial role in ensuring accessibility. The correct use of HTML elements, such as header tags and alternative text for images, is fundamental. Assistive technologies like screen readers and magnifiers are essential. Additionally, specific tools like AccessMonitor and Sublime can help assess a site's accessibility.
HTML Code Examples
See practical HTML code examples, both non-compliant and compliant, illustrates the importance of following guidelines to ensure accessibility:
Non-Accessible HTML Code for Images
<img src="https://www.advanceworks.ai/img/industries/thumbs/healthcareThumb.jpg"> <img src="https://www.advanceworks.ai/img/industries/thumbs/healthcareThumb.jpg" alt="">
?
In this example, the HTML code does not provide alternative text for the images, leaving users who cannot see them without access to the transmitted information.
?
Accessible HTML Code for Images
<img src="https://www.advanceworks.ai/img/industries/thumbs/healthcareThumb.jpg" alt="AdvanceWorks Logo"><img src="https://www.advanceworks.ai/img/industries/thumbs/healthcareThumb.jpg" alt="A scientist interacting with analysis equipment.">
In this example, the HTML code provides alternative text for the images, describing their content and purpose for users who cannot see them.
?
Non-Accessible HTML Code for Forms
<form action="submit" method="POST">???
Name: <input type="text" id="name"><br> ???
Email: <input type="email" id="email"><br>???
Password: <input type="password" id="password"><br>???
Comment: <textarea id="comment"></textarea><br>???
<input type="submit" value="Submit"></form>
In this example, the HTML code does not associate labels with input fields, leaving users without a clear and consistent reference to what they should fill in each field.
?
Accessible HTML Code for Forms
<form action="submit" method="POST">???
<label for="name">Name:</label>???
<input type="text" id="name"><br>???
<label for="email">Email:</label>???
<input type="email" id="email"><br>???
<label for="password">Password:</label>???
领英推荐
<input type="password" id="password"><br>???
<label for="comment">Comment:</label>? ?
<textarea id="comment"></textarea><br>???
<input type="submit" value="Submit"></form>
In this example, the HTML code associates labels with input fields, using the 'for' attribute in the?<label>?tag and the 'id' attribute in the?<input>?or?<textarea>?tag. This facilitates user identification and interaction with input fields, providing a clearer and more consistent experience.
Despite the fact that both forms look exactly the same from a visual point of view, in the latter case, the form has a much greater degree of accessibility. This extra effort to correlate visual elements ensures that a larger portion of the web page's audience will be able to interact with the form and submit data.
?
Importance of HTML Semantics and ARIA Attributes
The proper use of HTML semantics, such as?<nav>,?<main>, and?<article>?tags, significantly contributes to accessibility. These tags provide a clear structureto the content, making it easier for assistive technologies to navigate and understand the content
In addition to HTML semantics,?ARIA attributes?provide additional information for assistive technologies. ARIA stands for?Accessible Rich Internet Applications?and is a set of roles and attributes that define ways to make web content and web applications more accessible to people with disabilities.
ARIA enables accessible JavaScript widgets, form hints and error messages, live content updates, and more. However, it is important to note that developers should prefer using the correct semantic HTML element over using ARIA, if such an element exists.
The first rule of ARIA use is "If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so."
Here is an example of how to use ARIA attributes to create a progress bar widget:
?
HTML Code Example
<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
In this example, the?role="progressbar"?attribute informs the browser that this element is actually a JavaScript-powered progress bar widget. The?aria-valuemin?and?aria-valuemax?attributes specify the minimum and maximum values for the progress bar, and the?aria-valuenow?describes the current state of it and therefore must be kept updated with JavaScript.
?
Color Contrast and Its Relevance
Adequate contrast between text and background is crucial to ensure readability, especially for people with visual impairments. Tools like the "Color Contrast Checker" assist in maintaining appropriate contrast.
Adequate contrast between text and background is crucial to ensure readability, especially for people with visual impairments. Tools like the "Color Contrast Checker" assist in maintaining appropriate contrast.
The contrast ratio is a measure of the difference between the minimum brightness and maximum brightness of a monitor 1. It is calculated by dividing the relative luminance of the lighter color by the relative luminance of the darker color, using the following formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color 2. The contrast ratio ranges from 1:1 (no contrast at all) to 21:1 (the highest possible contrast) 2. The contrast ratio was created by Lea Verou.
Positive Example:
<!-- Positive Example: Adequate Contrast --><p style="color: #333; background-color: #fff;">??? Adequate contrast between text and background is crucial to ensure readability, especially for people with visual impairments.</p>
"Adequate contrast between text and background is crucial to ensure readability, especially for people with visual impairments."
In this example, the text color (#333) and background color (#fff) have sufficient contrast, making the text easily readable. The the text color (#333) and background color (#fff) have sufficient contrast, making the text easily readable. The contrast ratio for this example is greater than or equal to 4.5:1 for normal text and 3:1 for large text (at least 18pt) or bold text, which meets the minimum contrast requirements for accessibility according to the Web Content Accessibility Guidelines (WCAG).
Test it by yourself using the following tool:?coolors.co
?
Negative Example:
<!-- Negative Example: Inadequate Contrast --><p style="color: #999; background-color: #eee;">Adequate contrast between text and background is crucial to ensure readability, especially for people with visual impairments.</p>
In this example, the text color (#999) and background color (#eee) have inadequate contrast, which can make the text challenging to read, particularly for individuals with visual impairments. The text color (#999) and background color (#eee) have inadequate contrast, which can make the text challenging to read, particularly for individuals with visual impairments. The contrast ratio for this example is less than 4.5:1 for normal text and 3:1 for large text (at least 18pt) or bold text, which does not meet the minimum contrast requirements for accessibility according to the WCAG.
?
Web Accessibility Evaluation Tools
Tools like?WAVE,?WebAIM, and?Accessibility Checker?are essential for evaluating a site’s accessibility and assessing its compliance with accessibility standards. These tools analyze elements that may cause accessibility issues and provide correction suggestions. They generate detailed reports that facilitate the identification and correction of issues.
WAVE?is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities.?It can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content.
WebAIM?is a non-profit organization that provides web accessibility solutions.?Their evaluation tools include the?WebAIM Color Contrast Checker, which checks the contrast between two colors and determines if they meet the WCAG 2.0 requirements.
Accessibility Checker?is a free tool that identifies web accessibility issues and provides exact instructions for fixing them.?It checks for compliance with the Web Content Accessibility Guidelines (WCAG) and the Americans with Disabilities Act (ADA).
?
?
Usefull Browser Extensions
Stark Accessibility Checker?: It is a suite of integrated accessibility tools that helps designers, developers, product managers, and accessibility experts at 30,000+ companies accelerate time to digital accessibility compliance. It offers a wide range of integrated tools to create and test accessible software easily, including Contrast Checker, Focus Order, Alt-Text Annotations, Vision Simulator, and more.?Click here?to check the Firefox-Stats page of this extension.
IBM Equal Access Accessibility Checker: It is an open-source tool for web developers and auditors that utilizes IBM’s accessibility rule engine, which detects accessibility issues for web pages and web applications. It offers a wide range of integrated tools to create and test accessible software easily, including Contrast Checker, Focus Order, Alt-Text Annotations, Vision Simulator, and more.?Click here?to check the Chrome Web Store page of this extension.
?
Conclusion
Web accessibility is an ongoing journey. By following technical standards, regulations, and best practices, developers contribute to an online environment accessible to all. The use of appropriate tools and techniques is essential to ensure that the web is inclusive, promoting equal access and participation.
?
References and Citations
How to calculate colour contrast -?accessibility-developer-guide
Test it by yourself using the following tool:?coolors.co