5 ways to make your Website or App Accessible for people with ADHD

In the world of Accessibility, more specifically the world of WCAG, there are now clear straight forward techniques to ensure content is accessible for those with visual impairments. For example –

  • Sufficient Colour Contrast
  • Alternative text on images
  • Implement Wai-ARIA to increase accessibility of dynamic content
  • And much more…

This brings me on to the topic of todays blog post. I find the area of Digital Accessibility for people with cognitive impairments very interesting, and I think there is a huge opportunity for more work, research and conversation in this area.

Earlier this year I took part in delivering a Webinar on Dementia & Inclusive Digital Design which was fascinating to research and find out more about. One of the main messages in this (which relates to todays topic also), is that designing for those with cognitive impairments actually creates a better user experience for everyone – which is brilliant, right?

So today I am going to begin the conversation on ADHD and digital accessibility. Based on lots of 3am research, several conversations with my husband (who has been diagnosed with ADHD), re-reading WCAG and plenty of ponders, I have come up with 5 simple ways to make your website or app more accessible for those with ADHD. If you find this interesting, do let me know! I could definitely talk way more about this topic…

What is ADHD?

“Attention deficit hyperactivity disorder (ADHD) is a group of behavioural symptoms that include inattentiveness, hyperactivity and impulsiveness.”NHS

Attention Deficit Hyperactivity Disorder (ADHD), and ADD (Attention Deficit Disorder) is a very broad disorder. Having previously worked with many young people with ADHD, it is clear that every individual is different – which can definitely be said about all cognitive disabilities.

There are many symptoms that the NHS excellently and thoroughly outline. Some do not relate to Digital Accessibility; I am going to focus on ones that do; this includes –

  • Easily distracted
  • Often struggle with short term memory
  • Rapid decision making can cause anxiety
  • Struggles in following instructions to completion

1. Implement a distraction free layout

Design clean, distraction free layouts across all pages. Basically, less is more. You’d never a user complain that a website is “too easy” to navigate. A great example of a great distraction free website is Apple. They have adopted a style that includes large images, one main column for content, use of meaningful icons, simple copy and lots of white (empty) space.

Screen Shot 2017-11-06 at 13.34.07

The BBC have implemented a very creative and innovative approach to this also, which I love. On their home page, each ‘area’ of content contains a close button. Clicking this causes a pop up to appear that states – “Make the homepage yours. Add and remove topics. Get recommended TV for you. Set your location to see weather and local news. Sign in or Register”

This is so great as it gives a user the control, allowing them to choose what would ‘distract them’ and what actually interests them. And as previously mentioned, this creates a better experience for all users. Very nifty – I love it!

2. Intuitive and clear “findability”

Overall clear and straight forward findability is very beneficial to individuals with ADHD. The obvious are important to take in to consideration, such as consistently placed interact elements (such as a menu bar appearing in the same location on all pages of a site). For more information, please go to WCAGs success criteria – 3.2.3 Consistent Navigation

I have got to take my hat off to Barclays again, as they have taken ‘findability’ to an incredible level. Their search bar functionality has been created with user experience at the forefront of their design choice its incredible!

Upon opening the search box, you are presented with a message that reads “Not sure what to search for? Other customers found these helpful” following several links phrased in a relatable manner, for example “How do I find my sort code and account number”

They also provide very relevant auto suggestions once you start to enter content in to the search field – again both of these features would help all users.

3. Clear Instructions & Error handling

As I previously mentioned, I have had lots of conversations with my husband about his experiences as someone with ADHD in the digital world. Something that continuously frustrates him is forms – in particular, filling out required information and correcting errors.

This seamlessly lines up with several WCAG success criterias, in particular 3.3.1 Error Identification, which focuses on ensuring that users are aware that an error has occurred and can determine what is wrong. The error message should be as specific as possible”. As well 3.3.2 Labels and instructions, which aims to “have content authors place instructions or labels that identify the controls in a form so that users know what input data is expected”.

Great examples of this can be seen on the Gov website and Barclays website. In both, they provide really clear information on how to complete a form field with a clear label and additional useful information.

On the Gov website users are provided with the main form label of “Claim date”, additional information of “This is when you want to claim carer’s allowance” and finally a suggested format “e.g 6 8 2017” and finally excellently placed form labels for each editable area. All very useful information, which again will help all users in form completion. This will avoid any potential frustration.

On the Barclays website when an error is present, error messages are specific to context. Rather than the commonly seen generic message of “please enter a value”, instead the error message reads “please enter your card number”. This may seem straight forward, but it can make all the difference.

4. Avoid time limitations

Following on nicely from the last point, time limitations is often seen in form completion. Timed pressure is not ideal for anyone, especially those with ADHD. This is because this can cause immense distraction distraction and create unnecessary anxiety.

On WCAG’s success criteria 2.2.1 Timing Adjustable, they state “ensure that users with disabilities are given adequate time to interact with Web content whenever possible. People with disabilities such as blindness, low vision, dexterity impairments, and cognitive limitations may require more time to read content or to perform functions such as filling out on-line forms”

So to be frank, avoid time limitations.

5. Avoid Animated & Auto-updating Content

We’ve all been on a website that has an unnecessary array of flashing / animated content. Sometimes this is intentional, to draw a users attention and other times this may be embedded adverts.

One of WCAG’s success criteria’s states -“Moving content can also be a severe distraction for some people. Certain groups, particularly those with attention deficit disorders, find blinking content distracting, making it difficult for them to concentrate on other parts of the Web page.” – For more information, please go to ‘Understanding 2.2.2 Pause, Stop, Hide’

A way to solve this is to include a way for users to pause animated content, such as a pause button in a carousel. Adding a pause button to automatically moving content (like a video player or a carousel) will create a better experience for so many users which is a bonus, including those with literacy difficulties. all users will be able to access content at their own pace.

Wireframe of carousel with a pause button


Any questions about any of the content mentioned in todays post? Why not get in touch? Lets have a chinwag!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s