• by Jurriaan Persyn
• this is a draft version, I’d love to hear your remarks .
• this is part of my thesis

Abstract

This paper addresses the accessibility and usability of websites for people with Autism. We will discuss the specific needs of people with autism and offer a range of principles, guidelines and concrete tips concerning the content, structure, navigation and design of a website, which web developers can use.

Introduction

From its experience with autism, ‘Autisme Centraal’ has developped a philosophy to help autists to take part in a strange world of strange meanings. The internet is one aspect.

This document wants to be a tool for people who work with the content or technical sides of a website, to make their site more accessible and usable for people with autism.

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” – Tim Berners-Lee, W3C Director and founder of the World Wide Web

E-Content accessibility and usability must be always seen in a larger frame. A quality site is more than one which takes into account the principles presented here. We consider this paper a summary and extension, a document in which we examine accessibility and usability seen from an autism point of view.

The knowledge in this document is based on other research, articles and sites (mentioned at the end of this document) as well as the experience of ‘Autisme Centraal’. If you want to delve deeper in this matter we suggest you read the documents mentioned at the end.

This document has been written as a project for the non-profit organisation ‘Autisme Centraal’. Their Internet site wants to offer information about autism in an ‘Autism-Friendly’ way to people with autism, professionals, parents and family members and in a broader sense all people with an interest towards autism.

Needs of people with ASD

There’s no typical autistic behavior. ‘Autism’ refers to a spectrum of conditions that encompasses those with Kanners autism (classical autism) through to Aspergers Syndrome, Pevasive Developmental Disorder, Rhetts Syndrome etc. Autism can express itself in totally different ways depending on factors like age and intelligence. Autists can behave totally differently (on the outside), but they have the same way of processing information (on the inside). This is where it will be best for you to concentrate your accessibility efforts. These common features are:

• Impaired communication skills
• Impaired social skills
• Impaired imaginative skills

Keywords when developping websites for people with ASS are thus:

• Efficient and concrete communication
• Synoptic
• Simple and sober
• Visible context

A large proportion of the people with autism have more than one autism-related condition. Different studies about this give different figures, nevertheless we provide the following figures that are more or less unanimously accepted:

• autism and intellectual restriction: approximately 50% of people with ASD
• autism and epilepsy: approximately 25 to 30% (of the people who also have an intellectual restriction)
• autism and medical impairments (all kinds of hereditary disorders): approximately 10%
• autism and sensual impairments: approximately 5 to 10%
• autism and psychiatric disorders: unknown (figures vary from 5 to 30%)

A good summarising article concerning the ‘comorbidity’ in autism is Gillberg & Billstedt’s (2000) [14]. It is a big challenge to develop an accessible website for all of these subgroups, each with their own specific wishes. It is no superfluous luxury to get to know more about these other subject, and it shows the need of addressing accessibility in a wider frame.

Several tips in this document will, for example, also help people with visibility problems. In this document, however, we assume the visitors of our website can read and write. Autists’ different way of processing and handling information will in the first case have its consequences on the content of our website. But if we take a closer look at the structure of our site, the html-code we write and the features we implement, we’ll notice here too there are improvements that can make our websites more ‘autism-friendly’. Despite many years of research on the subject of accessibility and user-friendliness, specific knowledge for people with cognitive disabilities or more specific for people with autism is scarce. We will try to give simple and concrete tips. [12]

Tips and guidelines

Clarity and simplicity were quoted earlier already as keywords to keep in mind when developing a website. This means being consistent and holding on to frequently used conventions. This applies to the content, the design and the navigation of the site.

Don’t forget what you already know about developing a quality website [18]. (Valid semantic xhtml, css, … all play their part [22].) Lots of the tips which help the average internet user, will also help people with autism. The difference between a ‘best practice’ and the benefit for someone with autism isn’t always clear.

A ‘best practice’ can in fact be a necessity for someone with autism, instead of ‘handy & nice’ for non-autists. The use of a clear language, stripped of superfluous marketing-lingo will be appreciated by everyone, but it essential for people with autism. That and the frequent comorbidity in autism is why we have opted to also include some more general accessibility guidelines.

We will try to give you concrete tips, principles and guidelines, but the nature of the subject doesn’t always allow us to suggest a simple solution. Every recommendation we give has to be implemented with care.

