WCAG 2.4.6 Headings and Labels — Testing Guide for Mobile & Web Apps

WCAG 2.4.6, "Headings and Labels," mandates that content is structured and identified in a way that makes it easy for users to understand the purpose of different sections and input fields. In simpler

Ensuring Clear Navigation: A Practical Guide to WCAG 2.4.6 Headings and Labels

WCAG 2.4.6, "Headings and Labels," mandates that content is structured and identified in a way that makes it easy for users to understand the purpose of different sections and input fields. In simpler terms, headings should clearly indicate what follows, and labels should unambiguously describe the purpose of form controls. This criterion is essential for both programmatic understanding and human comprehension.

Why WCAG 2.4.6 Matters: Impact on Real Users

Clear headings and labels are fundamental to usability and accessibility.

• Screen Reader Users: Individuals using screen readers rely heavily on headings to quickly navigate and understand the structure of a page or app screen. Without proper headings, they are forced to linearly read through content, making it inefficient and frustrating to find specific information. Similarly, descriptive labels are crucial for understanding the function of form elements.
• Cognitive Disabilities: Users with cognitive disabilities, including learning disabilities or ADHD, benefit immensely from clear, concise labeling and hierarchical structure. Well-defined headings break down complex information into manageable chunks, improving comprehension and reducing cognitive load.
• Mobile Users: On smaller screens, space is at a premium. Users often scan content quickly. Clear headings and labels facilitate this scanning, allowing them to locate desired sections or controls without extensive scrolling or guesswork.
• Users with Low Vision: While not directly a visual contrast issue, clear headings and labels help users with low vision orient themselves and understand the layout, reducing the effort required to find information.
• Search Engine Optimization (SEO): Properly structured headings are also a significant factor in how search engines understand and rank your content, indirectly benefiting all users by improving discoverability.

Compliance with WCAG 2.4.6 is also a legal requirement in many jurisdictions, including adherence to the European Accessibility Act (EAA) and the Americans with Disabilities Act (ADA) in the United States.

Common Violations and Examples

Violations of WCAG 2.4.6 often stem from a lack of semantic structure or insufficient descriptive text.

#### Mobile App Examples (Android/iOS)

1. Missing or Generic Headings:

• Violation: A mobile app screen displays a list of user settings, but there are no clear headings to delineate sections like "Account," "Notifications," or "Privacy." All items are presented in a single, undifferentiated list.
• Impact: A screen reader user attempting to find their notification settings would have to listen to every single setting item until they stumble upon the correct one.

1. Ambiguous Button Labels:

• Violation: A screen has multiple "Edit" buttons, but without any context. A user might see "Edit Profile," "Edit Address," and "Edit Payment Method." If the buttons are only labeled "Edit," users won't know which profile information they are modifying.
• Impact: Users might accidentally edit the wrong information, leading to frustration and potential data errors. Screen readers would announce "Button, Edit" repeatedly, providing no distinction.

1. Unlabeled Input Fields:

• Violation: A registration form has fields for "First Name," "Last Name," and "Email," but these are only indicated by placeholder text that disappears when the user starts typing. There are no associated <label> elements or contentDescription attributes.
• Impact: Screen readers will announce the input field as "Edit box" or similar, leaving the user unaware of what information is expected. This is a significant barrier for users relying on assistive technologies.

#### Web App Examples

1. Overuse of Paragraphs for Headings:

• Violation: A webpage uses <p> tags with bold styling and a larger font size to simulate headings for different sections of an article.
• Impact: Screen readers and assistive technologies do not recognize these as structural headings. Navigation by heading becomes impossible, and the content structure is lost programmatically.

1. Generic Search Button Labels:

• Violation: A website has multiple search functionalities (e.g., product search, site search, help center search). All search buttons are simply labeled "Search."
• Impact: Users are unsure which search function they are activating, leading to confusion and potentially irrelevant search results.

1. Form Controls Without Explicit Labels:

• Violation: A contact form includes a "Submit" button. However, the button's purpose is only described by surrounding text or its visual appearance, not by an associated <label> element or an aria-label attribute.
• Impact: For screen reader users, the button might be announced only as "Button," without conveying its specific action (e.g., "Submit Contact Form").

How to Test for WCAG 2.4.6 Compliance

Testing for this criterion involves a combination of manual inspection and automated tools.

#### Manual Testing Steps

1. Inspect Headings:

• Web: Use your browser's developer tools (e.g., Inspect Element in Chrome/Firefox) to examine the HTML structure. Look for semantic heading tags (<h1> through <h6>). Ensure they are used hierarchically (e.g., <h2> within an <h1> section, not skipping levels like <h1> to <h3>).
• Mobile: For native apps, use accessibility inspectors (like Accessibility Scanner for Android or Accessibility Inspector in Xcode for iOS). Check that screen elements that function as section titles are properly identified as headings or have descriptive labels.

