Wouldn’t take you too long to find a reliable tutorial advising you on the best methods of creating a form.
Here are just some (search criteria “creating an accessible form“).
What I am interested in is how the author codes the users feedback, the interaction part. Whether its for the instant as-you-type notification or after submitting the form.
This isn’t an attack on those authors, its more of, “am I doing this right?”.
I guess I’m looking for reassurance.
A while back I read a tutorial by CSS Wizardy on creating an accessible form. I emailed the author to say thank you, as a self taught web designer I’m very grateful of people who share their knowledge. But I also wanted to understand the reason behind the choice of HTML.
You see, in this tutorial one thing looked odd. Not wrong, just odd. The markup used to notify the users attention of either an incomplete field or a failed submission looked like this;
<span class="alert">Warning!</span>
There’s nothing wrong with that. Its been given semantic meaning by a class named alert. But can we use a more meaningful markup?
The HTML tag used here is <span> and if i can remember its a generic markup that doesn’t really imply any meaning.
Seeing a message appear on screen would make us aware of how important it is. We’ll jump on that and correct it. Visually it all makes sense but what about under the bonnet?
My semantic suggestion
Lets think about it for a second. Failing to complete a form/field is rather important. For the user and the website owner. To carry this important message we could apply <strong> tag.
So in my forms I would markup an incomplete field notice link this;
<strong>You've forgotten to enter a name silly!</strong>
Nothing too fancy I’m using the <strong> attribute here. I think this offers better semantics and structure, after all we want to convey the meaning of the warning, alert or notice message across to the users and to be understood by all.
So if its an error message I use <strong> and in some cases use an <em> for as-you-type validation.
Another reason I feel this is important is that screen reader users will be alerted to the importance of the message by the way its read out as the voice and pitch changes when reading text within <strong> or <em> tags.
Would really like to hear thoughts, suggestions and opinions on this subject.
Filed under: Education, Web Accessibility
