Nine Tools to measure web Accessibility

6 min read taller Training

Accessibility has taken center stage, especially in recent years, in the field of web design. This should not be a sign of surprise since more and more people with hearing or visual disabilities predominate, among many others. Designers precisely play a fundamental role when it comes to finding web content that can be consumed by anyone, regardless of whether or not they have a disability.

Today we want to help you on the path to accessible web design. We present different tools to carry out audits or simple web accessibility tests on your portals and content.

Contents
1. Youtube Closed Captioning
2. Color Contrast Analyzer for Sketch
3. Proof Setup in Adobe
4. ‘Wave’
5. NoCoffee
6. ACHeker
7. Photosensitive Epilepsy Analysis Tool
8. Accessibility Developer Tools
9. Color Oracle

Tools to measure web accessibility:

Youtube Closed Captioning

There are currently very few tools that allow designers and developers to access auditory aspects of web content. Although it is not an evaluation tool, YouTube natively offers a resource that can help increase accessibility within your video content. Likewise, optional closed captioning allows you to show your video content to a wider audience, specifically those who are hearing impaired, or those who speak different languages. Additionally, if you use YouTube to host or embed video content, you can take advantage of the manual transcription and subtitle functionalities within Video Manager.

Youtube - Tools to measure web accessibility in 2022

Color Contrast Analyzer for Sketch

This will allow you to test the accessibility of your designs for colorblind users, while working directly within Sketch. The tool gives you the ability to calculate the color contrast ratio of two layers (or a single layer against the design area) and evaluate it against WCAG standards. After completing the test, the plugin will give you positive or negative rating results based on WCAG AAA and AA color contrast requirements.

color contrast - Tools to measure web accessibility in 2022

Proof Setup in Adobe

Es una herramienta muy parecida a la anterior con la cual Adobe ha tomado medidas necesarias para incluir pruebas de accesibilidad para daltónicos dentro de su software de Ilustrator o de Photoshop. Its filters allow you to see what the design will be like for users with different color blindness, protanopia and, above all, deuteranopia.  If you want to simulate color blindness, in the design, access the menu, press “View > Proof settings > Color Blindness” and select protanopia or deuteranopia. Once again, another great solution for evaluating the accessibility of your design as you work.

Proof Setup in Adobe - Tools to measure accessibility

‘Wave’

Another free tool designed to make web accessibility review easier by providing developers with a visual representation of issues directly on their page. Regarding comprehensive tests, these evaluate various accessibility issues, including color contrast to ARIA attributes, and are based on compliance standards from both WCAG and Section 508. This browser-based tool evaluates the page content after applying CSS, but does not evaluate any Javascript sources. If your site has a lot of dynamic scripted content, you can opt for the WAVE extension for Chrome, which also features 100% security and reporting, ideal for evaluating password-protected sites such as commerce portals and intranets.

wave - Tools to measure accessibility

NoCoffee

Se trata de una extensión gratis de Google Chrome que se puede utilizar para simular una amplia gama de problemas visuales entre los cuales se encuentran el daltonismo, la baja agudeza, la baja sensibilidad al contraste, los campos visuales obstruídos y otros tantos. It should be noted that NoCoffee will not necessarily evaluate and rate your website like other tools, although it will provide you with a unique perspective on the experience that visually impaired users have with your site.

nocoffee - Tools to measure accessibility

ACheker

A comprehensive accessibility review tool that uses HTML to evaluate the content of a single page. You can test your website by inserting the URL, uploading an HTML file, or pasting the source code directly into the tool. After you submit your page, AChecker quickly scans the HTML code and generates a report that identifies potential accessibility issues. There are some additional queries that can work in AChecker, including HTML and CSS validators, but you’ll find out a lot about your site’s accessibility by running the standard diagnostic procedure.

adchecker - Tools to measure accessibility

Photosensitive Epilepsy Analysis Tool

Free beta tool that allows you to test content to identify seizure risk using an analysis engine built by the Trace Center at the University of Wisconsin Madison. The process helps determine whether animations or videos used within your web content are susceptible to causing seizures in users with epilepsy. If you’re looking for more tools, Trace Center has other resources to help developers evaluate the accessibility of their work.

photosensitive-epilepsy-analysis-tool - Tools to measure accessibility

Accessibility Developer Tools

It is a Google Chrome extension. This adds a comprehensive accessibility audit and sidebar panel within Google Developer Tools (GDT). It has to install the GDT bar to run the audit, but it is a simple process: you just have to have your page open in Chrome, go to the accessibility panel in Developer Tools and click run. The audit will help you identify accessibility errors, including missing ARIA attributes, color contrast values, and more. You can read the full list of audit rules or suggest new features by reviewing github extensions.

Accesibility Developer Tools - Tools to measure accessibility

Color Oracle

This free app simulates various forms of color blindness by adding a full screen filter through your operating system (yes, it works with Windows, Mac OS, and Linux). The filter options show the most severe forms of color blindness: deuteranopia, protanopia, and tritanopia. If the design passes these filters, then you know that it will also be easily readable by people with color blindness. Considering that you can activate these filters on the fly, this is the perfect tool for visual designers who want to evaluate their designs as they work.

Color Oracle - Tools to measure accessibility

For digital content developers, in order to include the accessibility component in their products, we recommend these simple tools. And if you want to go one step further, we invite you to visit:

  • Explore the checklists created by Vox Media that allow you to perform an accessibility check according to your role in the project.
  • Visit the website of the W3C Web Accessibility Initiative, which explains this topic in depth, shares good practices and offers useful examples on web accessibility.
  • Get to know the tool OAW Rastreador, an open source application developed by the government of Spain that allows you to analyze the level of accessibility of a web page.
  • Discover how to improve the Web Accessibility of an ecommerce

Certifications and accreditations.

We have the certifications that endorse our experience in accessibility.

IAAP - International Association of Accessibility Professionals IAAP CERTIFIED
ISO 9001 - Sistema de Gestión de Calidad ISO 9001