The “Marfa, TX City Guide” itinerary guide presents each recommended location as a single image containing multiple pieces of meaningful textual information, including the recommendation category, social media handle, location name, and descriptive recommendation. However, the image alternative text contains only the location name and city.

Because the remaining information exists only visually within the image, users who cannot perceive images do not receive an equivalent version of the guide content. The current alternative text may adequately identify the destination of the image link, but it does not provide an equivalent alternative for the informational content contained within the image itself.

Additionally, presenting ordinary textual content as rasterized images prevents users from benefiting from browser and assistive technology features available to real text, including text resizing, custom fonts, spacing adjustments, high-contrast adaptations, translation, selection, and reflow.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 1.1.1: Non-text Content (A)

WCAG 1.4.5: Images of Text (AA)

Example(s)

Note: These are the only guides that come up in a search, but this issue applies to any other similar guides or formats.

A screenshot of an image containing a category/subject ("For coffee or tea:"), an image of the location (a rustic store from with aged teal paint and wood benches), an instagram handle rotated 90 degrees (@bigsandycoffee), the location's title ("Big Sandy"), and a tag line ("Caffeinate at this local coffee ship and pair it with a little treat").

The alternative text identifies the location of the link but omits the category/subject, social media information, name of the store, tag line. Additionally, since the alt text is the link destination, there is not description from the image of the storefronts/paired image.

Additionally, the link doesn’t indicate it’s going to the Instagram, leaving the user to wonder where exactly they’re going.

This pattern occurs throughout the itinerary guides.

Remediation

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

Method

  1. Do not make each card an image.
  2. Convert all the information to real text.
  3. It’s also not recommend to rotate informative text, such as the Instagram handle.
  4. Make the Instagram handle the link to the Instagram instead of linking it in its entirety.
  5. Apply informative alt text to the image being used in the card.

Resources

Interactive elements must provide a clearly visible focus indicator so keyboard users can easily identify which element currently has focus. When the visual changes applied during focus are subtle or do not clearly distinguish the focused element from surrounding content, users may lose track of their position while navigating.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 2.4.7: Focus Visible (AA)

WCAG 2.4.13: Focus Appearance (AAA)

(note that AAA violations are considered best practice)

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)

Product catalogue (Rifles)

No focus:

A screenshot of 3 items in a product catalogue.

With focus:

A screenshot of 3 items in a product catalogue. The first item, which is receiving keyboard focus, has a slightly bigger box and drop shadow. The product image is missing.

The image is missing due to the following CSS:

ul.products li.product:focus-within::before,
ul.products li.product:hover::before {
    visibility: visible;
    opacity: 1;
    transition: 0.2s;
}

ul.products li.product:not(.product-category):before {
    visibility: hidden;
    position: absolute;
    left: 0;
    opacity: 0;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    content: "";
    transition: 0.2s;
    width: calc(100% + 0px);
    height: calc(100% + 30px);
    margin-top: -15px;
    margin-left: 0;
}

Disabling either of the highlighted rules restore the image on focus.

Remediation

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

Method

  1. Implement a clearly distinguishable focus indicator for each product card, such as a high-contrast outline, border, or other visual treatment that remains visible regardless of the surrounding page colors.
  2. Restore image on focus

The product selection checkboxes within the “Frequently Bought Together” component do not have programmatically associated labels. Although each checkbox is visually positioned next to product information, the checkbox itself is not associated with the surrounding text, preventing assistive technologies from identifying which product the checkbox controls. As a result, users cannot reliably determine the purpose of each checkbox when navigating the component.

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)

Global, items with Frequently Bought Together section (Example: Terra Serving Board)

