There’s a misunderstanding that accessible design is inherently unattractive. However, accessibility and aesthetics are not mutually exclusive; achieving both is possible with thoughtful design.
Let's look at some of the key elements that cross paths that lead to this misunderstanding and see how the two can work together.
Key Considerations for Balancing Accessibility and Aesthetics
Layout and Structure
A clean, simple layout leads to exceptional user experiences. Along with that is a well-defined page structure with clear headings, concise content, and logical navigation.
Aesthetics: A grid layout with appropriate white space and bold, easy-to-see navigation elements will create a visually appealing, easy-to-navigate page design.
Accessibility: Web pages use page regions or landmarks to organize their content. Ensure you have the four key page regions, <header>, <nav>, <main>, and <footer>, to help people using assistive technologies like screen readers understand the page layout and jump to specific sections quickly.
Images
Aesthetics: Use high-quality, impactful images that compliment your website and its mission / intention. Make sure to choose the proper file format - whether an icon, simple image, or hi-rez photograph - to ensure a consistent user experience, no matter what device they are using.
Accessibility: Proper ALT text is a must for all non-decorative images. All relevant images must have ALT text. The details will vary based on their specific context. To be truly effective, those details may include characteristics like skin tone, race, ethnicity, or disability.
Color Contrast & Colorblind Access
Aesthetics: A striking visual design can be created by using proper, high-contrast colors and large, accessible fonts. Add clear navigational elements, and you create a website that is usable and accessible for everyone. To enhance that accessibility, choose accessible color palettes for "color combinations your whole audience can appreciate."
Accessibility: Design text with sufficient contrast against its background to ensure readability for people with moderately low vision. And remember, the contrast requirements for text also apply to images of text.
Typography & Readability
Aesthetics: Use no more than three fonts, considering each's impact on the site's look and feel. And always choose accessible fonts to improve readability for people with visual impairments, such as dyslexia or low vision, reduce eye strain, and make reading and understanding written content easier. Some good choices include Verdana (sans serif), Tahoma (sans serif), Arial (sans serif), and Georgia (serif).
Accessibility: Font size, family, and spacing are crucial for accessibility because they directly impact the readability of your text for people with visual impairments or other disabilities.
In addition, the words you choose to put on your website significantly impact the readability of your content. Many people with cognitive or learning disabilities have difficulty reading words and sentences. The W3C's "Technique G153: Making the text easier to read" provides tips and recommendations to help you reduce the difficulty of your text. Here are just a few from that list, but I highly recommend reading the entire recommendation.
Use the active voice, use names and labels consistently, use sentences that are no longer than 25 words if written in English, and use bulleted or numbered lists instead of paragraphs that contain long series of words or phrases separated by commas.
And by the way, if you are a DubBot user, you have access to a list of readability testing results within your account.
One final suggestion to help you find a balance between accessibility and aesthetics: Make accessibility part of every design project from the beginning. Design with accessibility in mind. This approach is known as Shifting Left. The goal of Shifting Left is to integrate accessibility best practices and compliance into your projects from the very beginning. Identifying and remediating accessibility issues early in the process saves time and money and reduces the risk of compliance issues.
It's a win-win!
Resources