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:
- Percievable
- Operable
- Understandable
- Robust
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 Accessibility Checker 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 in your browser.
-
Siteimprove
- 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.
- If your website or web application has not been listed to be scanned in
Siteimprove, submit the
Siteimprove Scan Request Form to have it listed to be scanned.
-
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
- The A11y Style Guide and WebAIM have more examples of accessible forms.
-
WebAIM's color contrast checker
- Contrast Rebellion: Why color contrast matters
- Create accessible data tables using the proper table elements (like
<caption>
,<th>
,<tr>
and<td>
) and attributes (likescope
or possiblyheaders
).
Curious what’s required for an accessible interactive component? Check out the ARIA Authoring Practices Guide.
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.
- If your site is in Siteimprove ( SaaS), log in and resolve any accessibility errors.
- If your site is not in Siteimprove, check your site with one of the Siteimprove Browser Extensions and one of the other tools above.
- Different tools catch different errors. Always use two or more.
- 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
tag (like
<header>
,<main>
,<aside>
, etc).
- 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 200%. Verify your website is still usable.
- Make sure multimedia has appropriate text alternatives like transcripts or captions.
- 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 one of the Siteimprove Accessibility Checker extension to test changes against accessibility guidelines—making sure no errors exist.
Resources
- 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-label
vsaria-labelledby
by Léonie Watson - Accessible Digital Map Experiences by The Paciello Group
- Empathy Prompts - What it's like to have a disability
- 10 quick accessibility tests by TetraLogical on YouTube