Contents

How do you ensure that the contents of the site are understood? Writing for the web is allways different to writing for the off-line world, irrespective of the fact the visitor is or is not a person with ASD. Writing for the web is an art in itself and the tips provided in this field will also prove usefull here, since once again the keywords are the same: Clear, simple and sober. We summarise and add our thoughts …

Writing style

An adapted and simple language use is very important. But what does this imply? How do you assess a text?

• Keep it as simple and short as the subject permits.
• Avoid deviating from the subject. One idea for each paragraph is enough.
• Offer a shorter alternative (summary) for long pieces of text.
• Spelling – or grammatical mistakes will cause confusion.
• Autistics are very literal people. If you say to an autistic ‘its raining cats and dogs’ they will expect to see it raining cats and dogs. Simile and metaphor are very difficult, if not impossible concepts for a lot of autistics.
• If you use technical terms, abbreviations and acronyms always ensure there’s an explanation available. A good practice is to explicitly mention the explanation the first time you use an abbreviation and make use of html’s ‘<abbr>’-element to describe the meaning next time you mention the abbreviation. It’s meaning will then be available as a ‘tooltip’ in the standard browsers.
• Visualise content with pictograms, lists, et ceteraHow do you determine how readable your text is? The Fog index, Flesch Reading Ease and Flesch-Kincaid Grade are indices that can give an indication of the difficulty of a text. These are however mathematical algorithms and therefore not absolute in pointing out the comprehensibility of your text. The readibility test on Juicystudio [10] calculates these indeces for the webpage you enter.
  The best way of testing your site for comprehensibility is to listen to the remarks of your visitors. In our case (website Autisme Centraal: people with autism, parents and professionals, but also a more wide public). [8]

Well-structured content

Reading a text from your screen is different to reading a printed text. The reader ‘scans’ the text and skips to the information that is most valuable to them. A well structured text (chapter titles, headers, etc.) is therefore very helpful to provide more context for the text that follows. They also provide warning of a change in context and reorient the user to the new focus. This is especially true for people with autism who frequently have difficulties in preserving an overview.

The following hints can contribute to a better structured text:

• Use lists with the main ideas instead of a written out paragraph. Some will find an ordered list more easily to follow.
• The use of “Inverted Pyramid Writing”, as seen in newspapers, helps. Start your text with a summary, and keep details for further on the page. More.
• Use clear titles and headings for your pages and paragraphs. A good title is clear, short and relates to the content of the page or paragraph it belongs to. Keith Robinson’s Article ‘ Write Clear Titles ‘ [2] is a good aid at writing titles for web content.
• Begin a long document with a contents table, end with an index.
• Use single, long pages broken down by area to cover a single subject rather than lots of short individual pages. [1]
• Place the important concepts of a paragraph in the first sentence of it, don’t hide them somewhere in the middle.

No matter how well your document or website might be, it’s always an imposed structure which the visitor might not be familiar with. It’s good to always foresee this and incorporate a good search engine that searches through all the information on your site. This gives your users the ability to bypass your structure and go straight to the information they need.

Offer alternatives

You can clarify the contents of your site by offering alternatives [20]. Pictograms are frequently used for people with autism. But other alternatives can also provide help. Where possible provide a video for illustrating a visual concept, offer a flowchart for clarifying procedures or offer images, photographs and audio recordings.

Make sure to use the picto’s and alternatives consistently throughout the entire site. Don’t forget that each alternative is an alternative, and don’t drop the text-only option. (Provide your images with appropriate alt-attributes.) People who prefer to use text-based browsers or screenreaders will thank you for that.

Important pages

People with autism attach much importance to structure, which is reflected in the expectations they have concerning the pages on a website. Visitors arrive with certain intentions and expectations of your site. Some standard page formats, which are recognised from other sites, will help them find the information they are seeking.

• Main Page:
  The home page contains an ‘ introduction ‘ to the site. Make clear what your site is about and mention its most important features.
• Contact page:
  Give visitors the possibility to contact you and at least mention the e-mail address. This information should be easy to find, from any page. If you request input from the user and/or require interactive actions, provide sufficient feedback and offer a mailform at each moment. Tell users where the request will be sent to and when they can expect a reply.
