You are here: Home Articles Developing sites
for users with Cognitive disabilities and learning difficulties
Site Navigation
Sunday, 30th January 2005
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
Translations
Introduction
1. Working with Content
2. Hiding and showing content
3. CSS to aid clickability and readability
4. User control of content and presentation
Conclusion
Further reading
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 .
Portuguese Translation
The Portuguese translation of this article is kindly
provided by Maria Nazaré Sanches .
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:
Cognitive impairment, which includes memory, perception,
problem-solving, conceptualisation and attention deficits.
This may result from a range of conditions such as
mental retardation, autism, brain injury, Parkinson's
disease, Alzheimer's disease and old age.
Learning difficulties can also affect a variety of
memory, perception, problem-solving and conceptualisation
skills. Learning difficulties include reading problems
such as dyslexia, computational, reasoning and organisational
deficits and non-verbal learning disorders. These
are sometimes also associated with Attention Deficit
Disorder and Hyperactivity.
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.
Make sure the information is well organised.
Keep content short and simple.
Break the information up into small chunks, with one
key idea per paragraph.
Present related points in a list rather than a long
paragraph.
Use meaningful headings and subheadings.
Make sure there are no spelling or grammatical mistakes
Provide definitions/explanations of technical terms,
abbreviations and acronyms.
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.
Example of extremely long line length
Example of line length set within optimal range
Ideal line length for content [external link]
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.
Example of justified text
Example of non-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.
Example of pyramid writing
Inverted Pyramid Story format [external link]
Pyramid Writing Techniques (DFL Bulletin) [external
link]
[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.
Example of long and short content
Guardianship Tribunal confidentiality page [external
link]
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.
Example of expanding 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.
Example of hide-show bullet points
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.
Example of slideshow content
[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.
Example of increased line-height
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.
Example of increased margin after paragraph
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.
Example of hover effect on links
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.
Example of border-bottom on link
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.
Example of increased active area on link
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 ).
Example of hover on paragraphs
Example of hover on table rows
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.
Example of underlined paragraph
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.
Example of underlined paragraph using border underline
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.
Example of reversed colours
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.
Example of reduced background 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:
Content:
long or short versions of the information.
Font size: ability to increase or decrease the size
of the text.
Readability: change the space between paragraphs and/or
provide mouse-over hover on paragraphs.
Colour themes: provide a range of options including
reversed colour and reduced glare.
Line-length: for wide or narrow layout of content.
Line-height: provide a range of options for changing
the line height of content text and links.
Example of control tool [external link]
[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:
An Accessibility Frontier: Cognitive disabilities
and learning difficulties
Practical Design Guidelines for Universal Usability
Adolescents, Autism Spectrum Disorder And Secondary
School
Inclusion Of Cognitive Disabilities in the Web Accessibility
Movement
[Back to the contents]
Category: Accessibility.
Comments
[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 Sunday, 30th January 2005 at 00:02:57
[cognitive-impairment.php#comment2]
excellent stuff!
Posted by Patrick H. Lauke on Sunday, 30th January
2005 at 01:11:35
[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 Sunday, 30th January 2005 at
10:37:35
[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 Sunday, 30th January
2005 at 11:48:02
[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 Sunday, 30th January 2005 at 16:17:37
[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 Sunday, 30th January 2005 at 16:22:07
[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 Sunday, 30th January 2005
at 22:12:08
[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 Sunday, 30th January 2005 at
22:15:54
[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 Monday, 31st January 2005 at 00:27:18
[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 Monday, 31st January 2005
at 01:03:15
[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 Monday, 31st January 2005
at 10:04:06
[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 Monday, 31st January
2005 at 10:09:41
[cognitive-impairment.php#comment13]
can i translate this article in Italian?
grazie
Livio
Posted by livio on Thursday, 3rd February 2005 at
09:32:20
[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 Thursday, 3rd February
2005 at 14:58:18
[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 Thursday, 3rd February 2005 at 18:49:03
[cognitive-impairment.php#comment16]
Hi Peter, [quote]It has been quite a while since
my article [http://old.techdis.ac.uk/seven/papers/dyslexia.html.[/quote
]That's a great article, thank you for posting.
I'm very interested in the Adult Dyslexia Organisation's
research project. If you send me more details when
they're available, I'll post them on this site.
Posted by Gez on Thursday, 3rd February 2005 at 18:57:16
[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 Friday, 4th February 2005 at
12:29:31
[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 Monday, 7th February 2005
at 16:43:24
[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 Monday, 7th February 2005 at 21:33:36
[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 Tuesday, 8th February 2005 at 11:43:06
[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 Tuesday, 8th February 2005
at 23:28:23
[cognitive-impairment.php#comment22]
I'm not sure of using hover effect for paragraphs
(even with underline). It sems like link than. Some
people could be "perplexed".
Posted by Vlastimil Svoboda on Wednesday, 9th February
2005 at 08:03:28
[cognitive-impairment.php#comment23]
Thank you for clear information. I would like to
translate this article to swedish, ok?
Posted by Johan Sundstrom on Tuesday, 29th March
2005 at 12:09:47
[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 Tuesday, 29th March 2005 at 18:37:31
[cognitive-impairment.php#comment25]
Regarding the swedish translation: Here is the the
link... [http://www.informationsarkitekt.se/tillganglighet.asp
]. I will keep my eyes open for more of intreresting
articles in your site. The best... /Johan
Posted by Johan Sundstrom on Wednesday, 30th March
2005 at 13:12:34
[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 Wednesday, 30th March 2005 at 18:47:31
[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 Wednesday, 30th March 2005 at 19:44:11
[cognitive-impairment.php#comment28]
Thank you very much for the info I was looking for,
and Greetings from Malaga-Spain Antonio
Posted by Malaga on Friday, 15th April 2005 at 16:05:48
[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!)
