Web accessibility— Let’s make sure our UX doesn't SUX
“When UX doesn’t consider ALL users, shouldn’t it be known as “SOME User Experience” or… SUX?” — Billy Gregory
Inaccessible website design excludes people.
Imagine not being allowed into the places where you buy your groceries. Imagine not just being able to check when the train goes, when the gym opens, what you need to know to file your tax return. All those things you use the web for every day, without even thinking about it, are not now convenient to you.
This is how people with disabilities feel when they are excluded from society and their everyday obligations, for none of their faults.
If it’s not actually accessible, usable, and inclusive, it’s not actually designed.
Let’s deep dive using the Five W’s and One H Approach (What?, Why?, Who?, When?, Where? and How?) for Accessibility, which would help us comprehend every perspective of Universal Design.
What is Accessibility?
Also often known as Universal Design or Inclusive Design.
Accessibility enables people with abilities and disabilities to perceive, understand, navigate, interact with, and contribute to the web, the extent to and ease with which they can meet their goals. As designers, it is our responsibility to make sure we design in a way that is usable to all users irrespective of their situation, abilities, or context.
Accessibility, usability, and inclusion are closely related aspects in creating a web that works for everyone.
Everyone is unique. There is no norm.
🧐 Why Accessibility?
Legal, Moral, and Business reasons go hand in hand to create a triple-layered win-win situation.
Legal Reasons
- People with disabilities form one of the largest user groups in the world.
- A report published by the United Nations in 2011 estimated there were 1–1.3 billion people with disabilities in the world (as much as the population of China in 2014).
- Accessibility is required by Federal Law.
Moral Reasons
- Empathy is a mainstream of human-centered design and Universal Design.
- People with disabilities face discrimination in access to employment, access to services, and online content.
Business Reasons
- It provides access to a massive audience as it turns out to be more SEO friendly and hence getting a high amount of surfing and downloading speed.
- Apart from increasing the market reach, accessibility features in products and services often solve unanticipated problems.
🫂 Who is benefitted from Accessibility?
A common misconception is that accessibility requires a focus on users that have some kind of disability — but that isn’t the case. Accessibility design is inclusive of everyone. Maximizing ease of use to reach all ability levels leads to products that anyone can use and enjoy, whatever the context. Accessibility design only widens the user pool and helps all users.
The Curb-cut Effect
The curb-cut effect refers to the fact that designs created to benefit people with disabilities often end up benefiting a much larger user group.
The curb-cut effect takes its name from the ramps cut into the surfaces of sidewalks — as you see in the image above. As it's light to analyze that, it must be widely used for people with disabilities having wheelchairs, but on the other side it also helps for a person with heavy luggage, or a mom with a stroller.
The beauty of designing for everyone is the benefits can spread wider than you think.
🧵 When to implement Accessibility?
Accessibility is not circumscribed to a group of users with some disabilities, for example, visual, motor, auditory, speech, or cognitive disabilities, rather it extends to anyone who is experiencing any Permanent, Temporary, or Situational disability. Below are some highlighted examples for the same.
And hence, there is no right time for implementation of Accessibility, you never know, which user would encounter what Situational disability.
When you treat accessibility like a feature, chances are it will be one of the first ones to be deprioritized when your team realizes the launch date is coming up.
⚡️ Where to use Accessibility?
This is where Usability comes into play along with Accessibility and Inclusivity.
Usability and accessibility are not the same things, but there are definite overlaps between bad UX and inaccessibility. The way to look at this is that a bad experience for the general public is usually much worse for a disabled or impaired individual.
Here are some rooms where is accessibility needs to be mandated:
- Physical: It takes too much strength to use
- Conceptual: Instructions and flow are hard to understand
- Economic: It is too expensive
- Cultural: Users can’t understand metaphors relevant to product use
- Social: The social expectations related to use are not intuitive for some social groups.
And, this covers every other aspect of Usability as well.
👀 How to implement Accessibility?
The first and foremost step to build an accessible product is to build empathy and install an inclusive design mentality.
There are four major principles to implement Accessibility and Inclusivity in your Design, mentioning a few of them that’d be relatively easy to implement and can help your products get closer to meet level AA of the Web Content Accessibility Guidelines (WCAG 2.1).
1. Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
1.1 Text Alternatives
- Alternative Text for Media: Using <alt> HTML tag for various media on the web, which is helpful for screen reader users. People with low vision often make use of screen readers to “hear” the web.
1.2 Time-Based Media
- Captioning: Provide Caption for Pre-Recorded Audio or Video Media, assistive media for people who are deaf or hard for hearing.
- Sign Language: The use of Sign language is for many people who are Deaf, and some do not understand written language well.
1.3 Adaptable
- Layout: Use Consistent and Responsive Design, consider mobile when initially designing the layout and relevancy of content.
1.4 Distinguishable
- Typography: Proper Line Height, Letter Spacing, and Word Spacing, helpful for people with low vision, dyslexia.
- Color Contrast: The text should have a color contrast ratio of at least 4.5:1 against its background. The contrast of icons and graphical objects should be at least 3:1 against adjacent color(s).
- Don't use color alone: To make critical information understandable and distinguishable, use graphics or text along with colors.
2. Operable
User interface components and navigation must be operable.
2.1 Keyboard Accessible
- For Keyboard Only users: Provide Keyboard Shortcuts, Logical TabBar, options to skip sections, etc.
2.2 Enough Time
- Timing and Controls: Let the user pause, stop, or hide content that moves, blinks, scrolls, or automatically updates, for example, a dynamically-updating news ticker, chat messages, etc.
2.3 Seizures and Physical Reactions
- Animation: Do not design content in a way that is known to cause seizures. No content on-page should flash for more than 3 times per second unless that flashing content is sufficiently small and the flashes are of low contrast and do not contain too much red.
2.4 Navigable
- Link strategy: Opening links in new windows with advanced notice. This helps the users by presenting content in a predictable order from one web page to the other.
3. Understandable
Information and the operation of the user interface must be understandable.
3.1 Readable
- Language: Provide users to change and access the language they are most comfortable with.
- Abbreviations: Minimize the use of abbreviations, but if needed do provide the definition or glossary.
3.2 Predictions
- Focused: Define and design a clear focus state for all elements. Change of content, like text, should not take place on focus.
- Interaction: Avoid the use of hover for major interactions or conveying valid information.
4. Robust
Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.
4.1 Markup Language
- Use correct markup: Headings mark where the content starts — they’re tags given to text to define its style and purpose. Headings also establish the hierarchy of the content of the page.
✨ Summing Up
By now, this may be either convincing for the creation and importance of Universal Design or maybe pretty confusing with the fact that these restrictions will act as limitations in terms of visual creativity. But once, these guidelines and principles are taken into consideration it’d surely widen up the horizon of the design in terms of innovation, knowledge, and creativity, and hence help reach you to a broader audience.
And, hence let's make sure to design not for “Some User Experience” (SUX) but for “All User Experience” (Universal Design). So be kind. Design, online and off, for people who, usually through no fault of their own, cannot engage with complexity.
👏 Many thanks for Reading.
Yeap, it’s true, you can give 50 claps for a blog on medium. Try it here itself, if you find this blog informative and interesting.
🥫Let’s Kettchup
It’s time to get connected and jam over Technology, Design, and Storytelling.
Here is my portfolio, showcasing my exciting yet thoughtful work along with other social media links, let’s catch up!
