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

Resources

The registration form uses placeholder text inside input fields instead of proper labels. Placeholder text disappears when users start typing and is not reliably announced by assistive technologies. This makes it difficult for users to understand what information is required in each field.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 1.3.1: Info and Relationships (A)

WCAG 3.3.2: Labels or Instructions (A)

WCAG 4.1.2: Name, Role, Value (A)

Example(s)

A screenshot of a Registration Form with a Name, Email address, Country, Phone, and Password fields using placeholders as labels instead of semantic labels.
<input type="text" placeholder="Name">
<input type="email" placeholder="Email address">

No <label> element exists, programmatically associated or otherwise.

Remediation

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

Method 1 – Implement visible labels (recommended)

  1. Add a <label> element for each form control.
  2. Ensure the for attribute of the <label> matches the id of the input.
  3. Keep the label visible on screen (do not rely solely on placeholder text).
  4. Ensure each id value is unique on the page.
<label for="name">Name</label>
<input type="text" id="name">

<label for="email">Email address</label>
<input type="email" id="email">

Method 2 – Implement an aria-label

  1. Add a unique id to each form control.
  2. Add an aria-label attribute that clearly describes the field’s purpose.
  3. Ensure the accessible name matches any visible text.
  4. Do not rely on placeholder text as the accessible name.
<input type="text" id="name" aria-label="Name">

Remediation methods to avoid

  • Do not rely solely on placeholder text as the label.
  • Do not hide visible labels with display: none; (this removes them from assistive technologies).
  • Do not add title attributes as a substitute for labels. They are inconsistently announced.
  • Do not use vague accessible names like "field" or "input1".
  • Do not duplicate IDs across fields when associating labels.

Resources

Content that causes horizontal scrolling on small screens creates an unexpected, disorienting browsing experience. Horizontal scroll makes it easy to miss important content, increases cognitive load, and can create major usability barriers—especially for users who rely on zoom, larger text, keyboard navigation, or screen magnification.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 1.4.10: Reflow (AA)

Example(s)

Pages with the .block-hero class.

A screenshot of a mobile view of a webpage depicting a hero image that is twice as wide as the main content body creating a horizontal scroll and massive white space.

Remediation

Fix the container’s media queries.

A sub-list must be nested inside the list item (li) it belongs to. In this case, the nested ul is placed as a direct child of the parent ul instead of being contained within an li. This breaks list semantics and can cause assistive technologies to announce the content incorrectly, making the structure harder to understand and navigate.

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.1 – Parsing

Example(s)

Serving: simple seasonal salad

A screenshot of a simple list with a sub-list.
<ul>
    <li><strong>Simple version:</strong></li>
    <ul>
        <li>
            <strong></strong>Seasonal greens</li>
        <li>Vegetables you have on hand like carrots, tomatoes, or cucumber</li>
        <li>Fruit in the fridge like apples, oranges, or peaches</li>
    </ul>
    <li>
        <b><em>To elevate it:</em>&nbsp;</b>use the ingredients above, but add crunch—nuts,&nbsp;'One-Ton' chips, or sesame sticks are our picks.&nbsp;</li>
    <li>
        <b><em>To go extra:</em>&nbsp;</b>add specialty items from your local market. Our favorites are hemp hearts, chia seeds, and edible flowers.</li>
</ul>

The sub-list under “Simple version:” is a direct child of the ul, not the li.

Remediation

ul and ol must only directly contain li, script or template elements. Sub-lists should be a direct child of an li.

Form labels are intended to be programmatically associated with their corresponding inputs so users can clearly understand what information is being requested. In this case, the label and input use nearly identical identifiers, but a small mismatch in formatting prevents the association from working. As a result, assistive technologies cannot reliably determine which label belongs to which form field, creating confusion and reducing form usability.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 1.3.1: Info and Relationships (A)

WCAG 3.3.2: Labels or Instructions (A)

WCAG 4.1.2: Name, Role, Value (A)

Example(s)

Gift Registry Sign Up

A screenshot of a form containing five input fields with visible labels, indicating none of them are programmatically attached to the inputs.

