1.3.1 Info and Relationships Level A

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

[View on W3C.org]

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.

Questions and Answers

What is an orphaned form label?

When using the Wave Scanner to repair my website I saw the warning "Orphaned Form Label", with the description was “a form label is present but it is not correctly associated with a form control”. What is this?