ARIA - Accessible Rich Internet Application

Another Solution for Required

Required field solution for old and new browsers and screen readers.

 

required First Name *

 

Example Code

<label for="first_name"><em>Required </em>First Name</label>
<input name="first_name" id="first_name" aria-required="true" size="25" maxlength="25" /> <span class="req">*</span>

CSS

.hide_info a, .hide_info a:hover, .hide_info a:visited, .search label, label em {
position: absolute;
…
overflow: hidden;
}

First Name *

 

Now this will cover both new and old screen readers, along with new and old browsers and will now indicate the required status of the form element.