Critical
Links lack accessible text
WCAG 2.4.4 (A)10 instances5 inspected pages
Links expose no accessible name, so screen-reader users cannot determine their destination.
Why it mattersLinks expose no accessible name, so screen-reader users cannot determine their destination.
Recommended correctionThis link exposes no accessible text. Add visible text that identifies its destination, or remove the link if it serves no purpose. For an icon-only link, provide an aria-label describing where it goes. The link points to /pages/location.
View 10 affected elements
Component · Ref WYS3AY
Affected pagehttps://shopsteelcity.com/
Element.store-card:nth-child(1) > .store-card__image-wrapper > a[href$="location"]
Markup<a href="/pages/location">
Component · Ref 2LLA8B
Affected pagehttps://shopsteelcity.com/products/ash-tray
Elementa[href$="#Media51735556784492"]
Markup<a href="#Media51735556784492" data-offset="-25" data-focus-on-click="" class="Product__SlideshowNavDot " data-media-alt="Ash" tray="" -="" steel="" city=""></a>
Component · Ref 7N3298
Affected pagehttps://shopsteelcity.com/pages/contact
Element.Header__Icon.Icon-Wrapper[href$="account"]
Markup<a href="/account" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable hidden-phone">
Component · Ref C8FMW3
Affected pagehttps://shopsteelcity.com/
Element.Header__Icon.Icon-Wrapper[href$="account"]
Markup<a href="/account" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable hidden-phone">
Component · Ref 9OK4CN
Affected pagehttps://shopsteelcity.com/cart
Element.Header__Icon.Icon-Wrapper[href$="account"]
Markup<a href="/account" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable hidden-phone">
Component · Ref YF5QB
Affected pagehttps://shopsteelcity.com/products/ash-tray
Element.Header__Icon.Icon-Wrapper[href$="account"]
Markup<a href="/account" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable hidden-phone">
Component · Ref I9ONDQ
Affected pagehttps://shopsteelcity.com/collections/side-cart-upsell
Element.Header__Icon.Icon-Wrapper[href$="account"]
Markup<a href="/account" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable hidden-phone">
Critical
Buttons have no accessible name
WCAG 4.1.2 (A)1 instance1 inspected page
Interactive buttons expose no accessible name, so their purpose cannot be determined by assistive technology.
Why it mattersInteractive buttons expose no accessible name, so their purpose cannot be determined by assistive technology.
Recommended correctionGive it an accessible name that describes the action it performs: provide visible text when a visible label is appropriate, an aria-label for an icon-only control (for example aria-label="Dismiss notification"), or aria-labelledby when an existing visible label already describes it. Avoid vague names such as "Button", "Action", or the component's internal name.
View 1 affected element
Component · Ref JNV2HZ
Affected pagehttps://shopsteelcity.com/pages/contact
Element#gorgias-chat-messenger-button
Markup<button id="gorgias-chat-messenger-button" onclick="GorgiasChat.open();">
High
Hidden elements can still receive keyboard focus
WCAG 2.4.3 (A)32 instances5 inspected pages
An element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.
Why it mattersAn element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.
Recommended correctionKeep this element out of the tab order while its containing region is hidden — remove it from focus (for example tabindex="-1"), or apply the inert attribute to the hidden container where supported. Restore normal focusability when the region becomes visible.
View 32 affected elements
Component · Ref SZ5L0S
Affected pagehttps://shopsteelcity.com/pages/contact
Elementsection#section-announcement > div > div > p > span:nth-of-type(2) > a
Accessible nameComplimentary shipping on orders over $75
Markup<a href="/collections/new-arrivals">Complimentary shipping on orders over $75</a>
Affected pages/ /pages/contact /collections/side-cart-upsell /products/ash-tray /cart
Component · Ref 9DN3QS
Affected pagehttps://shopsteelcity.com/
Elementdiv > div:nth-of-type(4) > div > div > div:nth-of-type(1) > button
Accessible nameADD TO CART
Markup<button class="atc-btn Button btn active" type="button" data-action="add-to-cart" data-variant-id="51960654299500" data-product-id="7269682282611">
ADD TO CART
</button> Affected pages/ /collections/side-cart-upsell /products/ash-tray
Component · Ref R9SNUL
Affected pagehttps://shopsteelcity.com/
Elementdiv:nth-of-type(4) > div > div > a > div:nth-of-type(2) > button
Accessible nameADD TO CART
Markup<button class="atc-btn Button btn active" type="button" data-action="add-to-cart" data-variant-id="51960654299500" data-product-id="7269682282611">
ADD TO CART
</button> Affected pages/ /collections/side-cart-upsell /products/ash-tray
Component · Ref TB6V84
Affected pagehttps://shopsteelcity.com/products/ash-tray
Elementform#\[object\ HTMLInputElement\] > div:nth-of-type(7) > div:nth-of-type(3) > button
Accessible nameAdd to cart
Markup<button class="btn" type="button" data-variant-id="51841267335532" data-product-id="14683195244908" data-action="atc" data-has-only-default-variant="true" data-variants-size="1" data-options="Title" data-label-atc="Add to cart" data-label-soldout="OUT OF STOCK">
<span class="text">Add to cart</span>
</button> Component · Ref 1VU7H6
Affected pagehttps://shopsteelcity.com/products/ash-tray
Elementdiv#foursixty-hideable-container > div:nth-of-type(1) > h2:nth-of-type(2) > a
Accessible nameSHOP THE FEED
Markup<a href="/pages/instagram">
<span>SHOP THE FEED</span>
<img src="//shopsteelcity.com/cdn/shop/files/long-arrow-right.png?v=7410653283134385947" alt="right-arrow" style="height: 18px;">
</a> Component · Ref 7MB711
Affected pagehttps://shopsteelcity.com/products/ash-tray
Elementdiv#fs-slider-next-button-87088
Accessible nameScroll gallery to next page
Rolebutton
Markup<div class="centered-content fs-slider-next-button" aria-label="Scroll gallery to next page" role="button" tabindex="0" id="fs-slider-next-button-87088"><svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" aria-labelledby="fs-chevron-right"><title id="fs-chevron-right">Chevron pointing right</title><g><path class="fs-arrow" stroke="#222" d="m7.5,0l15,15l-15,15" fill="none"></path></g></svg></div>
High
Form fields use placeholder text as the only label
WCAG 1.3.1 (A)5 instances5 inspected pages
Fields rely on placeholder text instead of a real label. The placeholder disappears once the user types, and it is not exposed as a programmatic label.
Why it mattersFields rely on placeholder text instead of a real label. The placeholder disappears once the user types, and it is not exposed as a programmatic label.
Recommended correctionAdd a persistent <label> associated with each field. Keep the placeholder for example text only, not as the label.
View 5 affected elements
Component · Ref XUUCR1
Affected pagehttps://shopsteelcity.com/products/ash-tray
Elementform#footer-newsletter > div > input:nth-of-type(2)
Markup<input type="email" name="contact[email]" class="Footer__NewsletterInput" placeholder="YOUR EMAIL ADDRESS" required="">
Affected pages/ /pages/contact /collections/side-cart-upsell /products/ash-tray /cart
High
Zooming and scaling must not be disabled
WCAG 1.4.4 (AA)5 instances5 inspected pages
Zooming and scaling must not be disabled
Why it mattersZooming and scaling must not be disabled
Recommended correctionReview the affected element and correct the reported accessibility issue.
View 5 affected elements
Component · Ref EPKIU1
Affected pagehttps://shopsteelcity.com/products/ash-tray
Elementmeta[name="viewport"]
Markup<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, maximum-scale=1.0">
Affected pages/ /pages/contact /collections/side-cart-upsell /products/ash-tray /cart
High
Interactive controls are not keyboard-accessible
WCAG 2.1.1 (A)1 instance1 inspected page
A control that responds to clicks (a clickable element or an ARIA widget) cannot receive keyboard focus, so keyboard and switch users cannot operate it.
Why it mattersA control that responds to clicks (a clickable element or an ARIA widget) cannot receive keyboard focus, so keyboard and switch users cannot operate it.
Recommended correctionUse a native <button>/<a>, or add tabindex="0" plus keyboard event handlers (Enter/Space) to custom controls.
View 1 affected element
Component · Ref YYILO0
Affected pagehttps://shopsteelcity.com/
Elementdiv#swiper-template--16133952372851__shop_by_category_RaAxtE > div:nth-of-type(3)
Accessible namePrevious slide
Rolebutton
Markup<div class="swiper-button-prev button swiper-button-disabled" tabindex="-1" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-08c0f81de6f88b29" aria-disabled="true"></div>
High
Modal dialog does not trap keyboard focus
WCAG 2.4.3 (A)1 instance1 inspected page
An open modal leaves the content behind it keyboard-focusable, so keyboard and screen reader users can tab out of the dialog into hidden page content.
Why it mattersAn open modal leaves the content behind it keyboard-focusable, so keyboard and screen reader users can tab out of the dialog into hidden page content.
Recommended correctionWhile a modal is open, confine focus to the dialog and mark the rest of the page inert (or aria-hidden). Restore focus on close.
View 1 affected element
Component · Ref XISYN3
Affected pagehttps://shopsteelcity.com/
Elementhtml > body > div:nth-of-type(13) > div > div:nth-of-type(2)
Accessible nameFLYOUT Form
Roledialog
Markup<div role="dialog" aria-modal="true" aria-label="FLYOUT Form" class="needsclick kl-private-reset-css-Xuajs1" style="display: flex; z-index: 90000; max-height: 100%; position: fixed; transform: scale(1); transform-origin: left bottom; overflow: visible; bottom: 0px; left: 0px;"><div class="needsclick kl-private-reset-css-Xuajs1" style="position: relative; display: flex; justify-content: center; flex: 0 0 auto;"><div data-testid="FLYOUT" class="needsclick kl-private-reset-css-Xuajs1" style="flex: 1 1 0%;"><div class="needsclick go249761392 kl-private-reset-css-Xuajs1" style="position: relativ…
High
Interactive controls must not be nested
WCAG 4.1.2 (A)1 instance1 inspected page
Interactive controls must not be nested
Why it mattersInteractive controls must not be nested
Recommended correctionReview the affected element and correct the reported accessibility issue.
View 1 affected element
Component · Ref T7LRRE
Affected pagehttps://shopsteelcity.com/products/ash-tray
Element#reviewid > .u-h6.Collapsible__Button[data-action="toggle-collapsible"]
Accessible name5.0 Rated 5.0 out of 5 stars4 ReviewsClick to scroll to reviews {"averageRating":"5.0","reviewCount":4}
Markup<button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
Medium
Text has insufficient colour contrast
WCAG 1.4.3 (AA)19 instances5 inspected pages
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Why it mattersText and background colours do not meet the minimum contrast ratio, reducing legibility.
Recommended correctionIncrease the contrast ratio to at least 4.5:1 for normal text and 3:1 for large text.
View 19 affected elements
Component · Ref I6CMF1
Affected pagehttps://shopsteelcity.com/collections/side-cart-upsell
Element.u-h6.Heading[href$="new-arrivals"] > .Header__LinkSpacer
Accessible nameNew Arrivals
Markup<span class="Header__LinkSpacer">New Arrivals</span>
Affected pages/ /pages/contact /collections/side-cart-upsell /products/ash-tray /cart
Component · Ref PWJDP4
Affected pagehttps://shopsteelcity.com/cart
Element.EmptyState__Action
Accessible nameShop our products
Markup<a href="/collections/all" class="EmptyState__Action Button Button--primary">Shop our products</a>
Component · Ref OYQCQ0
Affected pagehttps://shopsteelcity.com/products/ash-tray
Element.review_id > div[data-oke-star-rating=""][data-oke-reviews-product-id="shopify-14683195244908"][data-oke-rendered=""] > .oke-sr.okeReviews[data-oke-reviews-version="0.104.2"] > .oke-is-clickable[role="button"] > .oke-sr-count > .oke-sr-label-text
Accessible nameReviews
Markup<span class="oke-sr-label-text"> Reviews</span>
Component · Ref DC9N2T
Affected pagehttps://shopsteelcity.com/products/ash-tray
Element.u-h6.Collapsible__Button[data-action="toggle-collapsible"] > div[data-oke-star-rating=""][data-oke-reviews-product-id="shopify-14683195244908"][data-oke-rendered=""] > .oke-sr.okeReviews[data-oke-reviews-version="0.104.2"] > .oke-is-clickable[role="button"] > .oke-sr-count > .oke-sr-count-number
Accessible name4
Markup<span class="oke-sr-count-number">4</span>
Component · Ref WQH11S
Affected pagehttps://shopsteelcity.com/
Element.Slideshow__Content--bottomCenter.Slideshow__Content > .SectionHeader > .SectionHeader__SubHeading
Accessible nameFall Collection
Markup<h3 class="SectionHeader__SubHeading Heading u-h6">Fall Collection</h3>
Component · Ref ZIT9CI
Affected pagehttps://shopsteelcity.com/
Element#Slide47b21e75-c5e4-41ba-96ed-16758a3c5877 > .Slideshow__Content--bottomCenter.Slideshow__Content > .SectionHeader > .SectionHeader__ButtonWrapper > .ButtonGroup.ButtonGroup--spacingSmall > .ButtonGroup__Item.Button--primary-light.Button
Accessible nameShop Men's
Markup<a class="ButtonGroup__Item Button Button--primary-light" href="/collections/mens-fall-collection">Shop Men's</a>
Component · Ref FXW8ZO
Affected pagehttps://shopsteelcity.com/products/ash-tray
Element.ProductForm__AddToCart > span
Accessible nameAdd to cart
Markup<span>Add to cart</span>
Component · Ref T0ZB01
Affected pagehttps://shopsteelcity.com/pages/contact
Element.Form__Submit
Accessible nameSend message
Markup<button type="submit" class="Form__Submit Button Button--primary Button--full">Send message</button>
Component · Ref NDEKJ9
Affected pagehttps://shopsteelcity.com/products/ash-tray
Element.review_id > div[data-oke-star-rating=""][data-oke-reviews-product-id="shopify-14683195244908"][data-oke-rendered=""] > .oke-sr.okeReviews[data-oke-reviews-version="0.104.2"] > .oke-is-clickable[role="button"] > .oke-sr-count > .oke-sr-count-number
Accessible name4
Markup<span class="oke-sr-count-number">4</span>
Component · Ref ZYR83S
Affected pagehttps://shopsteelcity.com/products/ash-tray
Element.u-h6.Collapsible__Button[data-action="toggle-collapsible"] > div[data-oke-star-rating=""][data-oke-reviews-product-id="shopify-14683195244908"][data-oke-rendered=""] > .oke-sr.okeReviews[data-oke-reviews-version="0.104.2"] > .oke-is-clickable[role="button"] > .oke-sr-count > .oke-sr-label-text
Accessible nameReviews
Markup<span class="oke-sr-label-text"> Reviews</span>
Medium
Content sits outside any landmark region
WCAG 1.3.1 (A)5 instances5 inspected pages
Meaningful content is not contained in a landmark (header/nav/main/footer/aside), so assistive-technology users cannot reach it via landmark navigation.
Why it mattersMeaningful content is not contained in a landmark (header/nav/main/footer/aside), so assistive-technology users cannot reach it via landmark navigation.
Recommended correctionWrap primary content in <main> and other regions in appropriate landmark elements.
View 5 affected elements
Component · Ref QM1JBD
Affected pagehttps://shopsteelcity.com/products/ash-tray
Elementsection#sidebar-menu > div
Accessible nameMen
All Men'sT-ShirtsSweatshirtsBottomsEssentialsJacketsHatsAccessories
Women
All Women'sTopsBottomsDressesJacketsAccessories
New ArrivalsBest SellersFeatured
HometownSaleFall for HimFall for Her
New Arrivals
Best Sellers
Mens
Women's
Sign Up for the best experience
Login
Markup<div class="Drawer__Content" style="padding: 20px; overflow-y: auto;">
<div class="Drawer__Main" data-drawer-animated-left="" data-scrollable="">
<div class="Drawer__Container">
<nav class="SidebarMenu__Nav SidebarMenu__Nav--primary" aria-label="Sidebar navigation"><div class="Collapsible"><button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">Men<span class="Collapsible__Plus"></span>
</button>
<div class="Collapsible__Inner" style="overflow: hidden; height: 0px; display: none;">
… Affected pages/ /pages/contact /collections/side-cart-upsell /products/ash-tray /cart
Medium
Navigation regions are not distinguishable
WCAG 1.3.1 (A)5 instances5 inspected pages
The page has multiple navigation landmarks but they lack accessible names, so screen reader users cannot tell them apart.
Why it mattersThe page has multiple navigation landmarks but they lack accessible names, so screen reader users cannot tell them apart.
Recommended correctionGive each navigation region a distinct aria-label (e.g. "Primary", "Footer") when more than one is present.
View 5 affected elements
Component · Ref XWR30F
Affected pagehttps://shopsteelcity.com/products/ash-tray
Elementsection#sidebar-menu > div > div > div > nav:nth-of-type(2)
Accessible nameLogin
Markup<nav class="SidebarLinks login-btn" style="text-align: center;">
<a href="/account" class="SidebarLink Collapsible__Button Heading Link Link--primary u-h6" style="display: block; background-color: #ffffff17; font-family: var(--text-font-family);
text-transform:uppercase;">Login</a>
</nav> Affected pages/ /pages/contact /collections/side-cart-upsell /products/ash-tray /cart
Medium
Carousel has no accessible controls
WCAG 2.1.1 (A)3 instances3 inspected pages
A carousel/slider exposes no previous/next or pause controls, so keyboard and assistive-technology users cannot navigate or stop it. Requires manual review of the specific widget.
Why it mattersA carousel/slider exposes no previous/next or pause controls, so keyboard and assistive-technology users cannot navigate or stop it. Requires manual review of the specific widget.
Recommended correctionProvide keyboard-operable previous/next controls and a pause control for auto-advancing carousels, with accessible names.
View 3 affected elements
Component · Ref YN4XAB
Affected pagehttps://shopsteelcity.com/collections/side-cart-upsell
Elementhtml > body > div:nth-of-type(1)
Markup<div class="fs-slider_v2_5 fs-desktop fs-prepended-detail fs-wrapper"><div id="fs-timeline-detail-817069" class="fs-timeline-detail fs-hidden"></div></div>
Affected pages/ /collections/side-cart-upsell /products/ash-tray
Medium
ARIA hidden element must not be focusable or contain focusable elements
WCAG 4.1.2 (A)8 instances1 inspected page
ARIA hidden element must not be focusable or contain focusable elements
Why it mattersARIA hidden element must not be focusable or contain focusable elements
Recommended correctionReview the affected element and correct the reported accessibility issue.
View 8 affected elements
Component · Ref I52ZAC
Affected pagehttps://shopsteelcity.com/
Element#template--16133952372851__featured_collections_CaMdXA-15022886027628--1
Markup<input class="ColorSwatch__Radio" type="radio" name="template--1613395237..." id="template--1613395237..." value="Army" data-variant-url="/products/studio-pan..." data-image-id="63475367575916" data-image-url="//shopsteelcity.com/..." data-image-widths="[200,400,600,700,800..." ...>
Medium
IDs used in ARIA and labels must be unique
WCAG 4.1.2 (A)13 instances1 inspected page
IDs used in ARIA and labels must be unique
Why it mattersIDs used in ARIA and labels must be unique
Recommended correctionReview the affected element and correct the reported accessibility issue.
View 13 affected elements
Component · Ref URGV46
Affected pagehttps://shopsteelcity.com/collections/side-cart-upsell
Element.container-size-options-btn.desktop-only > .product-size-options > .SizeSwatch[for="option-14773419573612-black-0"] > input[data-variant-id="53799455654252"][data-product-id="14773419573612"][data-color="black"]
Markup<input id="option-14773419573612-black-0" class="SizeSwatch__Radio" type="radio" value="One Size" data-variant-id="53799455654252" data-product-id="14773419573612" data-color="black">
Low
Low-quality alternative text
WCAG 1.1.1 (A)5 instances5 inspected pages
Alt text looks like a filename, a generic word ("image", "photo"), or is duplicated across unrelated images — it likely does not describe the content.
Why it mattersAlt text looks like a filename, a generic word ("image", "photo"), or is duplicated across unrelated images — it likely does not describe the content.
Recommended correctionReplace placeholder or filename alt text with a concise description of what the image conveys.
View 5 affected elements
Component · Ref C44PHV
Affected pagehttps://shopsteelcity.com/pages/contact
Elementdiv > div:nth-of-type(2) > div > ul > li > img
Markup<img src="https://cdn.shopify.com/s/files/1/0199/5932/t/276/assets/keystoneIcon.png?v=1716486641" alt="Icon">
Affected pages/ /pages/contact /collections/side-cart-upsell /products/ash-tray /cart
Low
ARIA attributes have invalid values
WCAG 4.1.2 (A)1 instance1 inspected page
ARIA attributes reference ids that do not exist or hold invalid values, breaking the accessibility tree.
Why it mattersARIA attributes reference ids that do not exist or hold invalid values, breaking the accessibility tree.
Recommended correctionCorrect ARIA attribute values and ensure referenced ids exist in the DOM.
View 1 affected element
Component · Ref GCATM7
Affected pagehttps://shopsteelcity.com/collections/side-cart-upsell
Element.CollectionToolbar__Item--sort
Accessible nameShow sort by
Markup<button class="CollectionToolbar__Item CollectionToolbar__Item--sort Heading Text--subdued u-h6" aria-label="Show sort by" aria-haspopup="true" aria-expanded="false" aria-controls="collection-sort-popover">
Low
Touch targets are too small
WCAG 2.5.8 (AA)2 instances1 inspected page
Interactive controls are smaller than the 24×24px minimum target size, making them hard to activate reliably by touch.
Why it mattersInteractive controls are smaller than the 24×24px minimum target size, making them hard to activate reliably by touch.
Recommended correctionIncrease this <a>'s rendered area to at least 24 × 24 CSS pixels, or provide sufficient spacing from adjacent targets. Prefer increasing padding on the existing control (for example the button or link) rather than adding a separate non-interactive wrapper.
View 2 affected elements
Component · Ref DBGN6X
Affected pagehttps://shopsteelcity.com/products/ash-tray
Elementa[href$="#Media51735556817260"]
Markup<a href="#Media51735556817260" data-offset="-25" data-focus-on-click="" class="Product__SlideshowNavDot is-selected" data-media-alt="Ash" tray="" -="" steel="" city=""></a>