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:

1. EN301549:
   • Creation Date: EN301549 is a European standard that originated from the European Telecommunications Standards Institute (ETSI). It was initially published in 2014.
   • Coverage: EN301549 is a European standard, and it primarily focuses on providing accessibility requirements suitable for public procurement of ICT products and services.
2. Web Content Accessibility Guidelines (WCAG) 2.1:
   • Creation Date: The WCAG 2.1 was developed by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). It was officially published on June 5, 2018.
   • Coverage: WCAG is an international standard and is not specific to any particular country or region. It serves as a globally recognized set of guidelines for web accessibility.

Regulations:

1. EU Accessibility Act:
   • Creation Date: The EU Accessibility Act was officially approved by the European Parliament in 2019.
   • Coverage: The EU Accessibility Act is specific to the European Union. It aims to harmonize accessibility requirements for certain products and services, including websites and mobile applications, across EU member states.
2. Americans with Disabilities Act (ADA):
   • Creation Date: The ADA was signed into law on July 26, 1990.
   • Coverage: The ADA is a United States federal law. It prohibits discrimination against individuals with disabilities and applies to various aspects of public life, including accessibility requirements for digital content.

Web Content Accessibility Guidelines (WCAG) – Part of Both Standards and Regulations:

• WCAG:
  • Creation Date: The initial version of WCAG (1.0) was published in 1999, and it has undergone updates since then. WCAG 2.0, a significant revision, was published in 2008, and WCAG 2.1, the latest version, was published in 2018.
  • Coverage: WCAG is an international standard and is often referenced in various regulations worldwide. It provides guidelines for making web content more accessible to people with disabilities.

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="">

Preview:

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.">


Preview:

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>


Preview:

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>


Preview:

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>


Preview:

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>


Preview:

Adequate contrast between text and background is crucial to ensure readability, especially for people with visual impairments.

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.

Test it by yourself using the following tool: coolors.co

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

1. Talita Pagani – talitapagani.com
2. Acessibilidade Portugal – acessibilidade.gov.pt
3. Neil Patel – neilpatel.com
4. Alura – alura.com.br
5. Voitto – voitto.com.br
6. Desenvolvimento para Web – desenvolvimentoparaweb.com
7. Mozilla Developer – developer.mozilla.org
8. Desenvolvimento Acessível – desenvolvimentoacessivel.com
9. UX Sapo – ux.sapo.pt
10. Acessibilidade.net – acessibilidade.net
11. CTI IFRS – cta.ifrs.edu.br
12. Mailchimp – mailchimp.com
13. TIC Portugal – tic.gov.pt
14. Acessibilidade para Todos – acessibilidadeparatodos.com
15. Hand Talk – handtalk.me
16. UFRGS – ufrgs.br
17. UX Design Brasil – brasil.uxdesign.cc
18. EN301549 – European Standard EN 301 549 V2.1.2
19. Web Content Accessibility Guidelines (WCAG) 2.1
20. EU Accessibility Act – Directive (EU) 2019/882 – EU Accessibility Act
21. Americans with Disabilities Act (ADA) – Americans with Disabilities Act (ADA)
22. Americans with Disabilities Act (ADA) – Legislative History – ADA National Network
23. Web Content Accessibility Guidelines (WCAG) History – W3C – WCAG Current Status – WebAIM – WCAG Timeline
24. How to calculate colour contrast – accessibility-developer-guide