One of the biggest challenges web designers and content creators face when working to resolve accessibility issues is trying to squeeze accessible solutions back into an otherwise finished design. A much easier, and of course accessible, approach is to consider people with disabilities in the design from the beginning — but asking someone to do this and guiding them on how with actionable ideas are very different things, as it isn't always easy or intuitive.
Tips for a smoother, more accessible design approach
1. If you use personas or do user testing, include people with disabilities
Some design and user experience (UX) teams map out personas or do user research and testing on just about everything, and some find little use for them or are constrained by budgets and timelines. If you do make use of these things, aim for diversity and make sure that includes people with disabilities.
In the case of personas, the exercise of detailing a user's unique qualities can help you ask questions and consider things about your users you otherwise wouldn't. In user testing, observing and asking questions can help you identify accessibility gaps you might have missed.
2. Limit designing for and talking about the ideal user
A common misstep some designers make is generating an idea of the perfect, ideal user for their product. The issue then becomes the reality that the supposed ideal user is less common than they might think and that designing for this segment tends to introduce additional accessibility barriers.
For example, does the ideal user include the roughly 48 million people in the United States that report some degree of hearing loss or the 7 million people that report having a visual disability? Probably not.
3. Design for desktop and mobile
Whether or not a website is intended to be used on various device types and sizes, it will be. End users, including those with disabilities, will be better-served when designs account for multiple breakpoints and fully consider the desktop and mobile experiences.
- The Definitive Checklist for Mobile Accessibility
- Don't Overlook iOS and Android Testing for Accessibility
4. Choose a color palette with enough accessible color combinations
Colors are a big part of branding and web design. They're also incredibly important for accessibility, as the contrast between content and its background determines whether or not most people can read it.
A big challenge designers are often faced with is trying to choose on-brand color combinations that have sufficient contrast when the palette their choosing from is limited in that way. Get ahead of this problem by having plenty of agreed-upon colors for designers to use that meet color contrast guidelines.
5. Consider keyboard accessibility from the beginning
You spent time, money, and creativity on building a cool interactive tool that people can operate with a mouse. It's gone through rounds of reviews and approvals, and everyone from senior management down loves it. Then, you find out it doesn't work well with a keyboard and you've got to find a way to make that happen.
Save the time and aggravation and consider keyboard accessibility first. Struggling to make the experience work for everyone or having to change or lessen the intended experience to make it more accessible are terribly frustrating options. Throughout the process, have a plan for exactly how keyboard users will be able to do the same things and mouse users.
Related: Give Yourself an Accessibility Test: Don't Use a Mouse
6. Build text alternatives into your design
What form this ultimately takes will depend on the type of content you're developing and how you choose to care for alt text, but the concept remains true. Having alt text as part of the intended design and not a forced-in afterthought can transform it from a reluctant must-have to a thoughtful part of a beautiful website.
Elements like a link or button for text transcripts, an accessible text version of a large infographic, and textual summaries of complex graphs may be needed for accessibility, so get ahead of it and feature them as important pieces throughout the design phase.
7. Identify heading structure from the beginning
As content is designed and reviewed, and especially when it gets turned over to a developer, clearly label heading elements and their structure. Consider global or shared components so the headings make sense are well-structured and nested across the site.
Remember, headings are primarily navigational elements, not stylistic elements, so get ahead of inconsistencies and accessibility challenges by considering heading structure throughout. This can be especially helpful for catching technical limitations, like how headings might get automatically styled in a certain content management system (CMS), and ensuring the design matches the final product.
8. Build clear, visible labels into the design
Controls and forms need to be clearly identified and placeholder text usually doesn't cut it. Upon an accessibility review or as a result of an accessibility complaint, you might become aware of instances where those labels are falling short.
Often with the accessibility of labels, the conversation goes toward making sure controls and forms have accessible labels available to assistive technology, but all users benefits from clear labels. Instead of forcing them into the design after, build sufficient labels right into it.
Is this content helpful?
We're always publishing content intended to further our mission of making the internet accessible to everyone. If you found this helpful, be sure to subscribe to our blog and newsletter to receive all the latest.
Looking for help with your accessibility initiatives?
Contact us to talk about an accessibility compliance strategy for your organization or get started with a free website accessibility scan.
