Organise your WordPress web content to help visitors navigate within your pages

Help visitors navigate within your pages

It’s not just your overall website that needs to be well organised and easy to navigate, the same applies to your individual page content. In this section I introduce two simple ideas to help make your content more accessible, whether your visitors are disabled or not. The first idea relates to the visual layout of your content and the second to ensure that you are adding headings in a way that improves rather than hinders accessibility.

Use page layout to suggest content structure

The amount of ‘page real estate’ you give to each section should reflect the importance of that area to your target audience. Ideally you should try to create a visual hierarchy that reflects both the importance of each section and how each section relates to every other section.

In the example above, the largest area of the page is clearly on the left which implicitly tells the visitor to ‘start here as this is the most important bit’. Well organised pages are not only more accessible but also easier to use because visitors spend less time trying to figure out where to start and where to go next.

I’ll admit this is not a groundbreaking idea and that you will not always be able to apply it to every page. However, if you have it in mind each time you create a new page it will help you to organise your content and it will help you break your content up into logical chunks. This in turn will help guide visitors through your content.

It also helps you to think about where you should add headings in a way that breaks up your content visually on the page. That is not to say that the content itself will not be the main driver in terms of where you add headings. However, if you have a large area of content on your web page that is not broken up by any headings that is a problem as it is going to put visitors off reading it.

Add a heading to each section

The logical organisation of your content and the relative importance of each section should not only be clearly visible but it should be reflected in the way you display your headings. The size and colour of headings should reflect their relationship with each other. In short, more important headings should be bigger and stand out more.

The more you can do to make it clear how your page content is organised and how each section of your page relates to every other section, the easier it will be for visitors to consume your content.

The great thing about using WordPress is that it hides the complexity of creating web content. However, for our purposes it is useful to know a little bit of what is happening behind the scenes. Each time we use the WYSWYG editor to add a heading or a list or a paragraph of text or an image, WordPress is adding the appropriate code for us. For example, when we choose a particular heading from the toolbar pull-down menu WordPress adds the HTML tag for that heading to the page.

The screenshots above show what you end up with when you use the toolbar to create a heading, a paragraph or a list. Screen shot 1 shows the text being highlighted and a heading being chosen from the pulldown menu, screen shot 2 shows the result. In the third screen shot you see the HTML code that WordPress has created. In this case it is a level 2 heading.

<h2>Here is a heading</h2>

In WordPress you can create six levels of headings, <h1> ..</h1> through to <h6> … </h6>.

By adding headings in this way you are ensuring that your content will be understandable to people who cannot even see your page. The simple act of adding appropriate headings makes it easy for screen reader users to navigate through and summarise page content. They do this by reading out just the page headings and jumping between them to the section they are interested in.

So in the example below the screen reader user could jump directly to subheading 2 rather than having to read through all the content of the left-hand column first:

If we were to look at the code of the webpage example above, we would see that the most important heading on the page is enclosed by the H1 element

<h1>Most Important Heading</h1>

The next two headings are enclosed by the h2 and h3 elements respectively

<h2>Subheading 1</h2> <h3>Subheading 2</h3> And the final two headings are enclosed in an <h4> element: <h4>Subheading 3</h4> <h4>Subheading 4</h4>

We would also notice that the text in between the headings is enclosed in the paragraph (i.e.</p>…</p>) element which indicates to both your browser and someone using a screen reader that that these are paragraphs of text.

<p>Some paragraph text.</p>

The markup is giving structure to the web page that a web browser and a screen reader can understand. Using markup correctly to create this structure is key in ensuring your content is accessible.

You don’t need to add the HTML tags yourself

Luckily you don’t actually need to add the HTML yourself in order to create accessible web structured web pages. All you need to do is ensure that you are using the WYSWYG toolbar correctly when editing your documents. You are using the toolbar correctly when you use it to format your document with headings, paragraphs and lists when the content demands it.

Web pages are ‘structured documents’

