Remediation

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

Method 1 – recommended

1. Use a native interactive element with built-in keyboard support, such as a <button>, and ensure it responds to standard keyboard activation.

Method 2 – if this gallery plugin must be used

1. Ensure it responds to both Enter and Space
2. Ensure the keyboard behavior matches the mouse behavior
3. Verify the control remains focusable and operable without requiring pointer interaction

Remediation methods to avoid

• Avoid using <a> to trigger actions

Remediation

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

Method

1. Replace non-semantic interactive elements with native <button> elements to ensure built-in keyboard support and accessibility.

Remediation methods to avoid

• Do not use <a> to trigger an event
• Using JavaScript to force non-native elements to do a job they weren’t programmed to have or have supports they wouldn’t normally have will still have potential to cause breakage or conflict

Remediation

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

Method

1. Ensure the modal is announced as a dialog when it opens and that its accessible name is reliably conveyed to assistive technologies.
2. Confirm that the dialog container, not just its heading, is exposed correctly and that it is opened using an accessible modal pattern.
3. Trap keyboard focus within the modal while it is open, return focus to the triggering element when it closes, and prevent interaction with background content until the dialog is dismissed.

Remediation

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

Method 1

1. Remove the aria-hidden="true" attribute from the <a> element so it is exposed to assistive technologies.

Remediation

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

Method 1

1. Write alt text to describe the image itself and its purpose in context, not just the page topic, product title, or file name.
   • No: Unique Tables - Q288043
   • Yes: Rustic industrial swing table with four suspended seats and a weathered wood top
2. For product galleries, describe what is unique about each image where the image adds distinct information, such as angle, detail, material, finish, damage, or ornamentation.
3. Use empty alt text (alt="") for decorative images that do not add meaning, rather than filling the attribute with filenames or repeated labels.
4. Treat alt text as both an accessibility and content quality feature. Helpful alt text improves the experience for screen reader users and can also support image indexing and search relevance when it accurately reflects the image content.

Remediation methods to avoid

• Do not mark all images decorative. Images are selected for a reason and their value should be conveyed to a user who may not be able to see it.
• Avoid using AI-generated alt text. It is frequently inaccurate and doesn’t convey the right details. Search engines index alt text so accuracy allows users to find items on your site that fit their queries.
• Do not use keyword soup as alt text. This isn’t helpful for users and search engines are punishing this.

Remediation

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

Method 1

1. Use native interactive elements such as button for each thumbnail and provide a meaningful accessible name, such as the image description or image number.
2. Programmatically expose the current state using an appropriate state such as aria-current="true" or aria-selected="true" within a valid widget pattern.
3. Ensure the thumbnail structure communicates both purpose and relationship to the main gallery image so assistive technology users can understand that activating a thumbnail changes the primary image.

Remediation methods to avoid

• Do not use <a> tags.
• Avoid using <div> tags or other non-UI elements and forcing them to be UI elements with scripts.

Remediation

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

Method 1 (recommended) – add a visual label

1. Add a visible label that is programmatically associated with the fields using a for / id connection.

Method 2 – add ARIA label

1. Add an aria-label attribute to the select fields (eg, <select aria-label="Sort products">)

Remediation methods to avoid

• Don’t add a label via jQuery; these generally conflict with AJAX scripts commonly run on blogs and store

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.