Accessibility Tips

Back to Accessibility Topic Front Page.

With thanks to Vashti Zarach, JISC CETIS, for assistance with compiling this list.

What is Accessibility? An accessible web-based learning resource should be designed to be usable by people, regardless of their means of interaction, hardware, or environment.

"'Accessibility means providing flexibility to accommodate each user's needs and preferences' (Valdes, 1998)."

For example:  Someone using a keyboard instead of a mouse to interact with the resource will need to be able to tab through the content. 

Someone using hardware, such as a mobile 'phone or PDA (Personal Digital Assistant), may not want to download images but may need to know what the image is about. 

Someone accessing a resource that has sound, such as a video, may need captions if they are unable to use or access sound.

Accessibility is about:  Good, simple design and layout principles. 

Creating learning resources that are easy to use and navigate - usability. 

Providing alternative means of accessing information when necessary. 

Complying with established standards, guidelines and best practices to ensure interoperability with other systems and devices, such as assistive technology.</li></ul>

Back to Top of Page

Reasons for Accessible Design  Accessibility is about inclusion, equality and basic rights - Equal access for all should be a standard practice. Accessible design enables everyone to access information, education, entertainment and services. </li>

Accessibility benefits everyone, not just people with disabilities - Accessible design makes e-learning environments quicker and easier to use, and more adaptable and flexible to a person's needs and preferences. </li>

Accessibility maximises the potential audience - Improving accessibility widens the audience for a resource. The elderly, users of mobile devices, and people with disabilities, low bandwidth, older or slower hardware, without or unable to use certain pieces of hardware, or in noisy or quiet environments, and people attracted by good usability are all more likely to use an accessible resource. </li>

Accessibility is a legal requirement - In September 2001, SENDA (Special Educational Needs and Disability Act) came into force in the UK. The Act states that institutions must make reasonable adjustments to ensure that disabled students are not substantially disadvantaged in comparison with students who are not disabled. </li>

Accessibility enables content to be accessed via assistive and new technologies - Online information is increasingly accessed from mobile 'phones and PDAs. Web-based resources that are inaccessible, fail to provide &lt;alt&gt; tags for images or conform to HTML (HyperText Mark-up Language) standards will not be usable by assistive and new technologies.</li></ul>

Back to Top of Page

Planning a Web-Based Learning Resource When designing a web-based learning resource, it is important to decide:  The resource's intent - e.g. its purpose, goals, reason for it being put online, etc; </li>

Its learning outcomes - e.g. what users expect to learn from the resource; </li>

Its audience and whether it will need to cater for different levels of knowledge, etc; </li>

Its content.</li></ul>

Back to Top of Page

Make Visible Design Accessible Visible design includes those features that can be accessed and customised by users, i.e. the user interface.

Allow users to change and customise font and colour Some websites provide a clickable option to change colours or fonts, other use style sheets that users can adjust. For example, the Section 508 website allows users to change fonts and font size.

Suggested Resource: Cascading Style Sheets Level 2 CSS2 Specification.

Use an easy-to-read layout Use lots of white space and separate information into short sections. Keep page layout consistent throughout a website or educational module.

Use fonts of a readable size and style Tiny or italic writing is often difficult to read. Some font styles are easier to read than others. Some font styles are easier to read than others, so use san-serif (without curly edges, e.g. <font face="Arial">Arial ) fonts for material designed to be read on screen; serif (curly edged, e.g. <font face="Times New Roman, Times, serif">Times New Roman ) for printed material; and avoid using decorative fonts (e.g. <font face="Monotype Corsiva">Monotype Corsiva ). Use larger fonts for headings.

Suggested Resource: Accessible Web Typography: An Introduction for Web Designers.

Use colours with adequate contrast Use colours which contrast well with each other, such as dark text on a light background and vice-versa. Avoid using similar shades of colour for text and backgrounds. Avoid combinations that may cause difficulties for colour-blind people. Around 1 in 20 white males have a red-green colour blindness.

Suggested Resource: Effective Color Contrast: Designing for People with Partial Sight and Color Deficiencies.

Don't use colour alone to convey information For example, do not ask users to "click the green button to continue", rather ask user to "click on the submit button to continue". Also, people who are unable to distinguish colours won't be able to make any sense of a web page that shows the results of a learning test by highlighting the correct answers in green, and incorrect answers in red.

