Web Access Centre

Structure - Web Access Centre

Summary: Markup languages such as HTML and XHTML are designed for describing the structure of a page and its contents.

Rational
Techniques
Testing tips
Website Accessibility Initiative compliance
Other pages about layout and structure

Rational

Content is always easier to read if broken down into headings, paragraphs, numbered or bulleted lists. Essentially this allows you to scan a page and quickly jump to key information. This is the same whether reading a book, newspaper, magazine or web page. Without these structural elements it is like reading an endless long piece of text. Imagine if the content of this page was presented with no headings, bullets or paragraph breaks. It would become extremely difficult to pinpoint information.

A blind user can not scan a page visually but if structural markup has been coded around the headings, paragraphs and lists it is possible to scan a page audibly. When correctly coded screen reader and braille output software identifies headings, paragraphs and lists to the user. For example, when a web page downloads the screen reader will inform the user how many headings are in a page and when a user reads a bulleted list the software will inform the user how many items are in the list.

Structured content also provides the screen reader and braille output user with a means of navigating around a page. Certain keyboard commands allow users to jump between headings rather than listen or tab through a page from top to bottom which can be very tedious and time consuming. Good, semantic markup also makes a page navigable with a variety of input devices used by users with mobility impairments.

Another problem on the web is that markup is frequently used for the visual formatting of text. For example a piece of text may have been marked up using H1 in order to make it large, bold and eye catching rather than because it was intended as a heading. As a result the text is identified by a screen reader or braille display as a heading but in fact it is only a sentence. Cascading Style Sheets (CSS) should be used to handle the visual formatting of pages wherever possible.

Overall everybody will benefit from correctly structured and well written headings. Applying a structure helps content authors clearly write and organise content. This will help make the content itself easier for people to quickly skim through to find the information that they are looking for. People with cognitive or language difficulties will especially benefit from this.

Page downloads will also improve due to reduced volumes of markup code for formatting. The code that you use will be much easier for designers and developers to manage.

Finally applying a structure will go a long way to future proofing a site. In general, structured pages are also much more compliant with the latest World Wide Web Consortium (W3C) technologies. This will mean they will have a greater ability to be used on different platforms, for example mobile devices.

Techniques

Headings must be coded using heading mark up of H1 to H6. H1 should be used for the main heading, H2 for any sub headings of the H1 and H3 for sub headings of H2 and so on. Pages should only have one main heading but can have multiple sub headings, and sub headings within sub headings. The heading structure is then rather like a contents list in a book. For example the structural overview of this page is as follows:

<H1>Web Access Centre</H1>
<H2>Structural mark up and content</H2>
<H3>Rational</H3>
<H3>Techniques</H3>
<H3>Testing tips</H3>
<H3>W3C WAI compliance</H3>
<H2>Poll</H2>
<H2>Web Access Centre contents</H2>

CSS can be used to give a piece of text visual formatting and bring it in line with your intended design. This means the CSS can be used to give headings a preferred font weights, fonts and background colours and so on. This should be used rather than using the heading mark up for visual effect.
Unordered lists –also known as bulleted lists, should be given the correct structural markup. For example, the bullets used for in the “Techniques” section on this page are coded as follows:

<h3>Techniques</h3>
<ul><li> Headings - … </li>
<li> CSS - ...</li>
</ul>

Testing tips

Verify that headings and lists are all coded correctly using H1 to H6 or UL or OL.

Accessibility toolbar - Go to Structure - Headings to see structured headings flagged on the page or go to Structure - Heading Structure (new window) to see the headings as they are outputted in the page.
Browser - Go to View - Source - Edit - Find "<h1, <h2, etc.
Screen reader - Using JAWS click Insert + F6.

Website Accessibility Initiative compliance

3.5 Use header elements to convey document structure and use them according to specification. Priority 2
3.6 Mark up lists and list items properly. Priority 2
13.8 Place distinguishing information at the beginning of headings, paragraphs, lists, etc. Priority 3

For more information on techniques visit the Web Accessibility Initiative techniques page.

Other pages about layout and structure

Back to Design & Build

For Web Access Centre updates email webaccess@rnib.org.uk

Content author: webaccess@rnib.org.uk

Last updated: 08/04/2008 18:38

Print Email