Building accessible web formsEnsuring compliance to Section 508

Foundational considerations

• Accessible forms go beyond good looks

• Accessible forms don’t require a mouse

• Every point of input should have a label

• Whatever the functionality, degrade gracefully

Foundational considerations

• Accessible forms go beyond good looks

• Accessible forms don’t require a mouse

• Every point of input should have a label

• Whatever the functionality, degrade gracefully

Foundational considerations

• Accessible forms go beyond good looks

• Accessible forms don’t require a mouse

• Every point of input should have a label

• Whatever the functionality, degrade gracefully

Foundational considerations

• Accessible forms go beyond good looks

• Accessible forms don’t require a mouse

• Every point of input should have a label

• Whatever the functionality, degrade gracefully

Accessible forms go beyond good looks

Accessible forms go beyond good looks

Accessible forms go beyond good looks

Accessible forms go beyond good looks

Accessible forms don’t require a mouse

Accessible forms don’t require a mouse

Every point of input should have a label

Every point of input should have a label

The anatomy of an accessible form field

<label for=”firstname”>First name:</label>

<input type=”text” id=”firstname” name=”firstname” />

The anatomy of an accessible form field

<label for=”cookies”>Favorite cookies:</label>

<select id=”cookies” name=”cookies”><option value=””>Please select a cookie</option></select>

The anatomy of an accessible form field

<fieldset> <legend>Milk types</legend> <label for="beverage_skimmilk"><input id="beverage_skimmilk" name="beverage" type="checkbox"/> Skim Milk</label>

<label for="beverage_2milk"><input id="beverage_2milk" name="beverage" type="checkbox"/> 2% Milk</label>

. . . </fieldset>

Whatever the feature, degrade gracefully

Javascript/AJAX form processing or event handlersDegrade to server-side form processing & handlers

Complex form or page display requiring DHTML/JavascriptDegrades to intuitive, text-only display

Image elements in the form used to convey informationText alternative (or no dependency upon that image)

Accessibility resources

Section 508 http://www.section508.gov

Web Developer Add-on for Firefoxhttp://chrispederick.com/work/web-developer/

Lynx web browserhttp://lynx.isc.org or for the Mac: http://habilis.net/lynxlet/

More online accessibility tools:http://webaim.org/articles/freetools/

Questions & Answers

For additional accessibility & HTML related questions: Michael Tangenmichael.tangen@state.mn.us651-201-1045

To arrange for assistance from OET:Tarek Tomestarek.tomes@state.mn.us651-556-8003