Skip to section navigation Skip to content

Accessibility Guide

Text

Key:

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

Use a plain, clear and inclusive writing style (U)

Who does this assist?

This will assist all users in the comprehension of information.

Good Practice:

An online article entitled Writing Simply and Clearly (Opens in new window) by WebAIM (Web Accessibility in Mind) site provides comprehensive guidelines on writing accessible web content.

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 an 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

Headings must be marked up with the ‘heading’ element, and no level should be skipped (P) (U)

Who does this assist?

This will assist all users to identify the sections and hierarchy of web page content, especially users using screen readers.

Good Practice Example

There are 6 levels of headings from h1 to h6. These should be used in order with h1 being the highest level and the biggest default font size. A heading level must not be left out. The following code and subsequent screen print demonstrate the correct use of heading hierarchy.

Example XHTML of correct heading hierarchy:

<h1>Heading one</h1>


                                              	<h2>Heading two</h2>


                                             	<h3>Heading three</h3>


                                              	<p>Paragraph text. Paragraph text. Paragraph text.
                                                Paragraph text. Paragraph text. Paragraph text.
                                                Paragraph text. Paragraph text.</p>
 

  												<h3>Heading three</h3>


  												<p>Paragraph text. Paragraph text. Paragraph text.
                                      			Paragraph text. Paragraph text. Paragraph text.
			                                  	Paragraph text. Paragraph text.</p>

Demonstration of correct heading hierarchy

Heading one

Heading two

Heading three

Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text.

Heading three

Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text.

Common Errors

Example XHTML of incorrect heading hierarchy:

<h1>Heading one></h1>


                                            <h3>Heading three</h3>


                                            <p>Paragraph text. Paragraph text. Paragraph text.
                                            Paragraph text. Paragraph text. Paragraph text.
                                            Paragraph text. Paragraph text.</p>


                                            <h3>Heading three</h3>
  

                                            <p>Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text.
                                            Paragraph text. Paragraph text.</p>

Demonstration of incorrect heading hierarchy

Following is a demonstration of the screen rendering of the above code. A common error is to use headings for layout rather than structure.

This demonstrates an error as the hierarchical heading levels jump from the h1 element to the h3 element missing out h2.

Heading one

Heading three

Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text.

Heading three

Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text.

Lists must be marked up with “ul” or “ol” structure, not created with table layout (U)

Who does this assist?

Lists imply a relationship between the items in the list. Using lists assists all user in the comprehension of the relationship between the list items. An ordered list should be used to indicate progression through the items on the list.

Good Practice Examples

Ordered list XHTML example:

 <ol>


                                          		<li>list item one</li>

                                          		<li>list item two</li>

                                          		<li>list item three</li>

                                          		<li>list item four</li>


                                          		</ol>

Demonstration - Ordered list:

list item one
list item two
list item three
list item four

Unordered list XHTML example:

 <ul>


                                        	<li>list item one</li>

                                        	<li>list item two</li>

                                        	<li>list item three</li>

                                        	<li>list item four</li>


                                        	</ul>

Demonstration - Unordered list:

list item one
list item two
list item three
list item four

Language must be specified for each page and for any language changes within a page (P) (U)

This refers to the use of the lang attribute.

Who does this assist?

"Both assistive technologies and conventional user agents can render text more accurately when the language of the Web page is identified." W3C - Understanding WCAG 2.0 - Understanding SC 3.1.1 - Language of Page (Opens in new window)

Good Practice

The lang attribute:

The VET recommended web content standard is XHTML 1.0 Transitional, therefore the lang attribute must be preceded with xml:

xml:lang=""

Specifying page language XHTML Example:

The following example, within the beginning <HTML> tag, specifies the page language as English:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

                                          .....

                                          

                                          </html>

Specifying language changes within a page:

The following example has been taken from the W3C site and specifies that the language for this blockquote element is German:

<blockquote xml:lang="de">Da dachte der Herr daran, ihn aus dem Futter zu schaffen, aber der Esel merkte, daß kein guter Wind wehte, lief fort und machte sich auf den Weg nach Bremen: dort, meinte er, könnte er ja Stadtmusikant werden. </blockquote>

Techniques for WCAG 2.0 - H58: Using language attributes to identify changes in the human language (Opens in new window)

The value of the this attribute must be one of the approved International Standards Organisation (ISO) 2 language codes (Opens in new window)