1.3.1 Info and Relationships Level A

[View on W3C.org]

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

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 the difference between legend and label elements?

Legend is a broad label used for a group of objects. Label is used for labeling specific elements.

How do you fix a “suspicious link text” warning in the Wave Scanner?

A good rule of thumb to follow is that all links should still make sense if the text immediately surrounding it is taken away. Take the following for example. You can learn more about this by reading the article here. The only left would be 'here' which doesn't make any sense alone. If we change the sentence structure and the link text a bit we can get something completely different. You can read this article to learn more. What would be left now is 'read this article' which seems rather self-explanatory. If you click the link you will read an article.

What is an orphaned form label?

This warning refers to form labels that exist in the web pages markup but is not appropriately associated with a corresponding field. Best practice dictates that within a form every input element has a matching label element, this can be done by attributing the for field of the label with the same element id of the desired input.

How to resolve this:

Consider the following markup, this code passes accessibility scanners: 
<form>
<label for="name">Your Name:</label>
<input id="name" type="text" placeholder="Enter your Name">
<input type="submit" value="Submit"> 
</form>

Note:
  • The text-input field has the id parameter "name"
  • The label field associated with the text field has the for parameter "name"

How long does the accessibliity process take?

This question depends on a number of factors including size of site, desired level of conformance, your developer's understanding of accessibility techniques, etc. Accessible Web is here to help. Reach out and we can discuss your site specifically.