HTML and CSS Reference
In-Depth Information
the value of the image
role
attribute as
presentation
, and add the
aria-
required="true"
attribute to the input field.
The required icon images can be left-aligned to make visual scanning easier for sighted
users:
<label for="fName">
<img src="required-icon.jpg"
role="presentation" alt="Required"
>
First Name
</label>
<input type="text" id="fname"
aria-required="true"
>
Newer assistive technologies that support ARIA ignore the image icon because elements
with the
presentation
role are intentionally ignored by (and not mapped to) accessi-
bility APIs. However, they should recognize the
aria-required
attribute and announce
that the field is required.
This solution also works for older assistive technologies that do not support ARIA,
which ignore all of the ARIA attributes and instead provide the
alt
attribute of
Required
on the icon image.
Discussion
It may take a while until browsers and assistive technologies support the HTML5
required
attribute on the
input
element.
The meaning of the
strong
element is changing in HTML5, though not substantially.
It would still be appropriate to use it around the asterisk that represents a required field
because typically required fields must contain values before the user proceeds.
The required attribute
What you probably wanted to see was the HTML5
required
attribute on the
input
element, but browsers and assistive technologies do not currently support this. For
sighted users, you could use CSS to style the appearance of the field, or you could add
a styled asterisk so they can visually scan the screen for required fields:
<label for="fName">
<strong>*</strong>
First Name
</label>
<input type="text" id="fname"
required
>Discussion
See Also
“ARIA and Progressive Enhancement” by Derek Featherstone at
http://www.alistapart
.com/articles/aria-and-progressive-enhancement
and “Future Web Accessibility:
