May 2nd, 2016

Building accessible websites just got a lot easier

AccessibilityWhen building websites it is important that it is accessible for everyone that needs to use it. Implementing web accessibility features greatly helps to achieve that. Here’s what the W3C has to say about that:

Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.

The W3C continues to explain why it is important:

The Web is an increasingly important resource in many aspects of life: education, employment, government, commerce, health care, recreation, and more. It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with disabilities. An accessible Web can also help people with disabilities more actively participate in society.

It’s also good for business. For instance, if you run a web shop then you want to make sure that the largest number of people are able to purchase your products.

However, building websites that conform to accessibility standards such as WCAG 2.0 (by the W3C) or Section 508 (for US government compliance) has traditionally been rather cumbersome and required use of 3rd party web services such as the Wave Accessibility Checker. It is a disconnected experience that doesn’t provide a natural workflow for web developers. Instead, what is needed is a way to make accessibility features natural and easy to implement for web developers as part of their regular development process.

Enter Web Accessibility Checker!

This Visual Studio extension utilizes Browser Link for ASP.NET to run standards based accessibility checks on the live running website. There is no project specific setup required to make this work. Simply install the extension and run the website in any browser.

Under the hood, the extension uses the axe-core JavaScript library to perform the accessibility checking. The supported standards it checks for are:

  • WCAG Level A
  • WCAG Level AA
  • Section 508
  • Other best practices

When the extension finds any accessibility errors it displays directly inside the Error List window.

accessibility error list

The accessibility check can either run automatically when ASP.NET projects are run in the browser (F5 or View In Browser) or when manually invoked (Ctrl+Shift+M).

accessibility settings

When manually invoked, the extension will run the accessibility check on all browser instances that currently has the web project loaded. So if different pages are loaded in different browsers, the Error List will be populated with the combined set of errors.

If you haven’t already, go download Web Accessibility Checker and try it out. It works for any ASP.NET web project where Browser Link is able to connect. As usual, this extension is open source on GitHub.

0 comments

Discussion are closed.