Website design: Top 5 tips on how to make your website inclusive and accessible to all
When we talk about inclusive marketing, we aren’t just talking about ad campaigns
Accessible website design is for everyone; this means seamless shopping journeys, easy-to-digest content, and safe browsing for all. Expanding a website’s capacity for diverse user experiences helps attract new users and increases customer loyalty. Brand loyalty’s connection to brand values is especially relevant for younger populations, with 60% of millennials calling themselves "belief-driven buyers," whose shopping behavior is greatly impacted by a brand’s inclusive values and demonstrated practices. But that’s not the only reason why you should integrate accessible design principles into your clients’ websites.
The business benefits of inclusion are crystal clear
Inclusive design means making sure that people with disabilities, both cognitive and physical, can access and navigate your clients’ websites. These practices include proper color contrast, page structure, markups, and alt text that improves the overall user experience. Strong user experiences are shown to increase engagement and conversion rates on a website, as well as reduce bounce and exit rates on pages. The smoother your clients’ user experience, the more likely a user will be to complete the customer journey.
Integrating important design elements into your clients’ websites comes with other benefits, too. An accessible website will allow your clients’ businesses to expand their audience reach and tap into the disability communities’ estimated market value of $8tn. And, your clients will be able to retain these new consumers long-term because they’ll be connected with the brand’s inclusive values, principles, and practices. In-house, your agency’s design and development team's motivation and productivity will thrive because they’ll get a sense of more meaningful, purposeful work that accommodates overlooked communities.
The benefits of inclusive design are hard to beat. To get the most out of the practice, start with this breakdown of design components that contribute to accessible websites:
1) Mind your color contrast
People with low vision or visual disabilities need to be able to distinguish between the foreground elements and background design of your client’s websites. If they can’t, they’re missing out on all of the informative text, clever copy, and engaging imagery being offered. The golden rule of thumb, according to the WCAG, is that your designers need to maintain a 4.5:1 color contrast ratio for normal text under font size 18. If the font size is over 18 (normal) or 14 (bold) the contrast ratio on the website in question should be at least 3:1.
2) Describe with keywords, not just color
People with low vision or colorblindness require more than just color as a visual cue when performing an action or clicking a button that takes them through a journey. For example, to complete a purchase on a website a green-colored button just doesn’t cut it; you need to add a text label like “confirm purchase” so the user can understand what action they’re performing. You don’t need to rely on text alone, though. You can also add a recognizable or popular icon to indicate an action or pop-up error message to make them stand out.
3) Use labels or instructions with form fields and inputs
People who use screen readers often experience barriers to inputting personal information in forms. Normally, hard-to-read placeholder text is used to describe the detail that needs to be filled out in a specific field but this doesn’t bode well for screen readers; when people who use screen readers navigate the form on your client's websites using the Tab key, placeholder text is ignored and the user is left without instruction or understanding of the form’s information requirements. Instead, design forms to have tooltips, field titles, or other label elements that explain what the user should be filling in and where.
4) Don’t forget the alternative text (alt text)
Alternative text is a staple in inclusive design. It ensures that people using screen readers or those with cognitive disabilities can understand what’s happening or portrayed in an image. For anyone using a screen reader, the alternative text that describes an image accurately will be read aloud to the user giving them the full context of the image they’re moving over. For people with cognitive disabilities, images without text can be overwhelming or just simply not straightforward and the extra context delivered by alt text allows them to pause and process the image’s content or meaning slowly.
Alt text should be accurate and concise and must include any written text in the image. Make sure to include the most important details of the image at the beginning of the description, and double-check for spelling or grammar mistakes before embedding alt-text in the image. If your developers are coding an automatic function for alt text that applies itself to a newly uploaded image, make sure they follow these guidelines.
5) Clue into keyboard navigation
People with mobility disabilities use keyboard shortcuts to access, navigate, and perform actions on your clients' websites. Using the tab, arrow, enter, and space bar keys, people with mobility disabilities are able to explore around through a website’s headers and page structure, click on links, fill out forms, and do anything on a website that a mouse can do.
From an inclusive design perspective, it’s your job to make sure that your clients’ websites are compatible with keyboard navigation by ensuring their site’s tab order is logical which will allow a keyboard to navigate around any content seamlessly. In more severe cases, where issues lie within forms or menus, for example, your developers can code custom-made controls, CSS styles, and scripts for additional keyboard compatibility.
An overview of two options for accessible design
Native accessibility is a route that many of your clients might opt for when it comes to making their website accessible and inclusive. This all starts at the source code of a website and allows your developers and designers to maintain manual control over a website’s design with regular remediation and maintenance.
Native accessibility solutions like accessFlow are created to guide and assist your developers with step-by-step workflows that help them provide accessible code as they build or remediate a website. The AI-powered tool has the ability to flag any inaccessible element, such as menus or alt text, that needs to be addressed, allowing the developer to design an inclusive website natively.
Sometimes an agency or its clients choose automated solutions, like accessWidget, to streamline accessibility in a business-friendly way. These tools are scalable and lightweight, so they don’t negatively impact the performance of your clients’ websites or distort design interfaces. They’re able to help websites comply with accessibility regulations, such as the ADA, and in accordance with WCAG 2.1 at the AA level. Ongoing remediation and maintenance is a key feature of some solutions, consistently keeping updated and new content accessible.
Pick a method, then get inclusive
Whether native accessibility or an automated solution is preferred by your client, you have the right options out there to make website design accessible and inclusive. You can start by explaining the business benefits of an inclusive website design to your clients and how the solutions on the market today make it a no-brainer. Inclusive design is the way of the future and you don’t want your clients getting left behind.