{"issue":{"created_at":"2011-12-06T20:46:18Z","state":"open","updated_at":"2011-12-12T21:04:01Z","comments":5,"user":{"gravatar_id":"053cb00218609db2a894cb007817a242","id":831405,"url":"https://api.github.com/users/julienbechade","avatar_url":"https://secure.gravatar.com/avatar/053cb00218609db2a894cb007817a242?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png","login":"julienbechade"},"body":"Wouldn't it be perfect to make list.js accessible according to W3C's specifications http://www.w3.org/TR/wai-aria/\r\nAll the cool kids talk about it.\r\n\r\nIt's not really complicated, you have to:\r\n- highlight relations between elements when the DOM tree doesn't do it naturally.\r\n- tell the user when an element is changed dynamically.\r\n\r\n``` html\r\n\r\n// role=\"composite\" http://www.w3.org/TR/wai-aria/roles#composite\r\n<div id=\"lovely-things-list\" role=\"composite\">\r\n\r\n\t// you must include a <label> to tell what the <input> is about\r\n\t<label for=\"search-list\" >Search lovely things</label>\r\n\t\r\n\t// aria-required=\"false\", we tell users they don't need to fill the input\r\n\t<input class=\"search\" role=\"search\" id=\"search-list\" aria-describedby=\"searched-list\" placeholder=\"Search lovely things\" aria-required=\"false\" />\r\n\t\r\n\t// 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\r\n\t<ul class=\"sortby\" role=\"tablist\">\r\n\t\t<li class=\"sort btn\" role=\"tab\" id=\"sortby-name\" data-sort=\"name\" aria-describedby=\"sortedby-name\">Sort by name</li>\r\n\t\t<li class=\"sort btn\" role=\"tab\" id=\"sortby-category\" data-sort=\"category\" aria-describedby=\"sortedby-category\">Sort by category</li>\r\n\t</ul>\r\n\t\r\n\t<ul class=\"filterby\"  role=\"tablist\">\r\n\t\t<li class=\"btn\" role=\"tab\" id=\"filterby-none\" aria-describedby=\"filteredby-none\">Show all</li>\r\n\t\t<li class=\"btn\" role=\"tab\" id=\"filterby-games\" aria-describedby=\"filteredby-games\">Only show games</li>\r\n\t\t<li class=\"btn\" role=\"tab\" id=\"filterby-beverages\" aria-describedby=\"filteredby-beverages\">Only show beverages</li>\r\n\t</ul>\r\n\t\r\n\t// 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\r\n\t// 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\r\n\t// aria-atomic=\"true\" http://www.w3.org/TR/wai-aria/states_and_properties#aria-atomic\r\n\t// aria-relevant=\"all\" http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant\r\n\t<ul class=\"list\" role=\"tabpanel\" id=\"filteredby-none\" aria-labelledby=\"filterby-none\" aria-live=\"off\" aria-atomic=\"true\" aria-relevant=\"all\">\r\n\t\t<li>\r\n\t\t\t<img src=\"images/monkeyisland.jpg\" class=\"thumb\" />\r\n\t\t\t<h4><span class=\"name\">Monkey Island 2: LeChuck's Revenge</span> <span class=\"category\">Game</span></h4>\r\n\t\t\t<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>\r\n\t\t</li>\r\n\t\t<li>\r\n\t\t\t<img src=\"images/coffee.jpg\" class=\"thumb\" />\r\n\t\t\t<h4><span class=\"name\">Good Coffee</span> <span class=\"category\">Beverage</span></h4></h4>\r\n\t\t\t<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>\r\n\t\t</li>\r\n\t\t<li>\r\n\t\t\t<img src=\"images/fullthrottle.jpg\" class=\"thumb\" />\r\n\t\t\t<h4><span class=\"name\">Full Throttle</span> <span class=\"category\">Game</span></h4></h4>\r\n\t\t\t<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>\r\n\t\t</li>\r\n\t\t<li>\r\n\t\t\t<img src=\"images/brooklyn.jpg\" class=\"thumb\" />\r\n\t\t\t<h4><span class=\"name\">Brooklyn Lager</span> <span class=\"category\">Beverage</span></h4>\r\n\t\t\t<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>\r\n\t\t</li>\r\n\t</ul>\r\n\t\r\n</div>\r\n\r\n```\r\n\r\nI think that's it, I'll update if I come by anything more.\r\nWe can move the discussion on Twitter if you want any more help.\r\n\r\nWill you consider this issue ?","assignee":null,"id":2467202,"pull_request":{"patch_url":null,"html_url":null,"diff_url":null},"number":26,"labels":[],"title":"Get along with the WAI-ARIA specification","html_url":"https://github.com/javve/list/issues/26","closed_at":null,"url":"https://api.github.com/repos/javve/list/issues/26","milestone":null},"action":"created","comment":{"created_at":"2011-12-12T21:04:01Z","updated_at":"2011-12-12T21:04:01Z","user":{"gravatar_id":"053cb00218609db2a894cb007817a242","id":831405,"url":"https://api.github.com/users/julienbechade","avatar_url":"https://secure.gravatar.com/avatar/053cb00218609db2a894cb007817a242?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png","login":"julienbechade"},"body":"There are no pros/cons about WAI-ARIA.\r\nIt's a very real language — W3C candidate recommendation — used to make accessible content for screen readers.\r\nUnfortunately, I do not know any *good* books about the subject. I truly think the W3C's documentation is the best — today.\r\nhttp://www.w3.org/TR/wai-aria-practices/#aria_ex","id":3112708,"url":"https://api.github.com/repos/javve/list/issues/comments/3112708"}}