7 Great Tips for Inclusive Web Design

Tips for Inclusive Web Design 

1.) Define accessibility

Although accessibility and inclusive design are often referenced interchangeably, there is actually a distinction that can have consequences if you don’t understand the difference. Accessible design is all about removing obstacles, so all users are able to use the apps and websites we design. 

Larger font sizes obviously help with the obstacle of reading text, so the solution most of the time is to enable users to switch over to an alternative accessibility mode or create a more accessible but separate version of the website. Unfortunately, this completely blurs the line between accessible and inaccessible (because visually impaired users still must locate the more accessible site) and causes the website to not be inclusive. Disabled users are segregated and made to feel different, but this also means you have to design and develop two versions of the site, wasting additional time and money.

Instead, designing one, more inclusive interface where the font is larger for everyone is the best solution. And after all, even those who are visually impaired will enjoy being able to read the text easier. Inclusive design is great for both disabled and non-disabled people. Inclusive design also doesn’t take away the experience of those who aren’t disabled; most of the accessibility rules defined by the Web Content Accessibility Guidelines (WCAG) also double as usability tips that all users will benefit from.

2.) Simplify Language

When it comes to written text, there is a lot to consider if you want to create experiences that cater to everyone. There’s the simplicity of the actual words (which could affect users with reading difficulties), the typography (which could affect visually impaired users), and consistency (which could affect cognitively disabled users.) And as we mentioned before, the suboptimal design also affects those who aren’t disabled. 

Improve Typography and Readability

• Align text to only the left or right
• Underline links for visual contrast
• Enforce line spacing, which should be at least 1.5x the font size
• Paragraph spacing: at least 1.5x the line spacing
• No more than 80 characters for a paragraph width

Reducing Cognitive Load

• Use simple language
• Define abbreviations during the first use
• Describe link text effectively 
• March identical URLs with identical text
• Structure content logically with clearly worded headings

3.) Optimize Color Contrast

Color contrast is the measurement of how well the colors of two design elements distinguish from each other. The unit of measurement is a ratio, and there is a minimum ratio you want to aim for when working with color contrast. Assuming that different design elements meet the minimum color contrast ratio defined by the WCAG, we are enabling readability for visually impaired users and boosting it for those who aren’t. This is just one of the ways we can design inclusively with almost no extra effort. 

The minimum ratio we need to aim for depends on the element itself. For example, whether or not it is an important element like an icon or form field, or if it is a text element, whether the font is too big or small, as even before messing with contrast, larger fonts are more readable. 

The WCAG can give you all the color contrast ratio requirements for an inclusive site. 

4.) Help Users Correct Mistakes

Everybody makes mistakes, and unfortunately, they usually result in a cloud of confusion, especially if the user doesn’t know what they did or how to fix it. Mistakes are totally inevitable, especially for modern-day users that rush to engage with interfaces. Helping users, whether they are disabled or not, is vital to ensuring inclusivity. 

Naturally, it is most common to make a mistake when filling out a form and is usually a result of a variety of disabilities. For example, having trouble understanding due to a cognitive disability or incorrect data input due to a motor disability. So if you can fix the user’s issue programmatically, then the crisis is averted! In action, this could look like adding HTTPS:// to a user’s URL submission instead of forcing the user to correct it themselves. 

Check out these other tips for reducing form errors:

• Use form labels to describe input fields
• Use placeholders to show examples of an acceptable input
• Enable autocomplete and autofill to reduce typing requirements

How to help users fix errors:

• Display form errors in realtime
• Have the user verify their input prior to submission
• Don’t make the user feel stupid

5.) Utilize “Skip to Main Content” 

You’ve most likely never heard of the “skip-to-main-content” feature due to its obscure nature. This feature is aimed at those who navigate with screen readers. Screen readers, or those who navigate UIs using their keyboard, use the tab button to navigate through tap targets. If you’re not disabled, you have probably experienced this also when tabbing through form fields on a desktop browser since many find it much easier than clicking. 

Skip-to-main-content is an accessibility enhancement to help users escape repetitiveness by bypassing the main navigation. The first tab item is a link that skips right to the main content. Most users have never seen this because the link is only displayed once tabbed. 

You should also visually indicate which element is currently focused since the tab index may shift to an unexpected location since screen readers and tab indexes read from top to bottom. When tabbing through the tap targets, the :focus state is triggered. This way, the browser knows to style the element automatically. 

6.) Don’t Create Pressure

Nobody likes to be pressured, and for those with motor or cognitive disabilities, pressure can also be anxiety-inducing. Interfaces are becoming more and more dynamic, but sadly, many dynamic experiences are due to designers trying to make more imaginative UIs at the expense of usability. For an inclusive web design, remove unnecessary dynamic elements and simplify the layout. 

This includes distracting animations, popups, carousels, etc.

However, if you do need these elements, there are ways to make them accessible and inclusive. Firstly, there needs to be an added level of control for auto-playing media. For those with cognitive disabilities, this type of media could add extra cognitive load making it uncomfortable for the user. As defined by the WCAG 2.0, if media runs for more than three seconds, it should be controllable. In addition, Anything that scrolls, blinks, or moves automatically should also be controllable if lasting for more than five seconds.  

In general, unexpected movement and media is disliked by users, so it’s best to avoid it. A similar rule also applies to elements that flash more than three times per second. Users should be able to limit the frequency of chat messages, alerts, reminders, newsfeeds, etc., to allow themselves more time to read and fully understand what is being communicated. It’s also advised to let the user easily dismiss alerts or visual obstructions with the ESC key. 

However, sometimes pressure to complete a task is unavoidable. For example, banking interfaces need to timeout for security reasons. In this case, users that need more time should be offered the chance to do so to let the interface know the user hasn’t abandoned the page.

New Target Creates Inclusive Solutions

Designing for accessibility and inclusivity means that every digital solution your team creates should provide a seamless user experience to every single user, whether they are disabled or not. These tips will get you closer to 100% inclusivity, resulting in increased page visits and overall more conversions. 

At New target, we believe every website should be intuitive for everyone, including users with auditory, physical, cognitive, speech, and visual disabilities. Our creative team will work with you to maximize the usage of your site through UX research, usability, and accessibility testing. Contact us today to get started!