A screenshot of a "frequently bought together" section featuring a product image, name, price, and a checkbox to include/exclude it.
<div class="rebuy-product-block terra-serving-board product-id-6743539417176 tag-badgesale tag-color_familybrown tag-color_familyorange tag-color_familyred tag-disco tag-nobackinstock tag-nonrefundable tag-nonreturnable tag-sale is-input-product is-selected">
    <div class="rebuy-product-info" data-product-card-tracked="true"><a href="/collections/sale-1/products/terra-serving-board?variant=39589331042392&amp;_rdiscovery-handle=terra-serving-board&amp;_rdiscovery-widget=209201" class="rebuy-bundle__image-item bundle-single-image" data-product-impression-tracked="true" data-product-link-position="3" data-impression-id="8d82d811-e649-41ce-a13e-8438dca8dc52" data-above-fold="true" data-product-click-tracked="true"><img src="https://cdn.shopify.com/s/files/1/1020/2551/products/HNY.500.20.002.770_PROFILE_b_RT_alt.jpg?v=1655119030" alt="View Terra Serving Board" class="rebuy-product-img"> <img src="https://cdn.shopify.com/s/files/1/1020/2551/products/HNY.500.20.002.770_PROFILE_a1_RT_alt.jpg?v=1655119030" alt="View Terra Serving Board" class="rebuy-product-hover-img"></a>
        <div class="rebuy-bundle__info-item" data-product-card-tracked="true">
            <div class="rebuy-product-checkbox"><label class="rebuy-checkbox-label"><input type="checkbox" class="checkbox-input rebuy-checkbox"></label></div> <strong class="rebuy-product-label">This item:</strong> <a href="/collections/sale-1/products/terra-serving-board?variant=39589331042392&amp;_rdiscovery-handle=terra-serving-board&amp;_rdiscovery-widget=209201" class="rebuy-product-title" data-product-link-position="3" data-impression-id="8d82d811-e649-41ce-a13e-8438dca8dc52" data-product-click-tracked="true">Terra Serving Board</a>
            <!---->
            <!---->
            <div class="rebuy-product-price">
                <div><span class="rebuy-money sale">$ 32</span> <span class="rebuy-money compare-at">$ 50</span></div>
                <!---->
            </div>
            <!---->
            <!---->
        </div>
    </div>
</div>

The nearby product name and descriptive text are not programmatically associated with the checkbox. Screen readers announce the control only as “checkbox, checked” or “checkbox, unchecked” rather than identifying the associated product.

Remediation

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

Method

  1. Ensure each product selection checkbox has a meaningful, programmatically determinable accessible name that clearly identifies the product it controls.

Resources

The annual calendar is provided as a downloadable PDF that contains multiple accessibility barriers, making it difficult or impossible for some users to access the information. Because the events contained within the document are not available elsewhere on the website, users who cannot access the PDF do not have an equivalent means of obtaining the same information.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 1.1.1: Non-text Content (A)

WCAG 1.3.1: Info and Relationships (A)

WCAG 4.1.2: Name, Role, Value (A)

Example(s)

2026 District Calendars, available in the main menu.

Remediation

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

Method 1 (recommended)

  1. Create a page with the PDF’s information available
  2. Offer the PDF as a download

Method 2

  1. Remediate the PDF

Multiple certification and recognition badges displayed in the site footer are implemented as linked images without meaningful alternative text or another accessible equivalent. Because the images serve as the sole content of their respective links, assistive technologies cannot communicate the purpose or destination of these links to users.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 1.1.1: Non-text Content (A)

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

WCAG 4.1.2: Name, Role, Value (A)

Example(s)

Global, footer (Home)

A screenshot of a collection of badge logos.

None of the badges in the footer, nor the ElevatePFS logo, have alternative text.

Remediation

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

Method

  1. Provide descriptive alt text for each badge that identifies the certification, award, or recognition represented (indicating its destination).
  2. Provide link destination alt text for the logo

The website’s primary logo functions as a link to the homepage but does not provide alternative text or another accessible equivalent. As a result, assistive technologies cannot communicate the purpose of the image or the destination of the link, making it difficult for users to identify the site’s primary navigation element.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 1.1.1: Non-text Content (A)

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

