our perspectives

Tips to Make Your Association Website Accessible to All

by Kara Cooke

May 31, 2023

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).

Example of organizing your content for screen readers and SEO with red and blue headings of different sizes, separating the paragraphs

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.

An example of how not to display copy (i.e. without much space between lines) and how to display copy (i.e. lots of space)

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.

Low contrast and good contrast between background and text examples

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.

Four examples of using multiple design elements to insure there is no missed interaction

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

An incorrect and a correct example of using a descriptive 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

A correct example of how to use descriptive labels for required fields and submit buttons

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.

The Essential Role of Associations in Supporting LGBTQIA+ Rights and Celebrations

Pride Month is an opportunity for organizations to support LGBTQIA+ members through advocacy, education, and engagement while fostering a culture of acceptance and inclusivity.

Honoring Native American Heritage Month

Learn about ways your organization can honor and celebrate Native American Heritage Month this November.

How One Organization Established Itself as an Industry Thought Leader for Diversity, Equity, and Inclusion (DEI)

Hear from Robin Rone, executive director of Apra and Smithbucklin's head of DEI, about how the organization established itself as an industry thought leader for DEI.