MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

Create Accessible Forms and Develop a User-Friendly Website

Published on 28 September 15
572
0
1
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.
Create Accessible Forms and Develop a User-Friendly Website - Image 1
  • 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














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.

Create Accessible Forms and Develop a User-Friendly Website - Image 1

  • 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 tag to relate these two elements together. Screen readers will read these elements properly.


Do you like running

Yes

No

  • 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.


* fields are required

Surname *




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

Please notify me the replies via email.

Important:
  • We hope the conversations that take place on MyTechLogy.com will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
You may also be interested in
Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top