Accessibility Scan Report

Title: https://www.adapt-offshore.org/ Issue: #215 Date: 3/25/2026, 3:27:31 PM Duration: 2.6m URLs: 10 / 10 🌙 Dark Mode: 10 / 10 URLs

Summary

Issues

  • By Level: A (0), AA (165)
  • By Version (A & AA): WCAG 2.0 (151), WCAG 2.2 (14)
  • By Category: axe-strict (157) & Best Practice (1) & Others (204)
  • Total: 362 across 34 unique rules & 5 accessibility engines

By Severity

Critical
Serious
Moderate
Minor

By Role

UX Designer
Visual Designer
Content Author
Front-End Developer

Issues

🎯 Pages with Most Errors

Focus your efforts on these pages to make the biggest impact. Click any error count to filter the rule list below. Numbers in parentheses (+N) indicate findings that cover WCAG criteria already reported by axe.
Adaptive Sailing Offshore 0 56
Adaptive Sailing Offshore 0 62
Adaptive Sailing Offshore 0 43
Adaptive Sailing Offshore 0 36
Adaptive Sailing Offshore 00 32
Adaptive Sailing Offshore 00 32
Adaptive Sailing Offshore 0 30
Adaptive Sailing Offshore 0 30
Adaptive Sailing Offshore 0 24
Adaptive Sailing Offshore 00 23

🔧 Most Common Issues (ALFA)

6 rules
50 Moderate alfa SIA-R73: Text spacing can be adjusted without loss of content
10 pages affected

Rule Information

