{"action":"closed","issue":{"url":"https://api.github.com/repos/addyosmani/polymer-ui-carousel/issues/3","labels_url":"https://api.github.com/repos/addyosmani/polymer-ui-carousel/issues/3/labels{/name}","comments_url":"https://api.github.com/repos/addyosmani/polymer-ui-carousel/issues/3/comments","events_url":"https://api.github.com/repos/addyosmani/polymer-ui-carousel/issues/3/events","html_url":"https://github.com/addyosmani/polymer-ui-carousel/issues/3","id":28812124,"number":3,"title":"a11y","user":{"login":"addyosmani","id":110953,"avatar_url":"https://avatars.githubusercontent.com/u/110953?v=3","gravatar_id":"","url":"https://api.github.com/users/addyosmani","html_url":"https://github.com/addyosmani","followers_url":"https://api.github.com/users/addyosmani/followers","following_url":"https://api.github.com/users/addyosmani/following{/other_user}","gists_url":"https://api.github.com/users/addyosmani/gists{/gist_id}","starred_url":"https://api.github.com/users/addyosmani/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/addyosmani/subscriptions","organizations_url":"https://api.github.com/users/addyosmani/orgs","repos_url":"https://api.github.com/users/addyosmani/repos","events_url":"https://api.github.com/users/addyosmani/events{/privacy}","received_events_url":"https://api.github.com/users/addyosmani/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2014-03-05T18:14:41Z","updated_at":"2015-02-08T18:01:55Z","closed_at":"2015-02-08T18:01:55Z","body":"On the development side, a carousel can be challenging to make screen reader accessible. It seems that the most straight forward approach is to use the [ARIA tab](http://www.w3.org/TR/wai-aria/roles#tab)model which is pretty straight forward:\r\n\r\n* Each carousel content container has a role of tabpanel.\r\n* Each control, typical designed as dots, has a role of tab.\r\n* The container of the controls/tabs has a role of  tablist.\r\n* Add aria-labelledby to the tabpanels which point to the id of the associated control/tab.\r\n* To each control/tab, add aria-controls (which points to the id of the associated tabpanel) and aria-selected (boolean) attributes.\r\n\r\n### The code without WAI-ARIA\r\n\r\n    <ul id=\"tabs\">\r\n    <li><a id=\"tab1\" href=\"#\" onclick=\"showTab(1);\">Tab 1< /a></li>\r\n    <li><a id=\"tab2\" href=\"#\" onclick=\"showTab(2);\">Tab 2< /a></li>\r\n    <li><a id=\"tab3\" href=\"#\" onclick=\"showTab(3);\">Tab 3</a></li>\r\n    </ul>\r\n    ...\r\n    <div id=\"panel1\">\r\n    ...\r\n    </div>\r\n    <div id=\"panel2\">\r\n    ...\r\n    </div>\r\n    <div id=\"panel3\">\r\n    ...\r\n    </div>\r\n\r\n\r\n### With it\r\n\r\n    <ul id=\"tabs\" role=\"tablist\">\r\n    <li role=\"presentation\"><a id=\"tab1\" href=\"#\" onclick=\"showTab(1);\" role=\"tab\" aria-controls=\"panel1\" aria-selected=\"true\">Tab 1< /a></li>\r\n    <li role=\"presentation\"><a id=\"tab2\" href=\"#\" onclick=\"showTab(2);\" role=\"tab\" aria-controls=\"panel2\" aria-selected=\"false\">Tab 2< /a></li>\r\n    <li role=\"presentation\"><a id=\"tab3\" href=\"#\" onclick=\"showTab(3);\" role=\"tab\" aria-controls=\"panel3\" aria-selected=\"false\">Tab 3</a></li>\r\n    </ul>\r\n    ...\r\n    <div id=\"panel1\" role=\"tabpanel\" aria-labelledby=\"tab1\">\r\n    ...\r\n    </div>\r\n    <div id=\"panel2\" role=\"tabpanel\" aria-labelledby=\"tab2\">\r\n    ...\r\n    </div>\r\n    <div id=\"panel3\" role=\"tabpanel\" aria-labelledby=\"tab3\">\r\n    ...\r\n    </div>\r\n\r\nhttp://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/\r\n\r\nhttp://hanshillen.github.io/jqtest/\r\n\r\nMight be good to start with making https://github.com/Polymer/polymer-ui-tabs/blob/master/polymer-ui-tabs.html more accessible."}}