Tips to Make Your Association Website Accessible to All

Improving accessibility is a topic that is constantly evolving. In March, we explored ways to make your association’s digital marketing efforts more accessible. Now, we’re going to dive deeper on just one digital marketing area: your association’s website.

According to the Center for Disease Control and Prevention (CDC), disability impacts one in four adults in the United States. When considering the needs of all visitors to your association website, it is crucial to create an equal website experience for all by addressing accessibility through design. Here are some website tips to design an association website that is accessible to all.  

Understand the Three Levels of Compliance

Knowing your audience and the best ways to reach them is key when it comes to creating an inclusive website. In accordance with the Web Content Accessibility Guidelines (WCAG), the following key principles of accessibility allow for a more positive and fluid interaction for all who visit your website. These guidelines can be applied during all states of design – prior to website layout, while designing and reviewing, and after a design has been developed.

There are three different levels of compliance:

• Level A (Essential) – The minimum for a website to be considered accessible
• Level AA (Ideal Support) – The expectation at this level is that the product will deliver a suitable experience and usability for its visitors
• Level AAA (Specialized) – The most complex level, typically reserved for parts of websites or apps that serve a special audience

You can help users navigate your website with ease by utilizing the following resources:

Organize Your Content 

• Design clear layouts with distinct calls to action
• Use heading text to communicate hierarchy and organize your content
• Use a combination of size, weight, or color to distinguish your headings from your paragraph text for a clear hierarchy of importance

Organizing your content can help a user digest your website information quickly, allow for a screen reader to navigate the page and increase your website’s Search Engine Optimization (SEO).

Ensure Typography is Legible

• Use a large enough font size for the user to comfortably read the text on screen
• Choose a typeface that emphasizes clarity and legibility
• Utilize web-fonts to create a custom look while ensuring the text can be easily edited and accessed by search engines

Regardless of font type and size the user should be able to clearly distinguish the lines of text. Small text is difficult for all users to see. 

Provide Good Contrast

• Use the WebAim color contrast checker to calculate the contrast of your colors
• Print your design in black and white to see if you can still understand it
• Whenever possible, use dark text on light backgrounds for maximum readability 

Contrast and color are vital to accessibility, as people who have low vision could find it difficult to read text depending on what colors you are using in your design. To ensure that the content is conveyed properly, incorporate a text label or pattern, add an icon, or bold and underline content.

Design Practical Interactions

• Keep your interactions as consistent as possible to allow the user to know when the content is a link or a button quickly 
• Distinguish links from paragraph text by using more than color (like underline and bold) 

Establishing a pattern of design interactions will help to reinforce the meaning and purpose. Having multiple ways to identify a state change will help if the user misses one of the sets of interactions. If someone is color blind and the only way you are styling your hyperlinks is through color, the possibility of missing that interaction is highly likely. 

Make Sure Link Text is Descriptive

• Use plain and consistent language.
• Avoid using statements like “Click Here,” “More,” or “Continue,” as these may be too ambiguous for the user to understand the target of the link

Use Accessible Controls

• Use descriptive labels, instructions, and error messages
• If you have video, audio, or animation on your website, consider providing a “pause/play” button to avoid distracting movement

Your website is your most branded visual asset and most often the first introduction to your association. As it is a vital component of your brand, we recommend talking to your marketers and designers to ensure your website is meeting these standards. Implementing these key tips will create a successful user experience and increase overall satisfaction and ease of use for every interaction on your website, making it accessible to all.

To Further Your Knowledge On Website Accessibility:

Web Aim: Web Accessibility in Mind

Web Content Accessibility Guidelines (WCAG) Overview

W3C: Designing for Web Accessibility

UX Design: Designing for Accessibility is Not That Hard

UX Planet: A Primer to Web Accessibility For Designers

Yale University: WCAG 2A and AA Checklist (Designers)

 

Kara Cooke is in Marketing & Communications Services at Smithbucklin.