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 panel to review page issues. Click on an icon to find it in the page. Uncheck icons to hide them.
- view can be used to simplify the page view and to check reading order for screen readers.
- Click on the button at the bottom of the page to reveal a code inspector.
Images
- The image
altattribute 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 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 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>forand<input>idvalues match. - If a label is not visible, check for a hidden
<label>,aria-label, ortitleattribute.
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
- 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?