Accessibility is our responsibility

An accessibility design guide, for more inclusive products

Did you know that perfectly healthy people with great sight, hearing and mobility, who can read and write effortlessly, can multitask effectively and who are fully functional all of the time make up of about 50% of the population? The rest we wear glasses or are colour-blind, have broken wrists or ear infections, live in noisy environments or have a lousy internet connection, are on the move or busy, are dyslexic or have an attention disorder, etc.

This means about half of our users could have a hard time using our products or navigating through our websites, or they might even be completely unable to interact with them. So, we might be missing on the opportunity to increase user satisfaction and broaden our audience. Pretty worrying right?

What if I tell you that we can improve interactions and the overall user experience just by implementing some simple principles during the design phase? After all, designing for extremes can bring value to all, we call this Inclusive Design.

“Thinking about how to improve a situation for a small subset of people improved the positive experience for a much wider range of people.”

— Mike Miles’s, Associate Director of PHP in Genuine

What is inclusive design?

An inclusive design considers as many people’s needs and abilities as possible, it doesn’t just target people with disabilities. It recognises that our needs change with time and circumstance, so it anticipates error, struggle and different ways of interaction. It aims to solve problems before they occur, raising the bar and changing the standards of good product design.

“The practice of inclusive design puts you ahead of the curve for best practices for accessibility that will become a future standard X months from now.”

— Derek Featherstone

As a result, an inclusive user interface is empathetic, conscious and accessible. It can be comfortably used by diverse groups of people with different characteristics such as age, gender, education, wealth and abilities, living or operating in different environments and having different levels of access to technology.

Accessibility is the Holy Grail of inclusive design so, in this article,
we will use POUR as a reference for creating simple, effortless, and quick interactions between a user and an interface.

POUR: Perceivable, Operable, Understandable, Robust

POUR stands for

Perceivable: Can the digital content be interpreted or processed effortlessly and in different ways?

Operable: Can the digital product function and be controlled with ease and without confusion?

Understandable: Can a user understand how the interface functions and the information within?

Robust: Is the digital product compatible with different assistive technologies and devices?

Each of these different principles has a success rating of either A, AA, or AAA. An A rating is the minimum requirement for having an accessible site, and AAA is the gold standard of accessibility.

How can designers help

As designers, we cannot, of course, control all of the above or to the same extent. But we should acknowledge that many of the accessibility issues people run into are caused by uneducated decisions made during the design phase. So, there’s a lot of opportunity for us, designers, to make a difference.

Here are four kinds of experiences we can affect (improve or assist) just by making smarter design decisions.

Visual Experience

This includes shapes, colours, contrasts, text styles — all the graphic elements of the product’s interface.

Hearing Experience

This refers to sounds produced when interacting with the product, their volume, and clarity.

Cognitive Experience

This describes the time a user spends to interpret the interface and how much attention and mental power is needed to use it.

Motor Experience

This includes all the actions and movement needed to perform a task or interact with the product.

Let’s go through each of these experiences and see which small design decisions make have a huge impact.

Challenge Accepted!

As Leonie Watson nicely put it in her article “Tips for making accessibility a core design principle”. “Too often, accessibility is thought of as a challenge to creativity; but if we consider it as a creative challenge, we open up whole new realms of possibility. The trick to really good accessibility is not to compromise on functionality or features, or to constrain aesthetic appeal, but to make functional and creative experiences that are accessible as well.”

So lets “Do the hard work, so our users don’t have to” (one of the original design principles for the Gov.UK platform).

Improve the visual experience

1. Colour

Contrast ratio

Contrast is the difference in brightness or colour that makes an object stand out from its surroundings and can have a dramatic effect on legibility. High contrast makes visual elements stand out from their background, be more noticeable.

Action
Use high contrast to improve visual clarity and readability, to help users browse effortlessly. For copy an at least 4:5:1 contrast ratio is required to reach an acceptable AA rating and a 7:1 contrast ratio to achieve a golden AAA rating. This tool Hexnaw helps us test entire colour systems for their contrast accessibility. If you are about to create a new colour scheme, the Colour Review tool will help you discover and test colour combinations.

Pro tip: A pure #000000 black on white can create a harsh for the eyes contrast and even affect people with dyslexia. This is why we tend to avoid it and go for a dark grey instead.

Brightness

Brightness describes the level of illumination emerging from a source or the amount of light reflected from a surface. Bright colours reflect more light and can interfere with our ability to read and process information.

