building accessible web forms ensuring compliance to section 508
TRANSCRIPT
![Page 1: Building accessible web forms Ensuring compliance to Section 508](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bff81a28abf838cbf167/html5/thumbnails/1.jpg)
Building accessible web formsEnsuring compliance to Section 508
![Page 2: Building accessible web forms Ensuring compliance to Section 508](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bff81a28abf838cbf167/html5/thumbnails/2.jpg)
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
![Page 3: Building accessible web forms Ensuring compliance to Section 508](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bff81a28abf838cbf167/html5/thumbnails/3.jpg)
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
![Page 4: Building accessible web forms Ensuring compliance to Section 508](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bff81a28abf838cbf167/html5/thumbnails/4.jpg)
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
![Page 5: Building accessible web forms Ensuring compliance to Section 508](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bff81a28abf838cbf167/html5/thumbnails/5.jpg)
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
![Page 6: Building accessible web forms Ensuring compliance to Section 508](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bff81a28abf838cbf167/html5/thumbnails/6.jpg)
Accessible forms go beyond good looks
![Page 7: Building accessible web forms Ensuring compliance to Section 508](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bff81a28abf838cbf167/html5/thumbnails/7.jpg)
Accessible forms go beyond good looks
![Page 8: Building accessible web forms Ensuring compliance to Section 508](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bff81a28abf838cbf167/html5/thumbnails/8.jpg)
Accessible forms go beyond good looks
![Page 9: Building accessible web forms Ensuring compliance to Section 508](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bff81a28abf838cbf167/html5/thumbnails/9.jpg)
Accessible forms go beyond good looks
![Page 10: Building accessible web forms Ensuring compliance to Section 508](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bff81a28abf838cbf167/html5/thumbnails/10.jpg)
Accessible forms don’t require a mouse
![Page 11: Building accessible web forms Ensuring compliance to Section 508](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bff81a28abf838cbf167/html5/thumbnails/11.jpg)
![Page 12: Building accessible web forms Ensuring compliance to Section 508](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bff81a28abf838cbf167/html5/thumbnails/12.jpg)
Accessible forms don’t require a mouse
![Page 13: Building accessible web forms Ensuring compliance to Section 508](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bff81a28abf838cbf167/html5/thumbnails/13.jpg)
![Page 14: Building accessible web forms Ensuring compliance to Section 508](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bff81a28abf838cbf167/html5/thumbnails/14.jpg)
Every point of input should have a label
![Page 15: Building accessible web forms Ensuring compliance to Section 508](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bff81a28abf838cbf167/html5/thumbnails/15.jpg)
Every point of input should have a label
![Page 16: Building accessible web forms Ensuring compliance to Section 508](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bff81a28abf838cbf167/html5/thumbnails/16.jpg)
The anatomy of an accessible form field
<label for=”firstname”>First name:</label>
<input type=”text” id=”firstname” name=”firstname” />
![Page 17: Building accessible web forms Ensuring compliance to Section 508](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bff81a28abf838cbf167/html5/thumbnails/17.jpg)
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>
![Page 18: Building accessible web forms Ensuring compliance to Section 508](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bff81a28abf838cbf167/html5/thumbnails/18.jpg)
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>
![Page 19: Building accessible web forms Ensuring compliance to Section 508](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bff81a28abf838cbf167/html5/thumbnails/19.jpg)
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)
![Page 20: Building accessible web forms Ensuring compliance to Section 508](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bff81a28abf838cbf167/html5/thumbnails/20.jpg)
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/
![Page 21: Building accessible web forms Ensuring compliance to Section 508](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bff81a28abf838cbf167/html5/thumbnails/21.jpg)
Questions & Answers
For additional accessibility & HTML related questions: Michael [email protected]
To arrange for assistance from OET:Tarek [email protected]