HTML and CSS Reference
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
<img src="required-icon.jpg" role="presentation" alt="Required" >
<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.
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:
<input type="text" id="fname" required >Discussion
“ARIA and Progressive Enhancement” by Derek Featherstone at http://www.alistapart
.com/articles/aria-and-progressive-enhancement and “Future Web Accessibility:
HTML5 input Extensions” at http://webaim.org/blog/future-web-accessibility-html5-in