I am trying to make my web application ADA compliant and I'm still learning the basics of it. If I were to have a questionnaire on a page with a question given to the user, how would blind users ever see the question or information presented?
For example, assume I have a question "Are you happy today" and a checkbox or drop down menu for "yes" or "no". Tabbing should bring you to those elements and screen readers would catch that there are checkboxes or a drop down menu, but they would never get to "Are you happy today" meaning they would never understand the context of each question.
This goes beyond the question and answer scenario too. How would blind users ever access disclaimers or information on my web application if tabbing never gets to it?
Is the solution to use tabindex="0"
for everything?
You would put your question in a fieldset
's legend
for radio buttons/checkbox groups.
<fieldset>
<legend>Are you happy today?</legend>
<input type="radio" name="happy" value="yes" id="happy-yes">
<label for="happy-yes">Yes</label>
<input type="radio" name="happy" value="no" id="happy-no">
<label for="happy-no">No</label>
</fieldset>
Here is an article describing the fieldset
with legend
technique: https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/
For a drop down, you just need to use a label
element.
<label for="happy">Are you happy today?</label>
<select name="happy" id="happy">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
(You should always use label elements for all form fields)
tabindex
is rarely required at all when building accessible websites. If the HTML is sensibly structured, you will never need to use a tabindex
anywhere.