Forum Discussion
Tab Order and Text Boxes
Hello everyone,
I am working on a project for a client who wants to ensure our module is screen reader compliant. A large concern for them is questions where the screen reader states the question, then the learner can tab to the options. Having audio autoplay the question was our original solution but it was not acceptable because of the conflicting audio with the screen reader.
Because it is text, the screen reader will not read the question first when tabbing through. The user has to use up and down arrows, which makes it confusing when the screen reader jumps to the options first.
When I make the question stem interactive, it adds a "button" to the end of the screen reader.
Is there a way to make a text box tab-able directly without also having a "button" tagged on automatically?
Hi Slan!
Typically, learners will navigate using a screen reader with the arrow keys so that both the readable content and the interactive content are included. When tabbing, only the interactive objects are included.
This is standard screen reader navigation for all websites.
Hello Leslie,
Thank you for the reply. My client would like to be able to use tab to navigate to these elements, not the arrows. This is due to their interpretation of WCAG 2.4.3 and 1.31 and their internal guidelines. The arrow keys are sufficient for content slides, but interactive slides need the question text to be tab accessible before the options to provide a fieldset/legend for the radio buttons.
Is there a way to modify the automatically generated "button" addition for alt text?Alternatively, is there a way to make the Multiple-choice group tabable?
I appreciate the additional information, Slan.
Since the intent of tabbable objects is interactivity, a screen reader will announce that information.
Similarly, it is typical screen reader behavior to arrow through choices in a multiple choice question.
Here is some additional information:
- Radio buttons for questions like True/False, Multiple Choice, and Pick One include a button set that allows one selection within the group. So, screen reader users will arrow through these answer choices. Check out the W3C recommendation for radio groups here.
- Checkboxes for questions like Multiple Response and Pick Many allow for multiple selections, so screen readers announce each checkbox individually with its state, making it focusable and tabbed individually. Check out the W3C recommendation for checkboxes here.
Your client wants to modify the recommended behavior, so I will leave it to the community to chime in. However, I fear that changing this behavior will make it more confusing for native screen reader users.
