Image describes how everyone is involved in the production of an accessible experience - from business analysts, to development, documentation and quality assurance.
Image describes how geeing everyone involved increases quality of experience for everyone and decreases likelyhood of litigation.
<h3>Vital Stats</h3>
<ul>
<li>
<label for="email">
Email
</label>
<input id="email" type="text">
<em>Promise not to spam!</em>
</li>
<li>
<label for="shoe_size">
Shoe size
</label>
<input id="shoe_size" type="text">
</li>
</ul>
<h3>Vital Stats</h3>
<ul class="pres">
<li>
<label for="email">
Email
</label>
<input id="email" type="text">
<em>Promise not to spam!</em>
</li>
<li>
<label for="shoe_size">
Shoe size
</label>
<input id="shoe_size" type="text">
</li>
</ul>
<h3>Vital Stats</h3>
<ul class="pres">
<li>
<label for="email">
Email
</label>
<input id="email" type="email" placeholder="We really need this"
required>
<em>Promise not to spam!</em>
</li>
<li>
<label for="shoe_size">
Shoe size
</label>
<input id="shoe_size" type="number" min="5" max="18" step="0.5">
</li>
</ul>
<h3 id="vitalstats">Vital Stats</h3>
<ul class="pres" aria-describedby="vitalstats">
<li>
<label for="email">
Email
</label>
<input id="email" id="email" type="email"
placeholder="We really need this"
required aria-describedby="emaildesc" aria-required="true">
<em id="emaildesc">Promise not to spam!</em>
</li>
<li>
<label for="shoe_size">
Shoe size
</label>
<input id="shoe_size" type="number" min="5" max="18"
step="0.5">
</li>
</ul>
<div role="alert">Please use a valid email!</div>
$('#email5, #shoe_size5').blur(function(){
//some validation....
$(this).prev('div').attr('tabindex','-1').show().focus();
})
[role="alert"]{
display:none;
....
}