Decorative icons include alternative text even though they do not convey meaningful information or functionality. As a result, assistive technologies may announce unnecessary content that adds noise without improving the user’s understanding of the page.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 1.1.1: Non-text Content (A)

Example(s)

A screenshot of three sections, each with a large decorative icon.

The three icons on the homepage have alt text when they should be marked decorative.

Remediation

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

Method

  1. Mark the icon decorative by removing the alt text.

Headings provide structure and help users understand the organization of a page. An empty heading creates a structural element with no meaningful content, which can confuse assistive technology users and reduce the effectiveness of heading navigation. Empty headings also add unnecessary noise to the document outline without conveying information.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 1.3.1: Info and Relationships (A)

Example(s)

Home

A screenshot of a slider, highlighting an empty heading using dev tools.

There is an empty h2 heading tag above “Boa is Back”

Remediation

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

Method

  1. Remove the empty heading

Decorative icons that do not convey additional meaning or functionality should be hidden from assistive technologies. When decorative graphics are exposed to screen readers, they may be announced unnecessarily, creating redundant or confusing output that interrupts the reading experience without providing useful information.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 1.1.1: Non-text Content (A)

Example(s)

Colt Custom

A screenshot of 2 links. Both links have a download icon and a right arrow icon.

Decorative icons are presented alongside link text but are not hidden from assistive technologies or supplied with alt text.

Remediation

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

Method 1

  1. Hide icons from assistive technology by providing an alt="" attribute.

Remediation methods to avoid

  • Do not give these decorative icons alt text

Each id value on a page should be unique. Duplicate id values can create ambiguity for assistive technologies, scripts, labels, skip links, fragment links, and ARIA relationships. Even when duplicate elements are visually hidden at certain breakpoints, the duplicate markup may still exist in the DOM and be detected by automated tools.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 4.1.2: Name, Role, Value (A)

Example(s)

Global (Home), main menu

Duplicate id values are present because Elementor outputs multiple responsive versions of the header for different breakpoints. Some duplicated elements are visually hidden depending on viewport size, but they remain present in the DOM.

Remediation

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

Method

  1. Ensure inactive responsive header variants are not present in the DOM for the current viewport, or ensure all repeated elements use unique id values across the full page source.

At certain desktop viewport widths, the header navigation does not properly adapt to the available space. The right-side icon navigation can be pushed outside the visible area, causing horizontal scrolling and making the search icon partially or fully unavailable without extra effort.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 1.4.10: Reflow (AA)

WCAG 2.4.7: Focus Visible (AA)

Example(s)

Global, main menu (Home)

A screenshot of 3 icons in a menu with 4 icons. The fourth is cut off due to the size of the browser.

(The black square area is part of my desktop wallpaper)

Between approximately 1300px and 1400px browser width, the main navigation and right-side icon navigation do not fit within the header. The search icon is pushed outside the visible area, producing horizontal scrolling. Below 1300px, the menu converts to a hamburger layout, so the issue appears in the breakpoint gap before the mobile/tablet layout takes over.

This becomes severe depending on browser zoom, also.

Remediation

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

Method 1

  1. Implement flex-wrap between those sizes so the icon menu wraps below the main menu and remains available.

Method 2

  1. Reduce the icon size to no smaller than 24px x 24px to reduce real estate required.

Remediation methods to avoid

  • Avoid overusing hamburger menus. This increases clicks required of users.
.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

A video presented in Spanish is labeled with an English title. When the visible title does not reflect the language of the content, users may not understand what to expect before interacting with the media.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 3.1.2: Language of Parts (AA)

WCAG 2.4.4: Link Purpose (In Context) (A)

Example(s)

Point and Pay Online Payments

A screenshot of a list of 3 helpful videos. The second items says "Watch: How to Create an Account and Set Up Recurring Payments (Spanish)".

“Watch: How to Create an Account and Set Up Recurring Payments (Spanish)” is in English despite intending to appeal to Spanish speakers.

Remediation

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

Method

  1. Change “Watch: How to Create an Account and Set Up Recurring Payments (Spanish)” to its Spanish counterpart (eg, “Mire: Cómo crear una cuenta y configurar pagos recurrentes (Español)” — not translated by someone who speaks Spanish)
  2. Ensure its language tag is updated to es

Resources

Some header links include title attributes that are empty or whitespace-only (title=" "). Empty title attributes can create inconsistent tooltip behavior and may be announced unpredictably depending on assistive technology and settings.

User impacts

Follow the links for additional information on user impairments:

Best practice violation

Best practice violations do not violate specific WCAG criteria but negatively impact user experience by violating a POUR principle:

  • Perceivable: If content on your site is not presented in a way that all users can perceive—like text without sufficient color contrast or images without alt text—some users might miss crucial information.
  • Operable: When interactive elements are not fully navigable or usable with a keyboard alone, they fail to be operable for users who rely on assistive technologies or non-mouse inputs.
  • Understandable: Content that is overly complex, uses inconsistent navigation, or includes unpredictable interactions can make your site difficult to understand for many users, leading to confusion or errors.
  • Robust: If your site relies on outdated technology or isn’t compatible with assistive devices, it might not be robust enough to support all users, particularly those using newer or more specialized tools.

Example(s)

<li id="menu-item-1235" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1235">
    <a href="/my-account" title="                        ">My Account
        ...
    </a>
</li>

This is at least on “My Account” and “Checkout” in the header menu.

Remediation

Remove empty title attributes or provide them with relevant values.

Several links on the site, particularly in the footer and navigation menu, are empty (<a href="#">), causing confusion for users trying to navigate the site. These links don’t lead anywhere and can mislead users into thinking they are interactive elements.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

Remediation

Remove or replace empty links with either a valid destination URL.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.