30 Helpful Resources for Improving Mobile and Web Accessibility
Creating accessible apps and websites is everyone’s responsibility, from designers and content strategists to developers and testers. Adopting accessibility practices into your workflow will make accessibility an inherent part of your process, no matter your role, and ultimately lead to a better product.
To help you create apps and sites that everyone can use, we collected some accessibility resources for designers, iOS developers, and web developers. This compilation of articles, apps, tools, and tutorials isn’t exhaustive, but each resource has helped guide our own accessibility practices.
Design Resources
Smart Strategies for Designing Accessible Apps and Websites
In this article, our team shares some specific things that you can do to design a better app or website experience for a wider community of users.
Color Safe: Accessible Web Color Combinations
To help designers meet web accessibility standards for color, UX Engineer Donielle Berg and Product Designer Adrian Rapp created a web app called Color Safe. It’s a great tool for building accessible color palettes. Read more about the inspiration behind Color Safe and how it works.
Check My Colours
If you have an existing website and you’d like to see if it meets standard requirements for color and contrast, Check My Colours is a free online tool that can provide you with a detailed analysis of the site’s elements.
Why Designing Accessible Websites Benefits Your Company and All Its Users
In this article, UX Alpaca explores how designing with accessibility in mind not only improves usability, it increases traffic and a business’ profits.
7 Things Every Designer Needs to Know About Accessibility
This article by Jesse Hausler, principal accessibility specialist at Salesforce, has some basic accessibility standards for designers based on Section 508 rules and the Web Content Accessibility Guidelines.
Dos and Don’ts on Designing for Accessibility
The accessibility team at the British government’s Home Office Digital group created some posters explaining what to do and what to avoid when designing for users with vision and auditory impairments, dyslexia, motor disabilities, and those on the autism spectrum.
Inclusive Design: Empathy Maker
This accessible persona generator by Front-end Designer Maya Benari presents unique disabilities within some physical contexts (e.g., Jesse has an arm injury and is in the car). Using the tool during the design process can help you consider different challenges that may arise while interacting with your product.
Inclusive Design Tips: Presenting Information in Multiple Ways
Deque Systems, creator of accessibility software for web and mobile apps, offers advice on presenting app and website information in multiple formats so that you don’t leave anyone out.
Accessibility Whack-A-Mole
Sometimes designs that accommodate one user group alienate another user group. Designer Eleanor Ratliff wrote about how she reconciled this issue in terms of dyslexia and typeface.
We Need to Talk About Accessibility on Chatbots
“If we want chatbots to be used by billions of people around the world, we need to make them accessible for everyone,” says UX and Chatbot Designer Caio Calado. So how do blind and vision-impaired users interact with chatbots? Calado sets out to find the answer in this article.
iOS Resources
Accessibility Programming Guide for iOS
If you’re an iOS developer who is new to accessibility, this guide is a good place to start. Apple covers everything from understanding how accessibility works on iOS to building accessible iOS apps.
What’s New in Accessibility
This WWDC 2016 session shows off the latest accessibility features for iOS and explores how to incorporate them into your apps.
UIAccessibility
NSHipster’s article offers an easy-to-digest overview of UIAccessibility and its properties.
iOS Accessibility: Lessons We’ve Learned on Building Apps for a Wider Audience
In this article, our developers share some valuable tips and tricks for developing iOS apps using accessibility standards.
Deque University for iOS
This iOS app demonstrates challenges faced by VoiceOver users and how to address a variety of issues.
How to Make VoiceOver More Friendly in Your iOS App
Black Pixel Senior Developer Kellen Styler shows how to create a better VoiceOver experience by grouping accessibility items in complex views and making VoiceOver sound more human.
iOS Accessibility Tutorial: Getting Started
In this tutorial, iOS Developer Ray Wenderlich walks through how to make an accessible iOS app from start to finish.
Supporting Accessibility: Larger Text in iOS
Stable Kernel Software Engineer Jesse Black wrote an article on some initial concerns with supporting larger text in iOS and how he addresses them.
Auditing Your Apps for Accessibility
Get to know the Accessibility Inspector and optimize your app for accessibility with help from this WWDC 2016 session.
Keeping the Lyft iOS App Accessible
The folks at Lyft feel that their app is particularly impactful for those who are vision impaired, because it’s easier to use than taking a bus or train. Check out this article to learn how they approach accessibility in their app.
Web Resources
WCAG 2.0
The Web Content Accessibility Guidelines, or WCAG, were created to help web developers and designers create accessible web content for everyone, including those with disabilities.
WAI-ARIA Authoring Practices
The Web Accessibility Initiative — Accessible Rich Internet Applications, more simply referred to as WAI-ARIA, aims to help you create web content for those using assistive technologies, like screen readers. This set of best practices shows you how to make widgets, navigation, and behaviors accessible using WAI-ARIA roles, states, and properties.
Periodic Table of ARIA 1.0 Roles
This tool is handy for developers who want to look up ARIA roles at a glance. Click on a role to get more information quickly.
The A11y Project
The Accessibility Project helps front-end developers tackle the complex topic of accessibility and implement the most up-to-date accessibility standards in their work. Don’t miss the project’s Web Accessibility Checklist tool for more guidance on how to make your site easier to navigate using assistive technologies.
HTML5 Accessibility
This site is useful for testing which new HTML5 features are accessibly supported by major browsers and won’t require additional work to make them usable by assistive technologies.
React A11y
Our Web Services team uses React and this run-time analysis tool comes in handy for identifying accessibility issues in our React elements.
A11ycasts
Developer Advocate Rob Dodson created these video tutorials to teach developers how accessibility works and demonstrate solutions to real-world accessibility problems.
tota11y: An Accessibility Visualization Toolkit
With the goal of reducing any friction that may come with accessibility testing, Khan Academy developed this toolkit. It shows you how your site performs with assistive technologies, uncovers issues, and helps you fix them through best practices.
Testing With Screen Readers
WebAIM put together a Q&A to help you understand how the vision impaired or those who have trouble reading print might experience your website.
I Thought Title Text Improved Accessibility. I Was Wrong.
If you think that including a title attribute to describe a link is helpful, think again. In this article, Front-end Developer David Ball explains why this practice could actually be making your site less accessible.
There’s a wealth of information on accessibility out there, but these resources in particular received our team’s stamp of approval. Share your favorite resources with us in the comments and follow us on Twitter for more accessibility insights.
For more insights on design and development, subscribe to BPXL Craft and follow Black Pixel on Twitter.
Black Pixel is a creative digital products agency. Learn more at blackpixel.com.
