CODEWITHSUNDEEP
htmlaccessibilitywai-aria
Ravi Kishore
Ravi Kishore

Reputation: 148

Separate tabIndex order for Accessiblity using ARIA in HTML5

Any way to provide a separate tabIndex order for accessible elements in HTML5 using WAI-ARIA?

Usecase: Lets take a case where a multiple choice question is rendered in HTML. It can have a question text, radio buttons with labels, and a submit button.

Here only radio buttons and submit button should be tabbable. Whereas all three components should be accessible for screen readers. Question text should be read before the radio button labels are read.

As an example, please check a question in the following link http://www.html5tests.com/tests/intro/intro-00.php

How should we use aria in such a case.

Upvotes: 2

Views: 402

Answers (1)

katranci
katranci

Reputation: 2571

The Using WAI-ARIA in HTML Spec provides some practical guides about using ARIA. As written on that spec the first rule of ARIA use is:

If you can use a native HTML element [HTML5] or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

In your case, the <fieldset> HTML element has all your requirements built-in so I would use <fieldset> rather than using something else and re-purposing it with ARIA. Here is an example implementation:

<fieldset>
    <legend>We hear that the internet is based on HTML. What is HTML exactly?</legend>
    <p>
        <input type="radio" name="HTML" id="option1" />
        <label for="option1">HTML is a protocol that is used to route data across the internet, via TCP/IP.</label>
    </p>
    <p>
        <input type="radio" name="HTML" id="option2" />
        <label for="option2">HTML is a text-based language that is used to structure and present content on the world wide web.</label>
    </p>
    <p>
        <input type="radio" name="HTML" id="option3" />
        <label for="option3">HTML is a binary file format that codes web pages for use on the Internet.</label>
    </p>
    <p>
        <input type="radio" name="HTML" id="option4" />
        <label for="option4">HTML is a disk file system used in modern operating systems.</label>
    </p>
</fieldset>

<input type="submit" value="Submit Answer" />

Keep in mind that this doesn't mean that you have to choose between a native HTML element and ARIA. Always pick the most semantic element first and if you still have additional requirements complement that element with ARIA.

You can find more information about the fieldset technique on this article: H71: Providing a description for groups of form controls using fieldset and legend elements.

Upvotes: 2

Related Questions