fix for accessibility issue with mandatory ( required fields )

There is lot of thoughts going on how to fix this issue. It really depends on how we are trying to get this fixed.

There are numerous ways to tackle this issue

What I could see from our code is (*) not an image so we can’t expect an alt tag from that

Possible solution

Make (*) an image rather than text and provide ALT and TITLE tag to it. Will resolve the accessibility issue

Asterisk next to either label or field marking the field as required:  ( Yahoo & IBM uses this technique )

Bold label marking the field as required: (technorati uses this )

first Name

Email

The word “optional” or “required” in brackets next to either the field or the label: ( wikipedia and bugzilla uses this )

There are other 2 ways of doing it

use of <abbr> tag EX: <label for=”name”><span>*<abbr>name is a mandatory field</abbr></span></label>
we can have class=”screen-reader-only”

.screen-reader-only {

height: 1px;

left: -10000px;

overflow: hidden;

position: absolute;

top: auto;

width: 1px;

}

i.e : <label for=”name”><span>*</span><span class=”screen-reader-only”>name is a mandatory field</span></label>