• Sitemap:
  Give an overview of the pages of the site. Do this according to the structure of the site (most common) and/or alphabetically (bigger sites).
• Search Page:
  A good search engine makes it possible for the user to bypass the (imposed) structure of the site and immediately head for the desired content. Offer a simple search engine with basic options. You can implement sophisticated search features, but offer them as an optional choice. The search engine on ‘Autisme Centraal’ will make it possible to search all the components of the site. If you search for a certain keyword, both articles, pages, books, workshops and items from the store will be offered.
• Privacy Statement:
  A page with an overview of the relevant legal information, e.g. concerning copyrights.
• Accessibility Statement:
  Explain how you make your site accessible. Your users won’t be able to use helpful features if they don’t know they exist.

Navigation

Even if you’ve got tons of usefull information on your site, if your navigation isn’t simple and clear, visitors won’t find it and that’s a pity. The following tips relate to both the content and the design of the site.

• Group all the navigation elements in one place. If you have several menus and sub-menus on different parts of your page it’ll be difficult for people with autism to know how they relate to each other, because of the difficulties they may have in keeping an overview of the page [21].
• Make sure the user can always return to the home page in a few clicks, no matter what sub-sub-sub-page they might be on.
• Keep clear where every navigational element will lead you to. Elements who reveal their target only on mouse-over aren’t a good idea.
• Use a slightly different style for links to pages of the site which have already been visited. A purple colour is frequently used.
• Make your navigational sections stand out from the content of your site, eg. with color.
• The text or symbols you use for navigation should be representative. If you use symbols they should clearly speak for themselves or be commonly used, like a little house pointing to the home page.
• The menu should be consistent through the whole site, with an indication of where you are.
• Use a “breadcrumb trail” to help the user situate himself in your site. Breadcrumbs provide a trail for the user to follow back to the starting/entry point of a website and may look something like this: “Home page → Section page → Sub section page”. Make the links of your breadcrumb trail clickable so it can also be used as a navigational mechanism [15].
• Group items of the navigation menu by subject and not alphabetically [16].
• Don’t open links in a new window. Apart from confusing the user (with a new window the back button is gone or useless) it’s also a bad practice for other reasons; It doesn’t always work, search engines can’t always follow pop-up links, lots of people use pop up killers, users assume a windowed environment [3] [4]. An alternative for pop-ups as form help is presented on Juicystudio [5].
• If you link to an off-site page, make sure to tell your users about this. The different lay-out and structure of the site you linked to might surprise the user [6].

Design

Carefully designing your site is a must. A good designer uses CSS, avoids layout tables as a design tool and doesn’t want to be remembered for wrapping everything up in font-tags. Why?

“Designing With web Standards” [19], is a good place to start finding the anwsers. It offers an excellent overview of the techniques for developing sites with web standards. Besides saving on bandwidth and numerous other advantages, it’ll also make your website more accessible for people with autism: Users will have the ability to control presentation by means of user-stylesheets, the possibility to view a page without any design elements, and it also possible to provide more appropriate mark-up for screenreaders etc.

• Branding and emotional design is largely superfluous. As autistics are often challenged by metaphor, a logo device is often meaningless. For example, Nike’s “swoosh” logo is bewildering to an autistic. Shell’s shell is better as it is more literal [1].
• Indent sub-items in a structured list, to preserve a good overview.
• Don’t use patterened or complex background images. This will distract from the content and make the text illegible [1] [7].
• Avoid flashing and moving content [7].
• Avoid horizontal scrollbars (even at screen resolution 800 x 600). Content that is not immediately visable makes it even tougher for people with autism to obtain an overview [16].
• Don’t use background music. This distracts and is often unexpected [16].
• Be careful when using time based content (auto-refresh/slideshows). Different users may require different amounts of time to do the same thing. Permit the user to take more time if they need to.
• Components of the lay-out with a similar look and components that require similar interactions should give similar results.
• A high contrast colour palette can help to keep the attention of the visitor.
• Use enough white space around the contents and between paragraphs and headings. Too much information stuffed onto a small screen makes reading more difficult.

Text layout

