Keyboard accessibility – fix enclosed

  • Resolved mattmcleod

    (@mattmcleod)


    11 years, 6 months ago

    Using Collapse-o-Matic 1.6.3.

    The expand/collapse control isn’t accessible by keyboard. I’ve made a couple of quick fixes to resolve that.

    First, on the line that reads:

    $link = $closeanchor.$anchor.'<'.$tag.' class="collapseomatic '.$trigclass.'" id="'.$id.'" '.$relatt.' '.$altatt.'>'.$startwrap.$title.$endwrap.'</'.$tag.'>';

    make it:

    $link = $closeanchor.$anchor.'<'.$tag.' tabindex="0" class="collapseomatic '.$trigclass.'" id="'.$id.'" '.$relatt.' '.$altatt.'>'.$startwrap.$title.$endwrap.'</'.$tag.'>';

    This will add the control to the keyboard focus order.

    Second, the JavaScript needs a shiny new bit. I’ve added this immediately above the “click” handler:


    jQuery(document).on('keypress','.collapseomatic', function(event) {
    if (event.which == 13) {
    event.currentTarget.click();
    };
    });

    This causes the “click” event to fire if the enter key is pressed when the control has focus.

    There are probably some other places where fixes are needed — mostly adding tabindex I would imagine — but this does the bare basics. Would be great if it could be integrated into the code.

    Matt

    https://ww.wp.xz.cn/plugins/jquery-collapse-o-matic/

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Baden

    (@baden03)

    11 years, 6 months ago

    thank you Matt. We’ll look into this and post a release candidate after testing.

    Thread Starter mattmcleod

    (@mattmcleod)

    11 years, 6 months ago

    It should probably have some ARIA roles defined too, I’ll look at that tomorrow my time and let you know.

    (I’ll do some diffs and put them online somewhere you can grab ’em.)

    Plugin Author Baden

    (@baden03)

    11 years, 6 months ago

    Better yet, fork it on GitHub:
    https://github.com/baden03/collapse-o-matic

    Plugin Author Baden

    (@baden03)

    11 years, 6 months ago

    On thing we can do is add a tabindex attribute where you can manually set the tabindex. This value could bee assigned a number, or assigned a value of ‘auto’. For auto we would have to add some more jQuery magic to dynamically assign the tabindex values once the page loads and update the ‘auto’ value sequentially.

    We’ll noodle on this a bit and do some more testing.

    Plugin Author Baden

    (@baden03)

    11 years, 6 months ago

    Ok, we have done some tests, and release candidate 1.6.4a is available directly from the plugin oven: http://plugins.twinpictures.de/plugins/collapse-o-matic/
    please let us know if this works for you.

    Thread Starter mattmcleod

    (@mattmcleod)

    11 years, 6 months ago

    As a general rule you don’t want to set tabindex to anything other than 0 or -1 unless there’s a very good reason. Setting it to 0 will automatically add it to the natural tab focus order which is usually what you want — tab focus order should follow visual order.

    Thread Starter mattmcleod

    (@mattmcleod)

    11 years, 6 months ago

    Thanks, 1.6.4b is doing the right thing, provided I set tabindex=”0″ on each expand shortcode — the default setting isn’t saving at present.

    I’d recommend making the default 0 rather than empty as that’ll make all (updated) installations of the plugin keyboard-accessible by default.

    The remaining issue is how to tell a screen reader that this is an expand/collapse feature. Here’s the WAI ARIA guidance on that:

    http://www.w3.org/TR/wai-aria-practices/#accordion

    (I work for a web accessibility consultancy, so if you have any questions feel free to ask.)

    Plugin Author Baden

    (@baden03)

    11 years, 6 months ago

    Done. Thank you kindly for your feedback. Version 1.6.4c has the default tabindex value set to 0. Please let us know if there is anything else we can do to make the plugin more barrier free and accessible.

    Thread Starter mattmcleod

    (@mattmcleod)

    11 years, 6 months ago

    More small changes, this time to the CSS. 🙂

    The basic gist is that you don’t want to imply functionality that isn’t there, so if the page is loaded with Javascript off then you don’t for example want the cursor set to “pointer” or for that matter to have the arrow.

    The simplest way I can see to achieve this is to change the .collapseomatic class so that it reads thus:

    html.js .collapseomatic {
        background-image: url(images/arrow-down.png);
        background-repeat: no-repeat;
        cursor: pointer;
}

.collapseomatic {
        padding: 0 0 10px 16px;
}

    Though this does introduce a dependency on Modernizr so, hrm, not sure.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Keyboard accessibility – fix enclosed’ is closed to new replies.