Skip to section navigation Skip to content

Accessibility Guide

Structure

Key:

P - Perceivable
O - Operable
U - Understandable
R - Robust

Use standards compliant code (R)

Who does this assist?

Using standards compliant code improves interoperability of web-related products. For accessibility this means that assistive technology can also access the content of a web page.

Good Practice

The current VET recommended standard for web content is XHTML 1.0 Transitional. See New Generation Technologies for Learning - Technical Standards - Content Formats

XHTML is a stricter and cleaner version of HTML.

For the XHTML code to be standards compliant, it must follow the XHTML rules (Opens in new window) specified by the World Wide Web Consortium (Opens in new window) (W3C). Also see XHTML tag reference (Opens in new window).

A doctype declaration must be included at the very top of the HTML document. This specifies what version of the HTML is being used. As the recommended standard is XHTML 1.0 Transitional, the following doctype declaration must be used.

Doctype declaration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Use correct structural mark-up to give semantic value not just for presentation (R)

How does this assist?

This will assist users navigating webpage content with assistive technology by ensuring the structure of the page is available to the technology.

Good Practice

Use element tags for the purpose they were intended. The following elements are commonly used (and misused) elements.

For a full list of elements see the W3schools XHTML 1.0 Reference (Opens in new window). XHTML is the recommended standard for VET web content (for more information on standards see Use standards compliant code within this guide).

XHTML for a Paragraph:

<p></p>

XHTML for Headings

See Headings - Headings must be marked up with the 'heading' element, and no level should be skipped.

XHTML for a Quote

<blockquote></blockquote>

XHTML for Lists

See Lists.

XHTML for Tables

XHTML tag to define a table:

<table></table>

XHTML tag to define a row in a table:

<tr></tr>

XHTML tag to define a table cell as a header:

<th></th>

XHTML tag to define a table cell:

<td></td>

All table elements must be contained within the <table> tags, and all table cell tags must be contained within the <tr> (table row) tags:

<table>

                                      <tr>
<th></th>
</tr>

                                      <tr>
<td></td>
</tr>

</table>

See Tables for more information on associating headers with cells for the benefit of screen readers.

Text Emphasis

<em></em> or <strong></strong>

Forms

See Forms

Add presentation and layout via CSS (R)

Who does this assist?

The structure of the content should be created using XHTML. Presentation and layout of the content should be generated through a stylesheet. This allows the presentation to be turned of if it is not relevant to the requirements of the user. Separating these elements also means that the presentation and layout can be determined programmatically by assistive technology.

Good Practice

Presentation and layout should be generated by an external style sheet. The benefits of separating the presentation of your content from the structure of your content include:

Updating presentation information in one css file, rather than potentially many html files thereby saving a lot of work and enhancing the consistency of a web site.

For a basic introduction to Cascading Style Sheets see w3schools.com - CSS Introduction (Opens in new window)

Example XHTML:

The following is required to reference an external style sheet in the head section of XHTML code:


           			  <html>

                                <head>

<link rel="stylesheet" type="text/css" href="style.css"/>

                        		</head>

                        		<body>

                        		</body>

                        		<html>

Common Error

A common error is to use tables to lay out the content of a web page. Tables should be used to display data only.

Develop interactivity, but make sure any scripting is 'unobtrusive' (R) (O)

Who does this assist?

This assists users navigating a site with a keyboard and assistive technologies.

Good Practice

Any functionality created through scripts should be available to assistive technology and key board navigation.

The WebAIM site provides a good tutorial for JavaScript - WebAIM.org - Creating Accessible Javascript (Opens in new window).