Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Get along with the WAI-ARIA specification #26

julienbechade opened this Issue Dec 6, 2011 · 9 comments


None yet
5 participants

julienbechade commented Dec 6, 2011

Wouldn't it be perfect to make list.js accessible according to W3C's specifications http://www.w3.org/TR/wai-aria/
All the cool kids talk about it.

It's not really complicated, you have to:

  • highlight relations between elements when the DOM tree doesn't do it naturally.
  • tell the user when an element is changed dynamically.
// role="application" http://www.w3.org/TR/wai-aria/roles#application
<div id="lovely-things-list" role="application">

    // you must include a <label> to tell what the <input> is about
    <label for="search-list" >Search lovely things</label>

    // aria-required="false", we tell users they don't need to fill the input
    <input class="search" role="search" id="search-list" aria-describedby="searched-list" placeholder="Search lovely things" aria-required="false" />

    // the script behaves as a tab widget where each tab triggers a panel with a different content http://www.w3.org/TR/wai-aria/roles#tablist
    <ul class="sortby" role="tablist">
        <li class="sort btn" role="tab" id="sortby-name" data-sort="name" aria-describedby="sortedby-name">Sort by name</li>
        <li class="sort btn" role="tab" id="sortby-category" data-sort="category" aria-describedby="sortedby-category">Sort by category</li>

    <ul class="filterby"  role="tablist">
        <li class="btn" role="tab" id="filterby-none" aria-describedby="filteredby-none">Show all</li>
        <li class="btn" role="tab" id="filterby-games" aria-describedby="filteredby-games">Only show games</li>
        <li class="btn" role="tab" id="filterby-beverages" aria-describedby="filteredby-beverages">Only show beverages</li>

    // you'll note first the relation between aria-labelledby="#id_of_the_tab" and aria-describedby="#id_of_the_panel" http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby
    // aria-live="off" defines a live region wich will be updated. Once the update has occured, it must be set as "assertive" http://www.w3.org/TR/wai-aria/states_and_properties#aria-live
    // aria-atomic="true" http://www.w3.org/TR/wai-aria/states_and_properties#aria-atomic
    // aria-relevant="all" http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant
    <ul class="list" role="tabpanel" id="filteredby-none" aria-labelledby="filterby-none" aria-live="off" aria-atomic="true" aria-relevant="all">
            <img src="images/monkeyisland.jpg" class="thumb" />
            <h4><span class="name">Monkey Island 2: LeChuck's Revenge</span> <span class="category">Game</span></h4>
            <p class="description">Monkey Island 2: LeChuck's Revenge is an adventure game developed and published by LucasArts in 1991. It was the second game of the Monkey Island series, following The Secret...</p>
            <img src="images/coffee.jpg" class="thumb" />
            <h4><span class="name">Good Coffee</span> <span class="category">Beverage</span></h4></h4>
            <p class="description">Coffee is a brewed beverage with a dark, slightly acidic flavor prepared from the roasted seeds of the coffee plant, colloquially called coffee beans.</p>
            <img src="images/fullthrottle.jpg" class="thumb" />
            <h4><span class="name">Full Throttle</span> <span class="category">Game</span></h4></h4>
            <p class="description">Full Throttle is a computer adventure game developed and published by LucasArts. It was designed by Tim Schafer, who would later go on to design the critically acclaimed titles Grim Fandango, Psychonauts and Brütal Legend.</p>
            <img src="images/brooklyn.jpg" class="thumb" />
            <h4><span class="name">Brooklyn Lager</span> <span class="category">Beverage</span></h4>
            <p class="description">Brooklyn Brewery was started in 1987 by former Associated Press correspondent Steve Hindy and former Chemical Bank lending officer Tom Potter.</p>


I think that's it, I'll update if I come by anything more.
We can move the discussion on Twitter if you want any more help.

Will you consider this issue ?


julienbechade commented Dec 7, 2011

I forgot to mention, there are only 3 values to update via JS when a tab has been triggered:

  • the ID takes the value of the aria-describedby of the related triggered tab.
  • aria-labelledby takes the ID of the related triggered tab.
  • aria-live takes the value polite or assertive to notify users of the content change.

In the case of a search:

<ul class="list" role="tabpanel" id="searched-list" aria-labelledby="search-list" aria-live="polite" aria-atomic="true" aria-relevant="all">

javve commented Dec 8, 2011

I like the idea of making List.js get along with the WAI-ARIA specification, but aren't all this just dependent on how you implement your list? Or do you mean that List.js should add these stuff to the list on initialization?

Hmm hmm, this is pretty interesting. Do you have any reference-links where I can read more about pros/cons with WAI-ARIA? (no, please not only the W3C-documents :))

This feels lika a cool feature, but maybe overkill. I will consider it thought!

There's this book called Designing with Progressive Enhancement (review of the book) which would be a very handy resource regarding this issue. The site for the book also has lots of information and (code) examples. I might give it a shot if I feel I get some time off.


javve commented Dec 12, 2011

Oh, I actually owns that book. Maybe I should open it? :D

I would very much appreciate if you would look into this feature @teddyzetterlund !


julienbechade commented Dec 12, 2011

There are no pros/cons about WAI-ARIA.
It's a very real language — W3C candidate recommendation — used to make accessible content for screen readers.
Unfortunately, I do not know any good books about the subject. I truly think the W3C's documentation is the best — today.


julienbechade commented Dec 12, 2011

It's up to you if you want to add it to the list on init but I think you should at least detect if WAI-ARIA is used and provide the solution is yes.


javve commented Jan 19, 2014

I'll close this issue now, but support for the WAI-ARIA specification is added to the backlog and it may be added in the future :)

@javve javve closed this Jan 19, 2014

Any movement on this issue? Or does anyone have a fork with the added aria language?

Just checking in to see if there is any progress made on this issue. I'm thinking of using the pagination in a project but it has to include accessibility features like aria labels. Is there a pre-release ranch that I might be able to help out on?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment