html5 - Need to make my jquery carousal accessible using tab -
hi have created basic jquery carousal. need make accessible using tab, follows sequence prev tab, casousal dots, next tab.
<div id="maindiv"> <div id="buttons"> <a href="#" id="prev" style="font-size: 60px; font-weight : bold; text-decoration : none; position: absolute; top: 250px; left : 300px;"><</a> <a href="#" id="next" style="font-size: 60px; font-weight : bold; text-decoration : none; position: absolute; top: 250px; right: 250px;">></a> </div> <div onclick ="changecontent()" id="sliderdiv"> <ul tabindex="1" class="slider"> <li> <h3>image 1</h3> <img src="images/1.jpg" alt="image not found"> </li> <li> <h3>image 2</h3> <img src="images/2.jpg" alt="image not found"> </li> <li> <h3>image 3</h3> <img src="images/3.jpg" alt="image not found"> </li> <li> <h3>image 4</h3> <img src="images/4.jpg" alt="image not found"> </li> <li> <h3>iframe</h3> <iframe src="testiframe.html"></iframe> </li> </ul> </div> <br> <br> <br> <div class="carousaldots"> <span class="slickdot" onclick ="changecontent()"></span> <span class="slickdot" onclick ="changecontent()"></span> <span class="slickdot" onclick ="changecontent()"></span> <span class="slickdot" onclick ="changecontent()"></span> <span class="slickdot" onclick ="changecontent()"></span> </div>
i tried using tabindex property didn't work. appreciated :)
there few issues code. first, items 'tab'-able 2 tags , has tabindex set. if want carousel dots focusable, should try make them more appropriate focusable element. like:
<a href="#" class="slickdot" role="button" onclick ="changecontent()"></a>
this allow dots accessed via tab key, provide expected hover cursor state.
for next comment sequence being "prev tab, casousal dots, next tab", i'd suggest reworking markup allow flow happen naturally. it's bad practice hijack focus order away user. if move carousel dots same div prev/next buttons it'd ideal. way it's easier users navigate controls , it's easier maintain.
Comments
Post a Comment