Action

1. Avoid using bright colours on backgrounds or large surfaces. Do not use bright colours for text or near it as it distracts from it.
2. If the brand asks for a specific high in brightness colour, try to suggest a saturated or darker alternative.
3. If you absolutely have to use a bright colour, then minimise its usage for highlighting actions and pair it with darker hues to achieve balance and high contrast.

Pro tip: Any colour with more than 50% yellow in it, is naturally reflecting more light. This means, yellow, orange, green and teal hues are high-risk colours and should be used carefully.

Colour Blindness

Colour blindness is the inability to distinguish specific colours — usually reds and greens, occasionally blues — and it’s more common than you might think. It affects approximately 1 in 12 men (8%) and 1 in 200 (0.5%) women, according to Colourblindawareness.org. This means, about 8 out of 100 people experience our designs different than expected.

Action
Awareness and colour testing. Hopefully, there’re tools online that can help us pick colour combinations and check them against various colour-blindness conditions. One of my personal favourites is coolors.co. (Click on the eye icon to the top right to view a colour palette through the lens of different conditions).

Another way to check for colour blindness is a tool called Color Oracle. Color Oracle applies a full-screen colour filter with the option to choose between different conditions from Deuteranopia, which is the most common colour blindness condition, to Achromatopsia which is very rare.

Pro tip: Don’t rely solely on colour; colour shouldn’t be the only way to communicate important messages. Here’s what you can do:

• Use underline for links and italics or bold to highlight text
• Use icons along with text to communicate success or failure
• Use texture or patterns for charts
• Use a clear visual style for buttons or significant notifications with different font styling for focused or active states

2. Typography

Font selection

Communication is the number one goal of every digital product and can be achieved with the assistance of typography and its correct application. Content should be both legible and readable, which means to be recognised and interpreted easily, scanned and processed effortlessly.

Image is taken from STUART DE ROZARIO ‘s article “How to choose an accessible typeface.

Action
Simplicity and clarity are crucial for quick scan and interpretation, avoid detailed or complex fonts as they only add visual noise. Pick the right font family aiming for those who have clearly defined and unique shaped characters, as people with limited vision or dyslexia, can get confused by some characters or their combinations.

Good options are fonts with open counter shapes and long ascenders and descenders, as they help define outer word shapes better. Fonts with large x-height will enhance legibility by creating more space for lowercase characters. Lastly, too narrow or condensed fonts with tight kerning should be avoided, as their characters might look intermingled, being harder to distinguish.

Pro tip: Select the right font by checking on the most problematic characters and character combinations. Make sure that similar letters like ‘a’ ‘e’ & ‘c’, ‘b’ & ‘d’, ‘i’ & ‘l’ or ‘y’ ‘g’ & ‘q’ look very different and the ‘rn’, ‘oj’ & ‘ln’ combos are clearly distinguished.

Font Styling

Font styling can also influence the reading performance for people with low vision or dyslexia. We should be aware and mindful about how often and where we use font stylings like Italics, Underline and Uppercase.

Actions

1. According to the ‘British Dyslexia Association’, Italics should be avoided, especially for large blocks of copy or small font sizes. This is because they make letters lean over, appearing spikier and as a result are harder to read. While Italics seam to decrease the reading performance, is still okay to use them sparingly to highlight words or small sentences when bold isn’t an option.
2. The Underlined font styling should also be avoided for body text. Underlining long paragraphs adds visual noise reducing the reading performance while underlining short sentences or words is associated with active links and can cause confusion. Bold is a better alternative for adding contrast and emphasising.
3. Although there’s no conclusive research, there’s some evidence supporting that Uppercase should also be avoided mainly for body text. It seems that the unified look of all caps reduces the word shape contrast making it less easy to scan. Additionally, uppercase looks a bit tense and it might feel as if someone is shouting at you.

Pro tip: Balance is the key. Attaching meaning to each styling while using it sparingly and with intention can even enhance readability.

Font size

Did you know that the vast majority of people wear glasses or contact lenses? It’s actually more than 6 out of 10! Also, about 62% of people access the internet from their mobile phone, not counting the application usage. What could possibly go wrong when limited vision people use technology on a small screen while on the move…?

Action
Use larger font sizes. As a general rule, 16px plus is considered the most inclusive, but be aware fonts can stand at different scales and their sizes can vary hugely. Never go below 14px, as a matter of fact, most modern websites use 18px fonts for their body copy and 14px or 16px just for labels, captions or tooltips.

