Creating Accessible Forms in the 2015 UT Web Templates

Project Description: Redesign the OIT website in order to focus on OIT's services, comply with web accessibility standards, and convert to the 2015 UT Web Templates.

What OIT areas are affected?

See "OIT Website – Forms and Sites.aspx" in the OIT Website Redesign Office 365 group.

Process

1. Download the customized templates

Download template files - Version 3
(Updating from Version 2? See all V3 changes here)

See examples: form template, web app template (no left menu), content page

2. Apply the WebAIM Form Guides

WebAIM form techniques
WebAIM form validation

After reviewing the techniques, build forms using the provided templates. NOTE: the form examples are also mobile friendly. To keep the mobile styles intact, set widths to a percentage rather than fixed width, and avoid using tables unless displaying rows and columns of data. To quickly test the mobile and tablet view, narrow the browser window to the size of a phone or tablet, then confirm that all content and fields are still visible and usable.

3. Apply Accessibility and Usability Techniques

Accessibility and usability techniques

4. Test for WCAG2 AA standards

Use the WAVE accessibility checker to test for compliance. Resolve anything marked as an Error. To be WCAG2 AA Compliant, the number of Errors must be zero. Alerts, Features, and other notes can be reviewed, but do not need to be adjusted to meet compliance.

5. Report Back

Are there options you need that were not included? Did you solve a problem in a very succinct way that others might benefit from? Please email me or email the group and let us know. Sharing issues and solutions will make us all faster, and the final site will be more consistent for our users.

More Accessibility Resources

UT Brand Guidelines: Accessibility
Web Accessibility Initiative - Form Tutorials