• Restrict the number of fonts to a minimum and use them consistently. If you embed text in an image, make sure it’s readable. Serif fonts (like Times New Roman) are often used and easy to read for print, but because of the low resolution of today’s monitors, sans-serif fonts are preferred (on 96% of the websites [16]). Arial and Verdana are the most popular sans-serif fonts. ‘Autisme Centraal’ uses Trebuchet.
• Use a shorter line length. Reading long lines is difficult. If you use so-called fixed layouts you won’t allow your users to resize line length when resizing the browser window [1] [9].
• Don’t use justified text (“rivers of white”) [8].
• A larger line height (e.g. 1.5 or more) helps the reader to concentrate on a line. You can add the css-rule “line-height: 1.5em;” to paragraphs and lists [11].
• Avoid the use of animations, blink-effects and marquees. These distract and are difficult read.
• Underline links (users have got used to this, it’ll help them recognise links). A mouse-over-effect on links will also help. Avoid underlining other things besides links.
• A mouse-over effect on paragraphs (example) could help the user to focus on the area he’s reading. This technique is also frequently used for tables (example). This technique must be applied carefully, it should not distract or make it look like the paragraph or table row is a link. You could add the possibility of allowing the user to turn off these mouse-over effects [11].
• Limit the use of italic text or text in capital letters (CAPS). These reduce legibility.

Features

The following extra features could make your site more accessible. They are related to control over content and presentation and the way users find and read your content.

Control over content

• Switching between a long and short version of a page. Although you want to keep all information accessible, it may be helpful to offer 2 versions of a page. A shorter version with just the most important ideas maybe clearer for someone with ASD.
• Offering the option to hide certain components of site and simplifying the layout.

Control over presentation

• Users should be able to change the font size by using their browsers’ font resize feature [13 ].
• Some may find a high contrast layout easier to read, others won’t like how it looks. You can implement a style sheet switcher that allows your users to see the website with different styles [8].
• Add a print-stylesheet to your pages that allows for a nice and clean print version of the page. Reading text from paper is easier then reading from the screen, especially for longer articles.

Interaction

• When you require actions from the user, give clear feedback.
• Use a multi-step form instead of 1 long form and allow the user to save the work they have done at the end of each step.
• Add an appropriate label to each input box and position it close so people easily see the relationship between the label and the input.
• Filling out a form can take more time then you’d expect. Take care a time out doesn’t happen before the form is submitted, so allow more time.
• Allow the user to undo possible errors:
  • Always ask for confirmation for critical actions.
  • Allow the user to return to previous steps in a multi-step form to correct information.
• E-commerce-related: [7]
  • Always show exact prices and payment rates
  • Describe the payment procedure entirely
  • Mention possible delays and delivery dates
  • Keep to promised delivery dates
  • Visible annulment conditions

Am I doing ok?

The efforts you’ll do will be appreciated by your visitors, but how d’you know how accessible your site is? How do you measure accessibility? How do you let your users know about your efforts? How do your clients evaluate accessibility?

There are severals tests – such as WebXACT, UsableNet and Bobby -, checklists – such as the WAI guidelines – and labels – such as Blindsurfer (in Belgium) – that will help you evaluate your site according to accessibility principles, each with their own focus. Blindsurfer’s being on accessibility for people with a visual handicap. A similar test for testing the accessibility of a site for people with autism isn’t available.

These tests or checklists however, give only an indication of how accessible your site is [14]. The rules and requirements they use to evaluate your document are frequently open for interpretation. It’s not a black / white situation, not a valid / not valid situation, so it’s good to be careful when claiming conformity. ‘Autisme Centraal’ uses an ‘Autism-Friendly’ label. You can read more about this label on www.autismecentraal.com.

More and more countries include e-accessibility guidelines and requirements in their legislation. There’s Section508 in America, the Disability Discrimination act in United Kingdom. (More “guidelines and laws from different countries” are mentioned on W3C’s website.) It is obvious that you must also take into account these laws if they apply on your site.

More important then tests and claiming conformity is listening to your visitors and trying to adjust the site where needed. Explain to your users how you make your site accessible and ask them for feedback. It’ll mean much more then a ‘Bobby-Approved’ icon. Measuring your site’s quality should be done by your visitors. You will find working with users from this group very rewarding. You will certainly find them blunt and honest!

Conclusion

