Tag: accessibiliyt

(Note: If you’re short on time, click here for the tl:dr summary.)

We take web accessibility seriously here at Kanopi. It’s a key part of being an inclusive organization, which is one of our core values.

It’s also because we need to be. And so do you. 

Let’s start with the fact that it just makes good business sense. 

According to CDC stats, 27% of adults in the U.S. alone are permanently disabled (which itself is just one small portion of the entire disability spectrum). If your website doesn’t address their accessibility concerns, you’re essentially denying them the opportunity to become your customer, member, subscriber, applicant, or whatever your website goals may be. 

It’s also worth mentioning that, depending on the nature of your organization, you could even face potential legal liability if your website isn’t properly accessible.

In practice, it means we’ve baked accessibility considerations directly into our processes, throughout every department and team. For example, when our strategy team creates user personas, they ensure at least one of them has a specific accessibility need along with the standard set of attributes. 

Since many of the considerations regarding website accessibility are design considerations, our design team has created an Accessibility Checklist that we apply to everything we create. It’s based on the A11y Project plus our own team’s experience, and it’s meant to help ensure our designs meet the standards set forth by the Web Content Accessibility Guidelines (WCAG).

The A11y Project provides the most comprehensive explanation of WCAG. So, to quote them verbatim: 

The WCAG is a shared standard for web content accessibility for individuals, organizations, and governments. There are three levels of accessibility compliance in the WCAG, which reflect the priority of support:

• A: Essential — If this isn’t met, assistive technology may not be able to read, understand, or fully operate the page or view.
• AA: Ideal Support — Required for multiple government and public body websites. 
• AAA: Specialized Support — This is typically reserved for parts of websites and web apps that serve a specialized audience.

As A11y points out, this list by itself won’t make your site fully accessible to everyone, but it will go a long way toward improving the overall user experience.

Kanopi Design Accessibility Checklist

Color Contrast

We check text contrast to prioritize readability, and meet a minimum WCAG AA-compliant 4.5:1 contrast ratio.

We also ensure that color contrast for non-text items (graphical objects, for example) meets the minimum standard 3:1.

We use Webaim’s contrast checker tool to ensure our contrast ratios are compliant.

Typography

WCAG guidelines require that text can be resized up to 200 percent without losing content or functionality, and without relying on assistive technology. This rule does not apply to captions or images of text.

We choose fonts that work well at both large and small sizes. They feature clear, distinct letterforms that are easy to read in many situations. This helps accommodate the variation found across different mobile devices.

We use a minimum size of 12 points or 16 pixels for all body copy. 

Animation & Motion

While most mobile and desktop operating systems now include ‘reduce motion’ settings, websites themselves should also allow for further controls. WCAG also states that users should always be able to exert some control over how they experience animation in websites. 

This is why the websites we design, build and support allow users to play and stop animations as it suits them. We also use motion strategically, so it enhances the experiences for some users without impeding the experiences for others.

Layout Design

We make sure all user interface elements in our designs are sized and spaced to make interaction (i.e. via ‘tap’ or alternative interfaces) as simple as possible for users with reduced motor functionality.

In addition to being compliant with WCAG guidelines regarding text spacing and other interface elements, it also aligns with more general design best practices — in this case, Jakob’s Law.

Accessibility benefits all users.

We’ve found that adhering to accessibility guidelines not only opens your websites to potential new users, but it creates a better user experience for everyone. 

These are just a sample of the user benefits accessible websites provide:

• Reduced friction points within the website experience
• Easier to consume and engage with content
• Better mobile experience
• Wider audience reach 
• Reduced bounce rates
• SEO benefits
• Higher conversion rates

Feel free to borrow this checklist for your own organization, or formulate your own list that best reflects your user research. And if your website needs to be more accessible, a major redesign might be the right step. If you’re not sure, we’re here to help.

If you’re interested in learning more about accessibility, check out these posts: 

• Assistive Technology Rundown
• Screen Readers 101

TL:DR Design Accessibility Checklist 

Note: As per our Accessibility Expert Candice Dexter, we should note that these checklist items apply to more than one rule each; but we’re focusing here on its primary compliance rule.