1.3.1 Info and Relationships Level A

Testing & Remediation

How to test: Perform each of the tests listed below to evaluate the semantics of your page/s:

• Headings - are heading identified?
  • Chrome Developer Tools
    • Inspect page
    • View element headings
  • JAWS Screenreader
    • Use H to cycle through headings on the page
    • Use 1 to navigate to the main heading
    • Use keys 2 though 6 to navigate to sub-headings to make sure heading levels are not skipped
  • VoiceOver for Mac
    • Once turned on, press Control + Option + U to bring up the web options
    • Use the right or left arrow keys to display the headings menu
    • Use the up and down arrow keys to move between headings.
  • VoiceOver for iOS
    • After VoiceOver has been turned on, set the rotator to "headings".
    • Navigate through headings using swipe down gestures.
    • While swiping through headings, make sure they are in order and that only heading content is included.
• Are lists marked up as lists?
  • Chrome Developer Tools
    • Inspect list element
    • Ensure list is coded as an ordered or unordered list
  • JAWS
    • Use the L key to cycle through lists on the page
    • Use the I key to cycle through the list items in a list
  • VoiceOver for Mac
    • Press the follow key combination: Control + Option + Command + X. This will move through the lists on a page. Add the Shift key to move backwards
    • Press Control + Option + left/right arrow keys to move between list items
• Are data tables identified as such and coded with appropriate column and row headers?
  • Chrome Developer Tools
    • Inspect the table element to ensure proper <th> (table headers) and <td> (data cells) are present
  • JAWS
    • Use the T key to cycle through tables on the page
    • To navigate through the content, use the following keystrokes and listen for appropriate header info
      • Alt + Control + right/left arrow keys to move between cells in a row
      • Alt + Control + up/down arrow keys to move between cells in a column
  • VoiceOver for Mac
    • Press Control + Option + T to move between tables. Add the Shift key to move backwards
    • To navigate through the content, use the following keystrokes and listen for appropriate header info
      • Alt + Control + right/left arrow keys to move between cells in a row
      • Alt + Control + up/down arrow keys to move between cells in a column
• Are page regions properly identified?
  • Chrome Dev Tools
    • Inspect your page elements and ensure the regions have helpful names
  • JAWS
    • Press Control + Insert + R to display a list of regions on the page
    • Ensure their names are helpful
  • VoiceOver for Mac
    • Press Control + Option + U to bring up the web rotor.
    • Use the right/left arrow keys to display the landmarks menu
    • Use the up/down arrow keys to move between landmarks
• Are ARIA attributes used correctly?
  • Chrome Dev Tools
    • Inspect the element you are looking at and click the Accessibility options. Scroll down to the "ARIA Attributes" section to verify there is an ARIA attribute present
• Are your forms structured properly?
  • Chrome Dev Tools
    • Inspect a form input and ensure that each input has a relevant ID, name & type
  • JAWS
    • Use the F key to cycle through the form controls on a page
  • VoiceOver for Mac
    • Press the Control + Option + Command + J keys to move between form controls on a page
• Are other, miscellaneous semantics properly coded?
  • Chrome Dev Tools
    • Inspect the page and verify the HTML elements are semantically accurate and convey the content's meaning, structure & relationship

How to remediate: There are a number of ways to remediate issues related to this success criteria. Please view the W3C link above for details about techniques used to conform to this success criteria.