Search code examples
htmlaccessibilityscreen-readerstabindexwcag

How would blind users ever access informative text if tabbing never gets to it?


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?


Solution

  • 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.