Evaluating Web Content for Accessibility

Not sure if the webpages you are using in your course are accessible? Maybe you are trying to use HTML in your Brightspace courses. Check out WAVE, a Web Accessibility Evaluation Tool created by WebAIM. WAVE is a great tool for web developers, but if you aren’t building a website or webpage, you can still test other website resources you are using. To learn more about Web Content Accessibility Guidelines, preview the WCAG 2.0 Guidelines Checklist.

WAVE is an accessibility evaluation tool that facilitates human evaluation by embedding inline accessibility feedback into your web content.
Dynamic or protected content can be evaluated with the WAVE Chrome extension.
Icons identify potential problems or features. Click an icon to highlight the corresponding element and get more information.
Use the Details panel to review page issues. Click on an icon to find it in the page. Uncheck icons to hide them.
No Styles view can be used to simplify the page view and to check reading order for screen readers.
Click on the Code button at the bottom of the page to reveal a code inspector.

Images

The image alt attribute value is displayed next to the image.
Ensure alternative text conveys the content and function of the image. It should be succinct, accurate, and useful.
Look for images of text where the same presentation can be accomplished using true text.

Headings

View headings in the Outline tab in the sidebar.
Ensure visual headings are marked up as true headings.
The main heading should usually be an <h1>.
Look for skipped heading levels (e.g., <h2> to <h4>).

Contrast

Select the Contrast view.
- WAVE flags WCAG AA contrast issues.
- If links are not underlined, there must be 3:1 contrast between link text and body text and also an additional change (e.g., underlining) on mouse hover and keyboard focus.
A standalone contrast checker is also available

HTML5 and ARIA

Identified in WAVE with light purple icons.
Ensure HTML5 regions or ARIA landmarks are correct.
Check for appropriate use of ARIA roles/states/properties (presented in green).
Ensure ARIA labels and descriptions are correct.

Forms

Ensure forms controls have the descriptive labels.
Use the Code panel to ensure the <label> for and <input> id values match.
If a label is not visible, check for a hidden <label>, aria-label, or title attribute.

Other Common WAVE Checks

Page language is specified (e.g., <html lang="en">).
If data tables are present, ensure table headers are present and have the correct scope.

Check Keyboard Accessibility

To toggle Mac keyboard accessibility press Control + F7. Then in Safari, select Preferences > Advanced > Accessibility > Press Tab to highlight each item…
Navigate the page using only the keyboard:
- Tab: Navigate to links and form controls.
- Shift + Tab: Navigate backwards.
- Enter: Activate links and buttons.
- Spacebar: Activate checkboxes and buttons.
- Arrow keys: Radio buttons, select/dropdown menus, sliders, tab panels, autocomplete, tree menus, etc.
Is anything mouse-only (e.g., rollover menus)?
Is a “skip navigation” link available? Activate the skip link and hit Tab again to ensure it functions correctly.
Is the navigation order logical and intuitive?
Is a visible keyboard focus indicator/outline present?
Test dialogs that ‘pop’ open. Can you navigate and close the dialog? Does focus return to a logical place?
- Modal dialogs maintain focus until dismissed.
- Non-modal dialogs close when focus is lost.
- Esc should also close all dialogs.

Still Need Help, Test with a Screen Reader

Focus on navigation, forms, and dynamic content.
WebAIM tutorials: JAWS, NVDA, and VoiceOver.
Are ARIA roles/states/properties necessary, and do they convey correct information?
If there are forms, submit empty to test error feedback.
Are all dynamic changes and updates accessible?