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.

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.

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.

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!