The browser page title (<title>) and the main on-page heading (<h1>) are inconsistent and do not clearly represent the same content. When these two elements use different terminology or levels of specificity, it can make it difficult for users to confirm they are on the correct page or to understand the page’s purpose.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 2.4.2: Page Titled (A)

WCAG 2.4.6: Headings and Labels (AA)

WCAG 3.2.4: Consistent Identification (AA)

Example(s)

Many pages are like this and can many navigation difficult.

Remediation

For this issue to be remediated and marked Fixed, all the items below must be addressed.

Method

  1. Synchronize the title attribute with the h1. Ensure the URL is also consistent.
  2. Avoid using vague or abbreviated titles when the on-page heading is more descriptive
  3. Ensure both elements accurately reflect the page’s purpose and content
  4. Maintain consistency across the site to support navigation and orientation

Empty heading elements are present on the page, including instances where headings are used as structural wrappers without containing meaningful text. Headings are intended to provide a clear outline of page content, and empty headings create gaps in that structure, reducing the reliability of navigation for assistive technologies.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 1.3.1: Info and Relationships (A)

WCAG 2.4.6: Headings and Labels (AA)

Example(s)

Pages with form embeds with an empty .widgettitle heading:

Pages with miscellaneous empty headings

Remediation

For this issue to be remediated and marked Fixed, all the items below must be addressed.

Method 1

  1. Remove empty heading elements that do not convey information
  2. If a heading is needed for structure, provide clear, descriptive text that reflects the content it introduces

Resources

A same-page “jump link” references an anchor that does not exist on the page. When users activate the link, focus and navigation do not move to the expected section, resulting in a broken navigation experience and loss of context.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 2.4.4: Link Purpose (A)

WCAG 1.3.1: Info and Relationships (A)

WCAG 2.4.1: Bypass Blocks (A)

Example(s)

Extended Business Office

<a href="#denial" target="_self" class="fl-button fl-button-icon-animation">
    <span class="fl-button-text">Denials Management</span>
    <i class="fl-button-icon fl-button-icon-after ua-icon ua-icon-chevron-right2" aria-hidden="true"></i>
</a>

The target container:

<div id="insurance-follow-up" class="fl-row fl-row-full-width fl-row-bg-none fl-node-61y0eiofbasl fl-row-default-height fl-row-align-center two-col-icon-wrapper" data-node="61y0eiofbasl">
    ...
</div>

Remediation

For this issue to be remediated and marked Fixed, all the items below must be addressed.

Method 1

  1. Update the link href to match the existing target ID

Method 2

  1. Update the target element’s id to match the link

Small or tightly packed links can be difficult to activate accurately, especially on touch devices. When adjacent targets are too close together, users may tap the wrong link by accident, creating frustration and reducing confidence in navigation.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 2.5.8: Target Size (Minimum) (AA)

Example(s)

Fabrics + Technology

A screenshot of a list of 5 links very close together requiring higher accuracy to click.

The list of links is rendered with an effective clickable height of only about 19px due to a line-height of 1.15, with very little space between adjacent items. This creates a dense cluster of touch targets that is easy to mis-tap, especially on mobile devices.

Remediation

For this issue to be remediated and marked Fixed, all the items below must be addressed.

Increase the effective target size of each link to at least 24px by 24px CSS pixels, or add enough spacing between adjacent links so that each target can be activated without accidentally triggering a neighboring one.

Method 1 – recommended

  1. increasing line-height to minimum 1.5 (this is a WCAG requirement for text under 24px)

Method 2

  1. adding vertical padding to the links to increase their click target
