# data[].attributes.headline
Video Edit to Show What Having ADHD is Like.

# data[].attributes.subject
Video Edit to Show What Having ADHD is Like.

# data[].attributes.body
Multiple voice overs, and move attention frequently to show how chaotic having ADHD can be.

Could show average day, voice over continues as the screen goes black to indicate sleep, to portray how those with ADHD can have sleeping problems etc.

Potentially make it interactive, mixed reality so the user makes decisions, dependent on how much coding would be needed and how difficult it would be.

# data[].attributes.attachment_link.description
A lot of research goes into understanding how physical disabilities (e.g. blindness) affect users online and how support technologies can help.

# data[].attributes.attachment_caption
This can help those who struggle to focus due to their disability.

# data[].attributes.body
https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/

# data[].attributes.attachment_link.readable_text
Common misconceptions about colour accessibility

The total loss of colour in vision is extremely rare. And yet, the most widely-used term to describe people with difficulties seeing colour is 'colour blind'.' The term colour blindness is a blanket expression, to say the least. To begin talking about colour accessibility, it's important to understand that it isn't one size fits all.

Colour Vision Deficiency (CVD) is the best way to describe someone who has difficulty seeing colour. This is particularly important when you consider the impact CVD has globally. In fact, Colour Blind Awareness states there are approximately 300 million people with a form of CVD worldwide.

Creating an online environment for colour accessibility should be every UX/UI designer or product owner's priority, especially because being inclusive isn't just an ethical best practice, there can now be legal implications. In 2021, UK Government regulations will require all public sector websites to comply with accessibility guidelines.

So, designing for CVD is a step that you must take as designers and digital product owners to include everyone. By designing for one, you will extend it to many. By incorporating inclusive colours in your designs, you can help not just those with a permanent disability but also those with temporary and situational limitations. For example, improved colour contrast helps those who are in bright conditions.

To address colour accessibility, this article will cover the following:

The official grading system for accessible colour contrast.

How to determine the most inclusive approach to colours in your designs.

How to design more inclusive UI elements (buttons, forms and more!)

Contrast Grading Standards
Contrast is graded as 'A', 'AA' and 'AAA'. With the 'AAA' grading being the gold standard for accessibility.
The minimum level your contrast should be to pass W3C's standards is AA. When checking your typeface contrast for buttons, background legibility or navigation bars, two versions will be graded. Regular type sizing and large.

Regular is defined by a regular weight and at 16px, the minimum standard for body text sizing. Large can be defined in two ways. The first is a bold weight at 18px, and the second is a regular weight at 24px.

We've put together a chart above to demonstrate what fails and passes the contrast checker. It shouldn't be revolutionary to know that white works better on darker hues, and black works better on lighter hues. As you move along the examples you'll notice the colours are toned down and not bright neon like the left column. A softer tone is easier on the eyes.

Don't feel the need to only stick with black or white either. Experiment with your brand colours to find what works for you.

There are plenty of options to check your contrast. Here are a few that we would recommend:

The Best Colour Combinations for Accessibility

Now we've talked about contrast on a general accessibility level. We'll now get into what you can do to be accessible for those who do have a colour vision deficiency.

We're going to continue the theme of contrast but instead, move on to the contrast between two or more colours. Red and green, seen by anyone with normal vision, are clearly a striking contrast when put together. We use these colours to distinguish between error and success, good and bad, slow and fast, and stop and start. But someone with Protanopia can only see yellow hues in their place.

Normal vision can see all 3 cones of light, Red, Green and Blue. However, those with CVDs are split into 4 types:

Protanopia - Reduces sensitivity to red light.

Deuteranopia - Reduces sensitivity to green light.

Tritanopia - Reduces sensitivity to blue light.

Achromatopsia - A total loss or reduction of all three colours.

Colour Accessibility Checkers

Colour combinations to avoid with CVDs in mind are:

The easiest way to check your colours and have a better understanding of your designs is to use a simulator to show you how a person with CVD would view your designs. Here are some helpful resources:

Using Patterns & Shapes for Inclusive Design

In this section, we're going to talk about how patterns and the use of shapes can be the difference between your design being inclusive or not.

We're going to start with a classic example of graphs. Think of a bar chart. You've used bright colours to represent each section, they complement and clash against each other to stand out on their own. But, in the below example, we've shown the difference between normal and tritanopia vision. We could have used the total loss of colour to represent the lack of contrast, but we wanted to represent all the types in our examples and not just rely on the other end of the scale.

You can be mindful of CVD when designing graphs by either using tones of one colour if you have a small number of sections or by using patterns to create a unique mark that's distinguishable. Trello used patterns to create a "colour-blind friendly mode" for the application of labels. A great example where everyone is included in the design.

Let's now talk about the use of shape. Using shapes to represent keys instead of just colours is a good use case. For example, using a traffic light system of green, yellow and red. Instead of relying on just colour, you can make the key a green circle, yellow triangle, and red square.

To demonstrate the importance of shape, let's look at the difference between the two messaging apps. These are the states they use to show when a message is sent, delivered and read. The left example is a representation of WhatsApp, they've made sure to show the difference between sent and delivered messages, however, they fail at making a clear difference between a message being read. For some with total loss of colour, they would never have an idea if their message had been read.

Messenger has clear states, though not changing the main shape of their icons. They use stoke and filled icons to visually show the difference which doesn't rely on the need for colour to represent this.

A Better Approach to Buttons & Forms

For buttons and form elements within your designs, there are many factors that you can use in order to not rely on colour for primary buttons or error states for forms. Play around with borders, type weight, type sizing, opacity, placement and the use of icons to make what you need to stand out. Also, don't forget to underline your links if they're not going to be in a button style.

Below, we've put together an example of app bars. This is more of a guide than a rule. There are many popular apps that choose to only use icons for their navigation options. It's worth noting that this works because of our familiarity with universal icons. We're talking about colour and contrast though. The use of background contrast, opacity contrast between inactive tabs and differences in icons are all ways to make navigation perfectly clear.

Colour Descriptions

We tend to use colour as a way of personalising our own space. Twitter is an example of this, you can pick a theme colour for your profile. Twitter, in this instance, is not a fantastic representative of inclusive design. What they have got wrong with this feature is only providing squares of colour. All they have to do to make this feature more accessible is to provide a label with the colour name. It could be a list or it could be a hover tooltip. It's such a simple addition to include.

Now personalising a Twitter page colour is just a nice-to-have feature, but not necessarily essential, so here is an example from the world of eCommerce. Amazon, eBay and Asos are all examples of companies that should have colour descriptions labelled correctly. However, there are some examples where they miss the mark. Let's look at an example below.

Just like a Yankee candle called "A Child's Wish", if we told you the colour of a pair of jeans was "Make a mark", could you describe the colour of them? This may be a bit of fun to those who can accurately see the colour but is just irresponsible towards anyone who has a vision impairment. Creativity and inclusivity must work with each other - not against.

User Testing

Perhaps most importantly after any changes to a design, it is essential to ask for feedback! To gather feedback on the designs we have created and optimised for colour accessibility, you can conduct a round of user tests. Designs should be data-informed, however, they don't need to be data-driven. Meaning, you could follow everything suggested here and then test your designs on your users who could come back with feedback that goes against these best practices. Making sure you're channelling your user feedback and creating a space that is accessible is the hard part. That is where testing and prototyping will really help you find the balance.

The solutions we have demonstrated are not applicable to every solution, but the principles should help you with any future design decisions you make in order to be more inclusive for people with CVD.

# data[].attributes.attachment_link.title
Inclusive Design: Colour Accessibility | Komodo Digital

# data[].attributes.attachment_link.description
Colour blindness is the common term used across the web when talking about creating better colour accessibility. However, the total loss of colour is very rare. Colour Vision Deficiency (CVD) is the term that should be used to be inclusive of all types.

# data[].attributes.headline
Basic Overview on Designing for Users With ADHD/ADD

# data[].attributes.subject
Basic Overview on Designing for Users With ADHD/ADD

# data[].attributes.attachment_link.readable_text
News

With many of our users living through the lens of Attention Deficit Hyperactivity Disorder (ADHD), it would be seriously negligent to not consider how they use and experience what we create, and how UX Designers can best meet their needs.

Written by: Ellie Barrett

Michael Phelps, Justin Timberlake, Simone Biles and I all have it in common. Not our star-quality talent and charisma - but ADHD.

In 2020, the prevalence of symptomatic adult ADHD was 6.76%, translating to 139.84 million and 366.33 million affected adults globally. It's now understood that women are drastically under-diagnosed for a variety of reasons including differences in the way their symptoms present and an unequal research focus on males, making it likely even more prevalent than those statistics suggest.¹

With many of our users living with this particular lens, it would be seriously negligent to not consider how they use and experience what we create, and how we can best meet their needs.

The condition has also been shown to increase resilience, creativity, higher levels of social intelligence and courage,⁴ making them often ideal candidates for roles in public service or the creative fields.

What is it?

ADHD stands for attention-deficit hyperactivity disorder, and is one of many conditions that fall within the spectrum of neurodiversity. Not everyone with the condition experiences hyperactivity in the classical sense, and refer to it instead as ADD (or "inattentive type ADHD"). It was first diagnosed as far back as the early 1900's but got its name in the 1980's, and what we know about the condition continues to change drastically.²

Neurodiversity is a spectrum, which means there are no hard or fast rules about who experiences exactly which symptoms and when. Some common ones are - perceived impulsiveness, disorganisation and problems prioritising, altered perception of time, problems focusing on a specific task, trouble multitasking, excessive activity or restlessness and low frustration tolerance.³

The condition has also been shown to increase resilience, creativity, higher levels of social intelligence and courage,⁴ making them often ideal candidates for roles in public service or the creative fields.

Why does it happen?

ADHD happens for a multitude of reasons, which still aren't well understood, but medically speaking it is a difference in the way people's higher cognitive function works, specifically the way that their brains deliver (or rather, don't deliver) chemicals like dopamine.⁵ Dopamine is the chemical messenger for rewards, it tells us when something needs doing, makes us want to do it and then makes us feel good when we've done it.

People with ADHD in fact also commonly have episodes of what's called hyperfocus, where an individual is able to achieve highly focused attention that lasts a long time.

Despite the name, ADHD isn't necessarily a deficit of attention, but really a deficit of attention on specific things, at specific times.

People with ADHD in fact also commonly have episodes of what's called hyperfocus, where an individual is able to achieve highly focused attention that lasts a long time. This is the ability to zero in intensely on an interesting project or activity for hours at a time, the concentration is so intense that individuals lose track of everything else going on around them, including time passing.

What it isn't.

Some people experience ADHD in such a way that it drastically affects their ability to navigate services, work and live. Others manage it easily with some key strategies. There is no one set of needs or assumptions that can or should be made about people with ADHD.

Some damaging myths around ADHD to watch out for are that people with the condition are careless, lazy or necessarily less able. Assumptions make a you-know-what out of you and I, so if you're curious, ask someone with the condition how they experience it.

So what can designers do to support these users?

Interaction and feedback.

Your users with ADHD, just like any other, are motivated by ongoing feedback and confirmation that their actions are having an effect. However, users with ADHD will require more of this to achieve the same outcomes in terms of task completion. This could be why some studies have shown that people with more ADHD symptoms tend to be more likely to play video games.⁶ When sounds, media and numbers change to signify positive or negative feedback, they give a loud and clear signal to the brain that a task has been completed and had a tangible result, giving dopamine a helping hand.
Design takeaway:
That means ensuring the use of interaction design that is responsive, animations, sounds and haptics keep the user engaged in interactions. Ensure your interface or experience provides ongoing and timely feedback to users that their actions and micro-actions have an impact.

Stimulation

Speaking of video games, one of the other reasons they mesh so well with many ADHD brains, is the way they provide ongoing stimulation. ADHD brains are motivated by a search for optimal stimulation. If you've ever looked after a few toddlers, while they blast music from a TV, while a toy makes another annoying sound, while a dog won't stop barking, while you're trying to focus simultaneously on an important work phone call - you've been overstimulated. When you're bored, and feeling impatient as a result - you're being understimulated.

User's with ADHD's lack of dopamine means they need more stimulation to access reward chemicals which drive action. This means that when understimulation (or boredom) strikes, they disengage faster.⁷ It also means that people with ADHD are often highly motivated by novel, stimulus. This could be new information, visuals, sounds, you name it - as long as it's new.

Design takeaway: Needlessly long or repetitive copy, laborious user journeys with too many steps, minimal design to the point of blandness, and design without delight or interest all turn away your users with ADHD. All users love efficiency and visual delight, but for these users the delicate balance between them is key for impact.

Fundamentals are fundamental for a reason.

One of the results of not making enough dopamine is that the significance of tasks is decreased. If most stimuli seem just as compelling, it's difficult to identify the most important one. This plays a big role in the way these users may take longer to prioritise tasks. This makes the designers role as storyteller and guide even more critical.

Design takeaway: Just as we learn in the first weeks of design education, visual hierarchy is key to leading users to the right tasks and information in the right order. All users benefit from the user of proper contrast, colour, animation and scale and careful progressive disclosure. ADHD brains however, generally benefit more. It should be clear even when squinting at a screen, which items hold the greatest importance.

Needing exciting stimulation, delicate visual balance and being turned off quickly by the tedious makes these users a discerning benchmark for designers. ADHD is a condition that affects cognition. Managing cognitive load, and its payoff for users is one of the most critical roles for any UX practitioner. Conveniently, this means that remembering these users, and advocating for their needs benefits all users. It's a win-win.

Related post

What makes Umbraco a great CMS

Read next

# data[].attributes.attachment_link.description
With many of our users living through the lens of Attention Deficit Hyperactivity Disorder (ADHD), it would be seriously negligent to not consider how they use and experience what we create, and how we UX Designers can best meet their needs.

# data[].attributes.attachment_link.title
Designing an ADHD-Friendly Home: Emphasizing Accessible and Visible Design - Organize That

# data[].attributes.attachment_link.description
When planning a home layout that serves the unique needs of individuals with ADHD (Attention Deficit Hyperactivity Disorder), it’s essential to give attention to accessible and visibility-centric design principles. Incorporating neurodiversity into our design process, we can foster spaces that boost…

# data[].attributes.attachment_link.readable_text
In today's digital age, websites have become an integral part of our lives. From shopping and socializing to accessing essential services, the internet plays a pivotal role in connecting people worldwide.
Understanding Website Accessibility
However, not all individuals can fully experience the vastness of the web due to disabilities that hinder traditional interactions. Fortunately, the emergence of Artificial Intelligence (AI) has opened new avenues for enhancing website accessibility, empowering users with disabilities to navigate the digital landscape more seamlessly. This article explores the transformative impact of AI in breaking barriers and creating a more inclusive online experience for all.

Website accessibility refers to the design and development of websites that ensure equal access and usability for all individuals, including those with disabilities. According to the World Health Organization (WHO), approximately 15% of the world's population lives with a disability. Without accessibility features, websites can present significant obstacles to these individuals, limiting their participation and engagement online.
The Role of AI in Transforming Accessibility
Common disabilities that affect web accessibility include visual impairments, hearing loss, motor disabilities, and cognitive challenges. Individuals with visual impairments rely on screen readers to navigate websites, while those with motor disabilities may use specialized input devices. Deaf or hard-of-hearing individuals require captioned multimedia content, and those with cognitive challenges need clear and straightforward website layouts to comprehend information effectively.

AI-powered technologies have revolutionized the way websites cater to users with disabilities. By leveraging machine learning algorithms and natural language processing, AI can analyze and adapt website content to suit individual needs. Let's explore some of the key ways AI is transforming website accessibility:

1. Automated Transcription and Captioning: AI can automatically generate transcripts and captions for audio and video content, making multimedia information accessible to deaf and hard-of-hearing users.

2. Voice-Activated Navigation: Virtual assistants, powered by AI, enable users to interact with websites through voice commands. This feature is particularly beneficial for those with motor disabilities who may find traditional navigation methods challenging.

3. Image Recognition and Description: AI algorithms can recognize images on websites and provide descriptive text, allowing visually impaired users to understand the visual content.

4. Personalized User Experience: AI can learn from user interactions, preferences, and browsing patterns to personalize website layouts and content, creating a more inclusive and user-friendly experience for everyone.

5. Language Translation: AI-driven translation services break language barriers, making it easier for users who speak different languages to access web content.

6. Natural Language Interfaces: AI chatbots and virtual assistants use natural language processing to provide real-time support to users with cognitive or learning disabilities, ensuring a smoother browsing experience.
AI Success Stories in Website Accessibility
7. Automated Code Analysis: AI tools can analyze website code and identify accessibility issues, guiding developers in making necessary improvements.

Several companies and organizations have embraced AI to enhance website accessibility and create a more inclusive online environment. Let's take a look at some success stories:

1. Microsoft: With its AI for Accessibility initiative, Microsoft focuses on developing AI-powered tools that assist users with disabilities. The Seeing AI app, for instance, uses AI to describe scenes, read text, and identify objects for visually impaired users.

2. Google: Google's AI-powered Live Caption feature provides real-time captions for multimedia content across various apps, benefiting users with hearing impairments.

3. IBM: IBM's Watson AI platform offers accessibility services, including automatic speech recognition and language translation, to improve website accessibility.
Challenges and Future Directions
4. AccessiBe: This AI-powered web accessibility solution uses machine learning to scan websites for potential barriers and automatically apply adjustments to comply with accessibility standards.

While AI has shown tremendous promise in improving website accessibility, several challenges remain:

1. Accuracy and Reliability: AI algorithms must be continually refined to ensure accurate and reliable results, especially concerning captioning, image recognition, and voice navigation.

2. Privacy and Security: AI-driven personalization should strike a balance between enhancing user experience and safeguarding user privacy.

3. Bias and Fairness: Developers need to ensure AI systems are free from biases that could inadvertently discriminate against certain user groups.

4. Constant Innovation: The field of AI and website accessibility is rapidly evolving, demanding continuous research and development to keep pace with emerging technologies.

AI has ushered in a new era of website accessibility, breaking barriers and empowering users with disabilities to participate fully in the digital world. As AI technologies continue to advance, the future holds immense potential for creating even more inclusive and accommodating online experiences for individuals of all abilities.

# data[].attributes.attachment_link.title
Breaking Barriers: How AI Transforms Website Accessibility for Users with Disabilities

# data[].attributes.attachment_link.description
In today's digital age, websites have become an integral part of our lives. From shopping and socializing to accessing essential services, the internet plays a pivotal role in connecting people...

# data[].attributes.headline
Accessibility and Design: A Failure of the Imagination

# data[].attributes.subject
Accessibility and Design: A Failure of the Imagination

# data[].attributes.body
Journal that lists common challenges of accessible design and how they might be overcome without leading to boring design.

# data[].attributes.headline
Dos and Don'ts On Designing for Accessibility

# data[].attributes.subject
Dos and Don'ts On Designing for Accessibility

# data[].attributes.body
https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/

# data[].attributes.headline
What Accommodations Are Currently Being Made? 

# data[].attributes.subject
What Accommodations Are Currently Being Made? 

# data[].attributes.headline
Potential Solutions to Design Shortfalls Based on Current Research on ADHD.

# data[].attributes.subject
Potential Solutions to Design Shortfalls Based on Current Research on ADHD.

# data[].attributes.headline
Web Design For Those With and Without Neurodevelopmental Disorders

# data[].attributes.subject
Web Design For Those With and Without Neurodevelopmental Disorders

# data[].attributes.body
Creation of a website that aims to educate people on what ADHD is and how it can impact the general public, that is made  with the research on accessibility in mind.

This website could be made with an app, that shows an accessible onboarding process, that can cater to several disabilities.

INCLUDE PERSONAS and UX/UI

Why would they engage?

Feedback from family members

# data[].attributes.body
Use colour theory and typography research to ensure animation is made to hold the attention of those with ADHD.

# data[].attributes.body
Look at how easy it is to create in WordPress. There are plugins available.

# data[].attributes.body
Look into research around music that is preferable to those with ADHD.

*Ensure that any music is copyright free (Any song pre 1926, or gain permission from artists)

# data[].attributes.body
Include a blog post comparing how those with ADHD think differently compared to those who are neurotypical. Find specific scenarios and run through the (Many!) thoughts someone with ADHD might have compared to others.