WCAG 2.1 – Criterion 1.3.1 – Information and Relationships: (Level A) part 1

Is the structure on the website important?

Today we will focus on the criterion that answers this question. This is one of the more extensive criteria in terms of the number of techniques that ensure accessibility. All of them are listed on the W3C website. We have elements to check such as headings, landmarks, but also forms (their grouping) and labels. We also check tables and lists.

A world without structure

Imagine if we were to eliminate all elements that give shape to an article. There would be no headings, lists, and form fields would not have labels. The entire content is a wall of text, and forms are only text fields. Nightmare, right? What do you say to a form that does inform the user about the purpose of each field? That’s what we’re aiming for.

It seems trivial at first glance, but here is where the perspective of people using assistive technologies begins. Let’s close our eyes and try to navigate the same page, the same text, the same form without using a mouse, only with a keyboard and a screen reader. Without knowing that bolded text in larger size is a heading, we won’t be able to quickly navigate to the section we’re interested in. If the form only “informs” us that we are in a text field, we won’t be able to fill it out correctly. A label visible to us but not associated with that field is completely useless, for example, for blind people.

List of articles discussing forms and labels:

• Description of form fields https://developer.mozilla.org/en-US/docs/Web/HTML/Element#forms
• Great article on proper implementation of labels in forms https://css-tricks.com/html-inputs-and-labels-a-love-story/