Reading: Apply basic accessibility standards

Apply basic accessibility standards

Inside this document:

Why make websites accessible?
Legal side of accessibility

What you can do

Planning for accessibility
Alt tags
Use heading tags for headings only
Tags
Tables
Text not graphics
Make font size relative not absolute
Separate content from presentation
Multimedia text alternatives
Navigation elements

3
3
4
4
4
5
5
6
7
7

Accessibility tools
Accessibility checklists
Online checkers

7
8

Summary

317462664.doc
State of New South Wales, Department of Education and Training 2006

Reading: Apply basic accessibility standards

Why make websites accessible?

By making your website accessible you are increasing its potential audience.
For many people with disabilities, the internet is an important tool for
interacting with the world. People with visual, motor skill, cognitive,
hearing and other disabilities can encounter problems when using websites
that have not been designed in an appropriate way.
Many visually impaired people use a screen reader or Braille reader to
interpret web pages. Others may just need very large text. Its important to
write your pages using clean, standard HTML and to separate content from
presentation by using Cascading Style Sheets (CSS) so that pages can be
read easily.
Using a mouse can be difficult for some users. It is possible to make your
pages easier to navigate with a keyboard.
Creating accessible pages will become even more important as the
population ages.
It can help to remember that accessible web design is actually good design
for all your users.

Legal side of accessibility

Under Australian law it is illegal to discriminate against anyone because of
disability. The Commonwealth Disability Discrimination Act states that
websites must adhere to the Web Content Accessibility Guidelines (WCAG)
version 1.0 devised by W3C.
Read the notes from the Australian Human Rights and Equal Opportunity
Commission (HREOC):
www.humanrights.gov.au/disability_rights/standards/www_3/www_3.html
You can view the WCAG at: http://www.w3.org/TR/WAI-WEBCONTENT/

317462664.doc
State of New South Wales, Department of Education and Training 2006

Reading: Apply basic accessibility standards

What you can do

Here are a range of suggestions that you can use to ensure that your website
meets basic accessibility standards.

Planning for accessibility

A key element in creating accessible websites is that it must be planned.
Before you start building consider what strategies you can use throughout
your project to ensure that the website is accessible to people with a range
of disabilities.
You may need to prepare guidelines for your development team to follow so
that everybody is working towards an accessible product. It may also help to
develop a prototype of a small section of your website and test for
accessibility early on in the product development cycle.
As an example, take a look at the Option Keys website:
www.cli.nsw.edu.au/optionkeys. Under "tools" take a look at the
Accessibility Checklist.
Your guidelines may include the following suggestions.

Alt tags
Provide alternative text for images so that your page will still make sense to
users who use a screen reader or who have images turned off in their
browser. Make sure the text is meaningful and descriptive.
In your HTML use an "alt" attribute in the image tag to create alternative
text. For example:
<img src="manager.gif" alt="The general manager">

Some browsers (IE on Windows) use the "alt" tag to display a "tooltip" in a
yellow pop-up label when the user places their cursor over the image.
However this does not work in all browsers on all systems. If you want to
use this "tooltip" feature to add information for your viewers, use the "title"
tag for this purpose. The title tag can contain the same information as the alt
tag. For example:
<img src="manager.gif" alt="The general manager" title="The
general manager">

If your image is for decorative purposes only (i.e. not to convey meaning or
information), you should still include an alt tag with an empty or "null"
value. For example:
<img src="spacer.gif" alt="">

317462664.doc
State of New South Wales, Department of Education and Training 2006

Reading: Apply basic accessibility standards

Note: don't use generic names for your images such as "graphic" or "image"
or "button" - describe the picture instead.
For images with complex information such as graphs, you can use the
"longdesc" (or long description) attribute to provide detailed text
alternatives in a separate HTML page.

Use heading tags for headings only

Headings help define the structure of a web page. Heading tags (h1, h2 etc.)
should not be used for changing the way (non-heading) text looks (for
example, to make it bold) as the page can become quite confusing. Also
make sure you use h1, h2, h3 etc in the correct order.

Tags
Use the <strong> tag instead of <b> (for "bold") if the words should be
emphasised when read. Use <b> if the text is bold for decorative reasons
only.
Similarly use the <em> (emphasis) tag instead of the <i> (italic) tag to
emphasise text.

Tables
Avoid using tables for layout - use CSS instead to position elements
onscreen.
Screen readers will read a table from left to right, row by row - keep this in
mind when designing your tables.
With this in mind, tables should start with a title and a caption where
appropriate.
The headings for a table may appear in either the first row or the first
column. Either way, table heading cells should be described using the <th>
(table header) tag.
In more complex tables, individual cells can also be associated with the
appropriate table header.
Here is an example of accessible mark-up for a table:
<table border="1" summary="This table depicts weekly sales of
various kinds of fruit.">
<caption>Table: Weekly fruit sales</caption>
<tr>
<th id="t1">Week #</th>
<th id="t2">Apples</th>

317462664.doc
State of New South Wales, Department of Education and Training 2006

Reading: Apply basic accessibility standards

<th id='t3">Bananas</th>
</tr>
<tr>
<td headers="t1">1</td>
<td headers="t2">24</td>
<td headers="t3">42</td>
</tr>
<tr>
<td headers="t1">2</td>
<td headers="t2">63</td>
<td headers="t3">12</td>
</tr>
<tr>
<td headers="t1">3</td>
<td headers="t2">20</td>
<td headers="t3">15</td>
</tr>
</table>

