2016-02-04

Improve your website accessibility with Vorlon.js and aXe

To celebrate the recent publication of Vorlon.js 0.2.1. I’d like to talk about a feature we recently introduced to the Best Practices plugin: Accessibility Analysis.

If you’re not familiar with Vorlon.js, I suggest you visit these pages first:

· https://vorlonjs.io/#getting-started

· https://blogs.msdn.microsoft.com/eternalcoding/2015/04/29/why-we-made-vorlon-js-and-how-to-use-it-to-debug-your-javascript-remotely/

A quick glance at the Best Practices plugin

Before jumping into the main topic of this article, let me present what the Best Practices plugin does.

You can find it in your Vorlon.js dashboard, here:

This plugin is designed to provide guidance regarding web standards, accessibility, performance and the mobile web.

Internally, it uses a set of rules that you can find here: https://github.com/MicrosoftDX/Vorlonjs/tree/master/Plugins/Vorlon/plugins/webstandards/rules

We’re looking to provide more rules in order to help web developers create the best possible experience.

Once an analysis is done, clicking on a rule with a red cross provides more context about the issue detected:

Whenever possible, we’ll suggest a solution (like this example, where we’ve highlighted missing CSS rules).

Analyzing accessibility of a webpage

But the really big news here is we’ve completely rewritten the accessibility analysis.

Providing a decent analysis for accessibility is a gigantic task and no one on the Vorlon.js team felt really confident about developing it. That’s why we decided to team up with Deque Systems in order to embed their accessibility engine (aXe) into our analysis.

In their own words:

“Deque System’s aXe (The Accessibility Engine) open source library is a lightweight (~100 KB), fast, portable JavaScript library that executes automated accessibility testing inside your testing framework or browser of choice”

aXe runs client-side checks against webpages for common accessibility problems, mapping them to accessibility standards such as WCAG 2.0 Level AA or Section 508. A portion of these checks include:

· Missing form labels

· Color contrast issues

· Incorrect use of ARIA

· Disabled user scaling in viewport meta tags

· Missing language attributes

· Focusable elements missing text

The result is pretty impressive. Once the Best Practices plugin has run the complete analysis, you can go to the Accessibility tab and get really precise information about what you may need to change:

aXe provides you with a convenient explanation of the issue. It also pinpoints where the issue is located, and even references the Web Content Accessibility Guidelines 2.0 (WCAG).

So what’s your ultimate goal, then? Get a perfect score like this one (I ran the Best Practices plugin on Deque’s website):