(Custom) WAI-ARIA role

Question

I'm pretty new to ARIA and the roles, states, and properties it provides. I understand that there are different types of roles (e.g. landmarks, regions, etc) but none of them represent areas like "login region" or something similar. I wonder if there are ways to specify the grouping of this information so that the screen reader can read out this information for the users? E.g. "Login region. User name ... Password ..."

If this is not possible with ARIA, what is the general way of doing it in HTML?

Thanks in advance

Answer 1

WAI-ARIA is generally for dynamic content, like a news headline ticker, and not for static content, like a login form. Static content is best achieved using plain HTML.

Assuming you have a page where the login form is always displayed, the following should help.

For a login form, from an accessibility point of view, you should primarily ensure that the form fields are correctly labelled. A fieldset\legend is really optional for such as small form.

Coding labels up correctly means using matching for\id attributes e.g.

<label for="loginName">Login name</label>
<input type="text" id="loginName" name="loginName" size="30" />
<label for="loginPassword">Login password</label>
<input type="password" id="loginPassword" name="loginPassword" size="10" />

This ensures that screenreader (blind) users can properly hear the form fields corresponding label read out. For other form elements, such as checkboxes and radio buttons, using correct labelling like this allows users with dexterity issues to click on the text label to toggle the form input (checkbox\radio button), meaning they have larger target area to click on the page.

To let the user know they were about to access a login form, you could use either a heading, or the fieldset\legendf combo e.g.

<h2>Login form</h2>
<FORM HERE>

Or

<fieldset>
<legend>Login form</legend>
<FORM HERE>
</fieldset>

Either of these would be fine, although the heading approach would create slightly less audio clutter for screenreader users (WIth a fieldset\legend, the legend is read out before each form field)

Answer 2

Yes and no. The form should be given a landmark role of "form". This allows the assistive technology to see the landmark for navigation purposes.

Refer to the spec.

While using the landmark will aid in navigating the page, the landmark itself won't produce the reading of the items in the form itself. Following the already known HTML practices mentioned will take care of the rest.