posthtml-aria-tabs

v1.0.0
Write accessible tabs with minimal markup
posthtml html posthtml-plugin arias tabs lists panels automatic markup and 2 more...

ARIA Tabs

PostHTML Logo

NPM Version Build Status

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'
        }
    }
});
npm i posthtml-aria-tabs

Metadata

  • CC0-1.0
  • >=0.12.0
  • Jonathan Neal
  • released 1/5/2016

Downloads

Maintainers