Use simple language This benefits people with learning difficulties, people for whom English (or the language of your resource) is not a first language, and people who might not be familiar with specialised language or jargon.

Suggested Resource: Concise, Scannable and Objective: How to Write for the Web.

Mark changes of language Changes of language need to be clearly marked to ensure that any assistive technology is aware of changes in the language. The &lt;html lang="en"&gt; (if the main language of the resource is English) should be included at the beginning of a resource. In XML (eXtensible Mark-up Language), use &lt;xml:lang&gt;. For a language change mid-sentence, use the &lt;span lang&gt; tag. For example: As a small child I loved listening to &lt;span lang="fr"&gt;"Au Clair de la Lune"&lt;/span&gt; on my mother's old French record.

Use an easy-to-read layout Include lots of white space and put separate information into short sections. Keep page layout and "look and feel" consistent  throughout.

Suggested Resource: Methods for Designing Usable Websites: Collecting, Writing and Revising Content.

Make the navigation simple to use and consistent Keep navigation links in the same place on each page and make it easy for people to move around. For example, include links to "next page" or "next activity" to avoid returning to an index page. Breadcrumbs are one way of helping people keep track of where they are within the resource, e.g. "You are here: Accessibility Website / Resources / Accessibility Tips".

Generally, it is better to use text for navigation links, rather than buttons or graphics, which screen readers may not be able to access. However, buttons can be easier for people with learning or motor disabilities, because they are larger to click on than text. If buttons or graphics are used, include an &lt;alt&gt; tag to describe their content. Include a site map (a list of all the pages or sections on a resource or website) so that users can see the resource structure at a glance, and find sections quickly if they get lost within the resource. Image maps (large graphic images featuring links to pages or sections of a resource or website) can also be used for navigation, but make sure there are also text alternatives.

Suggested Resource: Sitemaps and Site Indexes: What They Are and Why You Should Have Them.

Back to Top of Page

Make Invisible Design Accessible This includes coding and any background tasks.

Use standard HTML or XML Use standard HTML (HyperText Mark-up Language) or XMLso that assistive and other technologies can recognise and deliver web-based resources. Ensure that code is used correctly and that it validates. This can be checked by using validators, such as the W3C Markup Validation Service.

Suggested Resource: HTML 4.01 Specification.

Use style sheets Style sheets separate structure from content. Information about font sizes, styles, and colours etc can be contained in style sheets, rather than hard-coded into the actual content. Users can then adjust or customise the way in which the text is presented.

Suggested Resource: Creating Accessible Style Sheets.

Use the &lt;alt&gt; tag The &lt;alt&gt; tag provides alternative text description for images and is particularly useful for people, who do not use images or who do not download them due to bandwidth or device constraints. However, some people find it easier to use resources that have plenty of images, so it may be helpful to have &lt;alt&gt; tagged images and icons alongside text.

Suggested Resource: Use of ALT Text in IMGs.

Ensure tables are marked up correctly Ensure tables are marked-up correctly and avoid using tables for layout if possible (use CSS instead). Screen readers read across, rather than down table cells, which may confuse the order of the information. For example, the table below will be read aloud by a screen reader as "Name Address Age Mr Jones Wales 56"; instead of "Name Mr Jones Address Wales Age 56".

Suggested Resource: Creating Accessible Tables. Back to Top of Page

Consider Content Structure Structuring content well will ensure that assistive technology users will be able to access content easily and logically.

Add a "skip navigation" link Screen readers read every single navigation link before reaching the main page content, so a "skip navigation" link inserted at the top of the page allows the user to go directly to the content. Skip navigation links can be visible or invisible (an invisible link becomes visible as the user tabs across). Alternatively put navigation links on the right side so that screen readers read the content first. To add a visible link, at the top of the page insert: &lt;a href="#content"&gt;Skip navigation links&lt;/a&gt;. At the beginning of the main content, insert: &lt;a name="content"&gt;&lt;/a&gt;.

To add an invisible link, create a transparent gif in a graphics package, and save in an images folder as "transparent.gif". At the top of the page, insert: &lt;a href="content"&gt;&lt;img border "0" src="images/transparent.gif" alt=Skip navigation links&gt;&lt;/a&gt;. At the beginning of the main content, insert: &lt;a name="content"&gt;&lt;/a&gt;.

