Create Accessible Forms and Develop a User-Friendly Website
Published on 28 September 15
Helios0
Forms are integral part of your website. They are a valuable tool to collect information from the user. On one hand, a brand owner wishes to get all possible information from the visitor and on the other hand, users are generally not willing to fill-up lengthy form. Honestly, it is a cumbersome task. There should be some best middle solution to create forms which are not boring and serve the purpose of collecting data.
There are many issues which makes forms cryptic and inaccessible. In this article let us take a look at such issues and try to find solution for the same.
Forms comprise of three elements, question / heading, answer options and third and very important Error message. Question or heading it out of discussion here as it is framed as per required. But answer option and error prompts can be discussed in details.
- Answer options - in each form answer can be collected in more than one type- it could be simple textbox, radio or checkbox. There must be a relationship between question and answer. Readers with perfect sight can read the questions and answers and relate them accordingly. But for readers dependent on the screen reading tool, unrelated question-answer can become very hard to understand. While writing the duo in HTML, you should use the <fieldset> tag to relate these two elements together. Screen readers will read these elements properly.
<fieldset>
<legend>Do you like running</legend>
<label for="radio1"><input id="radio1" name="run" type="radio" value="yes" /> Yes</label>
<label for="radio2"><input id="radio2" name="run" type="radio" value="no" /> No</label>
</fieldset>
- Error Messages - This element is often neglected by many developers. Either they do not implement it properly or if done, then error messages used are not easy to understand. Sometimes required fields are not marked or it is utterly mess what type of information is expected in which box. Sometimes it happens that when user fill-up the complete form with efforts and pushes submit button, the page reloads with mysterious error messages erasing all the filled data. This situation is quite annoying for user and he might not be ready to enter it all once again. Result - you lose your visitor’s precious data. Very few developers understand the importance of meaningful and guiding error messages and use in their code.
- Required fields - while designing form, you must decide which information is must to be entered and which can be left blank. Represent it in a way user clearly understand the rules. You can use your own way to indicate the required fields, however, putting a small red star next the field is generally used on HTML forms.
<p>* fields are required</p> <p><label for="surname">Surname *</label> <input id="surname" type="text" />
The above HTML code will highlight the required field in the form and screen reader program will also ensure to hint the user. Another option is to write required=true clause in the tag.
- Instructions and Helpful Messages - proper instructions can make user’s life easier. With instructions about what type of information is expected in the field can help user to fill-up form without making any errors. You can pre-load text in required format in the textbox and then make it blank as soon as user starts typing in the field. This is particularly useful to indicate date format or email addresses, postal address fields.
Forms are your most important tool. Make them user friendly and they will help you collect all possible information about your users. Builds a database for you. Keep tuned to our blogs for such updates, comment for your opinions on the same. Helios Solutions - Website Development Specialists
This blog is listed under
Development & Implementations
Community
Related Posts:
Post a Comment
