-
Notifications
You must be signed in to change notification settings - Fork 10
Web development website accessibility testing tools and websites (a11y)
Users must be able to adjust text spacing with no loss of content or functionality.
Contraste is a simple app for checking the accessibility of text against the Web Content Accessibility Guidelines (WCAG).
Useful functions:
- Outline > Outline Tables (e.g. differentiate between “layout” and “data” tables)
- Miscellaneous > Linearize page (e.g. show page in DOM order to verify layout tables still have the correct reading order)
Add the two bookmarklets to your browser bookmarks:
- Check serialized DOM of current page
- Check for WCAG 2.0 parsing compliance
Run the first bookmarklet in the browser tab containing your target page. It will send the page’s DOM to the checker and show the results in a new browser tab.
Run the second bookmarklet in the browser tab containing the checker results. It will filter the results to show only WCAG parsing errors.
Examine the filtered results to verify that there are no errors related to:
- Missing start or end tags
- Duplicate attributes
- Improper nesting of elements
axe: Accessibility for Development Teams
To start testing for accessibility, open the browser’s Developer Tools, navigate to the aXe tab, and run an analysis on a webpage.
Accessibility Insights for Web helps developers quickly find and fix accessibility issues. Learn more about Accessibility Insights at https://aka.ms/accessibilityinsights
The default keyboard shortcut to launch Accessibility Insights for Web is CMD + SHIFT + K.
The Audits panel is now powered by Lighthouse. Lighthouse provides a comprehensive set of tests for measuring the quality of your web pages.
Run it: Open Chrome DevTools, select the Audits panel, and hit "Run audits".
Every Mac is built with assistive technologies to support people who are blind or have low vision. The VoiceOver screen reader describes exactly what’s happening on your screen. Hover Text lets you instantly magnify a selection of text. And Display Accommodations support color blindness and other vision needs.
VoiceOver works best with Safari. If you try to use it with any other browser, it may work for some things, but not as consistently as with Safari.
Keyboard accessibility is NOT enabled by default on a Mac! Your accessibility and screen reader test results will be inaccurate if you do not enable keyboard accessibility in the following two places:
- System Settings: Keyboard > Shortcuts > Full Keyboard Access > All controls
- Safari Settings: Advanced > Accessibility > “Press Tab to highlight each item on a webpage”
Once the above steps are complete, open a webpage in Safari and enable the VoiceOver utility using the F5 key (if on laptop, you may need to hold fn + command + F5).
The VoiceOver Activation keys (called VO keys) are control + option. These keys are used to access special VoiceOver commands and functions.
Use the VO keys and the arrow keys to navigate the page.
See: VoiceOver User Guide
Disable the VoiceOver utility using the F5 key.