How to Make Your Nonprofit Website WCAG 2.2 Compliant

One of the biggest mistakes nonprofits can make is not prioritizing compliance with all relevant regulations, including accessibility guidelines. Accessibility is more than a nice-to-have website quality—it provides your visitors with the user-friendly experience they deserve.

The top nonprofit websites use the WCAG 2.2 regulations to guide their online accessibility strategies. This guide explores the basics of WCAG 2.2 and how to remain compliant to protect your organization from liability and create better relationships with your online audience.

The Web Content Accessibility Guidelines (WCAG) are a set of internationally accepted standards for making web content accessible. WCAG 2.2 is the latest version of these guidelines, updating and expanding on previous versions. Additionally, WCAG 3.0 is in the works—you can stay up to date with progress via this timeline.

These guidelines strongly focus on users with disabilities such as vision impairments or hearing loss, but they’re also meant to improve the online experience for all visitors. Think of someone with one wrist in a cast accessing your website or another user visiting the site when they have poor internet connectivity. These individuals could also benefit from accessibility accommodations.

The WCAG focuses on providing accommodations for a wide range of permanent and physical disabilities, including:

• Blindness and low vision
• Deafness and hearing loss
• Limited movement
• Speech disabilities
• Photosensitivity

The guidelines also offer some accommodation requirements for:

• Learning disabilities
• Cognitive limitations

These regulations apply to web content on all device types, such as:

• Desktops
• Laptops
• Kiosks
• Mobile devices

The WCAG includes three conformance levels based on a website’s alignment with the regulations:

• A: The most basic conformance level that covers the highest priority accessibility considerations.
• AA: A widely accepted legal standard for compliance that represents a middle-of-the-road approach to accessibility.
• AAA: The highest and most meticulous level of accessibility.

Every success criterion listed in the WCAG has levels associated with it, so you know what’s required to reach each tier. For example, consider success criteria for providing video captions for people who are deaf or hard of hearing. Level A accessibility calls for prerecorded videos to have captions, Level AA requires captions for live videos, and Level AAA involves providing sign language interpretation for audio content in videos.

The conformance levels build on each other—level A requires compliance with all level A success criteria, level AA necessitates conformance to both A and AA criteria, and level AAA demands adherence to levels A, AA, and AAA.

Subsequent releases of new WCAG versions are backward compatible with previous releases. That means by complying with WCAG 2.2, you also comply with WCAG 2.1 and 2.0.

WCAG 2.2 builds on previous iterations of the guidelines in the following ways:

• New success criteria were added related to keyboard accessibility, consistent “help” mechanisms like contact information for your organization, ensuring buttons are large and spaced out enough to be easily clicked, and more.
• “Parsing” has become obsolete, so it was removed from WCAG 2. Parsing refers to the process of assessing structured data markup to turn it into a usable format. This section was removed from the WCAG because browsers can now manage this process much more efficiently and effectively.

These details don’t matter too much for your nonprofit’s web accessibility—just keep in mind that WCAG 2.2 is the latest and most robust version of the guidelines.

The short answer is no, but it’s highly recommended that you do so.

If your nonprofit receives federal funding, you must comply with the Americans with Disabilities Act (ADA), which applies to both physical and digital accommodations. While compliance with WCAG 2.2 is not required, aligning with WCAG 2.1 is, thanks to ADA Title II. Non-compliance can lead to lawsuits, fines, and reputational damage.

Complying with the WCAG guidelines and frequently testing your site will set your organization up to meet legal requirements and serve your audience’s needs.

Let’s review the steps your organization should take to align your website with WCAG 2.2 regulations.

WCAG 2.2 is organized into four principles that summarize the foundation of accessible websites: perceivable, operable, understandable, and robust (POUR). Let’s explore these components in more detail.

Perceivable
WCAG definition: “Information and user interface components must be presentable to users in ways they can perceive.”

In other words: You should present your web content in such a way that users can perceive it even if one or more of their senses is impaired.

