For Designers & Developers
WVU information and communications technology (ICT)—including websites, emails and digital documents—must be ADA compliant through Section 504 of the Rehabilitation Act of 1973 and Title II of the Americans with Disabilities Act. Accessibility is measured through the Web Content Accessibility Guidelines (WCAG 2.0).
Before going live, your web site or app must contain zero WCAG 2.0 A/AA errors.
WCAG 2.0: P.O.U.R
The Web Content Accessibility Guidelines operate on the following tenets:
The web has many resources explaining the POUR success criteria. For a quick overview, read WCAG 2.0 at a Glance.
Tools for Accessibility Testing:
You can test your website with the following tools:
Siteimprove Chrome Extension
- To date, we've found this to be the best free accessibility tool to test any single page.
- It doesn't matter if your page or application requires authentication. This tool checks pages as long as you can view the URL it in your browser.
- WVU uses Siteimprove (it's SaaS platform) to monitor accessibility compliance, quality assurance, and search engine optimization.
- University Relations pays for a limited Siteimprove license. If you have questions about Siteimprove or how to get your site added, please contact us.
Lighthouse by Google
- Chrome Developer tools includes Lighthouse by default. To use it, open developer tools (right click on a web page > Inspect Element) and go to the "Audits" tab. Click, "Perform an audit." Be sure to check the Accessibility option.
- You can also test your site's Performance, Best Practices, and Progressive Web App scores.
- Lighthouse is also available from the command line or as a Node module.
Tools don't catch everything
Don't forget—automated testing is only part of the accessibility process. Experts estimate tooling can only catch about 40-50% of accessibility issues. In addition to running automated accessibility checkers, you'll want to do manual accessibility testing.
For example, you could perform manual testing with a screen reader or double check alternate text on images (since they are often written incorrectly).
Develop with accessible patterns
When creating web sites or applications, choose your technology wisely. Using appropriate color contrast, semantic HTML5 markup and accessible front-end components go a long way to ensure your site or application will be accessible.
- Frend: A collection of accessible, modern front-end components.
- Accessible Components by Scott O'Hara
- Accessible Forms and how to correctly hide form labels
- Contrast Rebellion: Why color contrast matters
- WebAIM's color contrast checker
What to do before submitting a site or web application for approval
As stated above, before release to the public, all WVU web properties must have zero WCAG 2.0 A/AA errors. Follow these steps to check accessibility prior to approval:
- Use Siteimprove to check for errors.
- Follows all of our Golden Rules for Content Creators.
- Avoids Common Accessibility Pitfalls.
- Manually check your site using a screen reader.
- Check alternate text.
- Check that you’re using HTML elements for what they are designed for.
- This includes making sure every section of your page is wrapped by an HTML5
- This includes making sure every section of your page is wrapped by an HTML5 tag (like
- Use a keyboard to navigate your site, making sure keyboard focus is apparent.
- Strive to create highly visible focus indicators.
- Increase zoom to 400%. Verify your website is still usable.
- Validate any linked PDF documents for accessibility.
Accessibility monitoring for live sites and apps
Siteimprove is our primary accessibility compliance monitoring tool. Siteimprove scans sites weekly for accessibility, quality assurance, and search engine optimization. To help users stay on top of errors, Siteimprove emails users a weekly site report.
Oftentimes, sites in production have errors from new content, updated templates, or content authors with little knowledge of accessibility. Do your best to fix these errors and maintain a high accessibility score in Siteimprove. Keep in mind, sites in production are the ones people are using. They are simultaneously our biggest asset and our biggest liability.
If you make changes to a site, use the Siteimprove Chrome Extension to test changes against accessibility guidelines—making sure no errors exist.
- 18F Accessibility Checklist
- WCAG POUR Accessibility Cheatsheet by bitsofcode.
- Making Complex Images Accessible by Supada Amornchat of Portland Community College - Instructional Support / Accessibility
- Alt vs Figcaption by thoughtbot
aria-labelledbyby Léonie Watson
- Accessible Digital Map Experiences by The Paciello Group
- Empathy Prompts - What it's like to have a disability