Here's how to create an accessible header structure
Making a website accessible from head to toe: where do you start? Each week, we're going to "strip down" a website and put it under the microscope to show you how to make it more accessible. Today, we're diving into one of the most important parts: building a clear header structure. This ensures that content is well organised and easy to navigate for all users, including those with visual impairments. Our UX expert Tyche has therefore written down 5 tips on how to create accessible header structures.
Introduction
"I am Tyche and I have been working at Cardan since October 2022. At Cardan, I am fully committed to ensuring that every website is not only beautiful and user-friendly, but also accessible to everyone. With my background as a UX designer, I conduct surveys, provide training to UX designers and have consulting sessions where I offer advice."
Tip 1: improve your navigation and user experience
Navigation: screen readers allow visitors to navigate through the headings. This allows them to quickly jump to the desired part of the content without having to go through the whole page.
Information Hierarchy: headings display a clear hierarchy of content, which helps in understanding the structure and relationship between different sections of the page.
Context and quick overview: good headings give visitors a quick overview of the content and help them understand the context of the information.
Efficiency: well-structured headings allow visitors to navigate through the page faster and more efficiently, improving the overall user experience.
Tip 2: Use a clear hierarchy for your headlines
You can achieve a logical structure with headings by maintaining a hierarchical system,
H1: This is the main headline of the page and should reflect the main title or topic of the page. It is better to use only one H1 per page.
H2: Use H2 headings for the main sections within the page. These can be used multiple times to mark different main sections.
H3: These are used for subsections within H2 sections. They indicate further subdivision and detail within an H2 section. The same goes for H4 headings within H3 sections and H5 headings within H4 sections, etc.
Tip 3: consistency in the use of headings
Consistency in the use of headings is important because it ensures
Predictability: Visitors know what to expect as they navigate the page, which is especially useful for people with visual and/or cognitive impairments.
Ease of Use: Consistent headings make it easier to find and understand information.
Professional appearance: A consistent structure makes for a professional-looking and well-organised website.
SEO: Search engines use headings to understand the content and structure of a page, which can contribute to a higher SEO score.
Tip 4: Avoid these common mistakes:
Multiple H1 headings: using multiple H1 headings on a single page can be confusing and undermine hierarchy.
Using styling as headings: using text styling (e.g. bold text) instead of true HTML headings (H1, H2, H3).
Heading for formatting purposes: headings should reflect content structure, not just be used for visual formatting.
Skipping headings: Skipping heading levels, such as going directly from H1 to H3 without an H2 in between, can disrupt hierarchy and navigation.
Tip 5: Check your header structure with the WCAG 2.2 guidelines
The Web Content Accessibility Guidelines (WCAG) at levels A and AA contain specific guidelines for the structure of headings. By applying the WCAG guidelines and testing them regularly, you can ensure that your headings structure is both accessible and user-friendly. The following two guidelines are important for this:
Directive 1.3.1: information, structure and visual relationships should be represented in the code in the same or equivalent way for auxiliary software.
Directive 2.4.6: headings and labels describe the subject or purpose of the content.
You can test the guidelines by doing the following:
Reading software testing: use pre-reading software such as VoiceOver, NVDA or JAWS to walk through the page. Check whether the headings are structured logically and hierarchically.
Self-testing: use browser extensions such as WAVE or Axe to check the heading structure. These tools highlight any problems with the hierarchy of headings. Also, always manually walk through the headings on a page yourself.
With this approach, you ensure that everyone, regardless of their limitations, can easily navigate and understand your content.
Want to know how your website or app scores on accessibility?
My colleagues and I are ready to examine your digital product based on WCAG 2.2 guidelines. We would be happy to help you on your way to a fully accessible website or app.