This example will appear in the browser as follows:

Figure: Example of table as seen in browser.

Note that style can be applied to this table using CSS to change its
appearance (the "border" attribute has been added for demonstration only)

Text not graphics

Accessibility is a key reason not to use graphics for things like headings,
equations and tables. Screen readers (for the visually impaired) cannot read
the information in a graphic. Also the images cannot be re-sized for those
with poor vision or for use in hand-held devices.
In addition, the correct use of Cascading Style Sheets (CSS) can give very
sophisticated looking results that will enhance the design of a website as
much as graphics would - and still be accessible.

Make font size relative not absolute

You should give your users control over how they view your site. They
should be able to change the settings in their web browser so that they can
make the font larger or smaller to suit their own needs. This is particularly
important for users with poor vision (for example older users)

317462664.doc
State of New South Wales, Department of Education and Training 2006

Reading: Apply basic accessibility standards

Absolute units include:

pixels (px)

points (pt)

centimetres (cm).

Using these "fixed" units means that the size of the font cannot be changed
by the user. Also note that font sizes may not display at the same size on
Mac computers and in different versions of Windows.
Relative units of measurement include:
ems (em)

percentage (%).

Figure: Illustration of "Em" unit size.

As you can see, "1 em" is the height from the top to the bottom of any
particular font (including capitals and hangers). Historically it comes from
the width of the capital letter "M" in any font but em now stands for the
height of a font. "1em" equals the default size of normal text, "2em" equals
double this size.
Because ems are not related to actual point size, when the font is made
larger or smaller, relative spacing will be maintained between paragraphs
and lines.
Similarly you can state in HTML/CSS that a font is 100% - this equals the
default font size, 200% equals double that size. For example, using
percentages you might set H1 = 140%, H2 = 120%, H3 = 110% and P =
100%. This way, headings will stay larger relative to the text - no matter
what size the user makes the font.
For example rather than:
h1 { font-size: 20pt }

use:
h1 { font-size: 3em }

Separate content from presentation

Use Cascading Style Sheets (CSS) to format and apply design elements to
your web pages. When you mix content and presentation you will end up
with a document that is larger and more complicated than it needs to be.

317462664.doc
State of New South Wales, Department of Education and Training 2006

Reading: Apply basic accessibility standards

This will also cause unnecessary problems for those using assistive
technology or mobile devices - these readers simply want to "see" a
structurally clear representation of the page's content.

Multimedia text alternatives

Information presented in multimedia formats should also be provided in
accessible text-based formats. For example:

Flash navigation - where a website is built using Flash (using ".swf"

files) for all navigation, an alternative HTML-only version should be
made available.

Flash movies - create a text-alternative that reflects the movie

content.

Video - provide a text transcript of the video content.

Audio - provide a text transcript of the audio file content.

Navigation elements
Users with restricted mobility may be unable to use a mouse to navigate
around a website. Make sure your links and documents are well structured
so that users can use the Tab key to navigate between links. You can also
add a "tabindex" to help users to "tab" through your site.
Make you links descriptive so that make sense when read out of context (for
example, by screen-reader software). For example, link the words
"Information about tractors" rather than linking the words "Click here"

317462664.doc
State of New South Wales, Department of Education and Training 2006

Reading: Apply basic accessibility standards

Accessibility tools
In addition to using these strategies, there are a range of online tools you can
use to check the accessibility of your site.

Accessibility checklists
Before you begin your web development project, it would be useful to
develop a set of guidelines for your team to ensure that everyone is working
towards an accessible website. To verify your product you may want to
develop an Accessibility Checklist that confirms that yuour guidelines have
been followed.
As an example, take a look at the Option Keys website:
www.cli.nsw.edu.au/optionkeys. Under "Tools" take a look at the
"Accessibility Checklist".
Also try the accessibility checklist at the Accessify website:
www.accessify.com. Enter the phrase "ten quick tests" into the Search
facility. Read the article "Ten Quick Tests to Check your Web Site for
Accessibility"

Online checkers
There are a number of online accessibility checkers available. Use thes to
check your pages as you build them. You may need to read the "fine print"
in the help files to make sense of the accessibility issues that are raised.

WAVE: www.wave.webaim.org. Try the WAVE 3.0 Accessibility

Tool - a comprehensive free online tool.

WebXact: webxact.watchfire.com. Check your work with this

WebXact accessibility tool. Read the WebXact help files for detailed
descriptions of the tests it performs and to help interpret results.
WebXact is similar to the previous free version of Bobby.

Bobby: www.watchfire.com. Bobby was previously a free webbased application for accessibility checking. Now expanded, it can
be purchased at the Watchfire website. Search for the term "Bobby"
and read the overview of the Bobby 5.0 accessibility tool. (the free
version is now called "WebXact").

317462664.doc
State of New South Wales, Department of Education and Training 2006

Reading: Apply basic accessibility standards

Summary
People with visual, motor skills, cognitive, hearing and other disabilities can
encounter problems using websites that have not been designed in an
appropriate way. Creating accessible pages will become even more
important as the population ages.
It can help to remember that accessible web design is actually good design
for all your users. You have learnt some simple measures that you can take
as a web developer to make your websites more accessible.

317462664.doc
State of New South Wales, Department of Education and Training 2006