Accessibility
Track 02

Web Accessibility

Make your website usable for everyone, including people with disabilities, and understand the legal requirements.

Key takeaways

Switch between Plain English (essentials, no jargon) and Technical (specs, code, implementation) using the toggle above.

  • Alt text: Add a short description to every image so screen readers can convey it. For purely decorative images, leave the alt field empty. WCAG 1.1.1 (Non-text Content): Every <img> needs an alt attribute. Meaningful images: descriptive text (<125 chars). Decorative: alt="" to expose as presentational. Use semantic HTML first; ARIA only when necessary.
  • Color contrast: Text needs to stand out clearly against its background. Use a free contrast checker online to verify yours meets the minimum. WCAG 1.4.3 (Contrast Minimum): Normal text: 4.5:1 ratio (AA). Large text (18pt+ or 14pt+ bold): 3:1. Use tools like WebAIM Contrast Checker or Colour Contrast Analyser. Low contrast is the #1 detected failure.
  • Keyboard navigation: Try using only Tab, Shift+Tab, and Enter to move through your site. If you can’t reach everything, some users can’t either. WCAG 2.1.1 (Keyboard): All functionality must be operable via keyboard. Logical tab order, visible focus indicators (:focus-visible), no focus traps. Use tabindex="0" sparingly; never tabindex>0.
  • Headings & links: Use real headings (H1, H2, H3) to structure content, and make link text describe where it goes (not “click here”). Semantic structure: Heading hierarchy (single H1, logical H2/H3 order), descriptive link text for link-list navigation. ARIA landmarks supplement, not replace, semantic HTML (<nav>, <main>, <header>).

What is web accessibility?

Web accessibility means designing and building websites so that everyone can use them, including people with disabilities. This includes people who are blind or have low vision, people who are deaf or hard of hearing, people with motor disabilities who cannot use a mouse, people with cognitive disabilities, and people with temporary impairments like a broken arm or situational limitations like using a phone in bright sunlight.

Accessible design makes sure your website works with assistive technologies like screen readers, keyboard-only navigation, voice controls, and switch devices. But accessibility also benefits everyone. Clear headings help all users navigate. Captions help people watching video in noisy environments. Readable fonts benefit users of all ages.

In practical terms, an accessible website is one where every visitor, regardless of their abilities, the devices they use, or the conditions they are browsing in, can perceive, navigate, understand, and interact with all content and functionality.

Why is being accessible online important?

It is the right thing to do

Your nonprofit exists to serve people. If your website excludes anyone from accessing your services, information, or support, you are unintentionally working against your own mission. According to the CDC, more than 1 in 4 adults (28.7%) in the United States reported having a disability in 2022, which is over 70 million people.[13] These are your beneficiaries, donors, volunteers, and community members.

It may be legally required

In the United States, Title III of the Americans with Disabilities Act (ADA) prohibits discrimination in places of public accommodation, and courts have increasingly ruled that websites are public accommodations. This applies to nonprofits regardless of whether they receive federal funding. In 2024, the Department of Justice updated Title II of the ADA to explicitly require web accessibility for state and local government websites. In February 2025, a federal judge in Minnesota ruled that websites qualify as places of public accommodation under Title III.

Web accessibility lawsuits are rising. In 2023 alone, over 2,280 website accessibility lawsuits were filed in the United States.[27] Nonprofits are not exempt from these legal actions. As of mid-2025, nonprofit websites are not explicitly required to fully comply with WCAG at the federal level[17], but court rulings increasingly treat websites as public accommodations under ADA Title III.

It expands your reach

Over 70 million adults in the United States live with a disability.[13] Globally, the number exceeds one billion.[28] By making your website accessible, you open your doors to a significantly larger audience of potential donors, volunteers, and beneficiaries. Yet according to the 2025 WebAIM Million report, 94.8% of the top one million home pages still have detectable WCAG failures, with an average of 51 accessibility errors per page.[14] Low contrast text alone was found on 79.1% of home pages.[16] Only about 4% of websites are ADA compliant.[26] The web is still overwhelmingly inaccessible, and any nonprofit that prioritizes accessibility will stand out.

It improves SEO