Pro tip: Additionally, avoid using thin and light-weight fonts as they might be hard to read for smaller font sizes or under bright light.

Paragraph format

Helping people scan through the content effortlessly should be our number one goal since only 20% of people read the content, with 55% of them passing through it quickly. Our job is to support people as much as possible by using comfortable paragraph formats.

Actions

1. Research indicates that the average online line length for supporting readability is about 70 characters, including the spaces. Titles, subtitles and bullet points will help with scanning and left paragraph alignment will make the text easier to read (for the western world).
2. Long walls of text have significantly fewer chances to keep people engaged. Successful paragraphs are no more than five or six sentences long without exciting the 200 characters mark.
3. Whitespace will help people with cognitive and attention disorders, retain reading focus. For the rest, it just makes reading more pleasant and fluid. According to WCAG, it’s best practice to set the line-height (space between lines) to 1.5 relatives to the size of the type. The space between paragraphs should also be at least 1.5 times larger than the line spacing, so they are clearly defined.

Pro tip: The line spacing shouldn’t exceed 2.0 as it might have the opposite effect and distract readers.

Bonus: There’s a tool worth checking out, called Golden Ratio Typography (GRT), which uses the golden ratio to determine precise typographic proportions like font sizes, line heights, and associated spacing for more visual balanced results.

Copy Layout

As designers, we often fall into the trap of over-designing our layouts to make them look compelling or unique, leaving usability aside. This is why we see trends like part of the text overlapping an image or text over multi-coloured or textured backgrounds. We can still enjoy some of these trends as long as we know how and when to use them.

Action
When using text over a coloured or textured background, we need to ensure that the colour contrast between them is high enough while consistent all over the overlapping area — meaning there are no lighter along with darker areas under the copy or too much detail interfering. Larger font sizes and heavier font weights will also boost contrast.

Pro tip: As always “know thy user”. Funky layouts are not for everyone.

Improve the hearing experience

You might be thinking, how the blip can Visual design effect the hearing experience? So, imagine you are having a conversation with a friend in a club. I bet you can hear half of what she is saying, but you can keep the conversation going just by looking at her lips moving, her body language and facial expressions. The visuals support and/or reinforce the ambiguous sounds thus you can finally make sense of them.

In a UI, sounds could mean a variety of things for different people. They could also be easily lost in a noisy background, so it’s good to support them with visual cues.

Actions

1. Our aim should be to offer feedback with both audible and visual cues, supporting errors, notifications and significant interactions with relevant and in proximity graphic elements like tooltips and toast messages. We also have to make sure the visual cues are staying active long enough for people to see and read, while not hiding any significant piece of content.
2. A good practice — which isn’t limited to supporting sound assistive technologies, is adding descriptive labels to the UI elements and captions to the images for easy navigation through screen readers. Using subtitles for videos is another way to improve the hearing experience, also helpful for non-native language speaking people.
3. Lastly, we shouldn’t neglect cases where the sound is the problem, this is why we need a visual alternative. Some people might be sensitive to specific sounds or are in a situation where sounds could cause a disturbance. Then it’s a good practice to give people the option to toggle sounds off without having to volume down their speakers, making this feature visible and effortless.

Pro tip: Avoid using unnecessary auto-playing sounds and music as they can disturb or even alarm people.

Improve the cognitive experience

1. Perception

Visual clarity

Clarity is the first and most important attribute in a user interface. A successful user interface enables users to recognise and interpret what they see, understand the value of the product and the actions at hand, predict what will happen when using it, and successfully interact with it. There is no room for ambiguous content, mystery and delayed gratification. Our goal is to inspire confidence and enable interaction.

Actions

1. Form follows function is a principle stating that an object should reflect its intended function or purpose. To achieve that in a user interface, we use affordances, visual cues/properties attached to the UI showing the possible ways a user can interact with it.
   Affordances depend on the users’ physical capabilities, their goals, their past experiences and, of course, on what they consider possible. A button should look and act as a button, same for a link, a menu tag, a form etc. Using clear signs/affordances will help users recognise or interpret interfaces and interact with them effortlessly.
2. Using familiar and established design solutions in a User Interface will help users predict outcomes and act with confidence. Therefore, it’s a good practice to use design patterns, which are tested, optimised, reusable solutions to commonly occurring problems. Components such as cards, tables, accordions, forms, carousels etc. are designed to solve unique challenges, and they are recognisable across the board.
   Design patterns are built around past experiences and possibilities and are attached to specific goals. Choosing the right design pattern for the problem at hand should be our number one priority for avoiding confusing or stressful interactions.
