The Basics of Web Accessibility

The World Wide Web Consortium (W3C) is an international organization that develops and maintains the Web Content Accessibility Guidelines (WCAG). Rather than a checklist, these guidelines are based on the following principles:

• Perceivable – information and user interface components must be presentable to users in ways they can perceive
  • Text alternatives for non-text context
  • Captions and other alternatives for multimedia
  • Content that can be presented in different ways without losing meaning
  • Make it easier for visual users to see content
• Operable – user interface components and navigation must be operable
  • Keyboard functionality as well as other non-mouse inputs
  • Give users time to read and use content
  • Be aware of content that can trigger seizures or physical reactions
  • Straightforward navigation and location of content
• Understandable – information and the operation of the user interface must be understandable
  • Make text readable and understandable
  • Content must appear and operate in predictable ways
  • Help users avoid and correct mistakes
• Robust – content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies
  • Maximize compatibility with current and future user tools

While automated tools can help with some aspects of testing, manual assessment is still needed. One way to do this is to open the inspect window and examine the HTML:

1. Open the Inspect Window:
   1. Right/Alt Click
   2. F12 or Ctrl + Shift + I (Win)
   3. Cmmd + Opt + I (Mac)
2. Move your mouse over elements to see them highlighted in the window and on the page
3. Use the Tab key to cycle through focusable elements

Now that you have your inspect window open you can begin to assess the HTML. The following widely used tags are often the sources of accessibility barriers:

• Headings: <h#>
  • The “#” is the heading level number
    • Example: the title of the page should be <h1>”The Basics of Web Accessibility”</h1> with subsequent headings being <h2>, <h3>, etc.
  • Note: Headings need to be before and after tags in order to be complete (see example above)
• Images: <img>
  • All images need the <img> tag
  • Alt-text: informative images need alt= within the second bracket of the image tag
    • Example: <img src=[url/file source] alt=”a brief description of your image”>
  • Decorative images need to be identified using role=presentation or a null alt tag
    • Example 1: <img src=[url/file source] role=”presentation”>
    • Example 2 <img src=[url/file source] alt=” “>
      •  Note: this is the same as adding an alt-text tag with a blank space where the alt-text would be
• Tables: <table></table>
  • Additionally, table contents need to be tagged appropriately
    • <th></th>for table headers
    • <tr></tr>for table rows
    • <td></td> for table data
  • Note: all table cells and rows need to be within the table tags <table></table>

• How People with Disabilities Use the Web | Web Accessibility Initiative (WAI) | W3C
• HTML Tutorial (w3schools.com)
• Tables Tutorial | Web Accessibility Initiative (WAI) | W3C
• WebAIM: Creating Accessible Tables – Data Tables
• Tables with JAWS (freedomscientific.com) – How JAWS reads tables while in Table mode
• Make Canvas and Websites Accessible