Many accessibility practices, such as proper heading structures, descriptive alt text, clean HTML, and clear navigation, are also SEO best practices. Accessible websites tend to rank better on search engines because they are better organized and more machine-readable.

It costs less to build it right from the start

Retrofitting a website for accessibility after it is built is far more expensive and time-consuming than incorporating accessibility from the beginning. Research suggests accessibility improvements can generate up to $100 in value for every $1 invested[27] when you consider the expanded audience, improved user experience, and reduced legal risk.

Laws and standards around web accessibility

Web accessibility requirements vary by country, but they share a common reference point: the Web Content Accessibility Guidelines (WCAG).

WCAG: The international standard

The Web Content Accessibility Guidelines (WCAG) are developed by the World Wide Web Consortium (W3C), the international body that sets web standards. WCAG is not a law itself, but it is the technical standard that most accessibility laws reference.

WCAG 2.2 (published October 2023) is the most current version, with 13 guidelines organized under four principles:[18]

  • Perceivable: Information and interface components must be presented in ways users can perceive (for example, alt text for images, captions for videos)
  • Operable: Interface components and navigation must be operable by everyone (for example, keyboard navigable, no seizure-inducing content)
  • Understandable: Information and operation must be understandable (for example, readable text, predictable navigation, error prevention)
  • Robust: Content must work with current and future assistive technologies (for example, valid HTML, proper ARIA roles)

WCAG defines three conformance levels:

  • Level A: Minimum accessibility. Addresses the most critical barriers.
  • Level AA: Mid-range. Addresses the most common barriers. This is the level most laws require and what most organizations should target.
  • Level AAA: Highest level. Addresses the broadest range of needs. Not typically required by law, but ideal where feasible.

Note: Content that meets WCAG 2.2 also meets WCAG 2.1 and WCAG 2.0. If you target WCAG 2.2, you do not need to worry about earlier versions separately.

United States

  • ADA (Americans with Disabilities Act): Title III covers private entities (including nonprofits) that are places of public accommodation. Courts have increasingly ruled this includes websites. WCAG 2.1 Level AA is the de facto standard.
  • ADA Title II (2024 Update): The Department of Justice now explicitly requires state and local government websites to meet WCAG 2.1 Level AA. Entities serving over 50,000 people must comply by 2026; smaller entities by 2027.[26]
  • Section 508: Applies to federal agencies and organizations receiving federal funding. Requires WCAG 2.0 Level AA conformance.

Canada

  • Accessible Canada Act (ACA): Federal legislation requiring federally regulated organizations to identify and remove accessibility barriers, including digital ones.
  • Accessibility for Ontarians with Disabilities Act (AODA): Ontario's provincial law requires organizations with 50 or more employees to make their websites WCAG 2.0 Level AA compliant. Other provinces are developing similar legislation.
  • Standard on Web Accessibility (Government of Canada): Requires all Government of Canada websites to meet WCAG 2.0 Level AA.

European Union

  • European Accessibility Act (EAA): Took effect June 2025. Requires a wide range of products and services, including websites and mobile apps, to be accessible. References EN 301 549, which aligns with WCAG 2.1.
  • Web Accessibility Directive: Requires all public sector websites and mobile apps in EU member states to meet WCAG 2.1 Level AA.

United Kingdom

  • Equality Act 2010: Prohibits discrimination against disabled people, interpreted to include websites.
  • Public Sector Bodies Accessibility Regulations 2018: Requires public sector websites to meet WCAG 2.1 Level AA.

Australia

  • Disability Discrimination Act 1992 (DDA): Courts have ruled that websites are covered. The Australian government references WCAG 2.0 as the standard.

Key takeaway for nonprofits

Even in jurisdictions where web accessibility is not explicitly mandated for nonprofits by statute, the legal trend is clearly toward requiring it. Courts are increasingly favorable to plaintiffs in accessibility lawsuits, and demonstrating good-faith efforts to comply (having an accessibility statement, using testing tools, and committing to ongoing improvement) provides meaningful protection.

What is an accessibility audit?

An accessibility audit is a systematic evaluation of your website to identify barriers that prevent people with disabilities from using it. Think of it as a health check for your website's inclusivity.

