Getting started with Grunt Tenon Client

by: Joe Watkins

  • 01 December 2014

Web Accessibility / A11Y is finally on a path of owning more mindshare in the web development community. It has a long way to go but will get there eventually when we learn more about all the positive side effects gained from injecting basic web accessibility practices into our workflow.

Learning about web accessibility can be a daunting task, which probably why it is taking so long to become automatic for developers to include in their code. A11Y is not hard to learn, but resources are scattered and not very fun to soak up. There are, however, tools popping up to make this easier which is great for you and A11Y.

Ideally web accessibility should be considered in every phase of a project: Discovery, Content Planning, IA, Design, Prototyping, Development, QA and beyond. In this post we are going to focus on the workflow/tooling development phase.

Introducing Tenon.io

“Tenon is a one of a kind accessibility testing tool in that it is aimed at offering unprecedented flexibility in tooling for designers developers testers and content authors” - tenon.io

Tenon.io is a totally awesome web accessibility testing platform that you must check out! It is headed by web accessibility specialist Karl Groves. You can visit Tenon.io and plunk in a url to perfom robust web accessibility tests in your web browser. While this project is in its early phases (beta currently at the time of this post), it will only get better and I’m very excited about its potential.

Tenon.io has opened up their API up to the public and have created Grunt/Gulp tasks for everyone to use… lets see how we can do it!

Grunt-Tenon-Client

Grunt Tenon Client is a Grunt Plugin for the Tenon Accessibility Testing API. While Tenon.io makes it super simple to test websites using their web services, there is a way to take advantage of their great API using a Grunt plugin. There is also a Gulp version of this. I am going to walk through the basic setup of this Grunt plugin.

**I assume you know what Grunt.js is. I also assume you understand how to configure and manage a basic Gruntfile and that you know how to use NPM.


Video Demo

Here is a quick video demo (no sound) of Grunt Tenon Client in action. In this video I am running Grunt and then making edits to an html file that has accessibility issues in the page so we can see the Tenon catch them.


Getting Started

###Step 1 Obtain API Key You will need to sign up for a free account at Tenon.io. Once your account is approved you will be given a unique API key.

Tenon.io Account Area


###Step 2 - Install Plugin From the command line run:
npm install grunt-tenon-client --save-dev


###Step 3 - Configure Grunt Add the basic task to your Gruntfile.js

tenon: {
	options: {
		key: 'you api key here', // ADD YOUR API KEY HERE
		filter: [31, 54], // The tID maps to the specific unique ID for the test that was failed.
		level: 'AA' // WCAG AA OR AAA
	},
	all: {
		options: {
			saveOutputIn: 'allHtml.json', // output file for errors
			snippet: true, // show code snippet for errors?
			asyncLim: 2 // the maximum number of files to test in parallel. Default is 1
		},
		src: ['index.html'] // what file(s) to check
	}
}

Make sure this task is part of the watch task or create a separate task to run Tenon on it’s own.

watch: {
	html : {
		files : ['**/*.html'],
		tasks : ['tenon']
	}
}

Full Gruntfile.js example

In this example I also am using load-grunt-tasks and grunt-contrib-watch

'use strict';

module.exports = function (grunt) {

	// Load grunt tasks automatically
	require('load-grunt-tasks')(grunt);

	grunt.initConfig({

		watch: {
			html : {
				files : ['**/*.html'],
				tasks : ['tenon']
			}
		}, // watch

		tenon: {
			options: {
				key: 'you api key here',
				filter: [31, 54],
				level: 'AA'
			},
			all: {
				options: {
					saveOutputIn: 'allHtml.json',
					snippet: true,
					asyncLim: 2
				},
				src: ['index.html']
			}
		}

	}); // initConfig

	grunt.registerTask('default', ["watch"]);

};

##Step 4 - Watch for errors After you have Grunt setup and running it is time to start testing. Make an edit to some HTML and watch the terminal for errors from Grunt Tenon Client.

Grunt Tonon Client Errors

Example Files

I created a project that includes starter files that you can grab from Github. I hope you consider integrating this tool into your workflow.