A Guide for Designers in the Accessibility Universe
Navigating the cosmos of user experience (UX) design requires more than just technical prowess — it demands a commitment to inclusivity. In this guide, we’ll embark on a journey into the realm of accessibility, discovering how it’s not just a set of requirements but an integral facet of crafting memorable user experiences. Let’s delve into the art of making digital landscapes welcoming to all, exploring how you, as a UX designer, can champion accessibility seamlessly.
Getting Started
Rethinking Accessibility: It’s More Than a Checklist
Accessibility is not a checkbox; it’s the heartbeat of a user-centric universe. Shift your mindset and recognize accessibility as the soul of usability for individuals with diverse interactions. Picture it not as a burdensome checklist but as a guiding star, leading you towards creating designs that resonate with everyone.
Imagine accessibility as the secret ingredient that makes your UX design universally delightful.
A Symphony of Perspectives: Designing for Diverse Interactions
As a UX designer, your mission is to conduct a symphony of experiences. Understand that accessibility isn’t a one-size-fits-all concept — it’s a tailored orchestration. Explore how to weave inclusivity into the fabric of your designs, considering the diverse ways users interact with products. Picture yourself as the conductor, orchestrating a masterpiece that harmonizes with every user’s unique needs.
Envision your design process as a musical score, where each note contributes to the melody of an inclusive user experience.
Beyond Compliance: Nurturing a Culture of Inclusion
Rise above the notion of mere compliance; embrace a culture of inclusion. Explore how accessibility transforms from a checklist into an inherent part of your design DNA. Uncover ways to champion a mindset where creating inclusive designs becomes second nature. Imagine yourself as an accessibility advocate, fostering an environment where every team member contributes to the symphony of inclusivity.
Think of accessibility not as an obligation but as a shared value, with each team member playing a vital role in the inclusive composition.
Empathy in Action: Putting Users at the Center
Accessibility is the embodiment of empathy in UX design. Delve into practical strategies that place users at the heart of your creations. Explore user personas, scenarios, and empathy maps as tools to understand the diverse needs of your audience. Picture yourself not just as a designer but as a storyteller, crafting narratives that resonate with the entire spectrum of users.
Imagine your design process as a story unfolding, with users as the protagonists and accessibility as the narrative thread that ties it all together.
Embrace an Inclusive Design Mindset
Let’s celebrate accessibility requirements as a fantastic tool for crafting a top-notch product that benefits everyone. To dive into the world of inclusive design, it’s crucial to understand the diverse needs of users. Here’s a quick rundown of the main categories to keep in mind:
- Vision Disabilities: Think blindness, low vision, and colour blindness.
- Hearing Disabilities: Include considerations for deafness, low hearing, and tinnitus.
- Motor Problems: Account for hand tremors, physical deformities, or amputations.
- Cognitive Disorders: Be mindful of dyslexia, dementia, or even the effects of sleep deprivation.
Here’s a game-changer: realise that almost everyone faces some type of disability at some point — be it permanent, temporary, or situational. Picture this: having just one arm could be a permanent condition, a cast on your arm is temporary, and cradling a baby in one arm is a situational limitation. But in all these scenarios, the common thread is the challenge of completing tasks with just one arm.
Now, let’s dig deeper into the idea that enhancing your product for people with disabilities can actually elevate the experience for everyone. It’s like a win-win situation. Aim for progressive enhancement in your design. Ensure that your product is accessible to every person using the most basic technologies, and then sprinkle on additional features for those who can take advantage of them.
When it comes to user research, remember the magic word: diversity. Ensure that your participants reflect the rich tapestry of abilities, circumstances, and backgrounds of your actual users.
Resources
Microsoft has got you covered with their Inclusive Design Manual and Inclusive Design Toolkit, offering a wealth of resources to steer you in the right direction.
And if you’re looking for more specific insights, check out the WCAG 2.0 references, especially focusing on 1.3 Adaptable and 1.3.3 Sensory Characteristics.
Dive into the World of Assistive Technology
Understanding how people interact with assistive technology is a key step in creating truly inclusive digital experiences. Some assistive tools are tailored for individuals with specific, long-term disabilities, like screen readers, switch devices, and screen magnifiers. These may seem unfamiliar initially, but they play a crucial role for those who rely on them.
On the flip side, there are assistive technologies you might be more acquainted with, such as voice control on your smartphone, ergonomic keyboards, or your browser’s native zoom function. It’s important to note that people have varying skill levels when it comes to utilizing these technologies.
Consider taking an Accessibility 101 class, like Udacity’s Web Accessibility course, to establish a solid foundation in accessibility. This can equip you with the knowledge needed to navigate the world of assistive technology.
To gain hands-on experience, learn how to navigate a webpage using only your keyboard and try using a screen reader, such as VoiceOver on your Mac. This practical approach helps you understand the technology itself. Keep in mind that regular users of these tools often develop their own strategies for efficient interaction.
For a more nuanced understanding, observe individuals using assistive technology on your product or others’. You might find insightful videos demonstrating different strategies people employ to interact with digital products. This real-world exposure can be invaluable in refining your approach to accessibility.
Resources
As you delve into this realm, remember the principles outlined in WCAG 2.0, particularly focusing on 1.3 Adaptable and 1.3.1 Info and Relationships.
Bring Accessibility to Life for Your Team
Let’s make accessibility and inclusive design more than just checkboxes on a list — let’s humanise it for our team. When diving into user research, it’s not just about gathering data; it’s about understanding the diverse human experiences behind the screen.
Consider the language, literacy levels, digital literacy, and digital access of your users. Think about potential visual, hearing, motor, and cognitive disabilities. These aspects are not just technicalities; they represent the real challenges and triumphs of your users.
Integrate accessibility considerations into your personas, user archetypes, or user stories. Swap out generic issues with real accessibility challenges in your personas, or create specific user stories focused on accessibility. This not only keeps your design empathetic but also ensures that everyone on your team is tuned into the diverse needs of your users.
Now, let’s take a hands-on approach to understanding the user experience. Encourage your team to step into the shoes of someone using assistive technology. It’s not about just knowing the tools exist; it’s about feeling the difference. Here are a few exercises to consider:
Keyboard-Only Navigation
Ask each team member to turn off their mouse and trackpad. Challenge them to navigate the product using only their keyboard. This simple task sheds light on the importance of keyboard accessibility.
Simulate Colour Blindness
Explore your site without colour by enabling the grayscale option in System Preferences > Accessibility > Display. This simulates color blindness and emphasizes the need for designs that are inclusive for all.
Empathy Prompts
Find an appropriate empathy prompt and guide your team through it. This could be a powerful tool to foster understanding and empathy towards users facing accessibility challenges.
When feasible, involve users with disabilities directly in your research. During usability testing, allow them to use their own equipment with personalized settings. This not only ensures a realistic testing environment but also highlights the importance of accommodating diverse needs.
Crafting Thoughtful Navigation for Everyone
Have you ever thought about how your design welcomes users who navigate using keyboards or other assistive technologies? It’s crucial to ensure that your wireframes or design mockups consider a logical tab order, creating a seamless experience for everyone.
Why does this matter? Well, meet Maria. She has tendonitis and relies on the keyboard to surf the web. However, when the focus jumps randomly around the page, she gets disoriented. To make her — and others’ — experience smoother, here are some key considerations:
Tabbing Through Elements
Users like Maria should be able to use the tab key to navigate to every interactive element on your page. It’s like unlocking a door to accessibility.
Activation of Links and Buttons
For links, users should activate them with the enter key, and for buttons, both the spacebar and the enter key should be options. It’s about offering multiple paths for interaction.
Logical Tab Order
Imagine tabbing through interactive items in a logical order, typically from left to right and top to bottom. In straightforward layouts, this order might be obvious, but in complex designs, it’s worth identifying the tab order in your wireframes or mockups.
Visible Focus State
Each interactive element should have a visible focus state. Collaborate with your visual designer to ensure these states are not just functional but also blend seamlessly with the overall design.
To make this more tangible, let’s look at the references in WCAG 2.0:
- 1.3.2 Meaningful Sequence: Ensure that the sequence of interactive elements is meaningful, providing a clear and logical path for users.
- 2.4.3 Focus Order: Keep the focus order predictable and user-friendly, minimising confusion during navigation.
- 2.4.7 Focus Visible: Make the focus state of interactive elements visible, creating a clear indication of where a user is on the page.
Guiding Focus for a Seamless Experience
Ever wondered if your design seamlessly guides focus for all users, especially those relying on screen readers? Consider Jiang, who is blind and uses a screen reader to navigate the web. When a modal pops up without receiving focus, he may not even be aware it’s there. To address this and create an inclusive experience, here are some crucial steps to take:
Identifying Interactions
Collaborate with your front-end designer to pinpoint interactions on the page that either require JavaScript or can’t be built using default HTML elements. These could be elements like modals, sliders, or other dynamic components.
Intentional Focus Design
Once identified, intentionally design how focus should flow through these interactions. This involves working out a logical order for focus to move through interactive elements, ensuring a smooth and comprehensible experience for users like Jiang.
By taking these steps, you not only enhance the accessibility of your design but also ensure that all users, regardless of their abilities, can navigate your digital space seamlessly.
Now, let’s connect these steps with the relevant references in WCAG 2.0:
- 2.4.3 Focus Order: This guideline emphasises maintaining a logical focus order, ensuring that interactive elements are navigated in a meaningful sequence.
- 2.4.7 Focus Visible: Make sure that the focus state of interactive elements is visible. This is crucial for users who rely on screen readers to be aware of the current focus and navigate effectively.
- 3.2.1 On Focus: This guideline stresses the importance of providing additional information or functionality when an interactive element receives focus. It’s about enriching the user experience based on where the user is directing their attention.
Empowering Navigation for All Users
Ever thought about making your design a breeze to navigate for screen reader and keyboard users? Meet Rasheed, who is blind and relies on a screen reader to explore the web. He uses landmark elements to swiftly move through different sections of a webpage. To enhance his — and others’ — experience, here are some actionable steps to consider:
Identifying Landmark Elements
- Collaborate with your front-end designer to identify basic landmark elements in your wireframes, especially for complex layouts. Landmark elements can be recognised through HTML5 semantic markers or ARIA roles when HTML falls short. You don’t need to be an expert, just familiarise yourself with the basics:
headernavmainfootersearchform
Skip to Main Content Link
Include a “Skip to main content” link before the header for keyboard users. Since keyboard users can’t benefit from landmark navigation, a skip link helps them swiftly navigate. This link can be visually hidden but should become visible when it gains focus.
By taking these steps, you not only facilitate navigation for users like Rasheed but also create a more inclusive and efficient user experience for everyone.
Now, let’s align these steps with relevant references in WCAG 2.0:
- 1.3.1 Info and Relationships: This guideline emphasises the importance of conveying information and relationships clearly. Landmark elements play a crucial role in organizing information on a webpage.
- 2.4.1 Bypass Blocks: Including a “Skip to main content” link aligns with this guideline, allowing keyboard users to bypass repetitive blocks and access the core content directly.
Creating Forms for Inclusive Understanding
Have you considered whether all users, including those facing challenges like short-term memory loss, can effortlessly understand and fill out forms? Let’s take Esther, who is beginning to show signs of dementia, as a case in point. She relies on context clues and visible instructions to navigate the screen and retain her place. To make the form-filling experience more accessible, here are some practical steps:
Descriptive Labels
Ensure all form inputs have descriptive labels that remain visible even after a field has been filled in. This not only aids users with cognitive challenges like Esther but benefits everyone by providing clear context.
HTML Form Elements
Use HTML form elements whenever possible and rigorously test any custom interactions for compatibility with screen readers and keyboard-only navigation. This ensures that your forms are universally accessible.
Visual Accessibility Testing
Gain insights into the user experience of individuals who rely on screen magnifiers. Try using a straw or create a narrow window with your fist, scanning vertically but not horizontally. This technique helps identify if content is hidden from users using screen magnifiers.
Minimise Overwhelming Content
Minimise the number of responses displayed on a single page, but provide context clues throughout. This is particularly beneficial for individuals who might easily lose their place, like Esther.
To guide these steps, let’s refer to the relevant references in WCAG 2.0:
- 1.1.1 Non-text Content: Ensure that non-text content, such as form elements, is presented in a way that is programmatically determined, allowing assistive technologies to interpret it.
- 1.3.1 Info and Relationships: This guideline emphasises clear communication of information and relationships. Descriptive labels contribute to a more comprehensible form structure.
- 3.2.1 On Focus: Enhance the form’s usability by providing additional information or context when an element receives focus, catering to users who rely on keyboard navigation.
- 3.3.2 Labels or Instructions: Clearly provide labels or instructions for user input, aiding individuals like Esther who need additional guidance to complete the form accurately.
- 4.1.2 Name, Role, Value: Ensure that form elements are programmatically determined and convey the necessary information, allowing assistive technologies to interact effectively with the form.
Enhancing Image Accessibility in Your Designs
Have you thought about how images in your mockups are experienced by users like Carmen, who might face challenges if certain images don’t load properly? Let’s explore some key steps to ensure meaningful and decorative images are treated appropriately:
Identifying Decorative Images
Collaborate with your front-end developer to identify purely decorative images. Ensure these images are coded correctly so that they are not announced by screen readers, preventing unnecessary information overload for users like Carmen.
Providing Alt Text for Meaningful Images
For images that convey meaning, include alt text and, if necessary, a longer description. Team up with your content designer to craft descriptive alt text that enhances the understanding of the image’s significance.
Ensuring Readability in Images of Text
Verify that any text embedded in images is at least 14 points and has good contrast. This ensures that the text is legible and provides an accessible reading experience for all users.
Now, let’s align these steps with relevant WCAG 2.0 references:
- 1.1 Text Alternatives (Guideline): This overarching guideline emphasises the importance of providing text alternatives for non-text content, ensuring that the information is accessible to everyone.
- 1.1.1 Non-text Content: Ensure that non-text content, including decorative images, is presented in a way that is programmatically determined, allowing assistive technologies to interpret it.
- 1.4.5 Images of Text: Be cautious with images of text; if text is part of an image, it should meet specific criteria for readability and contrast, ensuring it is accessible to users with various visual needs.
Optimising Touch Targets for Enhanced Accessibility
Have you considered the accessibility of touch targets in your design, especially for users like Harold who may have larger hands due to gigantism. Ensuring that touch targets are large enough and easy to reach is vital for an inclusive user experience. Here are some practical steps to take:
Ease of Reach
Ensure that primary actions are easily reachable with both right and left thumbs, accommodating users on larger phones. Placing important items at the bottom of the screen tends to make them more accessible.
Minimum Size Standards
Make touch targets at least 44 px or 10 mm. This size allows the target to be tapped by the average adult finger pad, which measures 10 mm. Collaborate with your developer to extend padding beyond the icon if needed. Pay attention to how line-height can affect the overall touch target size.
By following these steps, you not only enhance accessibility for users like Harold but also create a more user-friendly design for everyone.
Here are some resources to guide you further:
- WCAG 2.1–2.5.5 Touch Target: This specific guideline emphasises the importance of ensuring that touch targets are of sufficient size to be easily activated.
- Mobile Accessibility Guidelines — 3.2 Touch Target Size and Spacing: Explore how WCAG 2.0 and other W3C/WAI guidelines apply to mobile design, particularly focusing on touch target size.
- Mobile Accessibility Guidelines — 3.5 Placing Buttons: Learn about the significance of placing buttons where they are easy to access on mobile devices, contributing to a more accessible and user-friendly interface.