Developing a quality website requires knowledge of web standards, css, html, server side scripting and many more technologies. But making your site readable, accessible and usable is an even bigger challenge. What you’ll learn in all these fields will no doubt contribute to a better user experience for people with autism too. In this document we collected, examined and filtered all this knowledge and looked at it from an autism-point-of-view and saw there’s a lot of points we can work on, although it’s not easy to offer simple solutions. Accessibility and usability can’t be reduced to a checklist though, it is an ongoing effort.

References

• [1] Answer of Kevin Leitch on the Accessibility and Autism’-discussion topic on the Accessify forum. – http://www.accessifyforum.com/viewtopic.php?p=24117#24117
• [2] ‘Write Clear Titles’ by Keith Robinson – http://www.7nights.com/asterisk/archives05/2005/09/web-publishing-tip-write-clear-titles
• [3] ‘Checkpoint Examples’ by W3C – http://www.w3.org/WAI/wcag-curric/sam77-0.htm
• [4] ‘The top 10 New Mistakes of web design’ by Jakob Nielsen – http://www.useit.com/alertbox/990530.html
• [5] ‘Form help without Pop-ups’ by Gez Lemon – http://www.juicystudio.com/article/form-help-without-popups.html
• [6] ‘Designating Offsite Links’ by Ryan Brill – http://www.ryanbrill.com/archives/designating-offsite-links/
• [7] ‘Autismevriendelijk’, a pocket of Autisme Centraal
• [8] ‘An Accessibility frontier: Cognitive disabilities and learning difficulties’ by Roger Hudson, Russ Weakley and Peter Firminger – http://www.usability.com.au/resources/cognitive.cfm
• [9] ‘Ideal line length for content’ by Russ Weakley – http://www.maxdesign.com.au/presentation/em/
• [10] ‘Readability test’ by Gez Lemon – http://juicystudio.com/services/readability.php
• [11] ‘Developing sites for users with Cognitive disabilities and learning difficulties ‘ by Russ Weakley – http://juicystudio.com/article/cognitiveimpairment.php
• [12] ‘Accessibility For All’ by Kevin Leitch – http://www.kevinleitch.co.uk/wp/?p=119
• [13] ‘Using relative font sizes’ by Mark Pilgrim – http://diveintoaccessibility.org/day_26_using_relative_font_sizes.html
• [14] ‘Autism and Asperger syndrome: coexistence with other clinical disorders’ by Gillberg & Billstedt (2000) – http://www.ncbi.nlm.nih.gov/entrez/query.fcgi?cmd=Retrieve&db=PubMed&list_uids=11098802&dopt=Abstract
• [15] ‘Breadcrumb Navigation Further Investigation of Usage’ by Bonnie Lida Rogers and Barbara Chaparro – http://psychology.wichita.edu/surl/usabilitynews/52/breadcrumb.htm
• [16] ‘Homepage Usability; 50 Websites Deconstructed’ by Jakob Nielsen & Marie Tahir (New Riders, 2002) – http://www.useit.com/homepageusability/
• [17] ‘Accessibility evaluation’ by Dey Alexander – http://deyalexander.com/resources/accessibility-evaluation.html
• [18] ‘Beyond ALT Text: Making the Web Easy to Use for Users With Disabilities’ by Nielsen Norman Group – http://www.nngroup.com/reports/accessibility/
• [19] ‘Designing with Web Standards’ by Jeffrey Zeldman (New Riders, 2002) – http://www.zeldman.com/dwws/
• [20] ‘Cognitive Disabilities’ door WebAIM – http://www.webaim.org/techniques/cognitive/
• [21] ‘Web Accessibility for People with Cognitive Disabilities: Universal Design Principles At Work!’ by Neesha Mirchandani – http://www.ncddr.org/du/researchexchange/v08n03/8_access.html
• [22] ‘The Structure Of Accessible Pages’ from ‘Building Accessible Websites’ by Joe Clark – http://www.joeclark.org/book/sashay/serialization/Chapter05.html

Acknowledgements

Thanks to Wouter Vanderbeke, Det Dekeukeleire, Kevin Leitch, Peter Firminger, Peter Vermeulen, Landschip, Bart Van Herreweghe, Roger Hudson and Gez Lemon