Developing Accessible Websites and Digital Tools
NOTE: UVA follows the WCAG 2.2 AA standard for digital content compliance.
As you begin to consider the accessibility of your digital assets, your first step is to take a deep breath and understand this is a journey, not a one and done.
When creating new assets (i.e. web pages, online documentation, applications) it is always best to embed accessibility into your project at the beginning, not as an afterthought. There are tools available that can be integrated into your Agile or other development and testing processes that will help you spot issues while your product is still in these early phases. Level Access' Continuum (available for free) and Deque's axe DevTools are two examples.
Assessing the accessibility of existing web pages, applications and content can quickly become overwhelming. Again, take a deep breath, understand this is going to take time, and adopt the philosophy of progress not perfection. The follow steps can help you get started:
- If you are new to digital accessibility, take advantage of the many introductory training options available on the internet. Some examples are:
- Understand your digital footprint.
- How many digital assets do you have (i.e. websites/digital documents/interactive web pages/applications)?
- How many of these assets are under your control?
- Establish a priority.
- Which are the most visited/used and which are the most important assets?
- Can you delete those assets that are no longer being accessed?
- Build a plan for remediation.
- Who contributes content?
- Address high priority items first.
- Master the core skills, taking one at a time.
- Establish a plan to continue the testing, remediation and reporting cycle, integrate accessibility in new projects, and sustain the effort over time.
- Adopt an industry standard Maturity Model. Some examples are:
Below are several resources to help you evaluate digital assets for compliance with accessibility standards followed by the University. Keep in mind that automated testing tools uncover less than 30% of potential accessibility issues. It is important that you also conduct a manual/functional evaluation. According to Section508.gov, “Automated testing and evaluation tools are not sophisticated enough to tell you, on their own, if your site is accessible, or even compliant. You must always conduct manual testing to ensure full compliance with the Revised 508 Standards.”
The following groups of tools, vendors and guidance resources (listed in no particular order) are starting points. A simple web search will uncover many more tools - both free and for-fee.
Help From Peers @ UVA
- Join the DAP_Tech (DAP underscore Tech) email discussion list hosted at UVA
- Join the UVA DAP Slack Channel (Contact [email protected] for access to the channel)
Guidance
- ARIA Authoring Practices
- Accessibility in Drupal
- Drupal Groups: Accessibility
- WordPress Codex Accessibility
- WordPress Accessibility Team Blog
- W3C Evaluating Web Accessibility Overview
- How to Meet WCAG (Quick Reference)
- How To Test Websites for Accessibility - Free Testing Tools (George Mason University)
- Web-Based Media Player Accessibility Comparison Table
Tools and Checkers
Compliance Checkers
- Accessibility Insights
- WAVE by WebAIM
- Free Web Accessibility Tools from Level Access
- Accessibility Testing: Deque Systems - axe Tools
- HTML Validator - Firefox and Chrome extension
- HTML Tidy
- ANDI
- Accessibility Viewer (aViewer)
Manual Testing
- Manual Testing for Accessibility (Harvard)
- How To Conduct A Manual Test (Standford)
- Automated vs Manual Testing
- The 6 Simplest Web Accessibility Tests Anyone Can Do - Karl Groves
Color and Contrast
- Testing Your Page For Color Blindness
- LevelAccess Color Contrast Checker
- Deque Color Contrast Analyzer
- Contrast Checker (Acart Communications)
- Colour Contrast Analyser (The Paciello Group)
- Color Oracle
- Photosensitive Epilepsy Analysis Tool | Trace Research & Development Center
Other Helpful Tools
- #NoMouse Challenge
- Non Visual Desktop Access (NVDA): a free screen reader
- Web Disability Chrome Extension Simulator (Github)
- Lighthouse (Chrome extension for testing or in a continuous integration process via Node)
Browser Built-in Accessibility Tools
- Chrome DevTools Accessibility Reference
- Firefox Accessibility Inspector
- Microsoft Edge DevTools: Accessibility
Guidance from Peers
- Univ of Washington: Developing Accessible Websites
- Univ of Minnesota: Cultivate Inclusion
- Univ of Colorado - Boulder: VIDEOS: Demos of blind and low vision users
- Princeton University: Digital Accessibility
Checklists
- Univ of Washington: IT Accessibility Checklist
- WebAIM's WCAG Checklist
- WebAIM's Section 508 Checklist
Key Consultants, Tools and Products
- AccessibilityOz
- Deque
- The Paciello Group
- Level Access
- Tenon.io
- Converge Accessibility
- Able Player | Fully accessible cross-browser HTML5 media player
Advisory: Avoid the use of accessibility overlays
- Overlay Fact Sheet (An open letter about accessibility overlays. Karl Groves, April 2021)
- Accessibility Overlays in Digital Content
- Is Deploying an Accessibility Overlay or Widget Better Than Doing Nothing?
- Lies, Damned Lies, Overlays and Widgets
- Honor the ADA: Avoid Web Accessibility Quick-Fix Overlays