ARIA Tabs

ARIA Tabs lets you write accessible tabs with minimal markup. It intelligently appends ARIA roles and attributes to your tabs and panels, where implied or duplicated data would have reduced readability.

<!-- BEFORE -->
<ul role="tablist">
	<li>
		<a href="#foo" aria-selected="true">Foo</a>
	</li>

	<li>
		<a href="#bar">Bar</a>
	</li>

	<li>
		<a href="#qux">Qux</a>
	</li>
</ul>

<section id="foo">
	This is the foo tab.
</section>

<section id="bar">
	This is the bar tab.
</section>

<section id="qux">
	This is the qux tab.
</section>

<!-- AFTER -->
<ul role="tablist">
	<li role="presentation">
		<a href="#foo" aria-selected="true" id="foo-tab" role="tab" aria-controls="foo">Foo</a>
	</li>

	<li role="presentation">
		<a href="#bar" id="bar-tab" role="tab" aria-controls="bar">Bar</a>
	</li>

	<li role="presentation">
		<a href="#qux" id="qux-tab" role="tab" aria-controls="qux">Qux</a>
	</li>
</ul>

<section id="foo" role="tabpanel" aria-labelledby="foo-tab">
	This is the foo tab.
</section>

<section id="bar" role="tabpanel" aria-labelledby="bar-tab" hidden>
	This is the bar tab.
</section>

<section id="qux" role="tabpanel" aria-labelledby="qux-tab" hidden>
	This is the qux tab.
</section>

For a fully accessible implementation, client.js should be included somewhere in the front-end.

Usage

Add ARIA Tabs to your build tool:

npm install posthtml-aria-tabs --save-dev

Node

require('posthtml-aria-tabs').process(YOUR_HTML);

PostHTML

Add PostHTML to your build tool:

npm install posthtml --save-dev

Load ARIA Tabs as a PostHTML plugin:

posthtml([
	require('posthtml-aria-tabs')()
]).process(YOUR_HTML);

Gulp

Add Gulp PostHTML to your build tool:

npm install gulp-posthtml --save-dev

Enable ARIA Tabs within your Gulpfile:

var posthtml = require('gulp-posthtml');

gulp.task('html', function () {
	return gulp.src('./src/*.html').pipe(
		posthtml([
			require('posthtml-aria-tabs')()
		])
	).pipe(
		gulp.dest('.')
	);
});

Grunt

Add Grunt PostHTML to your build tool:

npm install grunt-posthtml --save-dev

Enable ARIA Tabs within your Gruntfile:

grunt.loadNpmTasks('grunt-posthtml');

grunt.initConfig({
	posthtml: {
		options: {
			use: [
				require('posthtml-aria-tabs')()
			]
		},
		dist: {
			src: '*.html'
		}
	}
});