Suggested Resource: Using Skip Navigation Links.

Structure information in a linear or serial way Screen readers read everything as they come to it, regardless of whether or not it makes logical sense.

It is also preferable to avoid using frames, because they do not have individual web addresses, and so are hard to locate and navigate. However, if frames are used give each frame a &lt;title&gt; tag to indicate its contents and provide a &lt;noframe&gt; tag option for people to read the information contained in the individual frames.

Suggested Resource: The Lynx Viewer.

Label hyperlinks clearly Screen reader users may tab straight though hyperlinks without reading the accompanying text. Therefore, a link that reads "Click here" makes no sense out of context. Instead use a phrase that will make sense on its own.

Avoid allowing hyperlinks to open a new window (unless this is specifically indicated on the link) as this can be irritating for many users. Also, indicate if a link leads to a resource which may be slow to load or which may potentially be inaccessible, such as a PDF (Portable Document File).

Ensure that links change colour when clicked, so people know whether or not they have visited them. The convention is for hyperlinks to be blue, and to turn purple or red after being visited.

Adding punctuation between links ensures that screen readers pause between links instead of running them all together.

Suggested Resource: Links (PDF Format - 4.06Mb).

Back to Top of Page

Provide Alternatives

Provide alternatives to audio content Provide alternatives to audio content, such as text transcriptions or captions for videos and online audio discussions for people unable to use sound. Ensure that alternate versions are synchronized with real-time multimedia presentations, e.g. if a video is being shown, ensure that any textual alternatives conveying the visual and audio elements are running at the same time.

Suggested Resource: MAGpie (Media Access Generator).

Provide alternatives to visual content Provide alternatives to visual content, such as &lt;alt&gt; text for images, and audio descriptions of visual multimedia content.

Suggested Resource: NCAM (National Center for Accessible Media) Rich Media Accessibility.

Ensure that all actions can be completed from the keyboard Some people prefer to carry out commands or access menus using the keyboard rather than the mouse.

Back to Top of Page

Testing for Accessibility

User testing User testing is the most important way of testing for acessibility. By observing a range of users, including people with disabilities, using the resource, any major accessibility or usability problems should be revealed. It is possible to make web-based resources that meet accessibility guidelines, but which are completely inaccessible to users.

Test with assisitve technology Test accessibility by using assistive technology, such as JAWS to determine whether the information makes sense and can be accessed by other technologies. Are people able to locate where they are and navigate quickly through the content?

You can also test your site by running it through a text reader such as Lynx, which will give you an idea of what the resource will sound like through a screen reader, and how text-only information will appear if accessed on a WAP (Wireless Application Protocol) 'phone or PDA.

Note: Although using assistive technologies can help to pinpoint any obvious issues, testing should also be done by experienced assistive technology users.

Test on different browsers Test the material on different web browsers, such as Internet Explorer, Mozilla based browsers, etc, to see whether the information and formatting is still readable.

Use online validators and accessibility checkers Run the material through online accessibility tools, such as Bobby, A-Prompt and the HTML Validator but be aware that automated accessibility testers do have some limitations. They may miss some accessibility problems which are apparent to human testers, and make accessibility recommendations for other features which work perfectly well.

Accessibility consultants There are various accessibility consultants who can test web-based materials and make accessibility recommendations.

Back to Top of Page

Bibliography Foley, A. and Regan, B. 2002. Web design for accessibility: policies and practice. Educational Technology Review, Vol. 10, No. 1. Accessed 11/06/02. (Web link now dead 31/01/07).

Kandlbinder, P (2000). Peeking under the covers: Understanding the foundations of online academic staff development. HERDSA Conference Proceedings, Flexible Learning for a Flexible Society; University of Southern Queensland, 2-5 July. Cited on "What is online learning?" by the University of Adelaide TLDU. Accessed 25/07/05. (Web link now dead 31/01/07).

Nielsen, J. 2002. Jakob Nielsen interview on webreference.com. Accessed 12/06/02.

Taylor, H. June 7th, 2000. How the Internet is improving the lives of Americans with disabilities. The Harris Poll #30. Accessed 11/06/02.

Valdes, L. 1998. Report on a priority theme: accessibility on the Internet. Accessed 7/6/02. End of Accessibility Tips: Back to Top of Page