AccessiShield Accessibility Report
- Homepage
/ - Product page
/products/blue-sneaker - Collection page
/collections/sale
Violations & Suggested Fixes
CRITICAL Images must have alternate text
Ensures <img> elements have alternate text or a role of none or presentation.
Element: img[src="/products/blue-sneaker.jpg"]
<img src="/products/blue-sneaker.jpg">
Suggested Fix
<img src="/products/blue-sneaker.jpg" alt="Blue running sneaker, size 10">
Added descriptive alt text that conveys the product name and key attribute. Screen readers will announce the image content instead of the file name.
CRITICAL Buttons must have discernible text
Ensures buttons have discernible text that is accessible to assistive technologies.
Element: button.add-to-cart
<button class="add-to-cart"><svg>...</svg></button>
Suggested Fix
<button class="add-to-cart" aria-label="Add Blue Sneaker to cart"><svg aria-hidden="true">...</svg></button>
Added aria-label to provide an accessible name for the icon-only button, and aria-hidden on the decorative SVG to prevent duplicate announcements.
SERIOUS Form elements must have labels
Ensures every form element has a visible, programmatically associated label.
Element: input[type="email"]
<input type="email" placeholder="Email">
Suggested Fix
<label for="newsletter-email">Email address</label> <input id="newsletter-email" type="email" placeholder="Email">
Added a visible label element associated via for/id. Placeholder text alone is not a sufficient label — it disappears on focus and is not reliably announced by all screen readers.
SERIOUS Elements must meet minimum color contrast ratio thresholds
Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds.
Element: span.price-note
<span class="price-note" style="color: #aaa">Limited time offer</span>
Suggested Fix
<span class="price-note" style="color: #6b7280">Limited time offer</span>
Darkened the text color to meet the 4.5:1 contrast ratio requirement. Contrast ratio improved from 2.3:1 to 5.9:1 against a white background.
MODERATE Links must have discernible text
Ensures links have text that can be determined by assistive technologies. Generic link text like "click here" does not convey the link destination.
Element: a[href="/sale"]
<a href="/sale">Click here</a>
Suggested Fix
<a href="/sale">Shop the summer sale</a>
Replaced generic "Click here" with descriptive link text that conveys the destination. Users navigating by link list can now understand where each link goes without surrounding context.