WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Misuse of TabIndex 0

for

From: Patrick H. Lauke
Date: Jul 7, 2017 12:49PM

On 07/07/2017 18:12, Graham Armfield wrote:
> If using tabindex="0" on instruction text between form fields is no longer
> recommended, and aria should be used instead, please can someone spell out
> with a code example what is considered to be best practice now.

I would depend on the specific situation, length of the instructions,
whether or not they're grouped/contained somehow. For instance, making
instructions part of a fieldset's legend could work in certain
situations (may require subtle rewording depending on what's currently
there)...

<fieldset>
<legend>Your favourite foods (pick at least one to proceed)</legend>
...
</fieldset>

If the instruction relates to one particular field only, relating it to
the form field using aria-describedby...

<label for="food">Your favourite foods</label>
<p id="food-instr">Give us a list of your favourite foods, separated by
spaces or commas</p>
<textarea id="food" area-describedby="food-instr"></textarea>

etc.

There may be more methods, and they may all be valid approaches
depending on context.

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke