Accessible design is easier than you think
Easy-to-follow guidelines can make accessibility part of your everyday design process
As a designer with deuteranomaly (red-green color blindness), my desire to make design accessible started long ago. I don’t see colors the same way you do; they may appear in a different shade, and it can be tricky when designing. I also have friends and family members with disabilities, and I learned that interacting with digital products is a real challenge for them. My life experiences and social interactions made me want to do better by applying my skills to create an accessible design while reaching out to more users, inspiring others to care as well.
So, here I am, working at Pinterest as a Product Designer (Design Systems), advocating for accessibility, and doing my best, ensuring that everyone has the same experience when interacting with our products, no matter their background, knowledge base, or ability.
Accessibility design brings your work to more people
According to the WHO (World Health Organization) in their World Report on Disability, estimated that 15% of the global population lives with some form of disability. Of these, 2 to 4% experience significant difficulties.
The Business Case for Digital Accessibility states that creating accessible products drives innovation, enhances the brand, reaches out to a bigger audience, increases downloads, and minimizes legal risks.
Besides helping your products meet level AA or AAA of WCAG 2.1 (Web Content Accessibility Guidelines), applying accessibility standards also support solutions for the most used assistive technologies. Think about users who rely on screen readers, different types of keyboards, screen magnifiers, and speech tools. Making a product accessible means making it more usable and reachable. It is a win!
In general, designing accessible products doesn’t delay deliveries or impact team performance; instead, it helps the engineering team implement significant accessibility standards in the earliest stages, encouraging good coding practices. Fixing an inaccessible product later may require extra effort, time and impact the business plans and deliverables.
I want to share easy-to-follow WCAG 2.1 design guidelines I use in my daily design process when evaluating accessibility in my projects. I organized these guidelines by each disability type to simplify understanding and help you reach out to more users by considering accessibility. In addition, they are easy to fit in your design process bandwidth.
In general, designing accessible products doesn’t delay deliveries or impact team performance; instead, it helps the engineering team implement significant accessibility standards in the earliest stages, encouraging good coding practices.
Your practical easy-to-follow guidelines
Visual disability
- Adopt a minimum text size: WCAG 2.1 advises using text no smaller than 16pt.
- Add Alt tags + captions: Make sure to add descriptive text for screen readers. Learn more about text alternatives.
- Ensure enough contrast: Ensure the colors and font weights and sizes have a contrast ratio of at least 4.5:1. I recommend using a tool like aremycolorsaccessible.com to evaluate the foreground color in relationship with the background color or Able plugin (on Figma) to check color contrast in your designs.
- Create a clear hierarchy: Create predictable layouts and section headings to create a semantic structure. Screen reader users can quickly navigate an entire page by analyzing the headings.
- Don’t solely rely on color to convey information: Besides colors, add text or icons to support your use case. Color-only variations do not work well for those who may be color blind or have vision impairments.
- Account for zooming: Make sure designs can scale when users increase page element sizes. For example, does your design still work when zoomed in 200%?
Hearing disability
- Provide text transcripts: Any media that plays a sound should have a transcript available to users. While WCAG requires captions and audio descriptions for pre-recorded content, including a transcript is strongly advised.
- Add haptic feedback: Pair audio with another form of feedback. If possible, utilize haptic technology to provide feedback instead of only relying on sound; it simulates the sense of touch and makes a huge difference for people with hearing disabilities.
Cognitive disability
- Avoid cluttered design: Focus on specific tasks instead of presenting long flows. When possible, aim for clear and straightforward tasks as several people have intensified sensory awareness and can be overwhelmed by cluttered pages/screens.
- Create focus states: Provide focus states for all interactive elements and text on the page. Make sure to consider users relying on keyboard navigation.
- Come up with multiple ways to communicate: Illustrations, iconography, audio, and video paired with content raise accessibility for people with cognitive disabilities.
- Write text as simple as possible: Provide definitions for specific terminologies, such as idioms, dialects, and acronyms. Pay attention to grammar and spelling. People with cognitive disabilities can fixate on things they don’t understand and lose focus.
- Refrain from doing page refresh and temporary messages: Avoid automatic refreshes and displaying temporary messages that will disappear whenever possible. It can be difficult for users to access or remember since it might appear outside the proximity of the user’s current focus.
Physical disability
- Give alternatives to skip links: Provide a way for skipping over long lists or long content. Some users cannot reach the keyboard or mouse, so they could use voice controls to use your product.
- Clearly communicate error messages: Provide large links and clear messaging to ensure that your pages support users in achieving a task. Make sure to provide clear instructions, especially when asking users to fill out forms. Learn more about error inputs best practices.
- Prioritize content: Avoid long scrolling UIs or swiping, as some people use another part of their body, such as foot, elbow, or mouth, to interact on their device. In addition, long scrolling could be physically and mentally tiring for some.
- Design large tappable areas: It is best to enlarge the most critical interactions. Ensure your touch targets are large enough for people with limited mobility to accomplish a task accurately, especially on mobile.
Keep in mind: This article does not consider the needs of other disabilities not listed above. For more resources and accessibility standards, I invite you to check out WCAG 2.1 Standards.
Want to learn more about accessibility at Pinterest?
At Pinterest, we strive to create an inclusive product that brings inspiration to everyone. Our design system team (Gestalt) made an Accessibility page, which I strongly recommend checking out and bringing the learnings to your team. We also have an Accessibility Design Deck to guide you in creating an accessible design.
Besides that, we have the PinAble community, committed to creating a welcoming, accessible Pinterest experience by ensuring everyone can explore and achieve their full potential no matter their ability.
Designing for accessibility is something that I’m learning every day, and it warms my heart. These guidelines have been a huge support in my journey. I urge you to consider accessibility as part of your design process and inspire others to create a more inclusive world.
Lastly, a big thank YOU for reading this!
To learn more about design and research at Pinterest, check out the rest of Pinterest Design and follow us on Twitter. To view and apply to open opportunities, visit our Careers page.