Engine: alfa

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
The line height of the paragraph is `normal` which will result in a line height of less than 1.5
Mode: light
<p class="hero-slogan">Build Your Offshore Sailing Abilities</p>
XPath: /p[@class="hero-slogan"]
Example 2 View on Page
The line height of the paragraph is `normal` which will result in a line height of less than 1.5
Mode: light
<p class="text-lg text-green-700 mb-4">...</p>
XPath: /p[@class="text-lg text-green-700 mb-4"]
Example 3 View on Page
The line height of the paragraph is `normal` which will result in a line height of less than 1.5
Mode: light
<p>As a member-supported non-profit, our purpose is t...</p>
XPath: /p
Example 4 View on Page
The line height of the paragraph is `normal` which will result in a line height of less than 1.5
Mode: light
<p class="mb-2">Adaptive Sailing Offshore, Inc. (501(c)(3) non-pro...</p>
XPath: /p[@class="mb-2"]
Example 5 View on Page
The line height of the paragraph is `normal` which will result in a line height of less than 1.5
Mode: light
<p class="mb-4">Sailing out of Boston Harbor since July 2025</p>
XPath: /p[@class="mb-4"]
14 Serious alfa SC 2.5.8 AA Motor SIA-R111: Interactive elements have a sufficient target size
10 pages affected

Rule Information

Engine: alfa

Roles: UX Designer, Visual Designer

Blocking: ⚠️ Yes (Task-Blocking)

WCAG: SC 2.5.8 AA

Disabilities affected:
Motor

Who Is Affected

  • Limited Manipulation 2.2% — ~7,600,000 Americans
  • Limited Reach and Strength 5.8% — ~19,600,000 Americans

Examples

Example 1 View on Page
Target has insufficient size
Mode: light
<a class="text-[#F1FAEE] no-underline hover:underline hover:text-[#457B9D] transition-colors" href="/">Home</a>
XPath: /a[@class="text-[#F1FAEE] no-underline hover:underline hover:text-[#457B9D] transition-colors"]
Example 2 View on Page
Target has insufficient size
Mode: light
<a class="header-link" href="#mission">Our Mission</a>
XPath: /a[@class="header-link"]
Example 3 View on Page
Target has insufficient size
Mode: light
<a class="text-[#F1FAEE] no-underline hover:underline hover:text-[#457B9D] transition-colors" href="/">Home</a>
XPath: /a[@class="text-[#F1FAEE] no-underline hover:underline hover:text-[#457B9D] transition-colors"]
Example 4 View on Page
Target has insufficient size
Mode: light
<a href="#about" class="header-link">About Adaptive Sailing Offshore</a>
XPath: /a[@class="header-link"]
Example 5 View on Page
Target has insufficient size
Mode: light
<a class="text-[#F1FAEE] no-underline hover:underline hover:text-[#457B9D] transition-colors" href="/">Home</a>
XPath: /a[@class="text-[#F1FAEE] no-underline hover:underline hover:text-[#457B9D] transition-colors"]
10 Moderate alfa SIA-R17
10 pages affected

Rule Information

Engine: alfa

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
The element is either tabbable or has tabbable descendants
Mode: light
<div class="hidden" aria-hidden="true">...</div>
XPath: /div[@class="hidden"]
Example 2 View on Page
The element is either tabbable or has tabbable descendants
Mode: light
<div class="hidden" aria-hidden="true">...</div>
XPath: /div[@class="hidden"]
Example 3 View on Page
The element is either tabbable or has tabbable descendants
Mode: light
<div class="hidden" aria-hidden="true">...</div>
XPath: /div[@class="hidden"]
Example 4 View on Page
The element is either tabbable or has tabbable descendants
Mode: light
<div class="hidden" aria-hidden="true">...</div>
XPath: /div[@class="hidden"]
Example 5 View on Page
The element is either tabbable or has tabbable descendants
Mode: light
<div class="hidden" aria-hidden="true">...</div>
XPath: /div[@class="hidden"]
4 Moderate alfa SC 2.4.6 AA Visual Cognitive SIA-R59: Document has at least one heading to identify its main content
4 pages affected

Rule Information

Engine: alfa

Roles: Content Author, UX Designer

Blocking: No

WCAG: SC 2.4.6 AA

Disabilities affected:
Visual Cognitive

Who Is Affected

  • Without Vision 1.0% — ~3,400,000 Americans
  • Limited Vision 2.4% — ~8,100,000 Americans
  • Limited Language, Cognitive, and Learning Abilities 4.7% — ~15,900,000 Americans

Examples

Example 1 View on Page
The document does not have a heading element
Mode: light
Example 2 View on Page
The document does not have a heading element
Mode: light
Example 3 View on Page
The document does not have a heading element
Mode: light
Example 4 View on Page
The document does not have a heading element
Mode: light
1 Moderate alfa SIA-R18: ARIA states are consistent with element semantics
1 pages affected

Rule Information

Engine: alfa

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
The attribute is prohibited for the element on which it is specified
Mode: light
1 Moderate alfa Best Practice SIA-R53: Headings follow a logical hierarchy
1 pages affected

Rule Information

Engine: alfa

Roles: Content Author, UX Designer

Blocking: No

WCAG: Best Practice

Affected Pages

Examples

Example 1 View on Page
The heading skips one or more levels
Mode: light
<h3 class="text-2xl font-semibold text-[#1D3557] mb-6">Priority Equipment Needs</h3>
XPath: /h3[@class="text-2xl font-semibold text-[#1D3557] mb-6"]

🔧 Most Common Issues (axe)

4 rules
147 Serious axe SC 1.4.3 AA Visual color-contrast: Ensures text and interactive elements have sufficient contrast ratio (4.5:1 for normal text, 3:1 for large text) against their background.
10 pages affected

Rule Information

Engine: axe

Roles: Visual Designer

Blocking: No

WCAG: SC 1.4.3 AA

Disabilities affected:
Visual

Who Is Affected

  • Without Vision 1.0% — ~3,400,000 Americans
  • Limited Vision 2.4% — ~8,100,000 Americans
  • Without Perception of Color 4.3% — ~14,500,000 Americans

Examples

Example 1 View on Page
Elements must meet minimum color contrast ratio thresholds
Mode: dark
<a class="header-link" href="#mission">Our Mission</a>
XPath: h2 > a[href$="#mission"]
Example 2 View on Page
Elements must meet minimum color contrast ratio thresholds
Mode: dark
<p>As a member-supported non-profit, our purpose is to build the broadest possible sailing community. Adaptive Sailing Offshore (AO) works to expand access to offshore sailing from Boston Harbor.</p>
XPath: #mission > p:nth-child(2)
Example 3 View on Page
Elements must meet minimum color contrast ratio thresholds
Mode: dark
<p>
XPath: #mission > p:nth-child(3)
Example 4 View on Page
Elements must meet minimum color contrast ratio thresholds
Mode: dark
<a class="header-link" href="#boats">Our Fleet: Two Capable Figaro 2s</a>
XPath: a[href$="#boats"]
Example 5 View on Page
Elements must meet minimum color contrast ratio thresholds
Mode: dark
<p>The AO fleet consists of two 33-foot Beneteau Figaro 2s. These celebrated offshore racers are known for their strength and performance, making them an excellent choice for learning seamanship in true maritime conditions.</p>
XPath: #boats > p:nth-child(2)
6 Moderate axe heading-order: Ensures heading levels are not skipped (e.g. h1→h3). Inconsistent heading hierarchy makes page structure difficult to navigate for screen reader users.
3 pages affected

Rule Information

Engine: axe

Roles: Content Author, UX Designer

Blocking: No

Examples

Example 1 View on Page
Heading levels should only increase by one
Mode: light
<h3 class="text-2xl font-semibold text-[#1D3557] mb-6">Priority Equipment Needs</h3>
XPath: .text-2xl
Example 2 View on Page
Heading levels should only increase by one
Mode: dark
<h3 class="text-2xl font-semibold text-[#1D3557] mb-6">Priority Equipment Needs</h3>
XPath: .text-2xl
Example 3 View on Page
Heading levels should only increase by one
Mode: light
<h3 class="text-2xl font-semibold text-[#1D3557] mb-4">Marine &amp; Technical Services</h3>
XPath: .border-2.hover\:border-\[\#1D3557\].bg-white:nth-child(1) > .text-2xl
Example 4 View on Page
Heading levels should only increase by one
Mode: dark
<h3 class="text-2xl font-semibold text-[#1D3557] mb-4">Marine &amp; Technical Services</h3>
XPath: .border-2.hover\:border-\[\#1D3557\].bg-white:nth-child(1) > .text-2xl
Example 5 View on Page
Heading levels should only increase by one
Mode: light
<h3 class="text-2xl font-semibold text-[#1D3557] mb-4">Learn &amp; Build Skills</h3>
XPath: .border-2.hover\:border-\[\#1D3557\].bg-white:nth-child(1) > .text-2xl
2 Moderate axe landmark-main-is-top-level: Ensures the main landmark (<main>) is not nested inside another landmark. Screen reader users skip navigation by jumping directly to the main landmark — nesting prevents this.
1 pages affected

Rule Information

Engine: axe

Roles: Front-End Developer, UX Designer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Main landmark should not be contained in another landmark
Mode: light
<section class="section" id="about" role="main" aria-labelledby="about-heading">
XPath: #about
Example 2 View on Page
Main landmark should not be contained in another landmark
Mode: dark
<section class="section" id="about" role="main" aria-labelledby="about-heading">
XPath: #about
2 Moderate axe landmark-no-duplicate-main: Ensures the page has only one main landmark. Multiple main landmarks make it impossible for screen reader users to reliably skip to primary content.
1 pages affected

Rule Information

Engine: axe

Roles: Front-End Developer, UX Designer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Document should not have more than one main landmark
Mode: light
<main id="main-content">
XPath: #main-content
Example 2 View on Page
Document should not have more than one main landmark
Mode: dark
<main id="main-content">
XPath: #main-content

🔧 Most Common Issues (Equal Access)

18 rules
31 Moderate equalAccess aria_role_redundant: ARIA role is redundant with the native role of the element
10 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
The explicitly-assigned ARIA role "banner" is redundant with the implicit role of the element <header>
Mode: light
<header class="bg-[#1D3557] text-[#F1FAEE] py-4 text-center sticky top-0 z-50 shadow-lg" role="banner">
Example 2 View on Page
The explicitly-assigned ARIA role "navigation" is redundant with the implicit role of the element <nav>
Mode: light
<nav aria-label="Main site navigation" role="navigation">
Example 3 View on Page
The explicitly-assigned ARIA role "contentinfo" is redundant with the implicit role of the element <footer>
Mode: light
<footer class="bg-[#1D3557] text-[#F1FAEE] text-center py-8 mt-12" role="contentinfo" id="footer">
Example 4 View on Page
The explicitly-assigned ARIA role "banner" is redundant with the implicit role of the element <header>
Mode: light
<header class="bg-[#1D3557] text-[#F1FAEE] py-4 text-center sticky top-0 z-50 shadow-lg" role="banner">
Example 5 View on Page
The explicitly-assigned ARIA role "navigation" is redundant with the implicit role of the element <nav>
Mode: light
<nav aria-label="Main site navigation" role="navigation">
13 Moderate equalAccess text_block_heading: Blocks of text that serve as headings should be marked up as headings
5 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
Confirm this text 'Build Your Offshore Sailing Abilities' is used as a heading and if so, modify to use a heading element or role
Mode: light
<p class="hero-slogan">
Example 2 View on Page
Confirm this text '$ 2,500' is used as a heading and if so, modify to use a heading element or role
Mode: light
<div class="flex items-center justify-center">
Example 3 View on Page
Confirm this text '$ 2,500' is used as a heading and if so, modify to use a heading element or role
Mode: light
<div title="Click to edit amount" class="text-4xl font-bold text-[#1D3557] cursor-pointer hover:bg-[#F8FAFC] hover:border-[#457B9D] transition-all duration-200 border border-gray-300 rounded px-4 py-2 min-w-[200px] text-center bg-gray-50">
Example 4 View on Page
Confirm this text '🔧' is used as a heading and if so, modify to use a heading element or role
Mode: light
<div class="text-center">
Example 5 View on Page
Confirm this text '🔧' is used as a heading and if so, modify to use a heading element or role
Mode: light
<div class="text-4xl mb-3">
10 Moderate equalAccess style_color_misuse: Color must not be used as the only visual means of conveying information
10 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
Verify color is not used as the only visual means of conveying information
Mode: light
<link data-precedence="next" href="/_next/static/chunks/974a7f4e71c0d41f.css" rel="stylesheet">
Example 2 View on Page
Verify color is not used as the only visual means of conveying information
Mode: light
<link data-precedence="next" href="/_next/static/chunks/974a7f4e71c0d41f.css" rel="stylesheet">
Example 3 View on Page
Verify color is not used as the only visual means of conveying information
Mode: light
<link data-precedence="next" href="/_next/static/chunks/974a7f4e71c0d41f.css" rel="stylesheet">
Example 4 View on Page
Verify color is not used as the only visual means of conveying information
Mode: light
<link data-precedence="next" href="/_next/static/chunks/974a7f4e71c0d41f.css" rel="stylesheet">
Example 5 View on Page
Verify color is not used as the only visual means of conveying information
Mode: light
<link data-precedence="next" href="/_next/static/chunks/974a7f4e71c0d41f.css" rel="stylesheet">
10 Moderate equalAccess style_highcontrast_visible: Elements must be visible in Windows High Contrast mode
10 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
Confirm Windows high contrast mode is supported when using CSS to include, position or alter non-decorative content
Mode: light
<link data-precedence="next" href="/_next/static/chunks/974a7f4e71c0d41f.css" rel="stylesheet">
Example 2 View on Page
Confirm Windows high contrast mode is supported when using CSS to include, position or alter non-decorative content
Mode: light
<link data-precedence="next" href="/_next/static/chunks/974a7f4e71c0d41f.css" rel="stylesheet">
Example 3 View on Page
Confirm Windows high contrast mode is supported when using CSS to include, position or alter non-decorative content
Mode: light
<link data-precedence="next" href="/_next/static/chunks/974a7f4e71c0d41f.css" rel="stylesheet">
Example 4 View on Page
Confirm Windows high contrast mode is supported when using CSS to include, position or alter non-decorative content
Mode: light
<link data-precedence="next" href="/_next/static/chunks/974a7f4e71c0d41f.css" rel="stylesheet">
Example 5 View on Page
Confirm Windows high contrast mode is supported when using CSS to include, position or alter non-decorative content
Mode: light
<link data-precedence="next" href="/_next/static/chunks/974a7f4e71c0d41f.css" rel="stylesheet">
10 Moderate equalAccess aria_content_in_landmark: All content of the page should be contained within a landmark region
10 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
Content is not within a landmark element
Mode: light
<a class="skip-link" href="#main-content">
Example 2 View on Page
Content is not within a landmark element
Mode: light
<a class="skip-link" href="#main-content">
Example 3 View on Page
Content is not within a landmark element
Mode: light
<a class="skip-link" href="#main-content">
Example 4 View on Page
Content is not within a landmark element
Mode: light
<a class="skip-link" href="#main-content">
Example 5 View on Page
Content is not within a landmark element
Mode: light
<a class="skip-link" href="#main-content">
8 Moderate equalAccess input_label_visible: An input element must have an associated visible label
6 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
The input element does not have an associated visible label
Mode: light
<textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#457B9D] focus:border-transparent" aria-describedby="message-error message-help" aria-required="true" required="" rows="5" name="message" id="message">
Example 2 View on Page
The input element does not have an associated visible label
Mode: light
<input style="background: linear-gradient(to right, rgb(29, 53, 87) 0%, rgb(29, 53, 87) 71%, rgb(229, 231, 235) 71%, rgb(229, 231, 235) 100%);" value="71" type="range" class="w-full h-4 bg-gray-200 rounded-lg appearance-none cursor-pointer slider" step="1" max="100" min="0" aria-label="Donation amount slider" id="donation-slider">
Example 3 View on Page
The ‘placeholder’ is the only visible label
Mode: light
<textarea placeholder="Please describe the equipment, including any special features or modifications..." class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#457B9D] focus:border-transparent" rows="4" name="description" id="equipment-description">
Example 4 View on Page
The input element does not have an associated visible label
Mode: light
<input style="background: linear-gradient(to right, rgb(29, 53, 87) 0%, rgb(29, 53, 87) 71%, rgb(229, 231, 235) 71%, rgb(229, 231, 235) 100%);" value="71" type="range" class="w-full h-4 bg-gray-200 rounded-lg appearance-none cursor-pointer slider" step="1" max="100" min="0" aria-label="Donation amount slider" id="donation-slider">
Example 5 View on Page
The ‘placeholder’ is the only visible label
Mode: light
<textarea placeholder="Please describe the specific services you can provide, including any relevant experience or certifications..." class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#457B9D] focus:border-transparent" required="" rows="4" name="description" id="service-description">
6 Moderate equalAccess text_sensory_misuse: Instructions must not rely solely on sensory characteristics
4 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
Confirm the word(s) 'lower' of the user instruction is used to indicate a logical rather than visual position
Mode: light
<p>
Example 2 View on Page
Confirm the user instruction is still understandable without the word(s) 'year-round'
Mode: light
<p class="mb-6">
Example 3 View on Page
Confirm the user instruction is still understandable without the word(s) 'largest'
Mode: light
<p class="text-gray-700 text-sm">
Example 4 View on Page
Confirm the word(s) 'below, lower' of the user instruction is used to indicate a logical rather than visual position
Mode: light
<p>
Example 5 View on Page
Confirm the word(s) 'below' of the user instruction is used to indicate a logical rather than visual position
Mode: light
<p class="text-gray-500 text-sm italic mb-6">
6 Moderate equalAccess input_checkboxes_grouped
1 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Checkbox input and others with the name "interests" are not grouped together
Mode: light
<input name="interests" value="sailing" type="checkbox" class="mr-2">
Example 2 View on Page
Checkbox input and others with the name "interests" are not grouped together
Mode: light
<input name="interests" value="maintenance" type="checkbox" class="mr-2">
Example 3 View on Page
Checkbox input and others with the name "interests" are not grouped together
Mode: light
<input name="interests" value="safety" type="checkbox" class="mr-2">
Example 4 View on Page
Checkbox input and others with the name "interests" are not grouped together
Mode: light
<input name="interests" value="accessibility" type="checkbox" class="mr-2">
Example 5 View on Page
Checkbox input and others with the name "interests" are not grouped together
Mode: light
<input name="interests" value="administration" type="checkbox" class="mr-2">
4 Moderate equalAccess text_contrast_sufficient: Contrast ratio of text against its background must meet minimum requirements
3 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
Verify the contrast ratio of the text against the lightest and the darkest colors of the background meets the WCAG AA minimum requirements for text of size 144px and weight of 900
Mode: light
<a href="#hero" class="header-link">
Example 2 View on Page
Verify the contrast ratio of the text against the lightest and the darkest colors of the background meets the WCAG AA minimum requirements for text of size 24px and weight of 400
Mode: light
<p class="hero-slogan">
Example 3 View on Page
Text contrast of 4.10 with its background is less than the WCAG AA minimum requirements for text of size 16px and weight of 600
Mode: light
<h4 class="font-semibold text-[#457B9D] mb-2">
Example 4 View on Page
Text contrast of 4.10 with its background is less than the WCAG AA minimum requirements for text of size 16px and weight of 600
Mode: light
<h4 class="font-semibold text-[#457B9D] mb-3 text-center">
3 Moderate equalAccess list_markup_review
3 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Verify this is a list and if so, modify to use proper HTML elements for the list
Mode: light
<h3>
Example 2 View on Page
Verify this is a list and if so, modify to use proper HTML elements for the list
Mode: light
<strong>
Example 3 View on Page
Verify this is a list and if so, modify to use proper HTML elements for the list
Mode: light
<h2 class="text-2xl font-semibold text-[#1D3557] mb-4">
3 Moderate equalAccess aria_attribute_redundant: ARIA role or attribute is redundant with the native role and attributes
1 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
The ARIA attribute "aria-required" is redundant with the HTML attribute "required"
Mode: light
<input value="" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#457B9D] focus:border-transparent" aria-describedby="name-error" aria-required="true" required="" id="name" type="text">
Example 2 View on Page
The ARIA attribute "aria-required" is redundant with the HTML attribute "required"
Mode: light
<input value="" name="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#457B9D] focus:border-transparent" aria-describedby="email-error" aria-required="true" required="" id="email" type="email">
Example 3 View on Page
The ARIA attribute "aria-required" is redundant with the HTML attribute "required"
Mode: light
<textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#457B9D] focus:border-transparent" aria-describedby="message-error message-help" aria-required="true" required="" rows="5" name="message" id="message">
2 Moderate equalAccess label_name_visible: The label text for an element must be visible
2 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
Accessible name does not match or contain the visible label text
Mode: light
<input style="background: linear-gradient(to right, rgb(29, 53, 87) 0%, rgb(29, 53, 87) 71%, rgb(229, 231, 235) 71%, rgb(229, 231, 235) 100%);" value="71" type="range" class="w-full h-4 bg-gray-200 rounded-lg appearance-none cursor-pointer slider" step="1" max="100" min="0" aria-label="Donation amount slider" id="donation-slider">
Example 2 View on Page
Accessible name does not match or contain the visible label text
Mode: light
<input style="background: linear-gradient(to right, rgb(29, 53, 87) 0%, rgb(29, 53, 87) 71%, rgb(229, 231, 235) 71%, rgb(229, 231, 235) 100%);" value="71" type="range" class="w-full h-4 bg-gray-200 rounded-lg appearance-none cursor-pointer slider" step="1" max="100" min="0" aria-label="Donation amount slider" id="donation-slider">
1 Moderate equalAccess element_tabbable_unobscured: A tabbable element should not be entirely obscured by overlapping content
1 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Confirm that when the element receives focus, it is not covered or, if covered by user action, can be uncovered without moving focus
Mode: light
<a href="/support?tab=monetary" class="text-[#457B9D] hover:text-[#1D3557] underline">
1 Moderate equalAccess aria_main_label_visible
1 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Multiple elements with "main" role do not have unique visible labels
Mode: light
<body class="font-sans antialiased">
1 Moderate equalAccess fieldset_legend_valid
1 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
<fieldset> element does not have a <legend>
Mode: light
<fieldset>
1 Moderate equalAccess aria_attribute_valid
1 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
The ARIA attributes "aria-label" are not valid for the element <span> with implicit ARIA role "generic"
Mode: light
<span aria-label="required" class="text-red-500">
1 Moderate equalAccess text_quoted_correctly
1 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
If the following text is a quotation, mark it as a <q> or <blockquote> element: "Pay What You Can"
Mode: light
<strong>
1 Moderate equalAccess label_ref_valid
1 pages affected

Rule Information

Engine: equalAccess

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
The value "volunteer-interests" of the 'for' attribute is not the 'id' of a valid element
Mode: light
<label class="block text-sm font-medium text-gray-700 mb-2" for="volunteer-interests">

🔧 Most Common Issues (AccessLint)

5 rules
5 Moderate accesslint distinguishable/color-contrast
2 pages affected

Rule Information

Engine: accesslint

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
Insufficient color contrast ratio of 4.1:1 (required 4.5:1).
Mode: light
<h4 class="font-semibold text-[#457B9D] mb-2">Tax Deductible</h4>
XPath: section:nth-of-type(2) > div:nth-of-type(2) > div > div:nth-of-type(1) > h4
Example 2 View on Page
Insufficient color contrast ratio of 4.1:1 (required 4.5:1).
Mode: light
<h4 class="font-semibold text-[#457B9D] mb-2">Direct Impact</h4>
XPath: section:nth-of-type(2) > div:nth-of-type(2) > div > div:nth-of-type(2) > h4
Example 3 View on Page
Insufficient color contrast ratio of 4.1:1 (required 4.5:1).
Mode: light
<h4 class="font-semibold text-[#457B9D] mb-2">Community Recognition</h4>
XPath: section:nth-of-type(2) > div:nth-of-type(2) > div > div:nth-of-type(3) > h4
Example 4 View on Page
Insufficient color contrast ratio of 4.1:1 (required 4.5:1).
Mode: light
<h4 class="font-semibold text-[#457B9D] mb-3 text-center">For Learners</h4>
XPath: section:nth-of-type(2) > div > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > h4
Example 5 View on Page
Insufficient color contrast ratio of 4.1:1 (required 4.5:1).
Mode: light
<h4 class="font-semibold text-[#457B9D] mb-3 text-center">For Mentors</h4>
XPath: section:nth-of-type(2) > div > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > h4
3 Moderate accesslint navigable/heading-order
3 pages affected

Rule Information

Engine: accesslint

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
Heading level 3 skipped from level 1. Use h2 instead.
Mode: light
<h3 class="text-2xl font-semibold text-[#1D3557] mb-6">Priority Equipment Needs</h3>
XPath: section:nth-of-type(2) > h3
Example 2 View on Page
Heading level 3 skipped from level 1. Use h2 instead.
Mode: light
<h3 class="text-2xl font-semibold text-[#1D3557] mb-4">Marine &amp; Technical Services</h3>
XPath: div:nth-of-type(1) > h3
Example 3 View on Page
Heading level 3 skipped from level 1. Use h2 instead.
Mode: light
<h3 class="text-2xl font-semibold text-[#1D3557] mb-4">Learn &amp; Build Skills</h3>
XPath: div:nth-of-type(1) > h3
2 Moderate accesslint labels-and-names/label-content-mismatch
2 pages affected

Rule Information

Engine: accesslint

Roles: Front-End Developer

Blocking: No

Examples

Example 1 View on Page
Accessible name "Donation amount slider" does not contain visible label "$10".
Mode: light
<input id="donation-slider" aria-label="Donation amount slider" min="0" max="100" step="1" class="w-full h-4 bg-gray-200 rounded-lg appearance-none cursor-pointer slider" type="range" value="71" style...
XPath: #donation-slider
Example 2 View on Page
Accessible name "Donation amount slider" does not contain visible label "$10".
Mode: light
<input id="donation-slider" aria-label="Donation amount slider" min="0" max="100" step="1" class="w-full h-4 bg-gray-200 rounded-lg appearance-none cursor-pointer slider" type="range" value="71" style...
XPath: #donation-slider
1 Moderate accesslint landmarks/landmark-main
1 pages affected

Rule Information

Engine: accesslint

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Page has multiple main landmarks.
Mode: light
<section class="section" id="about" role="main" aria-labelledby="about-heading"><h1 id="about-heading" class="text-4xl font-bold text-[#1D3557] mb-8"><a href="#about" class="header-link">About Adaptiv...
XPath: #about
1 Moderate accesslint landmarks/no-duplicate-main
1 pages affected

Rule Information

Engine: accesslint

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Page has multiple main landmarks.
Mode: light
<section class="section" id="about" role="main" aria-labelledby="about-heading"><h1 id="about-heading" class="text-4xl font-bold text-[#1D3557] mb-8"><a href="#about" class="header-link">About Adaptiv...
XPath: #about

🔧 Most Common Issues (QualWeb)

1 rule
1 Moderate qualweb QW-ACT-R76: Element has contrast ratio lower than minimum.
1 pages affected

Rule Information

Engine: qualweb

Roles: Front-End Developer

Blocking: No

Affected Pages

Examples

Example 1 View on Page
Element has contrast ratio lower than minimum.
Mode: light