Heading structure: accessibility for designers

  • Author: Access iQ ®
  • Date: 4 Mar 2015
  • Access: Premium

Quick facts

One useful way to help people with disabilities is to ensure that headings are organised into a logical, linear hierarchy.

To do this, designers must:

  • Organise your content into sections.
  • Ensure that each section of content is identified by a heading.
  • Ensure that each heading describes its section of content (this may be the responsibility of the content author rather than the designer).
  • Ensure headings follow a natural descending hierarchy within each section.

Before we talk more about headings, we need to understand what it means to order content in a meaningful sequence.

The design of a website can cover the entire spectrum of information architecture, wireframes, interaction design and the collection of visual design elements that includes branding, typography and surface design.

Navigating information

There are several activities visitors to a site may take part in. Some of the more popular ones include to:

  • Look for information, research, discover or learn.
  • Try to acquire some resource or asset, purchase something.
  • Be entertained or take part in social, conversational activity or an exchange of ideas.

Often they are a combination of any these and other possibilities. What many of these activities have in common is a need to understand the structure of the website and how to find what you require from it.

A website has a visual structure, which all web designers work very hard to convey both the brand and purpose of the site as well as to convey meaning and content for the users of the site. They often suppose that the developers will create the technical structure, but often the design influences the structure.

Meaningful names

One of the ways that helps is for the text to be meaningful. Some users with disabilities depend on the text to communicate the structure, both visually and semantically. It is therefore important to design for names to be unique to each level of heading and descriptive enough to supply meaning.

Assisting and directing developers

The design is one of the resources developers return to in order to create the code and markup for the site. It should speak to them in ways they can understand and reference the semantic structure they will be translating the designs into code. Therefore the designs should be created with developers in mind, and preferably with developers at early stages for insight.

The need for semantic structure

For people with disabilities, particularly those with visual or cognitive disabilities, it is important that the semantic structure of a page or site is well defined and easy for the developers to translate from appearance to code. A visual design that communicates the structure and interrelationships well will improve accessibility.

Writing: Inverse pyramid of importance, follows a sequence

Just as it is important to use a hierarchy of headings to communicate structure and relationships of elements, it is equally important to write in a hierarchical structure as well. The first paragraph should give the reader all they need to know to understand the content in the remaining document. This is most important for long texts and less so for homepages and landing pages, since the latter are designed as summaries of the content they link to.

Using real text benefits the end-user

Real text is text that exists as text within the code; machine-readable rather than something written in Photoshop and output as a JPEG, GIF or PNG. Text sited within the markup and not hidden is the easiest to make accessible to users, since nothing is required to make it so. Text rendered as an image on a webpage requires more effort, since the meaningful text has to be added to the code alongside the image to explain it, and then tested to ensure it is discoverable by browsers and users.

Communicate visual hierarchy

It is easy for developers to communicate hierarchy with code, simply by wrapping headings with the appropriate heading elements. It is not possible to misunderstand an <h3> is a sub-heading of the <h2> preceding it, which, in turn, is a subheading of the page's <h1> element or the <h1> element above it. For designers this is more difficult as the visual hierarchy depends on the perceived relationships between textual and design elements. A useful activity in this process is for designers to indicate the heading structure in their style guides and page designs.

Premium Content

Premium content is available to users that have a current subscription to the content.

This topic is part of our premium content range. To access it, you need a 12-month premium subscription — but let's put that in perspective. How many hours will you waste if you try to find free information on the internet? And how can you be sure that free info is correct? Or comprehensive? Or specific to your role?

With a premium subscription, you get virtually everything you need, all in one place. All you need to do is follow the information provided, and you'll know you're covered.

Each subscription includes:

  • A year of content updates — Premium content is updated regularly, and you get all of those updates for free.
  • Professional support — Ask questions or request further information from an Access iQ™ specialist.
  • Access to Q&A — See the questions and answers submitted by other premium subscribers, so you remain up-to-date on the accessibility challenges faced by others in the industry.

Unlock this content: