Things to Consider When Creating an Autism Accessible Website

Things to Consider When Creating an Autism Accessible Website

Since updating and launching our website last year, we’ve been contacted by many autistic people (and professionals supporting autistic people) to let us know how much they liked the design and how easy they found it to navigate.

This means a lot to us and prompted us to share our thinking behind this, in case it’s helpful to others considering how to design their websites.

Accessing online information is central to our lives, affecting how we engage in education and employment, how we socialise, manage our healthcare and access Government information. Access to this technology and online services can be critical to an individual’s societal status and cultural capital.

Autistic people often report barriers in using online sources of information due to unsuitable design triggering sensory processing difficulties and the use of inaccessible language or structure. In line with social model principles, a website can be considered an environment which, without adjustment to specific needs, can disable those interacting with it. Also, the internet and cutting-edge technology are becoming increasingly socially focused, with information communicated using emojis, gifs and pictures of facial expressions to carry key information.?For those with social agnosia, who find it hard to read such expressions, this can provide another barrier to accessing meaning from websites. It is a reminder that ‘cutting-edge’ is not always more accessible to everyone.

As supported by research by Alzahrani et al. (2021) and so brilliantly explained by Jamie Knight in his blog, there is a critical distinction between a website that autistic users can technically access and one they use quickly, effectively and without discomfort. Ensuring ‘accessible usability’ means considering how users will recognise, understand, and filter the information they encounter, and then supporting them to make decisions and use it.

Knowing our website would be accessed by many autistic users and often hearing from our students how inaccessible so much of the internet can be, we wanted to make our website as accessible and usable as possible for autistic people.?

Considering this, we thought carefully about how our website’s content could be structured, presented, and, crucially, accessed enjoyably by autistic people.


How did we go about doing this?

Initially, we referred to the UK Government’s Web Content Accessibility Guidelines (WCAG) 2.1 core principles (Perceivable, Operable, Understandable, Robust) as a basis to begin with.

However, we felt it was essential to go beyond more generally focused checklists to tailor our website to be specific enough to meet the needs of autistic users.

Sensory processing discomfort has been highlighted by Yu et al. (2018) and Rossi (2021) as a barrier many autistic people face when visiting websites. Moving or flashing animations, gifs, bright colour palettes and shifting menus have all been highlighted as causing sensory overload to autistic users, impacting attention and processing of critical information.

To support this, we incorporated the following:


  • No auto-start videos or audio were used, avoiding the risk of sensory overload, unexpected stimuli and unnecessary distraction
  • No moving components are featured on the website
  • ‘Readable mode’ enables users to view a text-only version of the website, removing all design features
  • All website images can be hidden entirely for those who find them overstimulating or distracting or users that prefer text only
  • The site’s appearance is fully customisable: users can select a font, text, background, and colour arrangement of their choosing (or remove colour altogether), allowing a comfortable experience for those with hyper and hypo-sensitive sensory processing
  • Text size and font can be enlarged or reduced, highlighted, magnified or altered to a ‘readable font’ for dyslexic users, especially supporting those with difficulty reading due to irregular saccade eye movement
  • Line spacing can be adjusted to decrease the space between lines of text to avoid ‘white space’ overload or increasing for separation between sections
  • Option to enable ‘Bionic Reading’ word highlighting, which aids in quicker reading and easier comprehension of text when reading by guiding the eye to fixation points
  • The contrast filter is adjustable, ensuring comfortable and usable contrast
  • Using colour palette adjustment and the Dark-High /Bright-High Contrast options, background and foreground content can be inverted or re-coloured, allowing users to prioritise key information


Picture showing a screenshot of Spectrum First's website
Original website layout
No alt text provided for this image
Text only display of website
No alt text provided for this image
Custom colour and contrast option
No alt text provided for this image
Highlighted headers
No alt text provided for this image
Text only display
No alt text provided for this image
Bionic reading enabled


Further barriers highlighted in research include cluttered designs and unclearly structured information affecting information processing and comprehension. Many autistic users report navigating websites as confusing, especially if clickable buttons do not show their function or links to different parts of the website are concealed.

To tailor our website to these needs, we included the following:


  • Website design is clearly structured, simple, consistent and uncluttered, using space to separate different broken-down sections to support those with visuospatial and information-processing differences
  • The navigation of the website is consistent and visible on all pages of the website
  • The layout of each page follows a consistent and linear format that Is easy to follow
  • Line spacing can be adjusted to increase or decrease the space between lines of text to aid information processing and simplify text appearance if desired.
  • A heading highlighter feature allows information to be divided by horizontal lines, providing separation between sections of text and immersive, easy reading
  • Users can use the magnifier function or text magnifier to zoom in on sections of text, allowing a focused reading experience and filtering out distractions
  • The website may be navigated entirely using a mouse or keyboard
  • All links contained in the site are meaningful and descriptive, independent of context, supporting both global and local central coherence processing styles
  • The website is screen reader friendly, with ‘tab’ navigation and structured headings & subheadings


As a provider of Language Modification to autistic students, removing linguistic barriers to University exam papers and assignments, we understand what a central role language can play in accessibility. We have applied this insight to the language and terminology used on our website, being especially careful to avoid the playful or ‘ironic’ styles used on many private sector websites.

?Accordingly, on our website:


  • All text has been written using straightforward ‘Plain speak English’ with no instances of metaphor, similes, personifications, idioms, sarcasm, or other forms of ambiguous or poetic language
  • Terminology, initialisms, and acronyms have been avoided unless core to the website’s critical information
  • All key information is supported with sequential visual images supporting comprehension and processing, creating a sense of visual ‘narrative’
  • All text can be read out by an in-built screen reader, with adjustable speed and accent, to support those with an auditory processing preference and support comprehension
  • Alternative text for images is provided, with descriptions explaining facial expressions and body language cues for those with social aphasia
  • Abbreviations are not used when a term is first introduced
  • An in-built screen reader can read out all text to support those with auditory processing preferences
  • All site instructions are clear, and inference or colour is not used to communicate meaning


No alt text provided for this image
Image on website
No alt text provided for this image
Previous image (above) with text description
No alt text provided for this image
Monochrome colour mode
No alt text provided for this image
Text reader and increased font size, line and word spaced settings


We are fully aware that this website is not the finished article nor will it meet all users' needs. As Knight describes when outlining his concept of ‘cognitive accessibility’, a genuinely accessible website must cater for all needs rather than the majority. Autism is multivariable, so whilst we have been continually seeking feedback from autistic users, we know that this cannot capture all autistic users' experiences. We will constantly update and revise our website as we receive feedback from those using it.


We do believe that we have created a website that is accessible to many autistic users and are pleased to share our approach if this helps other areas of the internet to become more accessible to autistic people.


In future, we plan to implement an interactive dictionary/glossary, which may be used to look up unfamiliar words, including a glossary providing definitions of any terminology. Unfortunately, we weren’t able to do this at the time of writing, but if anybody has experience doing this, please get in touch!

?

**We are aware that some of the linked research uses ableist language such as ASD. We do not endorse or use this terminology, we use these points of reference due to the lack of other available sources in an under researched area

要查看或添加评论,请登录

Spectrum First Ltd的更多文章

社区洞察

其他会员也浏览了