What an audit typically involves

  • Automated scanning: Tools crawl your website to identify technical violations (missing alt text, low color contrast, missing form labels, and so on)
  • Manual testing: A trained evaluator navigates your site using assistive technologies (screen readers, keyboard-only, and so on) to find issues automated tools miss
  • Reporting: A detailed report listing each issue found, its severity, which WCAG criteria it violates, and how to fix it
  • Prioritization: Issues ranked by impact and effort required, so you know what to address first

Who performs accessibility audits?

  • Specialized accessibility consultancies: Companies like Deque, WebAIM, Level Access, and The Paciello Group focus exclusively on digital accessibility
  • Web development agencies: Many agencies that build nonprofit websites offer accessibility auditing as part of their services
  • Freelance accessibility specialists: Independent consultants certified in accessibility (look for IAAP-certified professionals)

How much do audits cost?

Costs vary widely. Automated-only scans can be free (using the tools listed below). A professional manual audit typically ranges from $3,000 to $15,000 depending on website complexity, number of pages, and depth of testing. Some organizations offer discounted or pro bono services for nonprofits.

Should your nonprofit get an audit?

If you have the budget, a professional audit is the gold standard. If you do not, the free tools and techniques outlined in this playbook can get you surprisingly far. Start with what you can do today and build from there.

Companies and organizations that can help

Here are reputable organizations that provide accessibility auditing services:

  • Deque Systems (deque.com): Industry leader in digital accessibility. Offers both automated tools (axe) and consulting services.
  • WebAIM (webaim.org): A nonprofit organization at Utah State University dedicated to web accessibility. Offers audits, training, and the popular WAVE evaluation tool.
  • Level Access (levelaccess.com): Provides auditing, monitoring, and remediation services with a focus on enterprise clients.
  • Bureau of Internet Accessibility (BOIA) (boia.org): Offers accessibility auditing and compliance services, including services tailored for nonprofits.
  • AudioEye (audioeye.com): Combines automated and manual testing with ongoing monitoring.
  • Siteimprove (siteimprove.com): Offers website governance tools including accessibility checking and content quality assurance.
  • Accessible Web (accessibleweb.com): Provides WCAG auditing and certification services.

Important note about accessibility overlay tools: Be cautious of companies selling JavaScript “widget” or “overlay” solutions that claim to make your website accessible with a single line of code. These overlay tools (such as AccessiBe, UserWay, and similar products) have been widely criticized by the accessibility community. They do not make websites truly accessible, can actually interfere with assistive technology, and do not protect you from legal liability. Genuine accessibility requires addressing the underlying code and design of your website, not adding a surface-level overlay on top.

Easy fixes that non-technical people can do

You do not need to be a developer to make meaningful accessibility improvements. Here are changes anyone managing a website can make today.

Add alt text to every image

Every image on your website should have alternative text (alt text), a brief description of what the image shows. Screen readers read this aloud for users who cannot see the image. Most website platforms (WordPress, Squarespace, Wix, and so on) let you add alt text when you upload or edit an image.

Good alt text: “Volunteers planting trees in Stanley Park, Vancouver”
Bad alt text: “image1.jpg” or “photo”
For decorative images: Use empty alt text (alt="") so screen readers skip them.

Ensure sufficient color contrast

Text must have enough contrast against its background to be readable. Low contrast text is the single most common accessibility issue on the web, found on 79.1% of home pages in 2025[16]. The minimum contrast ratio for normal text is 4.5:1 (WCAG Level AA). For large text (18pt and above), the minimum is 3:1. Use a free contrast checker like the WebAIM Color Contrast Checker to verify your combinations.

Use descriptive link text

Avoid links that say “click here” or “read more.” Instead, use link text that describes where the link goes: “Read our 2025 impact report” or “Donate to support tree planting.” Screen reader users often navigate by jumping between links, so each link should make sense on its own.

Structure your content with headings

Use proper heading tags (H1, H2, H3, and so on) to organize your content. Do not just make text bold or larger. Headings create a navigable outline that screen reader users rely on. Use them in order (do not skip from H1 to H4) and have only one H1 per page (typically the page title).

Add captions to videos

All video content should have captions, not just for deaf and hard-of-hearing users, but for anyone watching in a noisy environment or without headphones. YouTube and Vimeo can auto-generate captions, but always review and correct them for accuracy.

Label all form fields