3. Establishing a consistent visual language is the key to a more comprehensive interface. Repetitive interactive UI components with the same functionality and/or importance should always look and act the same way. Thus, elements such as navigation, buttons, links, labels, errors etc. should have consistent stylings, colours and animations throughout the product.
   It’s worth noting that a consistent visual language not only assists interaction by attaching meaning and reducing visual noise, but it also reinforces the product’s personality, boosts brand recognition, emotional connection and trust.

Pro tip: Testing the effectiveness of our design decisions with real users is vital since peoples’ perception can vary depending on their age, access to technology, mental models, culture etc.

Hierarchy

Visual hierarchy refers to the visual weight of graphic elements and their arrangement in a way which allows users to explore and discover content effortlessly. By assigning different visual weights to the page elements, we can group content and influence the order in which people perceive information and navigate through the product.

Actions

1. Colour is the number one attention grabber. Coloured elements will stand out, thus sit higher in the hierarchy. Brighter colours will stand out more, so with that in mind, we should carefully arrange and distribute our colours to guide the eye to the right places.
2. The size of visual elements such as typography, buttons, icons and images is almost as potent as colour in determining importance. Larger graphics captivate users’ attention appearing significant. For typography, a clearly distinguished size scaling can help establish content hierarchy and make scanning through content smooth and effortless.
3. Another way to assist visual hierarchy is through design consistency and exceptions. Consistently aligned, similar-looking, repeating or adjacent elements will give the impression that they are related and equally important, while deviating elements as well as unusual shapes and interesting textures or styles, will stand out as more significant. Too many design exceptions will compete for attention and will add complexity, so it’s a good practice to use them sparingly.

Pro tip: Studying the Gestalt principles and their application in UI design will help us understand visual perception and grouping to improve visual hierarchy.

Colour application

Colour shouldn’t be the only way to convey a message or add meaning, but it is still useful and quite influential, so it shouldn’t be treated as a decorative element. Colour carries meaning, and although there are no hard rules, too many colours can cause information fatigue, and not consistent use of colour can result in confusion.

“Colour does not add a pleasant quality to design — it reinforces it. “
— Pierre Bonnard

Actions

1. Avoid using too many colours. Three colours are usually enough to describe all the significant visual elements of a page. The 60–30–10 rule could help us create the perfect harmony. Where 60% of the coloured items consist of the primary colour creating a unified product theme, with a 30% secondary colour reinforcing meaning and/or creating an attention-grabbing effect and a 10% accent colour for complementing and assisting the primary and secondary colours.
   Any extra colour can be used to bring a new significant meaning or message to the page, so we have to leave space for adding more colours without having to introduce the rainbow.
2. Additionally, we need to make sure we are using the right hue for the message. Aesthetics aside, colours create emotions and unconscious connections. The meaning of a particular shade can vary depending on the culture and environment we are in, and colours often have distinct meanings attached to them — in the western world, an error is red, success is green, information is blue etc.

Pro tip: It is possible to assign our own meanings to colours as long as they don’t overlap with the established norms, and we keep them consistent throughout our product.

Iconography

Semiotics is the study of symbols/icons and their meanings. It focuses on how these meanings are formed and get interpreted by people, depending on the context they see them through. In a User Interface, icons are part of the visual language used to represent features, functionality, or content. Semiotics help us design iconography that is immediately recognised and understood.

Well established online icons.

Actions

1. Though the years, we have developed icons which have meanings accepted and understood by most people. There are also, platform-specific icons that users are accustomed to, and can interpret effortlessly. It is a good practice to stick to these established solutions, when possible, for a familiar and smooth experience.
2. There are, of course, cases, where we need to design custom, product-specific icons for unique features. These icons need to be as straightforward and minimal as possible to ensure clarity. They should also have a consistent visual style for communicating their function or for being distinguished from other non-functional elements.
3. Lastly, we shouldn’t rely solely on visual metaphors to convey meaning, as some associations might not be as apparent. If an icon needs a caption to describe it’s meaning, then it might not be suitable. When unsure, testing our designs with real users can help.

Pro tip: Icons are not only open to interpretation, but they can also have multiple meanings. For this reason, it’s a good practice to use tags along with functional iconography.

2. Interaction

Memory

