Web Accessibility @ Rice | Info & Relationships

This article contains links to information about how to meet the Web Content Accessibility Guidelines (WCAG 2.1, level A)

Overview of Info & Relationships

On most public web pages, relationships between tex, images, form fields and other content can be understood visually. Sometimes, the underlying page structure doesn't quite match up to what we can see. As web designers, we can take a few steps to ensure that our markup is robust and supports assistive technologies like screen readers.

Forms

Form fields should be properly labeled where the label matches the id of the field input. Clicking the label text will activate the input field.
Table
Screenshot
HTML Snippet
An active form field labeled "Search."
Image from WebAim
<label for="q">Search:</label>
<input type="text" name="q" id="q">

Headings

One of the most essential things we can do is to ensure that our webpages have logical structure is to use headings. All web pages should have one H1 followed by H2s that indicate major sections, H3s that indicate minor sections, etc. Heading levels should not be skipped.
Webpage screenshot with H1 and H2 highlighted and in correct order.
Image from WebIM

Landmarks

Accessible Rich Internet Applications (ARIA) roles define regions of the page known as landmarks. Landmarks have significant benefits for people who use assistive technologies and help them better orient themselves to regions on the page. The main ARIA roles are:
  • role="banner"
  • role="navigation"
  • role="main"
  • role="complementary"
  • role="contentinfo"
  • role="search"
  • role="form"
  • role="application"
A webpage with highlighted landmark regions like banner, navigation, search, and main. 

For more information about ARIA Landmarks, see the W3C ARIA Landmarks Tutorial.

Table Headers

Table header
Screenshot
HTML Snippet
Table header
Image from W3C		 <table>
<tbody>
<tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> 
 

Additional Resources

 

Keywords:
WCAG, 1.3.1, WCAG 2.1, headings, forms, semantic structure, valid HTML, ADA, accessibility, a11y 
Doc ID:
101723
Owned by:
Trisha W. in Rice U
Created:
2020-05-05
Updated:
2023-05-08
Sites:
Rice University