WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Explicit Form Labels and Positioning Question

for

From: Sailesh Panchang
Date: Oct 27, 2011 9:27AM

In this particular case, the error text apparently is required to be
placed between visible label text and the form control ... so
suffixing error message to the form label within the label element
may be alright.
But generally I am not a supporter of this approach. Consider:
i. sometimes error text is required to be placed after the form control,
i.e. label text -- form control -- error msg.
The msg may be even on the line before / after the form control line.
ii. In a single form, it is possible that for a few fields a title
attribute has to be used because there is no visible label text
because of form's design.
iii. Regardless of whether label / title is used, the error text can
be styled so that it is immediately obvious visually ... say by color
/ font.
The vision impaired user (including color blind) may be at a disadvantage.
Screen reader users may need to tab through all controls listening to
identify labels with extra text. This is in-equal access.
iv. Displaying error text in title attribute too is not a good idea.
It does not work if form also has label text and user does not make
screen reader access the title routinely.

So I suggest:
i. In situations where the interface allows an error icon to be
placed near the field with error, leverage it to help VI users.
For example, set alt="Error: Zip code" (if zip code field has an error.
When screen reader users realize there is an image next to fields with
error on the particular website, they can use image navigation to
navigate straight to those fields. That is equality of access.
The error text may be placed near the error icon / label / form
control as per UI design. It can be within a span with tabindex=0 so
that it is tab navigable too.
The method can be used regardless of whether form control uses label or title.
ii. If error icon method is not used by the website, encourage the
designers to introduce one.

iii. Some forms only use visual clue to indicate form with error and
when moused over, the error text is displayed.
The error icon method is useful in these situations too. In addition,
ARIA role=tooltip can be used with keyboard events to make the error
display keyboard-operable.
See tooltip example on I-CITA
http://test.cita.illinois.edu/aria/tooltip/tooltip2.php

iv. Of course, another pet suggestion is to suffix the page title
(title element) with brief text to suggest that form submission
failed / errors are present ... in situations where form submission
refreshes form page. Else it could be suffixed to an existing heading
text placed immediately above the form that serves as the form's
title.

Sailesh Panchang
Deque Systems





On 10/27/11, Randy Pope < <EMAIL REMOVED> > wrote:
> Jared and all,
>
> I too thank you for this comment. Is there any kind of updated resources on
> using the Aria approach? I using an outdated html editor that doesn't
> address this approach.
>
> With Warm Regards,
> Randy Pope
>
>
>