1. Examine Form Labels:

• Web: For every form input field (<input>, <textarea>, <select>), verify that it has a programmatically associated <label> element. The for attribute of the <label> should match the id attribute of the input. Alternatively, check for aria-label or aria-labelledby attributes that provide a clear description.
• Mobile: Use accessibility inspectors to check contentDescription (Android) or accessibilityLabel (iOS) for input fields and buttons. Ensure these labels are descriptive and unambiguous.

1. Test with Assistive Technologies:

• Screen Readers: Navigate your app or website using a screen reader (e.g., VoiceOver on iOS, TalkBack on Android, NVDA or JAWS on desktop). Try to understand the content and complete tasks using only the screen reader. Pay attention to how headings are announced and if labels are clear.
• Keyboard Navigation: Tab through all interactive elements. Verify that the focus order makes sense and that labels or headings clearly indicate the purpose of each element as it receives focus.

#### Automated Tools for Checking

• Browser Extensions: Axe DevTools, WAVE (Web Accessibility Evaluation Tool) can identify missing labels and incorrect heading structures on web pages.
• Command-Line Tools: eslint-plugin-jsx-a11y (for React) and similar linters can catch common accessibility issues in code during development.
• Mobile Accessibility Scanners: Android's Accessibility Scanner and iOS's Accessibility Inspector can provide automated checks for many accessibility criteria, including missing labels.
• CI/CD Integrated Tools: Tools like Pa11y can be integrated into CI pipelines to automatically scan web applications for accessibility violations.

#### Mobile-Specific Considerations

• contentDescription (Android) / accessibilityLabel (iOS): This is the primary mechanism for providing descriptive text for UI elements that don't have inherent text labels (like icons, images acting as buttons, or input fields without visible labels). Ensure these are set and descriptive for all interactive elements.
• Layout Structure: Native mobile UI frameworks often have concepts of views and containers. Ensure that logical groupings of content are indicated through clear headings or descriptive labels for parent containers when appropriate.
• Placeholder Text: While placeholder text can be helpful visually, it should never be the sole indicator of an input field's purpose, as it disappears on focus and is not reliably announced by all screen readers.

How to Fix Violations

#### Fixing Web Accessibility Issues

• Headings: Use semantic HTML heading tags (<h1>-<h6>) correctly.

    <!-- Before: Using paragraphs for headings -->
    <p style="font-weight: bold; font-size: 1.5em;">Product Details</p>

    <!-- After: Using semantic headings -->
    <h2>Product Details</h2>

• Form Labels: Associate <label> elements with their corresponding form controls using the for and id attributes.

    <!-- Before: No explicit label -->
    <input type="email" id="userEmail">

    <!-- After: With explicit label -->
    <label for="userEmail">Email Address:</label>
    <input type="email" id="userEmail">

    <!-- Alternative using aria-label -->
    <input type="email" id="userEmail" aria-label="Email Address">

#### Fixing Mobile Accessibility Issues

• Android (XML Layouts): Use android:contentDescription for elements that need a descriptive label.

    <!-- Before: Icon button without description -->
    <ImageButton
        android:id="@+id/settings_button"
        android:src="@drawable/ic_settings" />

    <!-- After: With contentDescription -->
    <ImageButton
        android:id="@+id/settings_button"
        android:src="@drawable/ic_settings"
        android:contentDescription="@string/settings_button_description" />

(Where @string/settings_button_description would be defined in res/values/strings.xml as "Settings")

• iOS (Swift/SwiftUI): Use accessibilityLabel for UIView or View elements.

    // Before: Button without accessibility label
    let myButton = UIButton(type: .system)
    myButton.setTitle("Save", for: .normal)

    // After: With accessibility label
    let myButton = UIButton(type: .system)
    myButton.setTitle("Save", for: .normal)
    myButton.accessibilityLabel = "Save changes"

How SUSA Checks for WCAG 2.4.6

SUSA autonomously explores your application, identifying and verifying headings and labels through its intelligent crawling and persona-based testing.

• Autonomous Exploration: SUSA navigates your APK or web URL without requiring pre-written scripts. During this exploration, it identifies all visible UI elements, including headings and form controls.
• Persona-Based Dynamic Testing: SUSA simulates 10 distinct user personas, including "Curious," "Impatient," and "Accessibility" users. The "Accessibility" persona specifically focuses on testing how well the application adheres to accessibility standards like WCAG 2.4.6.
• Detection of Violations:
• Headings: SUSA analyzes the semantic structure of your web pages for