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.
|
Screenshot
|
HTML Snippet
|
|---|---|
 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.
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"
For more information about ARIA Landmarks, see the W3C ARIA Landmarks Tutorial.
Table Headers
|
Screenshot
|
HTML Snippet
|
|---|---|
 Image from W3C |
<table> <tbody> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> |
Additional Resources
-
JimThatcher.com, Faveletes for Checking Accessibility (bookmark tool)
-
Accessibility Insights for Web (browser extension)