.ac-remediations p.remediations-into strong { background-color: #00703C; color: #ffffff; display: inline-block; border-radius: 80px; padding: 4px 8px; line-height: 1; } .ac-remediations { background-color: #ffffff; padding: 1em; border-radius: 10px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2); margin: 2em 0; } .ac-remediations h3 { font-size: 1.25rem; font-weight: 700; }

Resources

The fullscreen product gallery opens as a dialog, but the dialog does not provide a clear accessible name. Screen reader users may be informed that a dialog has opened without being told what the dialog contains or what its purpose is.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 4.1.2: Name, Role, Value (A)

Example(s)

Single products image galleries (Provincial Industrial Flooring Top 4 Seat Swing Table)

<div class="pswp pswp--open iconic-woothumbs-pswp" tabindex="-1" role="dialog">

The dialog has a role, but no aria-label or aria-labelledby to identify it.

Remediation

For this issue to be remediated and marked Fixed, all the items below must be addressed.

Method 1

  1. Provide the dialog with an accessible name using aria-label. Eg, aria-label="Product image gallery"

Method 2

  1. Create a new text block or heading with an id attribute or using a pre-existing one, implement an aria-labelledby="id" attribute that connects to the id attribute of the desired text.

Resources

The form includes a <label> element whose for attribute references a <div> rather than a labelable form control. As a result, the visible “CAPTCHA” label is not programmatically associated with the reCAPTCHA widget.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 1.3.1: Info and Relationships (A)

WCAG 4.1.2: Name, Role, Value (A)

Example(s)

SGMA Interest Form


<li id="field_3_4" class="gfield gfield--type-captcha field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible">
    <label class="gfield_label gform-field-label" for="input_3_4">CAPTCHA</label>
    <div id="input_3_4" class="ginput_container ginput_recaptcha gform-initialized" data-sitekey="6LeONYAUAAAAAMcf5o1zy0qfiB4PDUYikA_ZisRO" data-theme="light" data-tabindex="0" data-badge="" data-widget-id="0">
        ...
    </div>
</li>

The target is a div, not a form control.

Remediation

Ensure the CAPTCHA label is programmatically associated with the interactive element. If the widget is rendered inside a container <div>, use appropriate ARIA techniques (such as aria-labelledby) on the rendered iframe or wrapper element to correctly associate the visible label with the CAPTCHA control.

The reCAPTCHA badge expands to reveal contextual information when hovered with a mouse, but does not expand when navigated via keyboard. As a result, sighted keyboard users may access the “Take Action” link without seeing the associated context that mouse users receive.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 1.4.13: Content on Hover or Focus (AA)

WCAG 2.1.1: Keyboard (A)

WCAG 3.2.4: Consistent Identification (AA)

Example(s)

Sign up for emails from Transgender Law Center! and Subscribe

A screen shot of a collapsed reCAPTCHA drawer with the CAPTCHA logo, and links for "Privacy" and "Terms".
A screenshot of an expanded reCAPCTHA drawer with the content: "protected by reCAPTCHA reCAPTCHA is changing its terms of service." And links for "Take action", "Privacy" and "Terms".
  • Hover-only expansion: The reCAPTCHA badge slides open on mouse hover to reveal explanatory content.
  • Keyboard parity issue: Tabbing to “Take Action” does not trigger the expanded visual state, leaving contextual content hidden from sighted keyboard users.

Remediation

Ensure that any content revealed on hover is also revealed on keyboard focus.

On single product pages, after pressing Add to cart there’s a silent pause, then a full page reload, and finally a success message. During that pause, there’s no programmatic indication that the action is processing (no aria-busy, no status region like “Adding to cart”, no spinner announcement, etc). These confuses screen reader users as to whether or not an action was registered.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 3.2.2: On Input (A)

WCAG 4.1.3: Status Messages (AA)

Remediation

Add a live status update immediately on activation (“Adding to cart”).

The privacy policy link is distinguished only by color without an additional non-color element (icons, underlines, backgrounds, etc), making it harder to identify as a link.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 1.4.1: Use of Color (A)

Example(s)

Checkout

A screenshot of text "Your personal data will be used to process your order, support your experience throughout this website, and for other purposes described in our privacy policy." with privacy policy as a link as different color text with no other indication.

Remediation

Add a non-color link indication to differentiate it from the surrounding text.

When a user activates Apply coupon, the interface enters a loading/processing state (spinner visible), but there is no programmatic or audible feedback indicating that the coupon is being validated. Screen reader users receive silence between activation and the final success/error message, which can feel like the button did nothing or the page froze.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 4.1.3: Status Messages (AA)

WCAG 3.2.2: On Input (A)

Example(s)

Cart

A screenshot of a coupon application field with an input field labeled "Coupon code" and a button that says "Apply coupon".

Remediation

Announce the processing state immediately after activation using a live region:

  • Example: “Applying coupon…”
  • Use aria-live="polite" or role="status" so it does not interrupt the user.