Eliminate superfluous tab stops on pages
April 19, 2018 12:00 AM
- A major yet subtle obstacle to producing accessible courses with Lectora concerns tab stops in the published HTML.
The basic issue is that objects on the page are wrapped in a undefined
For example, on a page with only 2 objects, a text label and a text entry field, there will be 3 tab stops when there should be only 1. The text label receives a tab stop, which it should not because it is not an actionable object. The entry field (undefined) receives a tab stop, but it is nested in a form tag that also includes a tab stop. A tabindex attribute is assigned to all 3 objects when only 1 should properly be assigned a tabindex. So the tab stops are tripled with just this simple structure. On pages with more objects, superfluous tab stops abound!
undefined
The function will run on all pages and eliminate the tab stops that serve no function other than to complicate the goal of creating accessible courses.
Discussion (1)
For awhile, I was using a somewhat similar method that only required the Run JS on the object that attached the "tabindex = '-1'" to objects, i.e. transparent buttons that didn't need to be clicked, images, or form fields. The trick was knowing what was appended to the end of the a id for the object.
For images:
document.getElementById("%HTMLNAME%anc").tabindex = "-1";
undefined // Gets div id for shapes and images
// Start loop for images and shapes
for (i = 0; i undefined
currentanchor = currentimg.getElementsByTagName("a")[0]; // Gets the "anc" id name from the tag
currentanchor.setAttribute('tabindex',tabindexval); // Adds the attribute to the "anc" name
undefined
Here's a sample where you can see that the button, image, radio button 3, and text entry field are all skipped using the tab key. One caveat is that changing the tab index does NOT stop the screen reader from announcing buttons or radio objects, so make sure to name the element appropriately in the title index (i.e. "button not available").
undefined
Discussions have been disabled for this post