Web Accessibility at Iowa

Provide a visual indicator when a control receives focus

Techniques:

FOCUS

Form controls should provide some visual indicator when they receive focus. One way to acheive this is to assign controls a :focus pseudo-class in CSS. However, checkboxes and radio buttons don't accept the :focus pseudo-class, so a scripted solution may make more sense for those elements.

Example: A :focus pseudo-class to change the visual presentation of a form control onFocus.

<style>
input:focus,select:focus {border:dotted 2px #f00;}
</style>

...

<label for="user-first-name" class="before">First Name: </label>
<input type="text" id="user-first-name" class="txt" />

Example: A script that changes the style of a parent container onFocus.

<script>

function showFocus(el) {
el.style.borderColor="#f00";
el.style.borderWidth="2px";
el.style.borderStyle="dotted";
}

function showBlur(el) {
el.style.borderColor="";
el.style.borderWidth="";
el.style.borderStyle="";
}

</script>

<div class="input-container" tabindex="0">
<input type="radio" id="session" onfocus="showFocus(this.parentNode)" />
<label for="session">Friday, March 28</label>
</div>

View a form that highlights controls when they receive focus