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
- 1. Working with Content
- 2. Hiding and showing content
- 3. CSS to aid clickability and readability
- 4. User control of content and presentation
- Further reading
- 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.
- Russian Translation
- The Russian translation of this article is kindly provided by Softdroid.
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
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.
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]
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.
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.
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.
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.
- 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]
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.
- 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