Web Content Accessibility Guidelines (WCAG): Overview & Support

Jeff Lawrence - Common Grant Application - April 2026

We recently received a request from a government agency that uses our system for grantmaking to provide information about the Web Content Accessibility Guidelines (WCAG) and how we support them. This white provides a high-level summary of what the Web Content Accessibility Guidelines (WCAG) are, why they exist, how we support them, and how they may apply to your website.

Introduction

The purpose of the Web Content Accessibility Guidelines (WCAG) is to provide a single, shared, international standard for digital accessibility that ensures web content is accessible to people with disabilities, including people with:

Visual disabilities
Auditory disabilities
Cognitive, learning, and neurological disabilities
Physical disabilities
Speech disabilities

Guiding Principles

WCAG has four guiding principles to assure access:

Principle 1 – Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
Principle 2 – Operable: User interface components and navigation must be operable.
Principle 3 – Understandable: Information and the operation of the user interface must be understandable.
Principle 4 – Robust: Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.

Standards

The official WCAG standards are published by the World Wide Web Consortium (W3C). The central repository for the standards is at: https://www.w3.org/WAI/standards-guidelines/wcag/.

There are three conformance levels for WCAG:

Level A (Minimum): Provides basic web accessibility, but many users with disabilities will still encounter barriers. It addresses essential, low-effort requirements.
Level AA (Standard): The industry standard adopted by most laws and organizations. It addresses the most common, significant accessibility barriers (e.g., color contrast, focus indicators).
Level AAA (Highest): Provides the most comprehensive accessibility. However, it is not recommended as a general policy because it is not possible to satisfy all AAA criteria for all content types.

Most websites strive for Level A or AA compliance. Very few sites conform to AAA compliance.

History

Standard	Date	Description
WCAG 1.0	May 1999	Initial release. Included 14 guidelines ranging from the need to provide text equivalents to considering clarity and simplicity on the web. Each guideline had between one and 10 supporting checkpoints.
WCAG 2.0	December 2008	Broadened scope to apply to almost all things digital (including documents and apps). Also introduced the four guiding principles of accessibility.
WCAG 2.1	June 2018	Additions to WCAG 2.0 but does not replace it. Added success criteria for improving web accessibility on mobile devices and for people with low vision and cognitive disabilities. Backwards-compatible: compliance with WCAG 2.1 implies compliance with WCAG 2.0.
WCAG 2.2	October 2023	Additions to WCAG 2.1 but does not replace it. Adds nine new success criteria focusing heavily on cognitive, learning, and motor disabilities. Sites compliant with 2.1 do not need to "upgrade" but are encouraged to do so.

Testing

WCAG testing consists of automated scanning and auditing tools and manual testing for context-aware issues. Automated audits cannot replace manual testing, as they only identify structural errors and cannot test for usability, such as logical tab order, intuitive navigation, or screen reader compatibility.

Automated Testing Tools

Some of the many available automated scan and audit tools include:

Tool	Description	Tests Against	Total WCAG Coverage
WAVE by WebAIM	Free suite of tools to evaluate website accessibility against WCAG. Identifies hundreds of potential issues. WebAIM	WCAG standards	25–40%
Axe (axe-core) by deque systems	Industry-standard, open-source accessibility testing engine. Performs around 70–100+ distinct accessibility checks. deque systems	WCAG 2.0, 2.1, and 2.2 Level A and AA	57%+
Lighthouse by Google Chrome	Uses axe-core to evaluate web pages for basic WCAG Level A and AA compliance. Tests approximately 30–40+ automated accessibility checks. Chrome	WCAG 2.1 Level A and AA	13–30%

Example Automated Tests

The following are representative automated tests performed by Lighthouse:

[accesskey] values are unique
[aria-*] attributes match their roles
Button, link, and menuitem elements have accessible names
Elements with role="dialog" or role="alertdialog" have accessible names
[aria-hidden="true"] is not present on the document <body>
[aria-hidden="true"] elements do not contain focusable descendants
ARIA input fields have accessible names
ARIA meter elements have accessible names
ARIA progressbar elements have accessible names
[role]s have all required [aria-*] attributes
Elements with an ARIA role that require children to contain a specific role have all required children
[role]s are contained by their required parent element
[role] values are valid
Elements with the role=text attribute don't have focusable descendants
ARIA toggle fields have accessible names
ARIA tooltip elements have accessible names
ARIA treeitem elements have accessible names
[aria-*] attributes have valid values
[aria-*] attributes are valid and not misspelled
Buttons have an accessible name
The page contains a heading, skip link, or landmark region
Background and foreground colors have a sufficient contrast ratio
<dl>s contain only properly-ordered <dt> and <dd> groups
Definition list items are wrapped in <dl> elements
Document has a <title> element
[id] attributes on active, focusable elements are unique
ARIA IDs are unique
No form fields have multiple labels
<frame> or <iframe> elements have a title
Heading elements appear in sequentially-descending order
<html> element has a [lang] attribute
<html> element has a valid value for its [lang] attribute
Image elements have [alt] attributes
Input buttons have discernible text
<input type="image"> elements have [alt] text
Elements with visible text labels have matching accessible names
Form elements have associated labels
Document should have one main landmark
Links are distinguishable without relying on color
Links have a discernible name
Lists contain only <li> elements and script supporting elements
List items (<li>) are contained within <ul>, <ol>, or <menu> parent elements
The document does not use <meta http-equiv="refresh">
[user-scalable="no"] is not used in the <meta name="viewport"> element
<object> elements have alternate text
Select elements have associated label elements
Skip links are focusable
No element has a [tabindex] value greater than 0
Tables use <caption> instead of cells with the [colspan] attribute to indicate a caption
<td> elements in a large <table> have one or more table headers
Cells in a <table> that use the [headers] attribute refer to cells within the same table
<th> elements have data cells they describe
[lang] attributes have a valid value
<video> elements contain a <track> element with [kind="captions"]

