Full WAI-ARIA Compliance?

Replies: 0

Thanks for including those accessibility enhancements! They go a long way to making the plugin easier to use.

I have been looking for a way to make the plugin completely WAI-ARIA compliant and originally thought that that would be best accomplished by using the aria-controls attribute. But after looking at this for a while, I can see now that that approach would involve some complex code that I feel would be best avoided.

But I have worked out an alternative approach that uses simple, robust code which can still make the plugin fully WAI-ARIA compliant.

First, all three references to aria-controls in jquery.listnav.glossary.js need to be removed. This means that lines 206-208 would change from this:

                        html.push( '<a class="ln-all" role="tab" aria-controls="panel-all" aria-selected="false" href="#">ALL</a>' );
                        if ( opts.includeNums ) {
                            html.push( '<a class="ln-_" tabindex="-1" role="tab" aria-controls="panel-_" aria-selected="false" href="#">0-9</a>' );

to this:

                        html.push( '<a class="ln-all" role="tab" aria-selected="false" href="#">ALL</a>' );
                        if ( opts.includeNums ) {
                            html.push( '<a class="ln-_" tabindex="-1" role="tab"  aria-selected="false" href="#">0-9</a>' );

Line 215 would then also change from this:

                    html.push( '<a class="ln-' + ( letters[i] === '-' ? '-' : i ) + ' lnletter-' + letters[i].toLowerCase() + '" tabindex="-1" role="tab" aria-selected="false" aria-controls="panel-' + letters[i].toLowerCase() + ' href="#" >' + ( ( letters[i] === '-' ) ? '...' : letters[i].toUpperCase() ) + '</a>' );

to this:

                    html.push( '<a class="ln-' + ( letters[i] === '-' ? '-' : i ) + ' lnletter-' + letters[i].toLowerCase() + '" tabindex="-1" role="tab" aria-selected="false"  href="#" >' + ( ( letters[i] === '-' ) ? '...' : letters[i].toUpperCase() ) + '</a>' );

The extra functionality needed for full WAI-ARIA compliance can then be added to listnav.js, which will then look like this:

/*
 * Inside this closure we use $ instead of jQuery in case jQuery is reinitialized again before document.ready()
 */
( function ( $ ) {
    "use strict";

    $( document ).ready( function () {

        if ( window.cmtt_listnav_data !== undefined && window.cmtt_listnav_data.listnav && window.cmtt_listnav_data.list_id ) {
            $( document ).ready( function ( $ ) {
                $( "#" + window.cmtt_listnav_data.list_id ).listnav( window.cmtt_listnav_data.listnav );
            } );
        }

        // Prevent scroll down when spacebar pressed
        document.getElementById( 'glossaryList-nav' ).addEventListener( 'keydown', function ( e ) {
            if ( ( e.keycode || e.which ) === 32 ) {
                e.preventDefault();
            }
        }, false );

        $( '.listNav' ).keydown( function ( e ) {
            if ( e.which === 39 ) { // 'right' arrow pressed
                e.preventDefault();
                if ($( e.target ).is( '.ln-last' ) ) {
					$( e.target ).attr( 'tabindex', '-1' ); // restore letter from which clicking to non-tabbable state
					$( '.ln-all' ).click().focus().attr( 'tabindex', '0' ); // make receiving letter tabbable
				} else {
					$( '.ln-letters a:focus' ).attr( 'tabindex', '-1' ); // restore letter from which clicking to non-tabbable state
					$( '.ln-letters a:focus' ).next().click().focus().attr( 'tabindex', '0' ); // make receiving letter tabbable
				}
            }

            if ( e.which === 37 ) { // 'left' arrow pressed
                e.preventDefault();
                if ($( e.target ).is( '.ln-all' ) ) {
					$( e.target ).attr( 'tabindex', '-1' ); // restore letter from which clicking to non-tabbable state
					$( '.ln-last' ).click().focus().attr( 'tabindex', '0' ); // make receiving letter tabbable
				} else {
					$( '.ln-letters a:focus' ).attr( 'tabindex', '-1' ); // restore letter from which clicking to non-tabbable state
					$( '.ln-letters a:focus' ).prev().click().focus().attr( 'tabindex', '0' ); // make receiving letter tabbable
				}
            }

            if ( e.which === 13 || e.which === 32 ) { // space bar pressed
                $( e.target ).click().focus();
            }

            $( '.ln-letters a:first' ).attr( 'tabindex', '0' ); // first letter must always be tabbable

        } );

		// Set ARIA controller for visible glossary entries
		setTimeout( function () {

			$( '.ln-letters a' ).each( function () {
				var letters = $( this ).attr( 'class' ).split(' ')[0]; // get first class of each letter
				$( this ).prop( 'id', letters ); // give each letter an id equal to its first class
			}).focus( function () {
				var glossLabel = $( this ).prop( 'id' );
				$( '#glossaryList' ).attr( 'aria-labelledby', glossLabel ); // set ARIA controller by id
			});

			$( '#glossaryList' ).attr( 'aria-labelledby', 'ln-all' ); // default on page load

		}, 5);

    } );
}( jQuery ) );

Obviously, you’ll want to check this out for yourself, but essentially what it does is provide more functionality to the left and right arrows, while also associating the list of displayed glossary entries with the button containing their first character.

I hope you’ll be able to include these changes in a future update, and then I won’t bother you any further!

Thanks very much again!