Many psychology experiments have shown that the processing capacity of healthy individuals is pretty limited. Most of us can keep an average of 7 items — plus or minus 2, depending on the individual, in our short-term memory. Our brains are not optimised for the abstract thinking and data memorisation that digital products require, so good design can make a difference.

Actions

1. Reducing the number of options and information available on the page, along with using clear titles, breadcrumbs and ‘back’ options for access to previous content, will help users remember or remind themselves where they are, what they are about to do or what it is required of them.
2. Clear and visible copy on or in proximity to interactive elements will help users stay informed and confident throughout the interaction. For example, form labels should always be visible, actions shouldn’t be hidden behind hover, buttons should provide context on their destination and sections should be clearly titled.

Pro tip: It is possible to increase our short-term memory and processing capacity with a process known as “chunking”. This is where we are visually grouping items to form larger ones that are easier to remember.

Memory / Decision making / Attention

Decision-making

We should know by now, that we, humans, are quite bad at decision-making. This is because we want to have full control while trying to be rational, interpreting and comparing all the different options. There’s actually a law about it, it’s called the Hick’s law. It describes the time it takes for a person to make a decision as a result of all the possible available options: increasing their number will increase the decision-making time.

Action
It’s obvious, Keep It Simple, Stupid (no offence) or “K.I.S.S.” is a design principle which states that most systems work best if they are kept simple rather than made complicated. As mentioned above, our processing capacity is limited to an average of 7 items at a time, and having too many options with equally perceived hierarchy can cause analysis paralysis.

Minimising the options presented in one go and reducing the number of distractions on the page, while keeping a clearly defined hierarchical order with only a few significant actions standing out will assist in decision-making.

Pro tip: During stressful or time-sensitive interactions, it’s beneficial to limit the available choices even further. One to a maximum of five options will improve speed and reduce stress.

Attention

Breaking news! We, humans, are also bad at paying attention and we get distracted easily; according to studies, the average attention span of an internet user is just 8 seconds! On top of that, our engagement level gets easily affected by our circumstances, our mood, motivation and environment. This is why keeping users engaged with our product can be challenging.

Actions

1. I will, this time, give my “K.I.S.S” version, which is Keep It Short Stupid (no offence). Presenting the product’s value proposition as soon as possible and splitting the content into digestible goal-oriented chunks is a good starting point. Then, every page should be designed around a single goal with a clearly visible value and interaction. It is of course, possible to have multiple secondary interactions, as long as they have a lighter visual weight or are presented after the primary goal has been achieved.
2. Making sure that the page’s distractions are limited as much as possible, eliminating useless notifications, animations and pop-ups and allowing users to focus on the task at hand is also a good practice not only for attention purposes but for showing empathy and respect.
3. Offering visual support with the use of imagery, iconography, diagrams and infographics or just with clearly visible navigation and CTAs, are also ways to seize peoples’ attention and help them stay engaged and focused.
4. Enhancing the page structure with the smart use of whitespace, giving priority to specific elements or content and using strategical focal points will help with directing users’ attention to guide them through interactive content.

Pro tip: Fast-moving animations/gifs are often used to grab attention, but they can cause a disturbance, motion sickness or just take away from useful or significant content. It is good to keep them away from the main content and use them only when it’s absolutely necessary.

Feedback

As in physics for every action, there must be a reaction. Feedback communicates the results of any interaction, reinforcing it and/or making it both visible and understandable. Feedback encourages and guides users around the UI, highlighting the actions taking place. It’s informing them about where they are, the progress of a task, possible errors, and what to do about them; providing certainty and a sense of control.

Great UI feedback examples by Jakub Antalik

Action
In a UI we can use micro-interactions or animations to show what’s about to happen, what is happening. Visual cues such as icons, colours and messages to reinforce possible interactions or their results. Transitions to help users understand where they are, how they moved from one point to the other, and how everything is connected.

Feedback can be attention-grabbing like a popping tooltip, a notification or a dialogue that covers the full screen, or it can be as subtle as a button changing colour or size on hover signalling interaction, a linear animation showing progress, or an icon illustrating a state or result.

Pro tip: The feedback is successful as long as it is immediate and in proximity to the related UI element.

Improve the motor experience

Fitts law

Fitts law provides a model for human movement and interaction. It states that the time required to rapidly move a pointer (cursor or finger) to a target area is a function of its distance from the target divided by the target’s size. Meaning a small and distant target will increase the interaction time.