Every input field (name, email, phone, donation amount, and so on) must have a visible label that is properly associated with the field in the code. In most website builders, this happens automatically if you add a label or title to each field. Never rely solely on placeholder text inside the field, because it disappears when users start typing.

Do not rely solely on color to convey information

If you use a red dot to indicate “unavailable” and a green dot for “available,” users who are colorblind will not get the message. Always pair color with another indicator: text labels, icons, patterns, or shapes.

Ensure keyboard navigation works

Try navigating your website using only your keyboard (Tab to move forward, Shift+Tab to move backward, Enter to activate). Can you reach every link, button, and form field? Can you always see which element is focused? If not, there are issues to fix.

Write in plain language

Use clear, simple language. Avoid jargon, acronyms without explanation, and unnecessarily complex sentences. This helps users with cognitive disabilities, non-native speakers, and really, everyone.

Make sure your site works on mobile

Responsive design is an accessibility issue. Many users with disabilities rely on mobile devices, and mobile-friendly sites tend to be more accessible overall. Test your site on different screen sizes.

Techniques a web developer can use

Developers have additional tools and techniques to achieve deeper accessibility compliance.

Use semantic HTML

Use the correct HTML elements for their intended purpose: <nav> for navigation, <main> for main content, <header> and <footer> for their respective areas, <button> for buttons (not styled <div> elements), <table> for tabular data, and <ul>/<ol> for lists. Semantic HTML provides built-in accessibility without extra work.

Implement ARIA attributes thoughtfully

ARIA (Accessible Rich Internet Applications) attributes can add accessibility to dynamic content and complex widgets, but they should supplement, not replace, proper semantic HTML. The first rule of ARIA is: “Do not use ARIA if you can use a native HTML element.” When ARIA is needed, test thoroughly with screen readers.

Manage keyboard focus

Make sure the tab order through the page is logical. Use tabindex="0" to make non-interactive elements focusable when necessary, and tabindex="-1" for programmatic focus management. Never use tabindex values greater than 0 because they create confusing navigation. Implement visible focus indicators (:focus styles) that are clearly distinguishable.

Build accessible forms

  • Associate every <input> with a <label> using for/id pairing
  • Group related fields with <fieldset> and <legend>
  • Provide clear error messages that identify the specific field and describe how to fix the error
  • Use aria-describedby to connect additional instructions to form fields
  • Do not use CAPTCHAs without accessible alternatives

Make dynamic content accessible

When content updates dynamically (AJAX loading, notifications, modals, and so on), use ARIA live regions (aria-live="polite" or aria-live="assertive") to announce changes to screen readers. Make sure modals trap focus appropriately and can be closed with the Escape key.

Provide skip navigation links

Add a “Skip to main content” link at the top of each page that becomes visible on keyboard focus. This allows keyboard users to bypass repetitive navigation menus.

Handle multimedia properly

  • Provide captions (synchronized text alternatives) for all video content
  • Provide audio descriptions for video content where visual information is not conveyed through audio alone
  • Provide transcripts for audio-only content (podcasts, and so on)
  • Make sure media players are keyboard accessible and screen reader compatible

Test with real assistive technologies

Do not rely solely on automated tools. Test with actual screen readers (NVDA is free for Windows, VoiceOver is built into macOS and iOS), keyboard-only navigation, and browser zoom at 200%. Consider user testing with people who have disabilities.

Implement a consistent, visible focus indicator

The default browser focus ring is often too subtle. Create a custom focus style that provides clear visual indication of the focused element, using a combination of outline and contrast that works across all backgrounds on your site.

Free accessibility testing tools

These tools can help you evaluate your website's accessibility at no cost.

WAVE

Website: wave.webaim.org

The most popular free web accessibility evaluation tool. Available as a website tool and browser extension. Highlights issues directly on your page.

Google Lighthouse

Website: pagespeed.web.dev

PageSpeed Insights runs Lighthouse to provide an accessibility score and detailed recommendations. Also available in Chrome DevTools (F12 or Ctrl+Shift+I⌘⌥I or F12 → Lighthouse tab).

ANDI

Website: ssa.gov/accessibility/andi

A free accessibility testing tool developed by the US Social Security Administration. A bookmarklet that runs on any web page.

Colour Contrast Analyser