WCAG 4.1.2: Name, Role, Value (A)

Example(s)

Global (Home)

A screenshot of a site header outlining the logo to indicate it is the problem.

The site header’s logo is missing 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. Give the image alt text that indicates the link destination (eg, “Elevate PFS Home”)

Interactive controls must have an accessible name that clearly communicates their purpose. An accordion trigger without visible or programmatically associated text provides no meaningful information to assistive technology users, making it impossible to understand what the control expands or whether it is relevant to the task.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 4.1.2: Name, Role, Value (A)

WCAG 2.4.6: Headings and Labels (AA)

Example(s)

MLE Catalog

<button class="kt-blocks-accordion-header kt-acccordion-button-label-show kt-accordion-panel-active" type="button" id="kt-accordion-header-215377" aria-controls="kt-accordion-panel-215377" data-kt-accordion-header-id="0" aria-expanded="true"><span class="kt-blocks-accordion-title-wrap"><span class="kt-blocks-accordion-title"></span></span><span class="kt-blocks-accordion-icon-trigger"></span></button>

Remediation

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

Method 1 (recommended)

  1. Remove the accordion feature and allow the content to live on the page. It adds more clicks to access information.

Method 2

  1. Give the accordion button title meaningful text

Keyboard focus indicators help users understand which interactive element is currently active. If form inputs do not provide a clear visual indication of focus, keyboard and low vision users may struggle to determine where they are within the interface. A blinking text cursor alone is not always sufficient to clearly communicate focus location, particularly in dense or multi-step forms.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 2.4.7: Focus Visible (AA)

Example(s)

Revolver Rebate

The form on this page does not have field focus indication

Remediation

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

Method

  1. Ensure all fields have a :focus indication that meets contrast requirements.

Resources

The sidebar layout remains in a multi-column configuration until viewport widths reach 768px, despite becoming visually compressed and difficult to understand before that breakpoint. At widths just above the breakpoint, sidebar content becomes excessively narrow, causing words and controls to wrap in ways that reduce readability and usability.

The search field itself uses a fixed minimum width that prevents it from shrinking within smaller layouts. At narrow viewport sizes, the field overlaps adjacent content and containers, reducing readability and usability.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 1.4.10: Reflow (AA)

WCAG 1.4.12: Text Spacing (AA)

Example(s)

Resource Center

As seen in the screenshots, the 19% width of the sidebar causes compression that makes the content difficult to understand. However, the set min-width search field extends the input beyond its containers and into the main content.

Remediation

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

Method 1

  1. To ensure consistent readability before the breakpoint, use a set width for the sidebar itself
  2. Set the search input to be 100% to consistently fill the width of the available space
  3. Check breakpoints
.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; }

The decorative search icon behaves like an interactive search button for mouse users but is not keyboard focusable or operable. This creates inconsistent functionality between input methods and prevents keyboard-only users from accessing the same interaction pattern.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 2.1.1: Keyboard (A)

WCAG 4.1.2: Name, Role, Value (A)

Example(s)

Resource Center

<div class="facetwp-facet facetwp-facet-resource_search facetwp-type-search" data-name="resource_search" data-type="search">
    <span class="facetwp-input-wrap">
        <i class="facetwp-icon" data-rocket-lazy-bg-728bd057-9109-4c64-85f4-61bb42c51b94="loaded"></i>
        <input type="text" class="facetwp-search" value="" placeholder="Search..." autocomplete="off">
    </span>
</div>

The icon depicted in the search is clickable via mouse but not accessible via keyboard.

Remediation

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

Method 1

  1. Wrap the icon in a button element to make it keyboard accessible
  2. Ensure the button has accessible text either by means of an aria-label or visually hidden screen reader text

Remediation methods to avoid

  • Do not make non-native UI elements (in this case, i) keyboard accessible via scripts. It is best practice to use native UI elements.
.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; }