Summary

When people think about accessibility of web content, there's a tendency to concentrate on people with visual impairments. People with cognitive impairments and learning difficulties are often overlooked.

This article by Roger Hudson, Russ Weakley, and Peter Firminger, examines the types of problems visitors may encounter when using the web, with insightful and practical suggestions on how to develop websites that are inclusive for people with cognitive impairments and learning difficulties.

Author: Russ Weakley

Contents

By Roger Hudson, Russ Weakley, and Peter Firminger

Translations

Finnish Translation
The Finnish translation of this article is kindly provided by Saavutettava.fi.
Italian Translation
The Italian translation of this article is kindly provided by Livio Mondini.
Kazakh Translation
The Kazakh translation of this article is kindly provided by John Vorohovsky.
Polish Translation
The Polish translation of this article is kindly provided by Tilia Kurek.
Portuguese Translation
The Portuguese translation of this article is kindly provided by Maria Nazaré Sanches.
Russian Translation
The Russian translation of this article is kindly provided by Softdroid.
Swedish Translation
The Swedish translation of this article is kindly provided by Johan Sundstrom.

[Back to the contents]

Introduction

The largest disability group in our community are those with cognitive disabilities and learning difficulties, yet they are often forgotten when it comes to website accessibility.

The labels, cognitive disabilities and learning difficulties, appear to encompass such a broad range of conditions that web developers often find it difficult to identify or address the specific needs of the individuals or groups they are used to describe.

Many distinct disabilities can affect a person's ability to access a website and use the information it contains, for example:

For the web developer, the situation is made more complex by the fact that individual users with these conditions can have very diverse needs. It is common for individuals who have cognitive problems in one area to be highly skilled in other areas. For example, a person who is an excellent reader may have considerable problems understanding the way a web page is organised, or be easily distracted by a small animated image.

Can the web address the needs of all of these different groups? Probably yes, but with different websites.

The web can bring considerable pleasure and aid people with different, and in some cases quite profound, cognitive disabilities. The Peepo project (now closed) provided a wide range of resources and ideas to enable people with severe learning difficulties to browse and use the web independently.

The focus of this article is primarily on improving the web for people who have the functional capacity to independently access and use sites that contain some text content. In particular, the article suggests some simple methods that may improve the accessibility of sites for people who find it hard to read and use written content.

For a more detailed version of this article, go to An Accessibility Frontier: Cognitive disabilities and learning difficulties

[Back to the contents]

1. Working with Content

1.1 Clear and simple content

Content that is well written will be easier for everyone to access including people with cognitive and learning difficulties.

1.2 Optimal line length

Most web users find long lines of text hard to read. For people with reading problems long lines of text can become a significant barrier. As screen resolutions increase, it is possible to get more and more characters into a line at any given font size, however the optimal font size for ease of reading varies from reader to reader. As a result, it is difficult to be definitive about what is the best line length, but as a general rule, lines should not exceed 70 - 80 characters and the text should have a left and right margin.

1.3 Rivers of white

Many web users with reading difficulties have problems with text that is both left and right justified. The uneven spacing between words in fully justified text can cause "rivers of white" space to run down the page making reading difficult and in some cases impossible for some people. The simple solution is to avoid fully justified text.

1.4 Inverted Pyramid writing

A simple way of making content more accessible is to use the inverted pyramid style of writing adopted by most newspapers. Start with a summary or short overview of the issue and the outcome, and then provide the supporting information and background details. This allows users to quickly determine if there is information they are interested in without having to scan the entire page.

[Back to the contents]

2. Hiding and showing content

For some web users, particularly those with cognitive disabilities and learning difficulties, large amounts of text on the page can be an accessibility barrier. Allowing the user to have some control over the information that is presented to them can reduce the likely impact of this potential problem. It is now possible to give users the ability to choose a simple or detailed version of page content in a variety of ways.

2.1 Long and short content

