Publishing toolkit - Factsheet 6
Creating an accessible website for users with vision impairment
For users who are blind, screen reading software can be installed that will read out the contents of the screen to the user, significantly increasing their access to information via the web. However, if sites are badly designed, this access can be greatly reduced.
The following tips provide a guide to some simple things you or your developers can do to make sure that people using screen readers can use your website.
Provide alternative formats for pdf documents such as *.rtf or *.html
Although some PDF documents may be completely or partly readable with the most recent versions of screen reading and Adobe software, this will only be the case if the PDF document has been created properly and if the user is using current software. Currently, PDF documents are often inaccessible and cause great frustration to the user.
Provide a link named "skip to content" towards the top of the page
This allows a user to jump over all the navigation and other repeated links that appear at the top of every page to the true content of the page. "Skip to content" can also be used to direct the user to other parts of the website, e.g. to a search box.
Insert the hyperlink reference <a href="#content">Skip to content</a> at the top of the page.
This hyperlink reference should be anchored to <a name="content"> positioned just prior to the start of the main content on the page.
To hide this hyperlink, make it the same colour as the background. This way only people using screen readers will know the link is there.
If multiple words are used without a space each new word should start with a capital letter, e.g. SeminarSeries not seminarseries
The capital letter lets the screen reader know that a new word is starting and it can therefore pronounce the words correctly.
Provide descriptive but concise labels (ALT-tags) for all meaningful graphics
Screen readers cannot read graphics. This is a problem if the graphic contains meaningful text, e.g. the screen reader will say the word 'image' for a search graphic.
The ALT-tag provides a text description of a graphic which is invaluable in describing the image to a visually impaired user.
To insert an ALT-tag <img src="image1.gif" ALT="Search">
Ensure that the description is as short as possible while still maintaining meaning.
If a graphic has no purpose other than aesthetics, an empty alt tag string can be used, i.e. ALT=" ".
Give links meaningful names, e.g. 'Debt factsheet' rather than 'click here'
A person using a screen reader will often use key strokes to move from link to link. The screen reader will only read out the label of the link. It is therefore important for the links to be labelled meaningfully so that the user knows where the link will take them.
Instead of <A HREF="name.html">click here</A>, use <A HREF="name.html">Debt factsheet</A>
Always use a space and a vertical bar to separate consecutive links.
Avoid using two links to the same reference point on one page
What may be obvious to a sighted user is not necessarily obvious to a user using a screen reader. It is confusing if two differently named links go to the same page. It often takes a person using a screen reader much longer to discover that they have been sent to the same page twice.
Make forms accessible
Use text cues in addition to purely visual cues on forms, e.g. use an asterisk as well as a red label background to show that a field is required in an online form. Don't use PDF forms.
Avoid using mouseovers
Screen reading software tends not to use the mouse cursor when accessing and reading the text in a web page. The mouseover is therefore not triggered and the underlying information cannot be accessed.
If mouseovers are used, create them so that the user can select them as a link and be directed to a page where the information which would ordinarily be triggered by the mouseover is displayed.
Use tables sparingly to format a page. Cascading Style Sheets are preferred
Screen readers tend to read a page from the top right of the page to the bottom left. Similarly they will generally navigate a table by starting at the top left cell, progressing to the next cell in that row, and so on until they reach the end of the row and then start again at the left most point of the next row down.
Even if the cell is empty the screen reader will still say "blank". This behaviour occurs even within tables which are used for the purposes of displaying text and graphics on a page.
If tables are used, use "row header" and "column header" tags to assist screen reading programs to make sense of the table.
Display related information on the one page
Because it takes longer for a user using screen reading software to navigate and understand the layout of a page, it is quicker to have access to more information per page.
If there is a reasonable amount of information, or a number of different headings and subheadings on a page, it may be worth considering the use of a table of contents at the top of the page.
Use heading levels to assist with navigation, e.g. Heading 1 – The Mental Health Act; Heading 2 – Objectives of the Act.
: This is not a comprehensive list. For more information see the Worldwide Web Consortium 3 Web Content Accessibility guidelines at www.w3.org/TR/WCAG10/
Prepared with the assistance of Darren Fittler.