I am aware that I have been using quite a lot of jargon in this section so far and I apologise for that. However, if you can ‘get your head around’ what these phrases mean it will definitely help you get a deeper understanding of how web pages are constructed. And crucially, it will give you a better understanding of how to ensure your pages are accessible. So on that note, I will introduce the phrase ‘structured document’ into the proceedings.

A web page is a ‘structured document’. This means that the document is ‘marked up’ (i.e. labelled) using the a markup language in a way that reveals its structure. That structure consists of headings, paragraphs, lists, images block quotes and so on. And in this case the markup language to describe the structure of web pages is Hypertext Markup Language, HTML for short.

Marking up a document just means that you are adding labels to the different types of content so that a computer can understand what they are and how to process them. A web browser such as Firefox, Google Chrome or Internet Explorer reads the document (i.e. a web page) and because the content is clearly labelled it is able to understand it.

What your web browser understands is, ‘this bit is a heading, this bit is a paragraph and this bit is an image’. That means it can display these elements appropriately.

This is important not just for web browsing software, it is also important for search engines such as Google.

Google is reading those same tags to understand which bits of the page are the most important and therefore which bits it should add to its search index.

It is important to screen reading software because it means it knows which bits it can use to provide a quick summary of the content to the screen reader user. For example, it can do this by listing all of the headings on the page or listing all of the links or reading out the text label of an image.

Every document has a structure whether online or offline

A newspapers is a good example of an offline structured document. It has Banner headings and small sub-headings to draw your attention to stories and it has paragraphs of text and photographs that write about and illustrate those stories.

Ok that’s enough about structured documents, let’s get back to ensuring our web pages are accessible. I’ll just quickly mention a technique I see people using a lot but which is very bad practice, I.e. styling text to make it look like a heading instead of formatting it as an actual heading.

Making it bold and bigger doesn’t make it a heading

It is possible to make pages look as if they have appropriate headings by visually making headings bolder and bigger (by using the bold button on the WYSWYG toolbar and increasing the font size) – however, that is not a good idea because it doesn’t add any heading tags to the page. It might work for you visually but it won’t work for the computers that need to process and understand that page content and it doesn’t work for human beings who are unable to see the page.

If you fail to add proper structure by using the appropriate tags (i.e chosen from the WYWYG toolbar menu) not only will search engines no longer know what bits of text on the page are the most important, a screen reader user would no longer be able to easily summarise or navigate through the content.

Just so I’m clear, tell me again, what does the phrase ‘mark up’ mean?

‘Marked up’ content just means that content has been labeled appropriately, as a heading or a paragraph or a quote or a list or a table…., e.g. in the following example the heading has been marked up using the h1 element:

<h1>About Us</h1>

The h1 is saying to the web browser, ‘this is the main heading on the page, please display it appropriately’. It is also saying to a screen reader, ‘voice this in a way that indicates it is the main heading for this page’. And it is saying to Google, ‘this is the main subject of this web page please index it as such in your searchable database’.

‘Marking up’ the elements of a page ensures that the organisation of that content is accessible to people using screen readers; the screen reading software will know which bits of the texts are headings and what the relationship is between those headings.

How it works in practice: how to create headings in WordPress

Now that we are clear that you need to add headings to your page it’s time to learn how to use the WordPress WYSWYG toolbar to markup your page content appropriately.

When creating headings you need to highlight your text and then use the format pull-down menu to format your heading, i.e. as a Heading 1 or a Heading 2 or a Heading 3 or whatever is the correct level for that particular heading in the page.

When you want to create a list you highlight your list content and click the list button on your WYSWG toolbar and if you want to create a paragraph you highlight your text and choose ‘paragraph’ from the formatting menu.

Paying attention to this aspect of page content creation ensures that you are adding a logical structure to your pages; which will be very helpful to the people visiting your page.

It’s as simple as that. 🙂

Take my Web Accessibility Online Training Course - WCAG 2.1 Compliance

Learn to design and manage WCAG compliant, accessible websites with my online course

You will learn both the techniques of accessible website design and an entire ‘framework for thinking about the subject’. It will equip you with the skills to understand, identify and fix issues any accessibility issues you come across. Watch the free videos to get a taste of what is on the course.