Sampling of success criteria:

• Adding alternative text for images
• Providing captions and audio descriptions for videos
• Ensuring information can be interpreted by assistive technology
• Leveraging a color contrast of at least 4.5:1 for background color and foreground text
• Offering the ability to resize text up to 200% without losing quality
• Not using images of text to convey essential information without also including it in the page’s text

Operable
WCAG definition: “User interface components and navigation must be operable.”

In other words: Your website should be functional for all users—it should not include any functionality that some users may be unable to operate.

Sampling of success criteria:

• Ensuring content is accessible via keyboard navigation and operation
• Enabling a pause feature for moving, blinking, or scrolling content
• Avoiding flashing web content that could trigger seizures
• Adding clear navigation elements such as descriptive page titles, headings, and anchor text for links

Understandable
WCAG definition: “Information and the operation of the user interface must be understandable.”

In other words: Users should be able to both comprehend the information on your website and know how to operate the site effectively.

Sampling of success criteria:

• Defining idioms, jargon, and abbreviations
• Simplifying complex information to a lower grade reading level
• Ensuring web pages are predictable and consistent
• Helping users understand and fix any input errors, such as incorrect form responses

Robust
WCAG definition: “Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.”

In other words: Your content should remain accessible even as assistive technologies like screen readers and voice recognition software evolve and improve.

Sampling of success criteria:

• Ensuring that user interface components like form fields and links have role, state, and value information that is compatible with assistive technology like screen readers
• Making users aware of changes in content through status messages

You could tackle the web accessibility process using WCAG’s reference guide to check off accessibility requirements. However, the best way to ensure accessibility is to work with a web designer who is well-versed in the requirements.

Working with a web design firm that prioritizes accessibility allows you to:

• Ensure compliance with ADA regulations for your nonprofit website.
• Save time by not having to figure out compliance requirements on your own, allowing you to devote more energy to mission-critical web projects.
• Keep your website functioning properly and avoid any accessibility missteps that can cause slowdowns or poor user experience.
• Navigate change management and explain your accessibility focus to stakeholders like your nonprofit board.

An accessibility-focused web designer can help your organization ensure that accessibility is baked into your website strategy, not treated as an afterthought. This consideration will help you create a better user experience for all visitors and align accessibility with your brand voice.

Kanopi’s nonprofit website maintenance guide recommends running automated and manual accessibility assessments “to catch any issues that testing tools may miss.” Use these best practices for a well-rounded testing process:

• Automated tests
  • Use accessibility tools like Lighthouse or WAVE to catch common accessibility issues like poor color contrast or generic links.
• Manual tests
  • Test your site using a screen reader.
  • Hire people with disabilities to test your site.
  • Test your forms by completing them and evaluating whether form fields have sufficient information.
  • Manually check images for alt text.
  • Navigate your site using a keyboard.
  • Zoom into your site 200% to ensure your layout adapts and everything works correctly for users with visual impairments.

Test your site every six months or so to catch errors and ensure compatibility with new assistive technologies.

Communicating with your nonprofit’s audience is essential to the accessibility process. They deserve full transparency into your web accessibility efforts so they can provide their input and see whether your organization prioritizes their needs.

Give supporters access to your accessibility process in the following ways:

• Provide an accessibility policy on your website with information about your conformance level.
• Use blog updates to spotlight your accessibility wins and shortcomings that you’re working on.
• Ask for user feedback via an online form.

Follow up with users to thank them for their insights and let them know how you’ll incorporate their feedback into your accessibility efforts in the future.

Remember that web accessibility is more than just checking off a box to remain ADA compliant. Your nonprofit’s ultimate purpose is to unite your supporter community to tackle shared goals and achieve your mission. With an accessible website, you ensure that anyone in your community can be involved in your cause, no matter who they are or what barriers they face.

Taking a collaborative approach to accessibility by incorporating audience feedback allows you to keep your community front of mind throughout this process.