Note: ARIA (Accessible Rich Internet Applications) is a set of W3C specifications that provide special attributes for HTML elements to make web content and applications more accessible to people with disabilities.

Example Manual Tests

The following manual tests are outlined in the WCAG standard and require human judgment to evaluate:

Custom controls have ARIA roles
Custom controls have associated labels
User focus is not accidentally trapped in a region
Interactive controls are keyboard focusable
Interactive elements indicate their purpose and state
The page has a logical tab order
The user's focus is directed to new content added to the page
Offscreen content is hidden from assistive technology
HTML5 landmark elements are used to improve navigation
Visual order on the page follows DOM order

Common Grant Application Scan and Audit Results

We haven't been comprehensive in our thinking about accessibility, but we focus on writing good semantic HTML, which is generally better for accessibility purposes. We have had tens of thousands of applicants use our system, and we have not had any reported accessibility issues.

Our website has evolved over a period of time. We use newer technologies and styles for the public side of our site and older technologies and styles for the private side of our site which include the grantmaker and applicant functionality. More importantly, we are in the middle of developing some significant improvements to our site that will start showing themselves towards the end of 2026. Any needed improvements suggested by the scan and audit results below will be incorporated during our code rewrite and will also start showing themselves towards the end of 2026.

The Common Grant Application has hundreds of pages, but many use the same navigation, layout, and styles. The following pages provide a representative sample. We took this sample and ran the Google Lighthouse automated WCAG scan and audit tool and also ran the suggested WCAG manual tests. It should be noted that Google Lighthouse scoring is all or nothing, there are no partially correct tests. A summary of the results is reported below.

Public Pages
Page	Public	Results
Home	✓	Automatic Score: 87. Links do not have a discernible name (icon at top of page). Heading elements are not in a sequentially-descending order. Document does not have a main landmark. Passed audits (11). Not applicable (46). Manual: HTML5 landmark elements are used to improve navigation. Passed Audits (6). Not Applicable (3).
Features	✓	Automatic Score: 90. Links do not have a discernible name. Document does not have a main landmark. Passed audits (12). Not applicable (46). Manual: HTML5 landmark elements are used to improve navigation. Passed Audits (6). Not Applicable (3).
FAQs	✓	Automatic Score: 88. Links do not have a discernible name. Document does not have a main landmark. Passed audits (10). Not applicable (48). Manual: HTML5 landmark elements are used to improve navigation. Passed Audits (6). Not Applicable (3).
Login	✓	Automatic Score: 87. <frame> or <iframe> elements do not have a title (iframe for video). Links do not have a discernible name. Document does not have a main landmark. Passed audits (14). Not applicable (43). Manual: HTML5 landmark elements are used to improve navigation. Passed Audits (6). Not Applicable (3).

The issues were similar on all of the audited pages. They came down to a link that needs to be added to an icon, and some additional links that need to be added to some HTML elements.

Private Pages
Page	Grantmaker	Applicant	Results
Dashboard	✓	Similar to grantmaker	Automatic Score: 67. Form elements do not have associated labels (search field). <frame> or <iframe> elements do not have a title (iframe for video). Background and foreground colors do not have a sufficient contrast ratio (copyright at bottom of page). Links rely on color to be distinguishable (copyright at bottom of page). Touch targets do not have sufficient size or spacing (logo at top of page). Document does not have a main landmark. Passed audits (12). Not applicable (41). Manual: HTML5 landmark elements are used to improve navigation. Passed Audits (6). Not Applicable (3).
Step by Step	Not applicable	✓	Automatic Score: 63. Select elements do not have associated label elements (Select choice in dropdowns). Links do not have a discernible name (backward and forward arrows). Background and foreground colors do not have a sufficient contrast ratio (copyright at bottom of page). Links rely on color to be distinguishable (copyright at bottom of page). Touch targets do not have sufficient size or spacing (logo at top of page). Document does not have a main landmark. Passed audits (10). Not applicable (44). Manual: HTML5 landmark elements are used to improve navigation. Passed Audits (6). Not Applicable (3).
Application Review	✓	Similar to grantmaker	Automatic Score: 74. Background and foreground colors do not have a sufficient contrast ratio (copyright at bottom of page). Links rely on color to be distinguishable (copyright at bottom of page). Passed audits (10). Not applicable (46). Manual: HTML5 landmark elements are used to improve navigation. Passed Audits (6). Not Applicable (3).
Grant Listing	✓	Similar to grantmaker	Automatic Score: 63 Form elements do not have associated labels (search field). Links do not have a discernible name (link to help popup). Background and foreground colors do not have a sufficient contrast ratio (copyright at bottom of page). Links rely on color to be distinguishable (copyright at bottom of page). Touch targets do not have sufficient size or spacing (logo at top of page). Document does not have a main landmark. Passed audits (11). Not applicable (42). Manual: HTML5 landmark elements are used to improve navigation. Passed Audits (6). Not Applicable (3).
Help	✓	Similar to grantmaker	Automatic Score: 88. Links do not have a discernible name (icon at top of page). Document does not have a main landmark. Passed audits (10). Not applicable (47). Manual: HTML5 landmark elements are used to improve navigation. Passed Audits (6). Not Applicable (3).

The issues are similar on all the audited pages. They came down to a link that needs to be added to an icon, some spacing that needs to be added around a logo, improving the appearance of a copyright notice and some additional links that need to be added to some HTML elements.

There are improvements we can make to better meet WCAG compliance and our current development efforts will address the issues identified above.