As a step on the path of enabling software for all audiences and abilities, we’re happy to share a new Visual Studio extension that leverages Tenon’s HTML accessibility checker service. With this extension, we’ve made it easier for developers to detect and resolve common HTML-based user interface accessibility issues.

Unlike some other web-based accessibility checking services, Tenon’s service has a public API and is designed to be integrated with extensible tools like Visual Studio. We’d love for you to try it out by installing the extension Tenon HTML Accessibility Checker from the Visual Studio Gallery or from within Visual Studio.

(Note: We will publish the source code for the extension on GitHub in about a month so that you can improve upon or evolve the extension to support other accessibility checker services.)

Now, let’s go over this new extension in a little more detail.

Adding the Tenon HTML Accessibility Checker to Visual Studio

To get started, open a supported version of Visual Studio such as VS 2013, 2015 Preview or the free Visual Studio Community. Select the Tools menu, and then the Extensions and Updates option. Search for “accessibility” and select Install the Tenon HTML Accessibility Checker. Restart Visual Studio when prompted.

How to check your static HTML for common accessibility issues

First, register for a free key, which you will need later. (It only takes a few minutes.) Once you have installed the extension and registered for a key, open your project and right-click on any of the following code asset files in your solution (from Solution Explorer): *.htm, *.html, *.cshtml, *.xhtml, *.ascx, *.asp, or *.aspx file.

Solution Explorer with right click option on an *.html file

Select the Check Accessibility with Tenon option from the context menu to evaluate the content of the file. Enter your registration key, select the desired evaluation level, and indicate whether you want to see Errors and Warnings or only Errors in the results. Evaluation levels range from level A, which is the most conservative evaluation, through levels AA and AAA, which are broader evaluations. Choosing to display only Errors will minimize false positives but may omit valid warnings.

Tenon HTML Accessibility Checker pop-up window

Click Validate on the Tenon HTML Accessibility Checker pop-up window to evaluate the static HTML. The results are written to the Error List within Visual Studio, under the Errors and Warnings tabs as appropriate. The description of each issue includes a brief description, and a link to Tenon’s best practices, which include instructions on how to address the issue. You can see what WCAG Success Criterion are tested by Tenon on its What Tenon Tests page.

Error List with sample errors

Check your dynamic HTML too

In addition to HTML within a file, you can send the rendered content of dynamic pages to Tenon for evaluation. From the Solution Explorer, select the Project, then right-click and choose Debug > Start new instance. Your preferred browser will launch with the default page and the Tenon HTML Accessibility Checker pop-up window will be displayed. At this point, evaluate the default page, or navigate to another page and evaluate it by clicking Validate on the Tenon HTML Accessibility Checker pop up window.

This is the preferred approach, since rendered pages represent what an actual user would experience. For example, any dynamically rendered HTML or JavaScript will be included in this evaluation.

Note: You can disable the Tenon HTML Accessibility Checker pop up window by unchecking the Enable Tenon Browser Extension option on the Browser Link drop down menu.

Browser Link menu

Finally, it is worth noting that static html files cannot be evaluated in the debug mode unless you take some additional steps. You must add code to your web.config file as seen here: Using Browser Link in Visual Studio.

Add the Tenon HTML Accessibility Checker to IE

In addition to checking HTML accessibility using the Tenon service from within Visual Studio, you can use a simple Internet Explorer add-on to check published web pages for common accessibility issues.

To install the add-on, go to http://www.iegallery.com, click on the Add-ons tab, choose the Tenon Accessibility Checker and click Add to Internet Explorer. Once the add-on is installed, you can send a URL to the Tenon service by right-clicking a page and choosing the Check Accessibility with Tenon option.

Tenon Checker right click option from within IE

(Note: this option is only available for http:// pages; https:// is not supported.)

The Internet Explorer add-on does not require a free key, and is a good way to quickly check for common issues.

Help the community improve or re-implement the Visual Studio extension

We envision several new features for the Visual Studio extension, such as code highlights in each source file that is associated with a particular Error or Warning. Similarly, other accessibility checkers could implement this design pattern to make it easier for developers to create accessible apps--by incorporating their checks early in the software development lifecycle (in addition to checking solutions that are in production).

Please review and comment, update, or even re-implement this extension once the source code is published on GitHub.

Thanks

Special thanks to Karl Groves at Tenon. Karl has been working in accessibility for years and is already known to many people in the accessibility community. Karl continues to be a strong advocate for giving developers tools to make it easier to create accessible software. And he is a Viking. (Really.)

And, thanks for providing feedback by rating this article, sharing the article on social media and/or by adding a comment below.

Jeff Petty, Program Manager, Operating System Group (OSG) Accessibility Team Jeff has been at Microsoft for about a year. He is helping to envision and realize the promise of more people centric computing. Currently, he is focused on making it easier for developers to create accessible solutions with Microsoft technology and teaching his daughter how to ski :-)