WCAG 1.3.1 Info and Relationships

When you’re reading a document on the Interwebs, you’ll notice several textual elements: page titles, headers, sub-headers, bullets, and supporting body text. When you fill out forms, you’ll notice that fields are in order (or they should be!), with notes about requiring fields close to the required fields itself. People experiencing visual impairment will rely on this structure to understand what’s what, so it’s imperative that your structure is setup accordingly.

WCAG 1.3.1 Info and Relationships: The basics

Let’s start with the basics. Within the web structure, we have different types of headers: H1, H2, H3, and so on. The higher the number, the more general the text. Let’s take an example of a short snippet of dolphins taking over the world (for those who may not understand the reference, it’s my favorite Simpsons episode ever!)

H1: Dolphins Take Over the World

H2: Dolphins looking adorable has been a cover for something way more sinister

Body text (using dummy text since I can’t come up with a clever narrative)

Lorem ipsum dolor sit amet, pellentesque a, justo tincidunt nec, orci sapien erat imperdiet at curabitur dolor, ac id sed posuere justo. Justo lorem et blandit metus eget sapien, magna ultrices quisque, wisi cursus lacus ut sem orci venenatis. Ultrices donec fringilla ipsam, condimentum consectetuer tellus. Tellus suspendisse taciti velit quam. 

Faucibus justo, vitae urna varius sed, vestibulum accumsan nunc massa ac rutrum. Nisl dolor eget leo nulla, commodo aliquam. Metus massa dictum curabitur accumsan integer sociosqu, odio donec adipiscing libero ac non. Neque in eros eget feugiat cursus, morbi libero, ipsum nulla at et, tincidunt ut praesent massa.

• ​Supporting list item 1
• Supporting list item 2
• Supporting list item 3

WCAG 1.3.1 Info and Relationships: The structure

It’s all about structure. H1 header is a summary of the supporting text. H2 goes into a bit more detail, and then the body text gives the meat on what the headers are about. You’ll also notice a space between paragraphs, as well as a bulleted list.

WCAG 1.3.1 Info and Relationships: Forms

With your forms, follow a couple easy guidelines.

1. For the required fields, make sure your note about the required fields is close to the fields. Easy breezy!

2. Have a colored indicators on what’s required and what’s not. For example, have your “Required Field” note be red, and the required fields are also red. This is also handled using an icon or an asterisk.

WCAG 1.3.1 Info and Relationships: Tables

When displaying complex, structured information – use either a table or some sort of content construction kit that parses the data into a structured format (for example, site extensions that create grids or lists also work well).