Organising page content for accessibility
Most web pages contain a number of elements
- The main content - the message that you want to deliver or a form that you want visitors to complete.
- Navigation links to pages relevant to the content of this page
- Navigation links to the other main parts of the web site (including a link to a site map)
- Advertisements or promotional material
- Company contact details
In an ideal world the above sequence is the order in which you might wish your visitors to read the page. For visual users this is quite easy to achieve as you can use colours and formatting to guide the eyes to the parts of the page you consider important. However, blind people, users of text-only browsers, and search robots do not have this luxury. Their software has to follow the text in the HTML code as it is written for the page. For this reason it is important that you actually write the HTML page in the order in which you want people to read it.
Most web authoring software allows you to create blocks of text and just pop them anywhere you wish on the page for visual display. Unfortunately the code generated by these programmes does not always follow the order in which you wish assistive technology such as screen readers to read the page. It is therefore very important that you check that the actual textual content of each page is presented in a logical fashion by previewing the page in a text-only browser (text-only browsers, such as Lynx, are explained in lesson 12). Infuture tutorials we will learn how to rearrange your content visually for sighted users. For this lesson (and lesson 3) we shall concentrate solely on the way that your content is delivered as text in an HTML document.
Poor arrangement of the page content does not only affect blind users. Mobile phone users and people using text-only browsers would also have to scroll through the long list of clients before getting to the main message of the page. As you will see in later lessons it is quite easy to write your page content in a logical order and then use a style-sheet correctly to arrange the various page components for visual display.
One of the most common mistakes is to use the stylesheet (CSS) command to float a block of text to the right-hand side of the screen without thinking about the page reading sequence. In the diagram below we show a simple page layout that floats a list of clients to the right of the main content.
|Banner and main navigation|
Main body text
A lot more text all about us. All the useful information that you really want your visitors to read.
Later on we shall look at using a table to acheive the above layout so that the reading sequence is more logical, but in this example where we have used the "float" css command many disabled users will see or hear the list of clients before they hear the main body text.
It is worth noting that the Google algorithm scores keywords higher if they are near the top of the page. In the example above Google would consider the list of clients to be more important than the message (About us). So it is not only blind people who benefit from the proper organisation of page content - everyone benefits because your pages will be catalogued correctly by search engines!
- Be clear about what your web site is supposed to do.
- Use language suitable to your target audience.
- Start with a simple introduction, then tell the story, then conclude.
- Break text up into manageable proportions and use a concise and positive style of writing.
- Check spelling and grammar carefully.
- If you include content in a different language specify the change.
- Provide the full title the first time you use an abbreviation.
- Structure your HTML/XHTML content in the order you wish the user to read it.
- Remember that the textual content is the foundation of the web site. No matter how good the visual display, if the textual message is confusing or meaningless the site will not perform.