Autism is a spectrum. Not everyone who is autistic prefers the same things. Many autistic people also have associated other conditions, like Dyslexia or Learning Difficulties thatimpact on their preferences. Many do not have other conditions. Other demographic factors can also impact people’s references, such as socio economic factors, and familiarity with technology.
These differences can make it challenging to design for all autistic web users, and below is a general guide to assist in those challenges.
Page Design
Background images
- Background images have to have a purpose. Geometric shapes in muted colours work well but image collages are considered distracting.
- For autistic web users they can struggle to distinguish between foreground and background.
Symmetry in design
- There was a general preference for symmetry in design and for clearly defined sections including images having clear boarders.
- Symmetrically designed webpages were considered
Logical ordering
- All users expected some logical ordering of information on webpages – for example,importance (where the most important information is on top), alphabetical (lists), or chronological (in forums).
Logical sizing of elements
- Generally, participants associated the size of design elements (e.g. boxes) with the importance of information/content presented in those areas.
No auto-playing content/movement
- Moving adverts in banners and pop-ups, auto-playing videos make websites inaccessible to most autistic web users.
No surprises
- Avoid unpredictable situations and changes. This includes changing designs of websites that they used.
- Preview should be available with information on what pages, sections and videos are about before reading/watching them.
Page Layout
Design clear, clutter-free pages
- Build simple pages that include only elements relevant to the current user task
- Cluttered, busy layouts make finding information difficult and do not allow users to focus on their core tasks.
Set page lengths appropriately to the page type & function
- Make decisions about the length of the page appropriately to its purpose. For example, make your homepage short and ensure that important information & sections are available with minimum scrolling. Content pages, e.g. article pages may be longer to facilitate uninterrupted reading.
- Homepages that are too long do not allow users to focus on their core tasks and make finding information difficult.
- Too much scrolling makes autistic users feel ‘dizzy’ and ‘overwhelmed’.
- On long pages, users can feel like they are lost in “something” that has no end.
Clearly separate design elements & sections that do not belongtogether
- Clearly separate different sections and items on the page by using white space (i.e. space without text or graphics), outlines, boarders and dividers (i.e. lines) to help users
- All design elements should have clearly defined outlines and boarders to be able to focus on them, as well as to move between the different sections within the page. Lack of clear outlines can make vision blur.
Place important information on top of the page and above the fold
- Whenever possible, establish a high-to-low hierarchy of importance of items on the page.
- Place the information that is most important for users on top of the page above the fold.
- For items of equal importance, use alphabetical listing, or chronological ordering (e.g. forum threads, event timelines).
- Users look for the most important information on top of the page above the fold.
Use the size of design elements to communicate the importance of information that they carry
- Use the size of design elements (e.g. larger boxes) to help users find important information easily.
- Users judge the importance of information by the size of the boxes that carry the information, i.e. the content in larger boxes is more important than information in smaller boxes.
Avoid large images above the fold
- Avoid large images that would cover the entire space above the fold, if there is more information below the fold.
- Users were overwhelmed by large banners that covered most of the space above the fold blocking their way to information below it.
For each page, provide a summary of the page & its purpose
Provide a short descriptive summary of the page to help users to understand the topic and purpose of this page. This includes the homepage. Users want to know what pages and sections of the website they are on and often the page titles are not descriptive enough to provide this information. Autistic users feel disorientated when this information is not available and are likely to leave the site.
Ensure the consistency of page layout using symmetry
- Ensure that design elements are aligned and laid out symmetrically on the page. Whenever possible, maintain an equal number of columns on the page.
- Autistic users have a strong preference for symmetrically designed pages. Pages where visual elements (e.g. boxes or images) should ne aligned, and there are an equal number of columns in sections across the page.
Maintain a visual consistency of design elements within a single section of the page
- Ensure that the shape of design elements within a single section of the page are visually consistent.
- Consistent visual design of elements grouped together in a container element, e.g. only boxes with rounded corners, or only boxes with square corners, but not both in the same section of the page.
Navigation
Design consistent & simple navigation across the site
- Ensure that the navigation across the site is consistent and allows users to understand how they can navigate to different pages & sections on the site.
- Websites with complex and inconsistent navigation make people use Google and deep-link directly to the content. It also leads people away from the website as there may be other websites with similar content listed higher on the search pages. In the survey, confusing navigation was one of the main problems experienced online by autistic respondents.
Ensure that all links and buttons are visibly clickable
- Ensure that links are clearly visible and distinct from other text and non-clickable elements, by using colour and underlining. Apply the design consistently across the site.
- Autistic users expect links (including visited links) to be both underlined and differ in colour from other text & non-clickable elements.
Ensure that users understand how to navigate carousels
- Ensure that users understand which element on the page is a carousel and how they can access the multiple carousel panels. Make the navigation arrows clearly visible and provide information about the number of panels in the carousel
- Some of the less web-savvy users miss the arrows on the carousel, until prompted to look for them. Some people do not want to interact with the carousel until they had information about the number of available panels.
Use sequential menus with fewer items to select
- Design menus with fewer options that enable users to easily make selection
- On-hover menus, as well as menus that include too many items discourage autistic people from using the site. Sequential menus with fewer options that allow “pointing and clicking” rather than “mousing-over” work better for autistic users.
Use a sticky main menu
- Use a sticky main menu on the top of the page, to enable users to easily navigate to any other section of the website. Avoid other sticky design elements on the site, e.g. adverts
- Autistic users said that they liked to always have access to other sections of the site and a sticky main menu facilitated this. They found other sticky design elements on the page distracting, e.g. sticky advert banners, sticky side nav with links to related content, or icons for content sharing.
Colours
Avoid using lots of bright colours on the website
- Use simple, soft colours and colour combinations for the background, logo, images and text across the website. Autistic users prefer low-contrast colour schemes.
- Bright contrasting colours are commonly known to be visually overstimulating. 64% of survey respondents agreed that they got distracted by bright colours. 69% of respondents find bright images distracting. (See also Guideline 3.2.)
Allow users to customise the background & text colours
- Allow users to choose the background and text colours that suit their needs.
- There is no standard autistic colour preference.
- Being able to choose their colours on the web would significantly improve user experience.
Fonts
Choose a typeface for your website and use it consistently
Use at least 12pt font across the website
- To ensure readability of text on the site, use a font size not smaller than 12 pt.
- Generally, users prefer larger size fonts, at least 12 pt.
Choose a typeface for your website and use it consistently.
- Avoid using serif & sans-serif fonts on the same page
- Avoid using too many typefaces on the site. Use consistently either a serif or a sans-serif font across your website. Avoid using both a serif font & a sans-serif font on the same page.
- Some autistic users prefer sans-serif fonts, while others read better in serif fonts. Autistic users feel distracted when both type of fonts are used on the same page.
Allow users to customise the font type & size to suit their needs
- Allow users to choose the font type & size that best suit their needs, in order to make reading easier for them
- Autistic users have different preferences regarding the use of serif and sans-serif fonts, and font sizes.
Text
Ensure sufficient spacing between paragraphs and between linesof text
- Use white space (areas not filled with text or graphics) consistently to separate paragraphs and lines of text
- All users but particularly users with associated learning disabilities (those with “eye- tracking” issues). People with ADHD find densely spaced text difficult to read
Organise text into short paragraphs and use short lines
- Use short paragraphs and short lines to organise the text for easier reading
- Users found long paragraphs and long lines difficult to read.
Do not interrupt the flow of text with images or other designelements
- Avoid splitting the text with elements that may interrupt the flow of reading. Avoid scroll-stoppers that may mislead users into thinking that they have reached the end of the text when they have not.
- Users want to be able to read the text without interruption. Large images or video content placed in the text interrupt users’ thought process. It is worse when the design element fills up a large part of the screen.
Avoid using bold text style for large amounts of text and in combination with other text styles
- Limit the use of bold text to highlight keywords or important phrases in the text to make them stand out to readers
- Applying bolding to a large amount of text confuses users and makes them feel agitated.
Bold the keywords to facilitate rapid scanning of text for important information
- Use bold text to draw user’s attention to keywords or important phrases in the text
- Bold text helps readers to scan text for important information.
Non-textual formats
Consider providing information in video format
- Consider providing information in video format with captions & transcripts
- THis will make it easier for users to process and remember information from video than from text only. Most users also find captions and transcripts for videos useful.
Use visuals with the text to facilitate understanding
- Use visuals to facilitate understanding of textual information and to help users locate required information on the page.
Use icons to help users locate information faster
- Use meaningful & memorable icons to help users find information on the page
- Autistic users find icons helpful when scanning web pages for information, especially on busy text-heavy pages where there were many visually similar sections, e.g. laid-out in a grid.
Images
Use simple images that can be easily understood
- Use simple images that can be understood at “a glance”, without a need for a deep visual analysis.
- Users want images that are simple and easy to understand. Users found images showing a single object in focus easier to process.
Use meaningful, relatable images that add value & clarity to the information on the page
- Make sure your images are meaningful and add value & clarity to the text information on the page
- Autistic users wanted images to be meaningful and congruent with the story on the page. Images must add value, provide more information or clarification to the text, represent information visually (e.g. infographics).
Limit the use of background images and decorative graphics
- Use background images sparingly, especially if they are overlaid with text. If you use decorative graphics, ensure they do not distract the users from reading text. Use non-patterned backgrounds on content pages to facilitate uninterrupted reading.
- Autistic users find background images and decorative graphics distracting, They preferred plain background, especially on content pages where there is much textual information to read through.
Use photographs of people only if depicted people are relevant to the information
- Use photographs of people only if these people are relevant to the story
- Text-first autistic users found generic photos of people irritating and irrelevant
Provide the ability to turn off decorative graphics & all images
- Allow users to turn off decorative graphics & all images on the website to enable them to focus on textual information.
- Text-first users find all images distracting and would benefit from an ability to turn all graphics off or on.
Video and audio
Disable auto-play
- Do not make video content to auto-play on pages, even if the sound is off. Users prefer control over what content is playing and when it is playing.
- If you include auto-play there was must be an option to turn it off.
- Auto-playing videos made users feel “nervous” and “out of control” over their online experience. They wanted to be able to decide what and when they want to watch or listen to.
Video Content
Provide captions for videos and transcripts for all video & audio content
- Provide captions for all videos. Provide transcripts for video and audio to enable text-first users to access the same information in text format.
- Captions help Text-first users to access information available in video format.
Allow users to turn off captions
- Allow users to switch captions off according to their preferences
- Some visual autistic users find captions distracting and would like to be able to turn them off (i.e. they prefer closed captions to open captions).
Provide text-based introductory information for videos on pages
- Provide text-based introductory information for videos so that users can read it before they play the content
- Before they decide to play video content, users wanted to know what the video was about and how long it was.
Use video content when it adds value or increases clarity of textual information on the site
- Make sure video content adds value and increases clarity of textual information on the site
- Video content can be a distraction to users, including visual users, therefore, videos must add value to the site and focus on explaining information presented in the text.
Movement
Disable auto-playing movement on pages.
Provide a pause mechanism
Avoid attention-attracting movement unless other methods of visual emphasis have failed
Disable auto-playing movement on pages.
- Provide a pause mechanism for moving & animated design elements (e.g. carousels)
Avoid using pop-ups, moving or animated design elements. If eliminating movement is
impossible, provide a pause mechanism to “return” control to users.
- Even the smallest movement can have negative impact on some autistic web users.
- Auto-playing carousels should be avoided as can be difficult to read the text before the panels change.
Avoid attention-attracting movement unless other methods of
visual emphasis have failed
- Small animated movement may be used to draw users’ attention to information or to invite users to take action if all other methods of visual emphasis such as: size, colour, font style, have failed.
- Small animated movement of an arrow when moused-over, communicated to users that the section was clickable and more information was available. This movement was limited and explainable, and users did not find it disturbing.
Help pages
Provide help on the website in a range of formats
- Ensure that all autistic users are effectively supported when problems occur on the site. Provide help for your website in a range of formats & channels, e.g. via phone or a live chat, as well as via email and on the site (via FAQ pages).
- Some autistic users prefer to use the phone or a live chat to access help on the site quickly. People with phone anxiety tend to look for answers on the site, e.g. FAQ pages, Google, or want to be able to send their queries via email.
Forms
Use clear, unique labels & instructions for each field
- When designing forms, use unique labels and clearly explain what information needs to be entered
- Autistic users struggled with labels that were ambiguous or similar to other labels. For example, they found “username” and “sign-in name” confusing, and were unsure about these different names would used on a site.
Ensure reasonable timeouts
- When using forms with an authentication timeout, ensure that the timeout is reasonable and sufficient for users to complete the form. Warn users about the expiring timeout and provide means to extend the session time limit.
Provide immediate feedback on errors
- Provide immediate feedback to allow users to quickly realise when they made an error when filling in the form
- Form errors should provide mmediate feedback to be able to correct errors promptly when they’ve occurred.
Use of language
Use clear, precise language and avoid metaphors & ambiguous terms
- Autistic users want information to be delivered in concise and “to the point” manner.
Use of language
Avoid jargon, abbreviations, acronyms, idioms & colloquialisms
- Avoid using specialist niche terminology or colloquial language on the site.
- Use clear and concise language that is familiar to users
- Users struggle with understanding specialist terminology or colloquial language.
Customisation
Allow users to customise the website & make customisation clearly available
- Allow users to tailor their experience on the website to their needs & preferences.
- Essential customisation must include tools to change font type & size, text & background colours, an ability to turn off decorative graphics, an ability to turn off captions for video content.
- Available accessibility tools must be clearly visible & easy to use.
Sharing content
Allow users to share content via e-mail & platforms that they use
- Allow users to share content from the website via social media platforms that they use, and enable them to e-mail content to others and to themselves for ‘slow’ reading.
- Autistic web users wanted to be able to share content from websites on social media platforms that they used.
Re-learnability
Communicate your plans about changes on the website clearly & in advance
- Announce any planned changes on your website in advance, inform the users about what is going to change and when the changes are going to be implemented.
- Change disorientates users. Users can feel lost and frustrated when the websites that they like and use change frequently or unexpectedly.