The inputs in the Registry sign up form use hyphens in the id attribute while the labels use underscores in the for attribute. So even though they’re using the same words the spacer distinction prevents a programmatic label-input association.

Remediation

Update either field to ensure it matches the other exactly, including spacer characters.

Some links on the page do not contain discernible text. These empty anchor elements appear to be the result of a list of links being cut off or improperly generated, leaving stray <a> elements with no accessible name. As a result, assistive technologies encounter links that provide no information about their purpose or destination.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 2.4.4: Link Purpose (A)

WCAG 4.1.2: Name, Role, Value (A)

Example(s)

Fabrics + Technology

There are many stray empty links littered throughout the lists (eg, `<li><a href="#"></a><a href="#">Link text</a></li>`).

Remediation

Remove the empty links.

List item (<li>) elements are used to structure post entries on archive pages, but they are not contained within a semantic list container such as <ul> or <ol>. While the visual presentation may appear correct, this breaks expected HTML structure and results in content that is not programmatically recognized as a list.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 1.3.1: Info and Relationships (A)

Example(s)

The li.entry-list-item are wrapped in a div and no ul exists.

Remediation

Ensure the direct parent of list items is a ul or ol.

This page contains visible remnants of deprecated page-builder functionality (such as raw toggle shortcodes) and inconsistent content structures that no longer function as intended. These legacy artifacts can be confusing for users, obscure the intended organization of content, and interfere with assistive technology interpretation. In addition to the specific accessibility failures outlined below, the overall experience of navigating and understanding this page is significantly degraded.

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 1.4.1: Use of Color (A)

WCAG 1.4.3: Contrast Minimum (AA)

WCAG 2.4.4: Link Purpose (A)

WCAG 2.4.6: Headings and Labels (AA)

WCAG 2.4.7: Focus Visible (AA)

WCAG 3.2.4: Consistent Identification (AA)

Example(s)

Doe v. Holcomb (formerly Doe v. Pence)

  • Visible legacy shortcodes: Raw toggle shortcodes (eg, [toggle], [/toggle]) are exposed in page content, suggesting missing or broken interactive functionality.
  • Non-semantic headings: Bold or oversized text is used to visually imply headings without appropriate heading markup.
  • Unclear interactive elements: A heading-styled sentence functions as a link but has no visual indication that it is clickable.
  • Image link alternative text: Linked media logos use inconsistent or filename-based alternative text (eg, abc_fusion_logo_130508) that does not describe link purpose.
  • Color contrast: One inline-styled link uses a text color of #b1512b on a #efefef background, which does not meet minimum contrast requirements for normal text.

Remediation

Rebuild this page using modern, semantic markup and current accessibility best practices. Remove all legacy page-builder artifacts, ensure proper heading structure and grouping, provide meaningful alternative text for linked images, ensure links are visually identifiable, and verify color contrast compliance across all text elements.

Text and interactive elements do not provide sufficient color contrast against their backgrounds, making content difficult to read and controls hard to identify. When contrast requirements are not met, users may struggle to perceive information or understand available actions, particularly in low-vision or high-glare environments.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 1.4.3: Contrast Minimum (AA)

WCAG 1.4.11: Non-Text Contrast (AA)

Example(s)

SGMA

A screenshot of a calculator embed using a light blue heading text and light blue button backgrounds with white text.

The Calculator’s background is #f9f9f9 and the heading is #06A2CC (2.8301 contrast ratio). Additionally, the buttons are #06A2CC with white (#ffffff) text (2.97 contrast ratio) with VERY small text (12px). Both have a fine font weight.

Remediation

Darken the blue to the site’s global blue (#017fa2) which has enough contrast ratio with both colors.

Several video files on the website, including a key promotional video, do not include captions or transcripts. Captions are necessary for users who are deaf or hard of hearing to fully access the information being presented. Without them, these users are unable to engage with the content meaningfully.

User impacts

Follow the links for additional information on user impairments:

WCAG violation(s)

WCAG 1.2.2: Captions (Prerecorded) (A)

WCAG 1.4.2: Audio Control (A)

Example(s)

“Videos” page

Remediation

Provide synchronized captions for all video content or accessible transcripts for videos without audio. Ensure that captions are easily toggleable by users.