This method allows users to choose either a short or long version of page content across an entire website. Users who choose the short option can browse the site, reading the shorter text version of each page. If on a particular page they would like more detailed information, they select the long option and the longer version of the page content is loaded.

This method was used for the Sydney-based Guardianship Tribunal site. User testing of this site involved a wide range of users, including some with cognitive and learning difficulties. When they became aware that they could choose either long or short versions of page content, most users found this facility to be beneficial. For example, people with reading problems were able to get a short version of the information that they could read and understand. Social workers and doctors were also using short content as their default browsing option since it allowed them to quickly locate the information they required.

2.2 Expanding bullet points

A similar method uses simple statements or headings as a way of providing an overview of the content. These are presented as bullet points, which also serve as the keys to obtaining more information. When the user selects a bullet point, the expanded version of the information relating to that point is then presented within the list of bullet points.

2.3 Hide-show bullet points

This method also uses bullet points for the simple statements or headings. However, the expanded content is not displayed within each bullet point. Instead, it is displayed below the entire bullet point list. This option is better for longer chunks of content.

2.4 Slideshow content

Using the web to provide informational content for users with more serious cognitive impairment may require a different approach. One suggested method involves presenting the information in an integrated slideshow with a separate slide for each concept or area of interest. This will allow the content to be provided in clear, easy to access chunks that the user can step through at their own pace.

[Back to the contents]

3. CSS to aid clickability and readability

One of the major advantages of Cascading Style Sheets (CSS) is that it can be used to manipulate the presentation of content, without affecting the structure of the content. Here are some simple methods that use CSS to make content more accessible to people with cognitive disabilities and learning difficulties.

3.1 Increased line height

Some users find that an increase in the space between lines of text in a paragraph can aid readability.

3.2 Increased margin after paragraph

There is generally one full line of space after each paragraph in a block of content. Increasing this to 1.5 or 2 full lines of space can aid readability for some users.

3.3 Hover affect on links

Some users have difficulty in distinguishing links from other content. Links can be given a hover effect that makes them change colour on mouse over.

3.4 Border-bottom on links

Standard underlined text can make content, especially hanging letters, hard to read for some users. By removing the default link underline and using CSS border-bottom to underline the link, you can control the distance between the text and the underline.

3.5 Increased active area on links

For some users, particularly those with motor skill difficulties, clicking on links is difficult. Using CSS, the target area of links can be increased.

3.6 Hover on paragraphs, list items and table cells

Some users with reading difficulties find it hard to keep track of where they are on a page. Applying hover effects to paragraphs, list items and table rows allows them to use the mouse as a place-marking device.

