Forms for Differently Abled
Hi people. Its been a long time since I have posted anything on this blog. We had this idea that we will be sharing our ideas and experiences. Actually this post should have come earlier if I would have known how to show HTML code nicely in the posts. But this time, things are better. So here it is...
It all started during the SDRC-UG introduction session with the BBA-IT freshers of our college, SICSR. This time we had decided to put the recruitment process online where the students have to register themselves online. Naturally they have to fill the form (<form>).
One of the students came to me and asked various things and told me that he is one of those differently-abled people. Just then I realized whether the forms that we had been designing since beginning can be accessible by such people. When Google-d it out, I came to know that all those forms are not for such people. Crap...:-( I am sure all those in the same field could feel the same way. So much work done over the years and still we are not able to design forms for differently-abled people.
So, now its our duty as web designer to make our forms accessible to these peoples. Although the quantity of such people accessing Internet is less, but we can't take them for granted. Its our duty not to let them feel neglected and give them the same platform as for the others.
So, I take this responsibility to make other web designers aware of this fact (of course, who are not aware of this stuff. If any one has more, please let us know. We are always free for learning).
Usually we use very less tags that can be used for designing web forms. I am sure very less new web designers will be aware of this fact and the use of <label> tags. This tag is very useful for these people as the screen readers that are used by them relates the contents of <legend> tag with the associated input field.
Here is how to use it.
the 'for' attribute of the <legend> tag creates the requisite association among the related fields. This value should match the corresponding <input> tag's 'id' attribute to complete the linking process. That's it. Your form is done. See how simple it is.
<legend> tag provides logical linking between the elements. There are more such tags which are still to be used and I think can provide much more functionality and design additions. For example, <fieldset> tag.
<fieldset> tag groups related information in a box. Take this example.
The box thingy ;-) really looks awesome and gives more control over the form information. On top of that, if you add some more markup, you can have some really good looking forms. Here is an example...
Also you can add a <legend> tag that gives a heading to your group data box.
<legend>Your comments on the article</legend>
And the output will be something like this.
Such simple things that could enhance both - the design as well as the accessibility of the form. I hope all those people that are just making web forms should consider this and go ahead.
Rest...everyone is very good at his place. Just little add-ons make life much more easier.
What else to write. Now go and tweak your forms. What are you looking ahead. This is the end of post.
Finally this post is ready to be put up.....
It all started during the SDRC-UG introduction session with the BBA-IT freshers of our college, SICSR. This time we had decided to put the recruitment process online where the students have to register themselves online. Naturally they have to fill the form (<form>).
One of the students came to me and asked various things and told me that he is one of those differently-abled people. Just then I realized whether the forms that we had been designing since beginning can be accessible by such people. When Google-d it out, I came to know that all those forms are not for such people. Crap...:-( I am sure all those in the same field could feel the same way. So much work done over the years and still we are not able to design forms for differently-abled people.
So, now its our duty as web designer to make our forms accessible to these peoples. Although the quantity of such people accessing Internet is less, but we can't take them for granted. Its our duty not to let them feel neglected and give them the same platform as for the others.
So, I take this responsibility to make other web designers aware of this fact (of course, who are not aware of this stuff. If any one has more, please let us know. We are always free for learning).
Usually we use very less tags that can be used for designing web forms. I am sure very less new web designers will be aware of this fact and the use of <label> tags. This tag is very useful for these people as the screen readers that are used by them relates the contents of <legend> tag with the associated input field.
Here is how to use it.
the 'for' attribute of the <legend> tag creates the requisite association among the related fields. This value should match the corresponding <input> tag's 'id' attribute to complete the linking process. That's it. Your form is done. See how simple it is.
<legend> tag provides logical linking between the elements. There are more such tags which are still to be used and I think can provide much more functionality and design additions. For example, <fieldset> tag.
<fieldset> tag groups related information in a box. Take this example.
The box thingy ;-) really looks awesome and gives more control over the form information. On top of that, if you add some more markup, you can have some really good looking forms. Here is an example...
Also you can add a <legend> tag that gives a heading to your group data box.
<legend>Your comments on the article</legend>
And the output will be something like this.
Such simple things that could enhance both - the design as well as the accessibility of the form. I hope all those people that are just making web forms should consider this and go ahead.
Rest...everyone is very good at his place. Just little add-ons make life much more easier.
What else to write. Now go and tweak your forms. What are you looking ahead. This is the end of post.
Finally this post is ready to be put up.....
Comments
Post a Comment