Evaluating Web Content for Accessibility

print
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 Web Accessibility Tool

  • 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

HTML5 and ARIA

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: JAWSNVDA, 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?
Leave a Reply