Tab Order and Text Boxes

Question

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&nbsp;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.&nbsp;When I make the question stem interactive, it adds a "button" to the end of the screen reader.&nbsp;Is there a way to make a text box tab-able directly without also having a "button" tagged on automatically?

lesliemckerchie · Answer

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.

slan · Answer

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?&nbsp;&nbsp;Alternatively, is there a way to make the Multiple-choice group tabable?

lesliemckerchie · Answer

I appreciate the additional information, Slan.
Since the intent of tabbable objects is interactivity, a screen reader will announce that information.&nbsp;
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.&nbsp;

Forum Discussion

Tab Order and Text Boxes

Related Content

Text Entry-Three Fields

Storyline 360: Text Box Formatting

Storyline 3: Text Box Formatting

Text Box

Quizmaker 360: Adding Text Boxes

Quizmaker 360: Text Box Formatting

Changing text in fixed text box

text not showing in Focus order

Text position in box

Text entry boxes extremely slow to load

Recent Discussions

Accessibility: Frameworks, Prioritization, and Maturity

Articulate User Conference at DevLearn 2024

Accessibility and states

Tab Order and Text Boxes

Creating alt text for complex images easier