Documente Academic
Documente Profesional
Documente Cultură
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
317462664.doc
State of New South Wales, Department of Education and Training 2006
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
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.
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
Note that style can be applied to this table using CSS to change its
appearance (the "border" attribute has been added for demonstration only)
317462664.doc
State of New South Wales, Department of Education and Training 2006
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 (%).
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 }
317462664.doc
State of New South Wales, Department of Education and Training 2006
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.
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
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.
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
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