Rationale
When layout is defined by CSS rather than being locked into an HTML table format, it can prevent a number of accessibility problems for screen reader users and people using either low screen resolutions or newer technologies with narrow screens.
Logically structured HTML content can be rearranged using CSS to create any number of visual layouts to suit the design you want to achieve. This helps to avoid the accessibility problems frequently encountered in pages using tables for layout. For instance, inadvertently separating a heading from its content or having paragraphs of text read out of their natural reading order,.
The principle is that you concentrate first on the page content, coding it in the desired reading order and giving each separate area of information, for instance navigation or content, a unique identity. You can then use CSS rules to position each section where you want it to appear on the page, without affecting the underlying reading order or breaking up the structure of the information.
The need for flexibility is just as great in defining layout as it is in defining font sizes though, especially when using a multiple column design. Many older users and people with low vision will have their computer screens set at quite small resolutions so that the text is large enough to read. So a three-column layout with fixed values defined for all widths may well mean that they will be unable to read all the content without scrolling sideways. This is disorienting as it is difficult to keep track of which line is currently being read, especially for screen magnification users who can only see a small portion of the screen at any one time, or for people with upper limb mobility problems, who may find it impossible to manipulate the scroll bar with a mouse.
Techniques
Plan the structural order
Depending on the type of information being presented, and how complex and long the navigation is, you should decide on a logical reading order for the page content. As screen readers read the coded order, not the visual one, it may be best to have the main content high up in the HTML code so that the entire navigation panel doesn't have to be read before getting to the real reason for visiting the page. If the navigation is fairly short however, and you feel that it is important that users know about other parts of the site soon after reaching the page, then it may be more logical to put the navigation section first. Whichever order you choose, we recommend providing at least a "skip" link to the information that is being presented later. So if you decide to place the navigation first, provide a link to "Skip to main content", while if you decide to position the main content at the start of the HTML code, provide a "Skip to navigation" link.
Your structural plan will help you decide how many areas of different information there are on your page that need to be identified and cross-matched between the HTML code and the CSS. For example, even a very smple page might have the following sections:
You can define an ID selector for each of these sections, and apply that to a DIV containing each section. Using this example, you might call the areas "nav" and "content", and you might decide that the navigation section should come after the content section in the reading order.
Now you are ready to code the HTML page.
Use a flexible container
You need to put each section into a "container" so that it can be identified and positioned where you want it to appear on the page. The most commonly used container is the DIV (division) element, which can create a flexible, expandable "text box" for the section content. The HTML code might look like this.
<div id="content">
<h1>Main heading</h1>
<p>First paragraph of content.</p>
<p>Second paragraph of content.</p>
etc
</div>
<div id="nav">
<h2>Menu</h2>
<ul>
<li><a href="first.html">first link</a></li>
<li><a href="second.html">second link</a></li>
<li><a href="third.html">third link</a></li>
</ul>
</div>
Note that the "nav" DIV is the second area to be coded, but visually, you may want to have a traditional left-hand navigation menu column so that when displayed in a graphic browser and reading from left to right, the navigation section would appear to be before the main content.
This is where CSS positioning comes in.
CSS positioning
This is used to move an element out of its HTML order and place it at a different location on the page when it is viewed in a graphic CSS enabled browser. "Absolute" is one value for the position property which can achieve this, you can then specify where on the page you want the section to be displayed.
If you give the "nav" DIV an absolute top left position, it will appear on the left of the main content, even though it comes after it in the HTML code. You will also have to define the width of the "nav" DIV, and to make sure that you offset the main content DIV by a big enough margin to avoid an overlap between the two sections. So the CSS for the DIV with the "nav" ID could be:
#nav {
position: absolute;
left: 0;
top: 0;
width: 6em;
margin: 1em;
}
Notice that this has a width of 6em and a margin of 1em. If only one margin value is specified, the margin is applied to all sides of a container: top, bottom, left and right. so the calculated value of width + left margin + right margin, a total of 8em is taken up by the navigation panel. The CSS for the "content" DIV will be:
#content {
margin-left: 8em;
width: 100%;
}
Notice that a left margin of 8em has been defined, this is to leave space for the calculated width of the navigation panel to avoid having any overlap between the two panels. Then we can allow the content to spread across the rest of the browser width. The calculated width of the content panel is 100% -8em, which means that whatever size the text or screen resolution is, the panels will expand and contract to fill the page without making it necessary to scroll sideways.
Relative values have been used here for the property values, to emphasise that it is good practice to do so wherever possible. Where two or more selectors are positioned side by side on a page, at least one of them should have the potential to expand and contract its width with the user's selection of larger or smaller text size in their browsers. It is also important that, when the width of a container will change depending on the user's text size setting, any other containers are positioned using values that will ensure they move aside to accommodate this change in width.
One property that should never be defined in fixed terms is "line-height". If this is not allowed to expand with the font size, the result is likely to be overlapping lines of text, making it quite impossible to read.
There are lots of possible layout configurations, and potentially many ways to achieve each of them, far too many for the scope of this page. For some very inventive and carefully thought layouts, see the links in the "Further Information" section for examples and templates.
Floating elements and images
This is another means of positioning content on a page, though in this case there isn't the same variety of options. Basically you can float an element to the left or right of the line it is on, or until it reaches the relevant edge of its containing element. Any surrounding text will flow around the floated box, on the opposite side from the FLOAT value. Alternatively you can choose to float the element without changing it's position by selecting "none" as the value for the FLOAT property.
When an element is floated it becomes a portable 'box'. In most cases, you will want to define a width for this box. If the content of the floated element will be text, it is highly recommended that the size is defined in relative units so that the proportions of the box can expand if the user chooses to view text in a larger font than the one you have defined. However a fixed-width box can work if the height of the box can expand to accommodate the larger text.
CLASS selectors are often used for floating element definitions, as the style can then be used for more than one element on a page. For example, the following CSS style defines a simple float that can be used for a variety of different elements:
.floatRight {
float: right;
margin-left: 10px;
}
This might be used to float an image to the right of a paragraph: In which case the HTML might look like this:
<p>
<img class="floatRight" src="image.gif" alt="appropriate alt text" width="100" height="100">
This would be the paragraph text ...
</p>
Then it could be used again later on the page to float a "Next" link to the right of the page:
<li class="floatRight">Next Page: <a href="colours.html">Defining colours</a></li>
Floating can be used in conjunction with formatting to produce very attractive and accessible inserts within your pages. For links to more information about the potential for floating elements, please follow links in the "Further Information" section.
Providing "skip" links
At the top of the page it is recommended that you provide links to skip directly to the most important sections of content. These might be called "Skip to navigation" and "Skip to main content". It might be argued that if the main content is the first section in the HTML code, then providing a skip link to it is redundant. However, if you are providing reasonable areas of whitespace between sections, which you should do for ease of reading, these can cause problems for people using high levels of screen magnification as they may get 'lost' in the white areas and find it difficult to locate the content they want. The "skip" links move the focus in the browser and in the screen magnifier or screen reader to the precise start of the content, making it very much easier to locate the required section.
Skip links also facilitate navigation within a page for users with mobility problems who can not use a mouse. The anchored skip link saves the user having to tab through blocks of links before they reach the area they wish to focus on. It's for this reason that consideration should be given to making them visible.
The example code for a two-column page already has the anchors required to create the links, so all you need to add is another DIV to contain the "skip" links:
<div id="skip"><a href="#nav">Skip to navigation</a> <a href="#content">Skip to main content</a>
This code should be just above the "content" DIV. Then the CSS file should have a new rule added:
#skip {
margin-left: 8em;
width: 100%;
}
This has the same properties as the "content" rule, and essentially needs no more. Because the code for the "skip" DIV is the highest in the code, it will naturally be rendered before the "content" DIV.
We do recommend that you leave these "skip" links visible, to help screen magnifier users, but appreciate that it isn't always possible to do this without spoiling the balance of the page. Rather than not have them available at all, or hidden in an inaccessible way, here's how you can accessibly hide the "skip" links from view, simply change your "skip" rule in the CSS file so that it becomes:.
#skip {
Position: absolute;
top: -200px;
width: -999px;
}
This effectively positions the "skip" DIV above, and to the left of, the browser window so that the links aren't seen, but are still active and available in the code for anyone who uses a screen reader, as the links will be read aloud or sent to a braille display.
Testing tips
Text must not become overlapping or truncated when text is enlarged. Line-height values should always be expressed in relative terms. The reading order of the content must make sense when CSS is disabled.
-
Automated tools - Tools can pick up on fixed sizes.
-
Accessibility toolbar - CSS - Show Style Sheet. This will display the content of any linked CSS style sheets. Search for Absolute units: "pt" "px" etc, search for "line-height" and ensure that it has not been defined using absolute values. CSS - Disable CSS. Toggles CSS off and on to ensure that the page makes sense without the CSS formatting.
-
Browser - View - Source. Edit - Find - "css" AND Source. Edit - Find - "style". This can show if inline CSS styles are being used also search for "line-height". To make sure that tables, DIVs etc will expand to accommodate larger text sizes: View - Text Size - "Largest". Tools - Internet Options - Accessibility check "Ignore colours on the page" to ensure that images are still readable. View - Source. Edit - Find "color" and "font" to ensure that formatting has been removed from the HTML pages.
-
Screen reader - Listen to the order of output - it should be logical and make sense. This is especially relevant when a text box has been floated.
-
Text browser - Ensure that the page reads in a logical order.
Further information
-
The use of different selectors for different functions is well explained in the SelectTutorial by Max Designs.
-
Detailed and step-by-step guides on floating elements for layout can be found in the FloatTutorial by Max Designs.
-
If you are looking for ways to achieve three-column layout, CSS Discuss has a long list of ways to achieve the three-column page design.
-
Templates for a variety of layout solutions are freely available on the web, one such is at the Little Boxes website.
Compliance with WCAG 1.0
-
6.1 Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document (priority 1).
-
3.2 Create documents that validate to published formal grammars (priority 2).
-
3.3 Use style sheets to control layout and presentation (priority 2).
-
3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values (priority 2).
-
11.1 Use W3C technologies when they are available and appropriate for a task and use the latest versions when supported (priority 2).
-
14.3 Create a style of presentation that is consistent across pages (priority 3).
For more information on techniques visit the Web Accessibility Initiative techniques page.