Order of Content

The second installment from Nomensa’s How To guides. Emily Coward, Senior Web Developer at Nomensa discusses the importance of making sure the order of content on a website is logical to ensure that it makes sense when it’s read through from top to bottom by someone using a screen reader.

Order of content

Transcript

Hi, I’m Emily from Nomensa and today I’m going to be talking about the order of content on your pages. Making sure the content on your web pages is presented logically is a really important part of web accessibility.

Page content should be ordered so it makes sense when read through from top to bottom. Assistive technologies such as screen readers read out content in the order it is presented in the code of the page. Content may lose its meaning if it is presented in the wrong order and this can be quite confusing if you can’t see the page.

You can check the real order of the content on your page by disabling the style sheets and reading through the content from top to bottom. You can do this in Firefox using the Web Developer Toolbar. Select ‘CSS’, then ‘Disable Styles’, then ‘All Styles’. This shows you the underlying order of the content for that particular page. Let’s have a look at some examples.

Here we have a page showing some of Nomensa’s Web Accessibility and Web Design services. To a sighted person this content looks fine. It makes sense as the lists of services are clearly presented in columns titled Web Accessibility and Web Design. It is easy to understand which services are web accessibility and which are web design. If we listen to the page with a screen reader, we should be able understand which services belong to each category.

Jaws reads out the content in the following order:

• Web Accessibility
• Web Design
• Accessibility audits
• User experience design
• Accessible PDFs
• Template Development
• Accessible Media Player
• Defacto CMS

As we have heard the content isn’t ordered correctly in the code of the page. The category titles were read out first followed by a jumbled up list of services. For someone who can’t see the page it will be difficult to understand which services belong to which category.

Let’s look at the underlying code in order to see what’s going on. The style sheets for the page are disabled using the web developer toolbar. All the content runs together as it is marked up using span tags. As we can see the content is not grouped logically. This content has been ordered in this way so it can be positioned visually. This isn’t good for people using assistive technologies as the information doesn’t make sense in this order when read through from top to bottom. The content hasn’t been marked-up using semantic HTML either. If your content is not ordered logically and structured correctly it may put some people off using your website.

When building your pages, you need to think first about the order of the content and the elements used to structure your content and then about the visual appearance of the page. We need to revise the order of content on the page so it makes sense. We will also mark up the category titles using headings and the list of services using unordered lists to add further meaning to the content.

Jaws now reads out the content in the following order:

• Heading level two Web Accessibility.
• List of three items.
• Bullet Accessibility Audits.
• Bullet Accessible PDFs.
• Bullet Accessible Media Player,list end.
• Heading level two Web Design.
• List of three items.
• Bullet User Experience Design.
• Bullet Template Development.
• Bullet Defacto CMS, list end.

This content makes a lot more sense in this order! And just to double check. Let’s look at the underlying code order by disabling our styles. Excellent! This content should now make sense to everybody!