Automated technical assessment of 5 publicly accessible pages · Scanned 13 Aug 2026. Inspected 5 of 5 selected pages.
Findings
Critical
Links lack accessible text
Links expose no accessible name, so their destination is unknown to screen reader users.
Component
1 affected page
3 instances
WCAG WCAG 2.1 SC 2.4.4 Link Purpose (In Context) (Level A)
Ref IDEPOK
Affected pagehttps://jaobrand.com/
Element.featured-grid--item--image[href$="kitchen"][data-item="image"]
Accessible name<img
src="//jaobrand.com/cdn/shop/files/cooks-cloth-dublin-jao-brand-6116554.png?v=1760397175"
srcset="//jaobrand.com/cdn/shop/files/cooks-cloth-dublin-jao-brand-6116554.png?v=1760397175&width=200 200w, //jaobrand.com/cdn/shop/files/cooks-cloth-dublin-jao-brand-6116554.png?v=1760397175&width=400 400w, //jaobrand.com/cdn/shop/files/cooks-cloth-dublin-jao-brand-6116554.png?v=1760397175&width=600 600w, //jaobrand.com/cdn/shop/files/cooks-cloth-dublin-jao-brand-6116554.png?v=1760397175&width=700 700w, //jaobrand.com/cdn/shop/files/cooks-cloth-dublin-jao-brand-6116554.png?v=1760397175&width=800 800w, //jaobrand.com/cdn/shop/files/cooks-cloth-dublin-jao-brand-6116554.png?v=1760397175&width=900 900w, //jaobrand.com/cdn/shop/files/cooks-cloth-dublin-jao-brand-6116554.png?v=1760397175&width=1000 1000w, //jaobrand.com/cdn/shop/files/cooks-cloth-dublin-jao-brand-6116554.png?v=1760397175&width=1199 1199w"
alt="Cook's Cloth Dublin - Jao Brand"
height="1200"
width="1199"
>
Markup<a href="/collections/kitchen" class="featured-grid--item--image" data-item="image">
How to fixAdd text to these links, either by including the text directly within the link or by using an aria-label attribute to provide a text description of the link's purpose.
Critical
Links lack accessible text
Links expose no accessible name, so their destination is unknown to screen reader users.
Component
1 affected page
4 instances
WCAG WCAG 2.1 SC 2.4.4 Link Purpose (In Context) (Level A)
Ref DAKACJ
Affected pagehttps://jaobrand.com/
Elementdiv[data-text-position="bottom-left"][data-text-exists="false"][data-box-around-text="false"] > .featured-content--cover-link[aria-label=""][href$="goe-oil"]
Accessible name<img
src="//jaobrand.com/cdn/shop/files/home_horiz-goe-beach.jpg?v=1783614871"
srcset="//jaobrand.com/cdn/shop/files/home_horiz-goe-beach.jpg?v=1783614871&width=200 200w, //jaobrand.com/cdn/shop/files/home_horiz-goe-beach.jpg?v=1783614871&width=400 400w, //jaobrand.com/cdn/shop/files/home_horiz-goe-beach.jpg?v=1783614871&width=600 600w, //jaobrand.com/cdn/shop/files/home_horiz-goe-beach.jpg?v=1783614871&width=700 700w, //jaobrand.com/cdn/shop/files/home_horiz-goe-beach.jpg?v=1783614871&width=800 800w, //jaobrand.com/cdn/shop/files/home_horiz-goe-beach.jpg?v=1783614871&width=890 890w"
alt=""
height="890"
width="890"
>
Markup<a class="featured-content--cover-link" href="/products/goe-oil" aria-label="" tabindex="-1">
How to fixAdd text to these links or provide an alternative way for screen readers to announce the link's purpose, such as using the aria-label attribute with a descriptive value.
High
Hidden elements can still receive keyboard focus
An element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.
Component
5 affected pages
5 instances
WCAG WCAG 2.1 SC 2.4.3 Focus Order (Level A)
Ref HB7YAA
Affected pagehttps://jaobrand.com/
Elementheader-root > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div > div
Markup<div tabindex="0" data-drawer-open="left" data-drawer-view="menu" aria-haspopup="menu"><svg class="icon--root icon--menu" width="22" height="16" viewBox="0 0 22 16" xmlns="http://www.w3.org/2000/svg">
<path d="M0 2.4V.6h22v1.8H0Zm0 6.584v-1.8h22v1.8H0Zm0 6.584v-1.8h22v1.8H0Z" fill="#000" fill-rule="nonzero"></path>
</svg></div> How to fixRemove the tabindex attribute from the hidden element or make the element visible when it receives focus. Alternatively, use JavaScript to manage focus and ensure that only visible elements can receive keyboard focus.
High
Hidden elements can still receive keyboard focus
An element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.
Component
5 affected pages
45 instances
WCAG WCAG 2.1 SC 2.4.3 Focus Order (Level A)
Ref UJ41VI
Affected pagehttps://jaobrand.com/
Elementtransition-root#x-menu--sub-clubhouse > ul > li:nth-of-type(1) > a
Accessible nameGale's Journal
Markup<a href="https://jaopa.myshopify.com/blogs/jao-blog/tagged/gales-journal">Gale's Journal</a>
How to fixRemove the element from the tab order or make it visible when focused. Consider using 'display: none' or 'visibility: hidden' to remove it from the tab order, or adjust the CSS to ensure the element is visible when focused.
High
Interactive controls are not keyboard-accessible
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.
Component
5 affected pages
7 instances
WCAG WCAG 2.1 SC 2.1.1 Keyboard (Level A)
Ref SQB0FA
Affected pagehttps://jaobrand.com/
Elementdiv#dynamic-checkout-cart > shopify-accelerated-checkout-cart > div > ul > li > div
Rolebutton
Markup<div class="wallet-cart-button wallet-cart-button__skeleton" role="button" disabled="" aria-hidden="true"> </div>
How to fixAdd a tabindex to the element or ensure it has focusable semantics, and remove the aria-hidden attribute to make the control accessible to keyboard and switch users.
High
Elements must only use permitted ARIA attributes
Elements must only use permitted ARIA attributes
Component
5 affected pages
5 instances
WCAG WCAG SC 4.1.2
Ref S35ZDY
Affected pagehttps://jaobrand.com/
Element.header--search > a[data-drawer-open="top"][data-drawer-view="search"][aria-label="Search"]
Accessible nameSearch
Markup<a data-drawer-open="top" data-drawer-view="search" tabindex="0" aria-label="Search">
How to fixAdd a valid ARIA role to the element or remove the 'aria-label' attribute if it is not necessary. For example, if this is a button, add 'role="button"' to the element.
High
Interactive controls are not keyboard-accessible
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.
Component
1 affected page
14 instances
WCAG WCAG 2.1 SC 2.1.1 Keyboard (Level A)
Ref 6RKD2F
Affected pagehttps://jaobrand.com/
Elementspan#instafeed-carousel-dot-0-2-0
Markup<span id="instafeed-carousel-dot-0-2-0" class="instafeed-carousel-dot active" onclick="InstafeedAPI.carouselMove(this, "0", 2, 0)" style="cursor: pointer;"></span>
How to fixAdd a tabindex to the element or use a native HTML element that is focusable by default, such as a button, and ensure it can receive keyboard focus.
High
Interactive controls are not keyboard-accessible
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.
Component
1 affected page
4 instances
WCAG WCAG 2.1 SC 2.1.1 Keyboard (Level A)
Ref SJM90H
Affected pagehttps://jaobrand.com/products/bijoux-box
Elementdiv#swatch-option1 > div > fieldset > ul > li:nth-of-type(3)
Accessible nameSalmon
Roleradio
Markup<li key="2" class="swatch-view-item" orig-value="Salmon" option-value-id="2431786877166" aria-label="Salmon" role="radio" aria-checked="false" tabindex="-1" data-event-data="{}"><div class="swatch-image-wrapper"><div class="swatch-image swatch-selector swatch-allow-animation" type="image" data-value="Salmon" orig-value="Salmon" option-value-id="2431786877166" swatch-option="option1"><div style="background-image:url(https://cdn.shopify.com/s/files/1/0646/0260/3758/files/bijoux-box-jao-brand-211468.jpg?v=1722038774&width=180&height=180&crop=top);" class="star-set-image" swatch-inside… How to fixTo fix this issue, remove the tabindex attribute or set it to a value of 0, allowing the control to receive keyboard focus. Additionally, ensure that the control can be activated using the space or enter key.
High
Interactive controls are not keyboard-accessible
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.
Component
1 affected page
2 instances
WCAG WCAG 2.1 SC 2.1.1 Keyboard (Level A)
Ref PTSZ45
Affected pagehttps://jaobrand.com/products/bijoux-box
Elementdiv#swatch-option1 > div > fieldset > ul > li:nth-of-type(1)
Accessible nameCoral - Sold Out
Roleradio
Markup<li key="0" class="swatch-view-item swatch-item-unavailable" orig-value="Coral" option-value-id="2431783796974" aria-label="Coral - Sold Out" role="radio" aria-checked="false" tabindex="-1" data-event-data="{}"><div class="swatch-image-wrapper"><div class="swatch-image swatch-selector swatch-allow-animation" type="image" data-value="Coral" orig-value="Coral" option-value-id="2431783796974" swatch-option="option1"><div style="background-image:url(https://cdn.shopify.com/s/files/1/0646/0260/3758/files/bijoux-box-jao-brand-336575.jpg?v=1722038774&width=180&height=180&crop=top);" class… How to fixTo fix this issue, ensure that all interactive elements, including this radio button, have a positive tabindex or are included in the natural tab order of the page. Remove tabindex='-1' from the element or adjust the element's semantics to make it focusable by keyboard users.
High
Modal dialog does not trap keyboard focus
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.
Component
1 affected page
1 instance
WCAG WCAG 2.1 SC 2.4.3 Focus Order (Level A)
Ref ZH1HZC
Affected pagehttps://jaobrand.com/
Elementhtml > body > div:nth-of-type(11) > 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: right bottom; overflow: visible; bottom: 0px; right: 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 go3241907364 kl-private-reset-css-Xuajs1" style="position: rela…
How to fixTo fix this issue, ensure that the modal dialog traps keyboard focus by setting the `tabindex` attribute to `-1` on the dialog container and implementing a focus trap that prevents focus from escaping the dialog. Additionally, consider using the `inert` attribute on the content behind the modal to prevent it from receiving focus.
Medium
Content sits outside any landmark region
Meaningful content is not contained in a landmark (header/nav/main/footer/aside), so assistive-technology users cannot reach it via landmark navigation.
Component
5 affected pages
5 instances
WCAG WCAG 2.1 SC 1.3.1 Info and Relationships (Level A)
Ref AH9RMM
Affected pagehttps://jaobrand.com/
Elementdrawer-root > transition-root:nth-of-type(4) > div:nth-of-type(2) > jao-cart > div:nth-of-type(1) > p
Accessible name*Refill pouch does not qualify for free shipping.
Markup<p style="color:#ef7828; text-align:center; padding-bottom: 38px;">*Refill pouch does not qualify for free shipping. <!---$12.95 shipping.
</p>--->
<!---<h3 style="color:#ef7828; text-align:center;">We have paused all shipping to Canada.</h3><p style="color:#ef7828; text-align:center;padding-bottom: 38px;">Please <a href="https://jaobrand.com/pages/retailers">check here</a> for our local stores <p>--->
</p>
How to fixWrap the content in a landmark element such as <header>, <nav>, <main>, <footer>, or <aside> to ensure it is reachable via landmark navigation.
Medium
Touch targets are too small
Interactive controls are smaller than the 24×24px minimum target size, making them hard to activate reliably by touch.
Component
5 affected pages
45 instances
WCAG WCAG 2.2 SC 2.5.8 Target Size (Minimum) (Level AA)
Ref HX25DQ
Affected pagehttps://jaobrand.com/
Elementa[title="Jao Apothecary"]
Accessible nameJao Apothecary
Markup<a href="/pages/apothecary-collecton" title="Jao Apothecary">Jao Apothecary</a>
How to fixEnsure that all interactive elements, such as buttons and links, have a minimum size of 24x24 pixels or provide sufficient space around them to meet the target size requirement.
Medium
Page has no level-one heading
The page exposes no <h1>, so its topic is not conveyed in the heading structure.
Component
3 affected pages
3 instances
WCAG WCAG 2.1 SC 1.3.1 Info and Relationships (Level A)
Ref 1Y0EWP
Affected pagehttps://jaobrand.com/
Elementhtml > body
Accessible nameSkip to main content
import '//jaobrand.com/cdn/shop/t/12/assets/header.js?v=140011644116322364181698083869';
Jao Brand
All Jao Brand
Soap
Gift Paks
Gift Card
Apothecary
Jao Refresher
Goē Oil
Hand Salve
Face Crème
LipJao
Seed Face Oil
Seed PLS
Bomades
BeardScent
Coiffette
Outdoor
Patio Oil
Patio Oil Moisturizing Mist
OutScent Sprtiz
OutScent Soap
Inscental
Inscental
Inscental Jasmine
Room Spritz: Inscental
Inscental Soap
Inscental Orange Blossom Soap
Inscental XL Bathing Block
Jao Home
Room Spritz: Atmosphere
Room Sprtiz: Inscental
16 oz Glass Decanter
Hostess Kit
In The Trunk
Gifts Under $50
Accessories
Bags
Clothing
Men
Note Cards
Bath/Body
Bathe
Face
Hair
Shave
Towels
For Home
Blankets
Brushes
Garden
Home Goods
Kitchen
Clubhouse
Gale's Journal
Ingredient Tuesday
Direct Action
Social Gallery
Make Up Artists
About Us
Jao Brand
Jao Social Club
Giving Back
Ingredient Glossary
Find a Store
Press
Product Gallery
.logo--image {
height: auto;
width: 97px;
}
@media only screen and (max-width: 767px) {
.logo--image {
width: 46px;
}
}
<a
class="header--cart-toggle--noscript"
aria-label="Cart"
href="/cart"
>
<svg class="icon--root icon--bag" width="18" height="21" viewBox="0 0 18 21" xmlns="http://www.w3.org/2000/svg">
<path d="M5.156 3.99A3.837 3.837 0 0 1 9 .3a3.837 3.837 0 0 1 3.844 3.69h4.49l.389 14.704a1.75 1.75 0 0 1-1.704 1.795H2.027a1.75 1.75 0 0 1-1.75-1.75l.001-.046L.674 3.99h4.482Zm1.502 0h4.684A2.337 2.337 0 0 0 9 1.8a2.337 2.337 0 0 0-2.342 2.19Zm-1.506 1.5H2.135l-.358 13.243v.007c0 .138.112.25.25.25h13.946a.251.251 0 0 0 .25-.257L15.874 5.49h-3.026v2.823h-1.5V5.49H6.652v2.823h-1.5V5.49Z" fill="#000" fill-rule="nonzero" />
</svg>
<span class="cart--external--total-items"></span>
</a>
<div class="header--bottom-row" data-view="no-js">
<div class="header--bottom-row--container">
<div class="header--x-menu" data-position="below"><style>
@media only screen and (min-width: 768px) {
.x-menu--level-1--container {
display: flex;
flex-wrap: wrap;
}
}
</style><x-menu-root
class="x-menu"
data-item="nav-text"
data-x-menu--align=""
data-x-menu--overlap
data-x-menu--overlap-parent="2"
style="display:inline-block;"
><ul class="x-menu--level-1--container"></ul></x-menu-root></div>
</div>
<div class="header--bottom-row--edge-detector"></div>
</div>
import '//jaobrand.com/cdn/shop/t/12/assets/carousel.js?v=52648697012856946371698083869';
<img
src="//jaobrand.com/cdn/shop/files/home_horiz-goe-beach.jpg?v=1783614871"
srcset="//jaobrand.com/cdn/shop/files/home_horiz-goe-beach.jpg?v=1783614871&width=200 200w, //jaobrand.com/cdn/shop/files/home_horiz-goe-beach.jpg?v=1783614871&width=400 400w, //jaobrand.com/cdn/shop/files/home_horiz-goe-beach.jpg?v=1783614871&width=600 600w, //jaobrand.com/cdn/shop/files/home_horiz-goe-beach.jpg?v=1783614871&width=700 700w, //jaobrand.com/cdn/shop/files/home_horiz-goe-beach.jpg?v=1783614871&width=800 800w, //jaobrand.com/cdn/shop/files/home_horiz-goe-beach.jpg?v=1783614871&width=890 890w"
alt=""
height="890"
width="890"
>
<img
src="//jaobrand.com/cdn/shop/files/goe-pool-sq-26.jpg?v=1783614666"
srcset="//jaobrand.com/cdn/shop/files/goe-pool-sq-26.jpg?v=1783614666&width=200 200w, //jaobrand.com/cdn/shop/files/goe-pool-sq-26.jpg?v=1783614666&width=400 400w, //jaobrand.com/cdn/shop/files/goe-pool-sq-26.jpg?v=1783614666&width=600 600w, //jaobrand.com/cdn/shop/files/goe-pool-sq-26.jpg?v=1783614666&width=700 700w, //jaobrand.com/cdn/shop/files/goe-pool-sq-26.jpg?v=1783614666&width=800 800w, //jaobrand.com/cdn/shop/files/goe-pool-sq-26.jpg?v=1783614666&width=900 900w, //jaobrand.com/cdn/shop/files/goe-pool-sq-26.jpg?v=1783614666&width=1000 1000w, //jaobrand.com/cdn/shop/files/goe-pool-sq-26.jpg?v=1783614666&width=1200 1200w, //jaobrand.com/cdn/shop/files/goe-pool-sq-26.jpg?v=1783614666&width=1347 1347w"
alt=""
height="1347"
width="1347"
>
<img
src="//jaobrand.com/cdn/shop/files/hr-beach-sq.jpg?v=1752677651"
srcset="//jaobrand.com/cdn/shop/files/hr-beach-sq.jpg?v=1752677651&width=200 200w, //jaobrand.com/cdn/shop/files/hr-beach-sq.jpg?v=1752677651&width=400 400w, //jaobrand.com/cdn/shop/files/hr-beach-sq.jpg?v=1752677651&width=600 600w, //jaobrand.com/cdn/shop/files/hr-beach-sq.jpg?v=1752677651&width=700 700w, //jaobrand.com/cdn/shop/files/hr-beach-sq.jpg?v=1752677651&width=800 800w, //jaobrand.com/cdn/shop/files/hr-beach-sq.jpg?v=1752677651&width=900 900w, //jaobrand.com/cdn/shop/files/hr-beach-sq.jpg?v=1752677651&width=1000 1000w, //jaobrand.com/cdn/shop/files/hr-beach-sq.jpg?v=1752677651&width=1200 1200w, //jaobrand.com/cdn/shop/files/hr-beach-sq.jpg?v=1752677651&width=1347 1347w"
alt=""
height="1347"
width="…[truncated by Evolize: exceeded D1 value limit]
Markup<body class="template--index page--jao-brand" data-theme-id="939" data-theme-name="beyond" data-theme-version="3.1.1" data-assets-loaded="true" style="padding-bottom: 37px;">
<!--[if IE]>
<div style="text-align:center;padding:72px 16px;">
Browser unsupported, please update or try an alternative
</div>
<style>
.layout--viewport { display: none; }
</style>
<![endif]-->
<a data-item="a11y-button" href="#main-content">Skip to main content</a>
<div class="layout--viewport" data-drawer-status="closed" style="min-height: 900px;">
<div cl… How to fixAdd a level-one heading (h1) to the page that accurately reflects its main topic or purpose. This heading should be the first heading on the page and should be descriptive and concise.
Medium
ARIA attributes have invalid values
ARIA attributes reference ids that do not exist or hold invalid values, breaking the accessibility tree.
Component
5 affected pages
20 instances
WCAG WCAG 2.1 SC 4.1.2 Name, Role, Value (Level A)
Ref NHBSKK
Affected pagehttps://jaobrand.com/
Elementa[aria-controls="x-menu--sub-jao-brand"]
Accessible nameJao Brand
Markup<a href="/pages/apothecary-collecton" aria-haspopup="true" aria-expanded="false" aria-controls="x-menu--sub-jao-brand">
How to fixVerify that all ARIA attributes have valid values and that the 'aria-controls' attribute references an existing element with a matching id. Ensure that the referenced element is present in the DOM and is a valid target for the 'aria-controls' attribute.
Medium
Text has insufficient colour contrast
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Component
1 affected page
1 instance
WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA)
Ref 8KVMIG
Affected pagehttps://jaobrand.com/cart
Element.free_shipping_card_title_clyowbt7029815119te4n3w72y3
Accessible nameFREE SHIPPING FOR US ORDERS $100.00+
Markup<div class="free_shipping_card_title_clyowbt7029815119te4n3w72y3 h2">FREE SHIPPING FOR US ORDERS $100.00+</div>
How to fixIncrease the contrast between the text and background colors by using a darker or lighter shade for either the text or the background, ensuring a minimum contrast ratio of 4.5:1 for normal text.
Medium
<video> elements must have captions
<video> elements must have captions
Component
1 affected page
3 instances
WCAG WCAG SC 1.2.2
Ref P6AS4E
Affected pagehttps://jaobrand.com/
Element#inline-video-18123367021805789-insta-feed
Markup<video muted="" loop="" playsinline="" style="border-radius:0px;" class="auto-loop-videos" data-feed-id="0" id="inline-video-1812336..." preload="none" data-poster="https://scontent.cdn..." src="https://scontent.cdn...">
How to fixAdd captions to the video element, either by including a text track in the video file or by providing a separate transcript of the audio content.
Medium
Text has insufficient colour contrast
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Component
1 affected page
1 instance
WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA)
Ref HGJ4I5
Affected pagehttps://jaobrand.com/cart
Elementjao-cart[data-view="desktop"] > .jao--liquid-after-cart > p > strong
Accessible nameWe cannot be responsible for missing delivered packages, best to ship to a monitored address.We do not ship on Saturday or Sunday.
Markup<strong>We cannot be responsible for missing delivered packages, best to ship to a monitored address.<br>We do not ship on Saturday or Sunday.</strong>
How to fixIncrease the contrast between the text color and background color by using a darker or lighter shade, or add a background image or texture that does not interfere with the text's readability.
Low
Video may be missing captions
A video element has no captions or subtitles track. Whether captions are needed depends on the audio content and requires manual review.
Component
1 affected page
6 instances
WCAG WCAG 2.1 SC 1.2.2 Captions (Prerecorded) (Level A)
Ref G0R88T
Affected pagehttps://jaobrand.com/
Elementvideo#inline-video-18123367021805789-insta-feed
Markup<video muted="" loop="" playsinline="" style="border-radius:0px;" class="auto-loop-videos" data-feed-id="0" id="inline-video-18123367021805789-insta-feed" preload="none" data-poster="https://scontent.cdninstagram.com/v/t51.82787-15/771541359_18633304771032716_7724465785400943149_n.jpg?stp=dst-jpg_e35_tt6&_nc_cat=101&ccb=7-5&_nc_sid=18de74&efg=eyJlZmdfdGFnIjoiQ0xJUFMuYmVzdF9pbWFnZV91cmxnZW4uQzMifQ%3D%3D&_nc_ohc=KtdIOWEJLOQQ7kNvwHLfvVX&_nc_oc=AdqdJ5qJyUP6a87tk9riTbnd-542QarokBcgkVBNmk_i6c_oN7Awo4x0Dejy4hcDlEQ&_nc_zt=23&_nc_ht=scontent.cdninstagram.com&edm=AM6H…
How to fixAdd captions or subtitles to the video, or provide an alternative way for users to access the audio content, such as a transcript.
Low
Text has insufficient colour contrast
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Component
1 affected page
2 instances
WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA)
Ref 7RRPUO
Affected pagehttps://jaobrand.com/products/bijoux-box
Elementdiv[data-value="Coral"] > .swatch-img-text-adjacent[swatch-inside="true"] > p[swatch-inside="true"]
Accessible nameCoral
Markup<p swatch-inside="true">Coral</p>
How to fixIncrease the contrast between the text color and the background color by using a color with a higher contrast ratio, such as a darker or lighter shade.
Low
ARIA attributes have invalid values
ARIA attributes reference ids that do not exist or hold invalid values, breaking the accessibility tree.
Component
1 affected page
1 instance
WCAG WCAG 2.1 SC 4.1.2 Name, Role, Value (Level A)
Ref BQN3SA
Affected pagehttps://jaobrand.com/products/bijoux-box
Element.swatch-view
Accessible nameCoral Fushia Salmon Pink Mustard Dark Grey
Roleradiogroup
Markup<ul class="swatch-view swatch-view-image " role="radiogroup" aria-labelledby="option1">
How to fixVerify that the id referenced by 'aria-labelledby' exists and is valid. Ensure that all ARIA attributes conform to valid values as defined in the WAI-ARIA specification.
Low
Text has insufficient colour contrast
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Component
1 affected page
1 instance
WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA)
Ref PG8BXP
Affected pagehttps://jaobrand.com/products/bijoux-box
Elementb
Accessible nameFREE SHIPPING FOR ORDERS $100+
Markup<b>FREE SHIPPING FOR ORDERS $100+ </b>
How to fixIncrease the contrast between the text color and the background color by using a darker or lighter shade, or add a background image or texture to improve readability.
Low
Text has insufficient colour contrast
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Component
1 affected page
1 instance
WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA)
Ref AG29EL
Affected pagehttps://jaobrand.com/cart
Elementjao-cart[data-view="desktop"] > .jao--liquid-before-cart > p
Accessible name*Refill pouch does not qualify for free shipping.
Markup<p style="color:#ef7828; text-align:center; padding-bottom: 38px;">
How to fixIncrease the contrast between the text color (#ef7828) and the background color by using a color with sufficient contrast ratio, or provide an alternative way for users to access the information, such as a high contrast mode.