WebAIM - Web Accessibility In Mind

E-mail List Archives

Using `small` element for form error messages

for

From: Chris Pearce
Date: Apr 2, 2013 9:44PM

Hi,

Just a question on semantics and not sure if this would make things more
accessible? I was wondering about using the HTML5
`*small*<http://developers.whatwg.org/text-level-semantics.html#the-small-element>;`
element for the likes of form error messages and/or form helper notes.

The link above says this:

*Small print typically features disclaimers, caveats, legal restrictions,
or copyrights. Small print is also sometimes used for attribution, or for
satisfying licensing requirements.*


With 'caveats' being the stand out.

What I mean by form helper notes is that some form inputs require
additional instructions on how to successfully complete the input that the
few words provided in the input label can't provide and I usually place
this text underneath the input or after it in terms of source order, I know
this text is best placed within the input `label` however sometimes it's
not possible due to layout considerations.

Right now the element of choice for these pieces of text (error/helper
notes) is a `p` with the relevant ARIA attr's appended.

Cheers,
Chris