Accessible design quick wins for your audience—and for your brand
5 digital design elements to improve accessibility
When we think about accessibility, we might conjure up images of entrances without ramps, elevators without braille signage, or conspicuously absent assistive listening devices in public venues. These are tangible examples of things that impair our ability to move through the ‘real’ world. But what about the virtual world?
So many processes, transactions, and interactions have moved online, from small stuff like booking a dinner reservation to the essential—like banking and education. Being unable to participate in online spaces is debilitating to quality of life and independence.
Designing for accessibility encompasses all of the abilities we use to consume digital content: from seeing, hearing, and processing the content cognitively, to the motor function we need to navigate our devices. Challenges in any of these areas can make it difficult or impossible to interact with online material designed with a neurotypical and able-bodied person in mind.
As small business owners ourselves, we can appreciate that considering accessibility beyond your legal responsibility might not be top of your long list of priorities. But here's the thing—accessible design is good business, not just good practice. When you design for accessibility, you're creating a better experience for everyone, not just those with disabilities.
In the spirit of progress, not perfection, we're sharing some web design elements that you can easily adapt to improve the accessibility of your digital spaces.
Colours
Problem
Life is nuanced and complex, but when it comes to accessible colours, it's black and white! Low-contrast designs are more difficult to read, especially for anyone with visual impairments or colour blindness.They can cause eye strain and headaches and impact the legibility of the design. Another design faux-pas affecting our colourblind friends is the use of colour as the sole way to convey information like error messages or important notifications like "purchase successful."
Solution
Design is all about balance, and that applies to colours as well. A good rule of thumb is to aim for a tonal contrast ratio of at least 4.5:1 between text and its background. We love using the Colour Contrast Checker plug-in for Chrome to check and adjust our colour contrast ratios. Additionally, be sure to provide text or symbols in addition to colours to convey information, especially when it's crucial.
Online Forms
Problem
Paperwork is irksome in print, and can be even more so when it comes to poorly designed online forms. When online forms lack appropriately labeled fields or don't provide error messages that are easy to understand, they can become a challenge for any user, but especially so for people who rely on screen readers.
Solution
Keep forms short, straightforward, and easy to navigate for all users. Providing dynamic text resizing, prominent instructions and clear error messages are ways to make the form more accessible visually. Providing sound and haptic feedback to the form can help support the visuals and logic of the page. Ensure compatibility with screen readers like TalkBack and VoiceOver, and design layouts that minimize hand reach, especially for mobile users. By making these adjustments, you help all your users have a more seamless experience, leading to higher completion rates and less angry support emails from frustrated filler-outers.
User Experience (UX)
Problem
Sometimes UX design is guilty of sacrificing actual usability for the sake of looking sleek and cool. Complex navigation structures, distracting motion graphics and inconsistent layouts add to the user’s cognitive load. We all have a finite amount of new information we can process, memorize and recall at any given time. For some, bad UX is an annoyance, for others it could make it impossible for them to understand and interact with the material.
Solution
Keep it simple! When designing your website, prioritize usability over aesthetics. Make sure your layout has content broken up into digestible sections with meaningful headings and a consistent hierarchy. This improves scannability for the eye and makes it easier for screen readers to comprehend the content. Visually, a grid structure of imagery helps to add visual predictability and reduce cognitive load. Besides improving accessibility, these changes reduce bounce rates and encourage users to spend more time on your site. This means more opportunities for them to engage with your content and potentially convert into customers.
Typography
Problem
Can we pick up what you’re putting down? If your fonts are complicated, or overly varied, and your type is too small or thin—we’re not going to be able to read it, Mary. Some fonts may have low contrast between the characters and the background, making it challenging for individuals with low vision to distinguish the text.
Solution
To ensure AODA compliance, use simple, easy-to-read fonts with good contrast, legibility, and scalability. Sans-serif fonts like Arial or Helvetica are often preferred for digital content due to their clarity and accessibility features. Boring, right— but familiarity with a font is the single most important factor in making a font legible and readable for all. Avoid display, and script fonts, which have variations in letterforms and ligatures, making screen reading technology struggle to accurately interpret and vocalize the text. Well-designed typography ensures that your content is inclusive, readable, and navigable by a diverse range of users, regardless of their abilities or disabilities.
Leveraging these accessible design principles isn't merely about ticking off compliance boxes or avoiding litigation – it's about recognizing the inherent value in every visitor to your site. It's a power move, a declaration that your business champions inclusivity and refuses to sideline potential customers. Embrace these adjustments as opportunities rather than obligations, and watch as they pay dividends not just in karma, but in business returns.
CAPTCHAs
Problem
Okay, but is there a motorcycle in that image? CAPTCHAs are designed to stop bots from infiltrating websites, but they seem to have a talent for keeping out humans too. Talk about overachievers! For people with visual impairments or cognitive disabilities, deciphering distorted text or identifying objects in images can be nearly impossible, creating barriers to access.
Solution
The good news is we can prove we're not robots without having to prove we're superheroes! You can make CAPTCHAs easier on the eyes by offering the option to enlarge the image, or offer audio examples where the image is described aloud to the user. Another option is to allow the user to verify their identity through phone, email or social media verification.