Website: tpgi.com/color-contrast-checker

Free desktop application for checking color contrast ratios.

WebAIM Contrast Checker

Website: webaim.org/resources/contrastchecker

Web-based tool for testing color combinations against WCAG contrast requirements.

Accessibility Checker

Website: accessibilitychecker.org

Enter your URL to receive recommendations based on ADA and WCAG standards.

Silktide

Browser extension for Chrome and Edge that checks for 200 WCAG issues and includes a disability simulator.

HeadingsMap

Browser extension that shows the heading structure of any page, making it easy to spot heading hierarchy issues.

Creating an accessibility statement

Every nonprofit website should include an accessibility statement. This page publicly communicates your commitment to accessibility and provides contact information for users who encounter barriers. Include:

  1. Your organization's commitment to accessibility
  2. The standard you are working toward (for example, WCAG 2.2 Level AA)
  3. Known limitations (if any) and your timeline for addressing them
  4. How users can report accessibility issues (email, phone, form)
  5. The date the statement was last updated

Having an accessibility statement demonstrates good faith and provides a channel for feedback, which courts look favorably upon in accessibility disputes.

Generate your accessibility statement for free: AccessibilityChecker.org offers a free accessibility statement generator that creates a customized statement for your organization. Gabriel Dalton, lead of the Web-Ready Access Platform, recommends this tool for nonprofits looking to quickly create a professional accessibility statement that accurately reflects their compliance efforts.

Further reading and resources

These trusted resources provide comprehensive guidance on web accessibility standards, best practices, and implementation techniques.

W3C Web Accessibility Initiative (WAI)

Website: w3.org/WAI/fundamentals/accessibility-intro/

The official Web Accessibility Initiative from the World Wide Web Consortium. The authoritative source for WCAG guidelines and accessibility standards. Includes educational resources, tutorials, and tools for developers and content creators.

MDN Web Accessibility Guide

Website: developer.mozilla.org/en-US/docs/Web/Accessibility

Mozilla Developer Network's comprehensive accessibility documentation. Includes beginner tutorials, implementation guides, ARIA reference, and practical code examples for developers building accessible web applications.

CAN/ASC - EN 301 549:2024 Accessibility Standards (Canada)

Website: accessible.canada.ca

Accessibility Standards Canada's official ICT accessibility requirements standard. Section 9 covers web accessibility requirements aligned with WCAG 2.1 Level AA. Essential reading for Canadian organizations and a valuable reference for understanding formal accessibility compliance frameworks.

Sources

[13] CDC, Disability and Health Data System, 2024. cdc.gov. More than 1 in 4 (28.7%) adults in the United States reported having a disability in 2022. That is over 70 million adults.

[14] WebAIM, “The WebAIM Million,” 2025. webaim.org. 94.8% of the top one million home pages had detectable WCAG 2 failures, with an average of 51 errors per page.

[15] WebAIM, “The WebAIM Million,” 2024. webaim.org. 95.9% of home pages had detectable WCAG 2 failures, with an average of 56.8 errors per page.

[16] WebAIM, “The WebAIM Million,” 2025. webaim.org. Low contrast text was found on 79.1% of home pages, making it the most commonly detected accessibility issue.

[17] DNL OmniMedia, “Nonprofit Web Accessibility and Compliance: The Complete Guide,” 2025. dnlomnimedia.com. As of mid-2025, nonprofit websites are not required to fully comply with WCAG at the federal level, but court rulings increasingly interpret websites as public accommodations under ADA Title III.

[18] W3C, “WCAG 2 Overview.” w3.org. WCAG 2.2 was published October 2023 with 13 guidelines organized under 4 principles.

[26] Accessibility.Works, “2025 ADA Web Accessibility Standards,” July 2025. accessibility.works. Only about 4% of websites are ADA compliant. ADA Title II updated April 2024 requires state and local government web accessibility by 2026 for entities over 50K and 2027 for smaller entities.

[27] Trajectory Web Design, “Website Accessibility for Nonprofits.” trajectorywebdesign.com. Accessibility improvements can generate up to $100 for every $1 invested. In 2023, 2,281 website accessibility lawsuits were filed.

[28] WHO, World Report on Disability. who.int. Over 1 billion people globally live with some form of disability.