Part 2: Guidelines for clear links, headings and lists

Part 2: Guidelines for clear links, headings and lists

In the process of improving the ABC website, the project team thinks a lot about the design options available on each web page. They know very well how important it is to formulate links, headings and lists wisely. This allows them to maximise the chances of visitors first finding the site and then navigating it.

They also recognise the importance of removing barriers for all website visitors, regardless of disability. They know that clear headings make navigation easier, and that lists emphasise structure. They start by reviewing the links on the pages that should remain.

Logical links lead visitors in the right direction

While prioritising and cleaning up the pages, the project team noticed that many pages contain links that don't say much about where they lead: links like Read more or Click here.

The project team decides to replace all those links and formulates this principle: write each link so that it has the same name as the title of the page it leads to (the landing page). For example, the link to the page about ABC's activities is named, very descriptively, This is what ABC does. They also check that the title of the landing page (the one that appears in search results) is This is what ABC does, and that the main title of the page is also This is what ABC does.

Headings empower users

On the pages themselves, the project team continues to work on the subheadings. They know that headings are important both for search engines and for visitors.

They therefore formulate headings that describe the content and give visitors an overview. Visitors should only need to scan the page to understand what the text contains, and thus be able to move on to the section that interests them. The principle they follow is: the headings on a page should describe the content of the sections on the page and be formulated as a statement, or a question that is answered directly under the heading. For example, ABC has a page about working at ABC: Working with us at ABC. On that page, they use the headings Available positions at ABC, ABC values and Meet ABC staff.

Style sheets make the pages searchable and give visitors an overview

As the project team goes through the pages, they make sure to format the headings with the stylesheets available in the publishing tool, rather than just highlighting headings in bold, for example. They do this for both search engines and accessibility. They know that search engines penalise web pages that have unformatted subheadings – and subheadings that do not describe the content.

Anyone reading a web page with a screen reader also needs properly formatted headings. A screen reader can read all the headings on a page, giving visitors an overview of the different sections of the page – especially if the subheadings describe the content well.

In the guidelines, the project team talks about how headings should be formatted on the ABC website.

• Each web page should have a single main heading with the heading tag <h1>.
• The highest level of intermediate headings should have the <h2> heading tag.
• The next level should have the <h3> tag.
• If deeper heading levels are needed, they should come in the order <h4>, <h5> and <h6>.

Lists highlight content on the page

The project team ensures that bulleted lists are used where appropriate on the web pages. The bulleted lists help to make the pages clear and highlight what is important on the web page.

There are many rules for creating easy-to-read and symmetrical bulleted lists. The project team knows that the rules can be overwhelming for many writers. Therefore, they decide to develop three types of bulleted lists that writers can use as models. They encourage writers to use only these types.

Type 1 Use full sentences, both in the introduction and in each paragraph. Capitalise and punctuate as usual. Put a colon after the introduction.

At ABC we have three main communication channels:

• We use Facebook to promote our products and services.
• On LinkedIn we communicate company news, but do not sell.
• Instagram shows who we are in text and images, with posts about internal and customer activities.

Type 2 Start with a complete sentence and let each paragraph be a word or a few words. End the opening sentence with a colon. Put a period at the end of the bulleted list.

We cooperate with the following organisations:

• sports clubs
• non-profit organisations
• cooperatives.

Type 3 Make the whole list into a single sentence starting with the introduction and ending after the last bullet point.

If you work at ABC, you will have

• competent colleagues
• regular professional development
• flexible working hours.

Improve the guidelines continuously

The project team is constantly working on and adding new advice to the website guidelines – now on headings, links and lists. They are continuously informing and training everyone who will need the guidelines in the future. Now, some new groups are being trained: not just the experts and the small web editorial team, but also the many people who produce content for the site.

A new wave of relief washes over ABC: "Now we know what to do."

With guidelines on clear links, headings and listings, you can contribute to these goals

All remaining pages on the ABC website now have descriptive links, content-rich headings and bulleted lists highlighting content. But which of the UN Global Goals has the project team contributed to?

• Goal 7: Sustainable energy for all
  The project is likely to have reduced ABC's energy needs by reducing the number of clicks back and forth on the website. With good links and headings, users find their way straight away.
• Goal 8: Decent work and economic growth ABC employees have been provided with guidelines that remove stress and help them feel good at work.
• Goal 16: Peaceful and inclusive societies
  The website is now accessible to all, regardless of disability.

Read more about the ABC organisation in parts 1 and 3 of our blog. Part 1 explained how ABC took control of the content of the website. Part 3 is about the linguistic expression of the website.