Unfortunately, Internet Explorer does not support hover on paragraphs, lists or table rows. However, if you feel this is a valuable option for your users, JavaScript can be used to emulate this effect in Internet Explorer (using Dean Edwards' IE7).

Underlined paragraphs

Another method for users with reading difficulties involves underlining content within active paragraphs. The idea here is to provide a virtual ruler that sits under each line of text, allowing the users eye to stay on the current line more easily.

One possible problem with this method is that some users may confuse the paragraph underline with the default presentation of hyperlinks. Using CSS to provide a different style to the underline, for example a dotted red line, could reduce the risk of potential confusion like this.

3.8 Reversed colours

Some users find content easier to read if the colours used for the text and background are reversed, so that the page content is presented with light coloured text on a dark background.

3.9 Reduced background glare

Other users find that pages with a white background produce too much glare making them hard to read. This can be addressed by using an off-white or low grey scale colour for the background, which will reduce the amount of glare.

[Back to the contents]

4. User control of content and presentation

The various ideas outlined in this article can be used to allow each user of a site to have web page content presented in a way that is most useful for them.

When CSS is combined with either JavaScript or Server Side processing, it is possible for developers to include some of the suggested accessibility improvements (e.g. border bottom on links and increased link area) as default page presentation settings, while also allowing users to control other page elements such as:

[Back to the contents]

Conclusion

These examples are not supposed to provide definitive answers for all the problems users with cognitive disabilities and learning difficulties may experience when accessing a website. Rather, they are suggestions that developers, who are interested in making their content more accessible to a wider audience, may like to try out. While some techniques have been tested with users who have cognitive and learning difficulties, others are simply ideas based on theory and hunches.

[Back to the contents]

Further reading:

[Back to the contents]

Category: Accessibility.

Comments

  1. [cognitive-impairment.php#comment1]

    I'm extremely grateful to Roger, Russ, and Peter for this article, and would like to take this opportunity to express my gratitude. The article is well written, remarkably thorough, yet concise and easy to follow. It's even inspired me to make changes to Juicy Studio. In particular, I would like to say a special thank you to Russ who suggested publishing it on Juicy Studio.

    It's Russ's birthday today: Happy birthday Russ, and many happy returns of the day.

    Posted by Gez on

  3. [cognitive-impairment.php#comment3]

    Excellent article. As Gez said: "well written, remarkably thorough, yet concise and easy to follow".

    Its good to have other abilities/disabilities brought to light, so thanks for taking the time to research the information and post this article.

    and Happy Birthday Russ !!

    Posted by Jay-Dee on

  4. [cognitive-impairment.php#comment4]

    This is a remarkable piece if writing. It manages to bring together a host of ideas and concepts without sounding patronising, carping or preaching in any way.

    I believe it combines practical understanding and advice, which is applicable to all web designers and ALL audiences, not just those with disabilities.

    I too found it inspiring; brilliant!

    Posted by Robert Campbell on

  5. [cognitive-impairment.php#comment5]

    Very good article.

    When people with dyslexia read black text on a white background, the letter seems to move. This requires colour filters to help resolve this problem, it's just knowing which colours work best?

    Posted by Gaz on

  6. [cognitive-impairment.php#comment6]

    Another aid for people with dyslexia would be to break the word into syllables by colour coding each of the syllables.

    Posted by Gaz on

  7. [cognitive-impairment.php#comment7]

    I have really enjoyed reading the paper. I will right away start taking some of the observations made and start integrating them into my web sites, as well as passing the paper on to my colleagues.

    When reading the article I missed what the observations were based on. Did you come to these conclusions based on usability testing or interactions with people with cognitive disabilities?

    Posted by Justin Thorp on

  8. [cognitive-impairment.php#comment8]

    Great article, and just what I've been looking for recently - an overview of considerations when building websites that are inclusive for people with cognitive disabilities and learning difficulties. I will be reading the full article now for more info.

    Thanks to Roger Hudson, Russ Weakley and Peter Firminger for the great work on this article... thanks Gez for putting this up, and thanks Patrick for pointing me at it!

    Oh, and Happy Birthday Russ!

    Posted by dotjay on

  9. [cognitive-impairment.php#comment9]

    Great to see an article on designing for users with cognitive disabilities.

    My daughter is severely autistic and its fascinating to see how she approaches interfaces. I started to document what she does when using interfaces here:

    http://www.kevinleitch.co.uk/wp/index.php?p=119

    as I think it can offer valuable insights into the use of animation and imagery to make things easier to access for users with a cognative/perceptual or learning disability.

    I also really like the changes you've made to JuicyStudio Gez. Its much easier to read the content with the narrower line length.

    Posted by Kev on

  10. [cognitive-impairment.php#comment10]

    "When reading the article I missed what the observations were based on. Did you come to these conclusions based on usability testing or interactions with people with cognitive disabilities?"

    The end of the article has a slightly obscure statement which is:

    "While some techniques have been tested with users who have cognitive and learning difficulties, others are simply ideas based on theory and hunches."

    The long and short content option resulted from a brainstorming session between Roger Hudson and I a year or so ago when we were about to start work on a site for the Guardianship Tribunal. The audience for this site consisted of a wide range of users including a high percentage with some form of cognitive impairment. We discussed the other hide and show methods at this time but decided - for the Guardianship site at least - that long and short was the best option.

    Roger performed user tests throughout the development and at the end - with a range of users (including some with cognitive impairment). To our surprise (though looking back it should have been no surprise) almost all users chose the short text option, and found this tool a great bonus. It seemed that when people discovered the option, they immediately chose the short text and used it until they really wanted more details - then they clicked the long option. This makes you wonder whether some sites would be better with only short synopsis for content, and full content as a clickable option.

    Other techniques described above have been more hunch-based. Roger has someone close to him with a reading problem (a very untechnical description), and one day I started throwing ideas at him to see if they would theoretically be beneficial. They were based on the idea that some people like to hold a ruler under lines of text to help them focus. Before preparing the article, we also discussed our ideas with Dr Sunny Lah, a psychologist at the University of Sydney with an interest in cognitive and learning disorders, and gained a greater insight into how people remember things.

    The simpler css fixes like line height and extra margins after paragraphs (3.1 and 3.2) have been rough-tested on very limited audiences. It seems they benefit some people and do not make a difference for others. The ability for users to customise their own experience with an site-wide tool would allow them to decide for themselves. You could imagine this being beneficial on a large news site where people come back every day, but less so on a site where they visit once. Why bother customising for a short stay.

    Moving the link underline (3.4) came about after complaints from people using the Australian Museum site. Some scientific names (which are italic) are hard to read when styled with a standard link underline - the line is too close up under the text and long names with hanging letters were hard to read. When I changed this to a border bottom and moved it down fractionally the response was very positive.

    The increased link area (3.5) came about when Roger was testing a site of ours on someone with severe motor skill deficiencies. There was a great deal of effort required to move to, and click on a link.

    Posted by Russ Weakley on

  11. [cognitive-impairment.php#comment11]

    Very interesting and thought provoking article.

    I would be interested to see how some of these techniques can be adapted to work around the problems in IE6 etc, might have a go myself

    Great resource Gez

    Mikea

    Posted by Mike Abbott on

  12. [cognitive-impairment.php#comment12]

    Yes, I agree with most of the points covered. I have been doing extensive research with a few of my fellows on the one of the subject subsections for over seven months and we hope to come to some further focussed conclusions and publish them sometime this year.

    Posted by Robert Wellock on

  14. [cognitive-impairment.php#comment14]

    Dear All,

    I am very glad to see another article on LD/ dyslexia and accessibility. It has been quite a while since my article http://old.techdis.ac.uk/seven/papers/dyslexia.html.

    Just thought I'd quickly mention that launching next week will be the Adult Dyslexia Organisation's new research project into dyslexia (and other SpLDs) and accessibility. We will be developing guidelines for web accessibility, e-learning accessibility and print accessibility. The research will be conducted through a literature review (nearly complete), user testing, expert evaluation, conference workshops (2 confirmed so far) etc.

    Please contact me for further info. More details will be available soon.

    Posted by Peter Rainger on

  15. [cognitive-impairment.php#comment15]

    Hi Livio,

    can i translate this article in Italian?

    That would be greatly appreciated, thank you. If you want to host the translation yourself, I will have to check with Russ, as Russ, Roger and Peter are the official copyright owners of this article. I'll contact you and Russ by email to sort out the details.

    Posted by Gez on

  17. [cognitive-impairment.php#comment17]

    Great article. (And it is nice to see a reference to Peepo, which I miss).

    It would be nice to see a version that is expanded a bit to give more information about sources, testing and results, etc. But thanks very much (and thanks to Livio for pointing me to it.)

    cheers

    Chaals

    Posted by Chaals on

  18. [cognitive-impairment.php#comment18]

    Good article. Although I worry if some of the suggestions clash. For instance, I think it's a good idea to give links more prominent feedback by giving them a hover state. However if you start giving hover states to paragraphs, underlining them you run the risk of going against peoples expectations as well as overloading the user with too much feedback/information.

    Posted by Andy Budd on

  19. [cognitive-impairment.php#comment19]

    Andy Budd said:

    "However if you start giving hover states to paragraphs, underlining them you run the risk of going against peoples expectations as well as overloading the user with too much feedback/information."

    I'm inclined to agree with Andy that this could cause feedback overload. I too would be interested in knowing more about the tests that resulted in this article. Has anyone tested underlined paragraphs for people with specific learning difficulties? Is it more beneficial for certain groups, or is it known to be beneficial to all? If it's certain groups, would it be better suited to user style sheets, or should designers provide switchable style sheets?

    I hope my comment isn't construed as being too negative. It's a great article, but could benefit from more background information.

    Posted by MJ on

  20. [cognitive-impairment.php#comment20]

    "I'm inclined to agree with Andy that this could cause feedback overload. I too would be interested in knowing more about the tests that resulted in this article. Has anyone tested underlined paragraphs for people with specific learning difficulties?"

    I agree wth Andy too. Its very much an individual thing to appreciate a hover state on a div or paragraph. Personally it always confuses the hell out of me.

    That said, I have once underlined non-clickable text in paragraphs at the request of the clientbase (the site is no longer live to show you unfortunately, this was about 10 years ago!) and said clientbase (comprised of adults with mild degree Downs Syndrome and associated reading issues) definitely found that a high text size and tall line height together with underlined text definitely aided accessibility for them.

    I'm tied up with a project for the next few months but I think after that my next project will be using CSS to build an 'example' site that highlights how to cater style-wise for differing learning/perceptual disabilities.

    Posted by Kev on

  21. [cognitive-impairment.php#comment21]

    As a dyslexic and a web accessibility consultant, I found this article interesting. I really appreciate the advice about language and page layout. These are issues that are so often overlooked. But, when they are properly addressed, significant improvements can be made to the accessibility and usability of a site.

    However, I would caution you and your readers about some of the other specific solutions you mention. I personally find hovering effects to be extremely distracting. Sites that allow the user control of fonts and colors often override a user's default settings. Those users who have personal style sheets set up may find the site less accessible. People who need assistance such as reversed colors generally know how to do it themselves. Attempting to do it for them complicates a web site unnecessarily, and could cause accessibility issues for those with cognitive disabilities or with low vision. I especially frown on solutions that cause the page to refresh, as that causes screen readers to start over at the beginning.

    That said, each of the techniques mentioned in this article could be valuable. But, please think about your whole audience before deciding to implement them.

    Posted by Matt Frank on

  23. [cognitive-impairment.php#comment23]

    Thank you for clear information. I would like to translate this article to swedish, ok?

    Posted by Johan Sundstrom on

  24. [cognitive-impairment.php#comment24]

    Hi Johan,

    I would like to translate this article to swedish, ok?

    That would be great. If you let me know when you've translated it, I'll provide a link to the translation from the article.

    Best regards,

    Posted by Gez on

  26. [cognitive-impairment.php#comment26]

    Thank you very much for the translation, Johan. I've included a link to your translation from the article.

    Best regards,

    Posted by Gez on

  27. [cognitive-impairment.php#comment27]

    So much of this is fine advice for usability in general, and not just for special-needs users, that it's worth a close look by all designers. Nice job.

    In the spirit of the rule "Make sure there are no spelling or grammatical mistakes", note that you've confounded "effect" and "affect" in a number of places, though.

    Posted by Jim on

  29. [cognitive-impairment.php#comment29]

    Great article Russ. I was looking for an example of "Hiding and showing content" which didn't rely on the Javascript 'hide and show' on the page - you have given several excellent examples. The key point is that your methods aren't actually 'hiding' the content - the content is located at a different URL. Which also means it can't be misconstrued as 'hidden' content. A subtle point - but important. Thanks! (PS WE05 was excellent!)

    Posted by Chris Dimmock on

Comments are closed for this entry.