15 POINTCHECKLISTFOR ANACCESSIBLERESEARCHWEBSITE October

2009

What is web accessibility?

It is improving visitor’s overall experience by making your research website available / usable to everyone, or everyone your research is targeted at.

Everyone includes the disabled, hearing impaired or those with another form of disability.

Accessibility also means other operating systems, browsers, connection types, screen sizes, or mobile devices have access to your website’s content.

15 POINTCHECKLISTFOR ANACCESSIBLERESEARCHWEBSITE……

1.USEWEB SAFEFONTS

Use ‘web safe’ fonts and sizes such as size 12 Arial or Verdana.

Unsafe font

Safe font

Why?Easier on the eye;Browsers & operating systems support safe fonts;More people will have access to your content

2.PROVIDE ANOPTION FORCHANGEABLETEXT SIZE

Example of how the University of East Anglia allows visitors to change the text size of the website

http://www.uea.ac.uk/ccp

Why?Disabled and poor-sighted visitors can consume information better;Visitors stay on your website due to overall better experience

3.USEHIGHCOLOURCONTRAST

Which box is easier to read?

Try to read this Try to read this

Why?Easier for everyone to consume information;More likely to retain visitors;Easier for visitors with low vision to read

4.LIMITANIMATIONS

Limiting the use of animations, particularly moving and flashing text or images is recommended.

Why?Those with epilepsy and other photosensitive disorders can safely browse the site;Less animations often lead to more trust (visitors stay longer and return to the site)

5.TEXTALTERNATIVETO USINGCOLOUR FOR EMPHASIS

Colour is often used effectively to emphasise certain graphics. This emphasis can be difficult to see for visually impaired visitors and on certain screens.

It is worthwhile to provide text alternatives when graphically presenting content.

Example of how Cass Business School’s Centre for Charitable Giving and Philanthropy provides a text alternative to graphics

http://www.cass.city.ac.uk/philanthropy/index.html

Why?Visually impaired visitors are provided an alternative;Website is better indexed on search engines, which still prefer text over images & animation

6.CREATE ATEXT-ONLYVERSIONOF YOURWEBSITE

Why?Direct access to content (e.g. research results);Faster website load time;A printer-friendly version;Easier access for mobile devices

7.CREATE ASITEMAP

A sitemap allows website visitors and search engines to see all the individual pages/sections of a website as a list.1. Home

2. About Project

participants Funding

3. Contact4. …

Why?Easier access to site-wide content;Better access to specific content;Improves site’s visibility and reach on search engines

8.OFFERMULTIPLELANGUAGES

Why?Visitors can enjoy the site in their own language;More languages can offer a wider search engine presence, too

9.PROVIDEAMPLETIME

In some instances (e.g. application forms), which may have a timed session, there should be the option to extend the available time.

Why?Disabled visitors have enough time to complete the task

10.IMPROVECONTENTREADABILITY

Readable content includes clear, simple language appropriate within the context it is used.

Hyperlinks should be visible with good contrast of colour.

Paragraphs should be short and without long stretches of italics or boldness.

The width of paragraphs should be limited and spacing between words and characters kept as clean as possible.

Why?A better way of presenting large amount of information;Disabled visitors can consumer content better;Easier to manage website content

11.IMPROVENAVIGATION

Good navigation is clearly distinguishable from the rest of the content.

Navigation should not be overwhelming (not too many links per page).

Pages with lots of information should allow users to navigate to specific sub-sections easily.

Graphical navigation should have a text alternative.

Navigation should be easy to find (top, bottom or sides).

Why?Lets visitors find the research information you have provided for them;Visitors are more likely to stay if they can find the information they want

12.CROSS-BROWSERCOMPATIBLE

Internet Explorer and Mozilla Firefox are not the only web browsers.

There’s also Opera, Flock, Dillo, Epiphany, Galeon, SeaMonkey, Chrome, Safari and more.

Why?Ensuring a website is visible to as many browsers as possible naturally results in a more accessible site

13.CROSS-OPERATINGSYSTEMCOMPATIBLE

As with browsers, there are also a number of operating systems; Windows, Windows CE/Mobile, various Unix OS, Apple, iPhone OS…

Why?Ensuring a website is visible to as many operating systems as possible naturally results in a more accessible site

14.QUICKWEBSITELOAD TIME

Quick website load time is crucial. Visitors require fast access to content.

Optimising websites to load faster also ensures mobile devices have better access.

Faster load time is achieved through splitting large quantities of content into several pages.

Images should be compressed and videos encoded, kept short and split if necessary.

Why?More visitors will stay and return;Mobile platforms have better access;Overall user experience is improved

15.SEARCHENGINEACCESSIBLE

Accessibility is often concerned with people. However, machines need to have access to a website as well (so that browsers can display the site and search engine bots can crawl and index a web page).

Do not unintentionally block your website from search engines (through e.g. the use of a robots.txt file).Do not unintentionally password protect folders which you would like the public to access.

Also, for search engines to ‘like’ your website, the content needs to be clear and fresh. The code should be clean. There should be a sitemap.Graphics should have a text alternative. (This is a good start).

Why?Search engine visibility results in more reach and more targeted visitors to your research website

Useful toolsSee how your website looks to a colour blinded person: http://www.vischeck.com/vischeck/

See what your website looks in the Lynx text-only browser:http://www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php

See how quickly your website loads: http://www.numion.com/StopWatch/

Useful tools

See how your website looks in different web browsers: http://browsershots.org/

A website accessibility test: http://checkwebsite.erigami.com/accessibility.html

Convert any website into text-only:http://www.textise.net/

Further readingESRC has a brief introduction to web accessibility for researchers: http://www.esrcsocietytoday.ac.uk/ESRCInfoCentre/CTK/interactive-media/ingredients/accessibility-intro.aspx

W3C has accessibility success criteria with a quick reference sheet here: http://www.w3.org/WAI/WCAG20/quickref/

RNIB has web accessibility articles, actual case studies, and other information showing how web accessibility has been implemented on various websites: http://www.rnib.org.uk/professionals/webaccessibility/Pages/web_accessibility.aspx

THANK YOU FOR READING

Author:

Henrik KahraShowtime Studios LLPDesign Agency

Please leave any comments and suggestions.

More web design and communication tips for academics and researchers, please visit:

http://researchers.showtimestudios.co.uk

Image & content credits:

http://www.w3.orghttp://www.rnib.org.ukhttp://www.esrcsocietytoday.ac.ukhttp://www.tckid.comhttp://www.uea.ac.ukhttp://www.cass.city.ac.uk

Content of these slides are licensed under a Creative Commons Attribution 3.0 License