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.
- reading order for screen readers. view can be used to simplify the page view and to check
- Click on the button at the bottom of the page to reveal a code inspector.
- 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.
- View headings in the tab in the sidebar.
- Ensure visual headings are marked up as true headings.
- The main heading should usually be an
- Look for skipped heading levels (e.g.,
- Select the view.
- 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.
- Ensure forms controls have the descriptive labels.
- Use the Code panel to ensure the
- If a label is not visible, check for a hidden
Other Common WAVE Checks
- Page language is specified (e.g.,
- 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.