Headings and labels

Overview

Headings and labels provide essential information about the content and controls on a page. They organize the content hierarchically, improving navigation and understanding of the page layout. Proper use of headings and labels is not only a leading practice in accessibility but also enhances the overall user experience for everyone. Here are some practical benefits of well-implemented headings and labels:

• Headings and labels act as markers for content, allowing users who rely on screen readers to quickly skip to relevant sections or functionalities without having to pass through unrelated content.
• In applications with multiple levels of content and menus, clear headings help all users, including those with cognitive disabilities, to understand the current location within the app and how to navigate to desired sections, reducing cognitive load and navigation errors.

Principles

• Headings and labels must be clear and descriptive, they should clearly describe the topic or purpose. They should not be vague or generic but instead provide valuable cues about the content and controls they are associated with.
• Headings or labels are not require. It requires that if headings or labels are provided, they be descriptive. 
• Headings and labels must be marked up such that they can be programmatically determined, ensuring that information and relationships conveyed visually are also available to assistive technologies.
• Labels or instructions are provided when content requires user input. This ensures that users understand what input is required and how to provide it, which is especially crucial for those with disabilities.

---

Guidelines

Headings

Headings are textual labels used primarily to organize and structure the content of a webpage in a hierarchical manner. Proper use of headings helps create an outline of the content, making digital documents more accessible and easier to navigate using assistive technologies like screen readers.

Headings markup:

• Headings are typically marked with HTML tags ranging from <h1> to <h6>. This semantic markup tells a screen reader the hierarchy of the content. These tags should be used to convey document structure rather than for visual presentation, each level represents the importance and rank of the sections they headline.
• For instance, <h1> represents the most important heading on the page, typically the main page title, followed by <h2> for section titles, and so on, creating a clear hierarchical structure.
• To maintain a logical structure, it’s important not to skip heading levels. For instance, after <h1>, the next level should be <h2> instead of jumping directly to <h4>.

(Visible) Labels

Labels are the textual descriptions that are displayed on the user interface, on top of, next to or above UI components. These are directly seen by users and help them understand what is the purpose of the UI component.

Labels are typically used for the following elements in mobile applications:

1. Buttons: Labels describe the action that will occur when the button is pressed (e.g., "Save," "Submit," "Cancel").
2. Form Inputs: Each input field should have a label indicating what type of information is expected (e.g., "Name," "Email Address," "Password"). These labels are essential for users to understand what to enter in the fields.
3. Icons: Since icons can be ambiguous, labels clarify their function (e.g., a trash can icon might have the label "Delete").
4. Navigation Elements: Items in menus and tabs use labels to describe the destination or action they link to (e.g., "Home," "Settings," "Profile").
5. Switches and Sliders: Labels explain what these controls adjust, such as volume settings or preference toggles.

Form fields (3.3.2: Labels or Instructions)

A label or an instruction that identify the controls in a form must be present so that users know what input data is expected. In the case of radio buttons, checkboxes, comboboxes, or similar controls that provide users with options, each option must have an appropriate label so that users know what they are actually selecting.

Proper Association of Labels with Form Controls

Labels for form inputs must be explicitly linked to the elements they describe. This is typically achieved using the element with a for attribute that matches the id of the corresponding form control. This linkage is crucial for screen readers to identify the purpose of each input field, enhancing the form's usability.

Programmatic Labels (Accessible Names)

Programmatic labels, or accessible names, are not necessarily visible on the page but are crucial for accessibility because they are read by assistive technologies such as screen readers. These labels are often provided using attributes like aria-label, aria-labelled by, and alt (for images). These types of labels ensure that even if a label is not visually present on the page, it is still accessible to those using assistive technology. Read more about this in Alternative text page.

---

Leading Practices

• Mark the headings in your design, ensure they are be clear, concise & descriptive.
• Ensure headings follow a sequential order to avoid confusion
• Headings should be consistent throughout the design.
• Ensure that labels clearly describe the content or function they represent.
• In forms, a label or instruction that identify each control must be provided.

---

Testing

Testing headings and labels is an important part of ensuring accessibility in our mobile applications. By verifying that headings and labels are clear, descriptive, and consistently applied, we help users understand content structure and identify interface elements more easily, especially when using assistive technologies. Our testing protocols include:

Visual Inspections

Our testing team conducts visual inspections to verify that headings and labels are clear, descriptive, and consistently applied. This manual review helps ensure that content structure is understandable and that interface elements are properly identified for all users.