posthtml-aria-tabs

    1.0.0 • Public • Published

    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'
            }
        }
    });

    Install

    npm i posthtml-aria-tabs

    DownloadsWeekly Downloads

    29

    Version

    1.0.0

    License

    CC0-1.0

    Last publish

    Collaborators

    • jonathantneal