How to Incorporate Accessibility into Your Nonprofit’s Webflow Design

As a nonprofit communications professional, you know that your company’s design communicates a great deal of information to the world around you. From describing your mission and purpose, to reaching program participants and donors, to serving as a hub for potential volunteer contact, it’s crucial that your website functions well and looks professional.

But did you realize that there’s more to maintaining your website than visual appeal? The Americans with Disabilities Act (ADA) mandates that website and business owners pay careful attention to how accessible their sites are for individuals with different types of disabilities. Complying with ADA best practices ensures that assistive technologies can work best so that everyone has an opportunity to browse and benefit from your site.

In this post, we’ll explore what accessibility is, how to align your Webflow accessibility efforts with compliance measures, and how you can find answers to common accessibility questions.

What Is Accessibility?

Accessibility is a broad term that refers to compliance with certain practices and procedures that are outlined in the Americans with Disabilities Act (ADA). In a general sense, this act protects the rights of disabled individuals when using technology.

In 2010, the United States Department of Justice clarified several ADA requirements to make them more specific for personal computers and smart devices. As a result, accessibility became a top priority for business and website owners who were responsible for creating and updating ADA-compliant websites.

Importance of Accessibility

Accessibility is vital for a more inclusive community. When businesses strive for improved accessibility, this means that more people are able to enjoy the same privileges, rights, abilities, and opportunities.

In the modern marketplace, accessible brands give everyone equal access to similar information. This is an especially important quality for organizations that proclaim to be mission-focused.

As a values-based brand, accessibility should remain at the top of your company’s list of non-negotiable values.

Assistive Technologies

Individuals with disabilities are able to take advantage of assistive technologies that make it easier to use, read, and browse websites. Common assistive devices include screen readers, text-to-speech devices, magnifiers, and adapted controls.

Several of these technologies are available for traditional browsers and on mobile devices. Businesses should therefore aim to be compatible from a desktop and a mobile standpoint.

What Is ADA Compliance for Websites?

When you start to consider ADA compliance for your website, you must begin by thinking about the many ways that someone may choose to access your content. You can do this by running through a short series of questions.

• How could someone with a visual impairment see my website?
• How might a person with a hearing impairment hear the content I publish?
• How do assistive technologies and devices work with my current site?

To create a fully ADA compliant website, you may discover that you need to make some critical changes. Not only are these changes in the best interest of individuals with disabilities, but they can also ensure that your website reaches the broadest audience possible through strategies like SEO.

Top Tips for Webflow Accessibility

If you feel stumped or overwhelmed at the thought of making your website accessible and compliant, don’t worry. Many accessibility-related changes are also good industry practice regardless of compliance protocols. Fortunately, this means that you can make a few fast tweaks to help individuals with disabilities.  

Tip 1: Use the Appropriate Headings and Page Structure

As a general rule, headings and tags are important elements of your website’s structure. Yet when it comes to accessibility, these pieces are even more essential. Headings like H1, H2, and H3 actually include HTML code that screen readers and other devices use to understand the text on a page.

You should always optimize headings based on how important the text is, as thought you were creating a detailed outline. In Webflow, you can use the text toolbar to format different lines of text and to distinguish them as the correct heading level.

Content creators should opt for heading structure over making other font changes such as using bold, italic, and underline. These elements do not signal a page’s structure in the same way, and thus they are not as relevant for assistive technologies.

Tip 2: Incorporate Alt Text for Images

Alt text (also referred to as alt tags) is text that is associated with an image. When you include images within website pages, you should manually incorporate this text with an accurate description of what the image portrays.

Alt text makes it easy for assistive devices and screen readers to describe images to individuals with visual disabilities who may not be able to see them clearly.

As a result, try to make your alt text as detailed and accurate as possible. Avoid overly generic descriptions or random file names with jumbled numbers and letters.

Tip 3: Assign the Right Colors to Your Site

Colors and graphics add an intriguing element to any website, but these options aren’t ideal for accessibility. Text readers and other screen devices mostly rely on textual elements, which makes color choices less helpful.

Although you can always incorporate brand colors into your website’s aesthetic, you shouldn’t rely on color alone to achieve compliance. Individuals with visual impairments may not be able to distinguish certain colors from each other if there isn’t enough color contrast, which makes colors less important for your Webflow website’s overall accessibility.

Tip 4: Leverage Captions for Videos

Closed captioning has long been used to provide a transcribed version of audio to individuals with hearing disabilities. To achieve maximum accessibility, always include a text version of audio recordings and video clips. You can also use closed captioning services to streamline the transcription process without additional manual effort.

Tip 5: Test Your Keyboard Navigation System

Occasionally, users with limited mobility will navigate through a page using only a small number of keys. In many of these scenarios, website visitors rely on the following keystroke combinations:

• TAB
• SHIFT + TAB
• SPACE
• ENTER
• LEFT ARROW
• UP ARROW
• DOWN ARROW
• RIGHT ARROW

You can quickly test how easy it is to navigate your site with these keys by visiting any page and attempting to move the display window or scroll. Keyboard only navigation implies that users with physical limitations do not need the use of a separate mouse in order to browse your website content.

How to Prioritize Accessibility

As a website or business owner, you have a few options when it comes to prioritizing accessibility and ADA compliance. You can:

• Design your original (first version) Webflow website with ADA compliance best practices in mind
• Make small, incremental changes to key pages throughout the course of business
• Perform a complete audit to your entire site at a later date

The more you prioritize accessibility up front, the less work you will have to do after the fact. If you aren’t able to dedicate the time or resources to making required changes immediately, you may need to outsource or hire consulting help. This option can be extremely helpful for website owners who have hundreds of live pages or who don’t have staff members with the bandwidth to adjust the entire website.

Frequently Asked Questions

As a website owner or business leader, it’s understandable to have questions about how to comply with accessibility standards. Below are some of the most popular questions and answers regarding ADA and Webflow website maintenance.

Can I check my site’s accessibility?

Yes, Accessibility.org provides helpful information and checklists to verify your compliance. You can also perform a quick self-check, use the WAVE Web Accessibility Evaluation Tool, or pay for accessibility and compliance services. The last option can involve either an automated platform or a paid consultant.

What is the Web Accessibility Initiative?

The Web Accessibility Initiative is a concerted effort of the World Wide Web Consortium (W3C) to make websites accessible for all individuals. The W3C is a great resource if you are searching for clarification, supporting documents, and high level strategies to improve your site’s accessibility standards.

Is Webflow working to improve accessibility?

As a Webflow site owner, you might be wondering what steps Webflow plans to take to help everyone achieve high accessibility standards. Webflow has taken the following stance on improved accessibility–

“We’re committed to making our services more accessible to users of all abilities. We are currently in the process of reviewing our services to improve user experience further, and seeking to make it easier for our customers to make their sites as accessible as possible.”

Next Steps

When you invest the time and effort into bringing your website up to speed with ADA requirements, you ensure that more people can read, use, and share your website. While this makes good business sense, it’s also the right thing to do from a compliance and community perspective.

As a Webflow website owner, there are several practical steps you can take today to boost your site’s accessibility. Making these small but impactful changes can also offer other benefits along the way, including the potential for maximizing your search engine rankings.