Winning Strategies for Online Success!

Five Tips on How to Create a Screen Reader Friendly Contact Us Form

The contact us form on your website is one of your best tools for attracting new customers and supporting existing customers. Visually impaired customers (blind, partially blind, color blind, and the elderly) use screen readers and the tab key to navigate websites. Their software reads the html markup and speaks it back to them. Contact us forms require extra attention to allow screen readers to navigate with ease.

Here are five tips for making your contact us form more screen reader friendly:

Tip 1: Label Elements

Since screen reader users cannot see the form itself, and, thus, cannot associate labels with form fields, it is important that the html markup clearly identify which label belongs to which field. Use the label element as follows to make this connection.

<label for="first_name">First Name:</label>
<input id="first_name" type="text" name="first_name" />

Tip 2: Alt

Next, add the alt attribute to indicate which fields are required and which are not.

<label for="first_name">First Name:</label>
<input id="first_name" alt="first name is required" type="text" name="first_name" />

Tip 3: Javascript and CAPTCHA

Elaborate Javascripts can be detrimental to creating accessible forms. Seek other alternatives for your contact us form. CAPTCHA forms use Javascript, and, they are often difficult to use by your fully sighted customers. Give us all a break and use alternatives listed on the CAPTCHA and Other Form Security Options post.

Tip 4: Numbered Lists

Setting the form fields as a numbered list gives extra help to the visually impaired and, if coded well, will not be seen by your fully sighted customers. Use CSS to set your ol tag to list-style:none;. That way the screen reader will read the numbers in the html markup, but they will not be visible on your website.

<ol style="list-style:none;">
<li><label for="first_name">First Name:</label>
<input id="first _name" alt="first name is required" type="text" name="first_name" /></li>
<li><label for="last_name">Last Name:</label>
<input id="last _name" alt="last name is not required" type="text" name="last _name" /></li>
</ol>

Tip 5: Focus The Errors

When the submit button is clicked, contact us forms check the field data and return errors if certain fields are left empty or if data entered is incorrect. Set your form to focus on the first field that needs correcting by having the cursor move into that field.

If you would like a review of your form field, please contact us via our “Just Ask!” form. Looking forward to hearing from you.

Posted on April 10, 2013 | Permalink | Join email list

More WebTip Posts