Action
According to Fitts law, we aim to reduce the distance between the user and the target while increasing its size. This law mostly applies to navigation and buttons; menu and submenu elements should be in proximity while buttons, links and pagination should be clickable on a larger area to enable quicker and more accurate interaction.

Pro tip: According to the usability best practices 42x42 pixels (thump size) is the minimum size for a button/link.

Whitespace

Whitespace refers to the empty space between and around design elements, and it helps users clearly define and interact with the UI. Whitespace is not necessarily white, it can be any colour, texture, pattern, or even a background image.

Action
Balancing Proximity and Whitespace is the key. Make sure there’s enough space between interactive elements to minimise errors due to miss-click. As mentioned above the interactive targets should be big enough (at least 42x42 px) and the distance between them usually at a minimum of 8px.

Assistive technologies

Assistive technologies refer to any item, piece of equipment, or product system, that is designed to increase, maintain, or improve functional capabilities of people with disabilities. They help people access computers and the internet using voice commands, the keyboard or simple gestures. Our job is to design interfaces that can aid and enhance their capabilities.

Actions

1. Focus state is the representation of an interactive element when it is selected by a user who is using a keyboard or a voice command. Focus states highlight actions, helping users orientate themselves on the page and take action.
   Focus states should be applied to every interactive component as they are the only visual cues to indicate a selected element. Assigning a background colour or an overlay, and adding borders or underlines to focused links will help display where the user is.
2. Classifying pages and their sections with headings will help users understand the product’s structure, providing them with a clear outline of the page. There are six levels of headings we can use to organise sections of content, <h1> through to <h6>. H1 is the most important as it gives users an indication of what the page is about. H2 creates a section of content, dividing the page into digestible chunks and organising the content. With every additional H style, we are forming subsections going deeper and deeper in the hierarchy.
   The headings’ hierarchy should always be consistent, and their visual representation has to align with the code structure, for screen readers to be able to read the content as it was intended.

Pro tip: Being aware and asking for developers’ advice on the implementation of assistive technologies, will help be aware and provide better designs.

Bonus: Improve performance

We have established so far that Inclusive Design is about enabling as many people as possible to access the internet and achieve their goals or solve their problems despite their circumstances. We might be fortunate enough to have access to cutting-edge equipment or super-fast internet, but we can feel the struggle when our signal is not as good. For most people, old devices and lousy internet is the norm, so designing for the best performance is a big deal.

“The web is not about who’s the prettiest, its future is about who performs best, is the most accessible and is usable by all kind of people, not only the ones who are already bored of it.”
– Chris Heilmann

Actions

1. Minimalism is the key. If we intend to create a product which can be used by as many people as possible, then we should get rid of anything unnecessary. Does a graphic, image or animation offer value or just adds visual noise and loading time? If yes, then it has to go.
2. Image optimisation is another standard to help improve the performance of a digital product. We can save valuable kilobytes and actual loading seconds by resizing our images to the preferable size and then run them through tools like ImageOptim and TinyPNG.
3. A technic commonly used by developers to improve performance is the ‘Lazy Loading’ pattern where the loading of an image is asynchronous and postponed until the point at which it is needed. For example, if you scroll quickly to the bottom of the page, you might see something like a wireframe of the website before it fully loads. An alternative to ‘Lazy Loading’ is the ‘Progressive Image Loading’ where we present an empty place holder box <div> then fill it with a small low-quality blurry image and lastly replace it with the desired high-quality image.

Bonus: Learn how to empathise

Following the above best practices in every digital product is a good start for high accessibility standards. But there’s always room for improvement and knowing our users better, can reveal new ways to raise the accessibility standards. So, it’s necessary to invest some time and money in learning more about our different kinds of users, as they can teach us so much about what makes an experience inclusive.

Get to know our users will help us practice empathy. “Empathise” isn’t the first stage of the Design Thinking process by chance. In the empathise stage, our goal is to gain a deep understanding of the people we are designing for and their unique perspective, so we are in the position to identify with them and represent them when making any design decisions.

“The main tenet of design thinking is empathy for the people you’re trying to design for.”

— David Kelley, Founder of IDEO

Conclusion

I will leave you with a quote since it is getting late.

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
— Tim Berners-Lee

Accessibility is our responsibility. As designers, we have the power and tools to build on the Web’s strengths and ensure a better, more inclusive future for everyone.

Thank you for reading! I hope you’ve learned something and that you will spread the message of inclusion & accessibility.