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


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>


I Am suresh(suresh kumar )a Web developer,Freelancer,webdesigner,UI developer from bangalore. Got 6+ yrs of IT experience . I specialize in standards-based XHTML, CSS and JavaScript web development. Each site I develop is built to be search engine friendly (SEO), using the latest development principles and techniques.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *