Public accessibility assessment

Accessibility issues detected on vitalproteins.com

Evolize inspected 5 public pages on vitalproteins.com and detected 31 automatically identifiable accessibility findings.

31Findings detected
7WCAG criteria affected
5Pages inspected
9 Sep 2026Assessment date

Highest detected severity: High · 16 high-priority findings · 100% inspected-page coverage

Most widespread issueInteractive controls are not keyboard-accessibleDetected on 5 inspected pages
Most affected page/24 findings detected
Most represented WCAG criterionWCAG 1.4.3 — Contrast (Minimum)11 detected findings

Is vitalproteins.com your website?

Keep this assessment current and get notified when new accessibility issues are detected.

https://

Not your website? Scan your own site →

01 · Accessibility summary

Evolize inspected 5 public pages on vitalproteins.com and detected 31 accessibility findings. The most widespread issue was "Interactive controls are not keyboard-accessible", detected on 5 inspected pages. The most affected inspected page was "/", where 24 findings were detected. The assessment identified findings mapped to 7 WCAG success criterions. The sections below prioritize the broadest issues and provide technical evidence for each detected finding.

02 · Start here

These findings combine the highest severity and broadest reach detected during this assessment.

  1. High

    Hidden elements can still receive keyboard focus

    WCAG 2.4.3 (A) · 5 inspected pages · 30 instances
    Why this matters

    An element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.

    Recommended action

    Keep 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 technical evidence →
  2. High

    Interactive controls are not keyboard-accessible

    WCAG 2.1.1 (A) · 5 inspected pages · 25 instances
    Why this matters

    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.

    Recommended action

    Use a native <button>/<a>, or add tabindex="0" plus keyboard event handlers (Enter/Space) to custom controls.

    View technical evidence →
  3. High

    Interactive controls are not keyboard-accessible

    WCAG 2.1.1 (A) · 5 inspected pages · 15 instances
    Why this matters

    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.

    Recommended action

    Use a native <button>/<a>, or add tabindex="0" plus keyboard event handlers (Enter/Space) to custom controls.

    View technical evidence →
  4. High

    Form fields use placeholder text as the only label

    WCAG 1.3.1 (A) · 5 inspected pages · 15 instances
    Why this matters

    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.

    Recommended action

    Add a persistent <label> associated with each field. Keep the placeholder for example text only, not as the label.

    View technical evidence →
  5. High

    Interactive controls are not keyboard-accessible

    WCAG 2.1.1 (A) · 5 inspected pages · 10 instances
    Why this matters

    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.

    Recommended action

    Use a native <button>/<a>, or add tabindex="0" plus keyboard event handlers (Enter/Space) to custom controls.

    View technical evidence →

03 · WCAG criteria affected

CriterionNameLevelFindingsPagesReach
1.4.3Contrast (Minimum)AA1155 / 5
2.1.1KeyboardA955 / 5
1.3.1Info and RelationshipsA555 / 5
2.4.3Focus OrderA455 / 5
3.3.2Labels or InstructionsA255 / 5
4.1.2Name, Role, ValueA255 / 5
2.2.2Pause, Stop, HideA111 / 5

Absence of a criterion here does not indicate conformance with it — only that no automatically detectable issue was found for it.

Continuous monitoring

A scan shows today's exposure. Monitoring shows what changes next.

Evolize continuously reassesses public website pages, detects newly introduced or recurring accessibility findings, and tracks remediation over time.

04 · All detected findings

High

ARIA hidden element must not be focusable or contain focusable elements

WCAG 4.1.2 (A)5 instances5 inspected pages

ARIA hidden element must not be focusable or contain focusable elements

Why it matters

ARIA hidden element must not be focusable or contain focusable elements

Recommended correction

Review the affected element and correct the reported accessibility issue.

View 5 affected elements
Component · Ref 3D1FQU
Affected pagehttps://www.vitalproteins.com/products/hair-boost
Element.z-\[1000\]
Accessible nameCart (0)Your Cart is Empty!Let's get you the right collagen for your body!Shop All CollagenFree shipping on all orders over $50*
Markup
<div aria-hidden="true" class="z-[1000] flex flex-col fixed inset-y-0 right-0 transform transition-transform duration-200 ease-in-out translate-x-full max-w-xs w-full lg:w-[360px] bg-white shadow-lg z-50 overflow-y-auto">
Affected pages/ /products/hair-boost /collections/all-products /pages/sign-up-thanks /tools/recurring/login
High

Elements must only use permitted ARIA attributes

WCAG 4.1.2 (A)5 instances5 inspected pages

Elements must only use permitted ARIA attributes

Why it matters

Elements must only use permitted ARIA attributes

Recommended correction

Review the affected element and correct the reported accessibility issue.

View 5 affected elements
Component · Ref 529XJR
Affected pagehttps://www.vitalproteins.com/tools/recurring/login
Elementa[aria-label="View items in Bag"]
Accessible nameView items in Bag
Markup
<a aria-label="View items in Bag" class="relative flex" onclick="window.cartManager.openCart()">
Affected pages/ /products/hair-boost /collections/all-products /pages/sign-up-thanks /tools/recurring/login
High

Hidden elements can still receive keyboard focus

WCAG 2.4.3 (A)50 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 matters

An element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.

Recommended correction

Keep 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 50 affected elements
Component · Ref R7OWDI
Affected pagehttps://www.vitalproteins.com/
Elementdiv#shop-by-benefit > div:nth-of-type(7) > div:nth-of-type(2) > a
Accessible nameShop Collagen Peptides
Markup
<a href="/products/collagen-peptides" title="Collagen Peptides - with Hyaluronic Acid &amp; Vitamin C">Shop Collagen Peptides</a>
Affected pages/ /products/hair-boost /collections/all-products /pages/sign-up-thanks /tools/recurring/login
Component · Ref K7OFRZ
Affected pagehttps://www.vitalproteins.com/collections/all-products
Elementinput#header-search-bar-input
Markup
<input id="header-search-bar-input" class="bg-light-gray-bg" placeholder="Search" autocapitalize="off" autocomplete="off" autocorrect="off" name="q">
Affected pages/ /products/hair-boost /collections/all-products /pages/sign-up-thanks /tools/recurring/login
Component · Ref O1U582
Affected pagehttps://www.vitalproteins.com/tools/recurring/login
Elementdiv#shop-by-benefit > div:nth-of-type(1) > button
Accessible nameShop Best Sellers
Markup
<button class="vital-btn w-full" onclick="window.location='https://www.vitalproteins.com/collections/best-sellers'">Shop Best Sellers</button>
Affected pages/ /products/hair-boost /collections/all-products /pages/sign-up-thanks /tools/recurring/login
Component · Ref NXR8T2
Affected pagehttps://www.vitalproteins.com/pages/sign-up-thanks
Elementdiv#learn-more > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(3) > a
Accessible nameSocial and Environmental Responsibility
Markup
<a href="https://www.vitalproteins.com/pages/social-and-environmental-responsibility" target="_self" class="text-[#183F86] font-abc-monument-grotesk font-medium text-xs hover:underline">Social and Environmental Responsibility</a>
Affected pages/ /products/hair-boost /collections/all-products /pages/sign-up-thanks /tools/recurring/login
High

Interactive controls are not keyboard-accessible

WCAG 2.1.1 (A)75 instances5 inspected pages

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 matters

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.

Recommended correction

Use a native <button>/<a>, or add tabindex="0" plus keyboard event handlers (Enter/Space) to custom controls.

View 75 affected elements
Component · Ref U1WMP7
Affected pagehttps://www.vitalproteins.com/collections/all-products
Elementdiv#header-section > div:nth-of-type(4) > div
Accessible nameCancel
Markup
<div onclick="searchBarManager.closeSearchBar()" class="text-[#183F86] font-abc-monument-grotesk text-base">Cancel</div>
Affected pages/ /products/hair-boost /collections/all-products /pages/sign-up-thanks /tools/recurring/login
Component · Ref M6I5U0
Affected pagehttps://www.vitalproteins.com/products/hair-boost
Elementdiv#header-section > img
Markup
<img class="cursor-pointer header-logo" onclick="window.location='https://www.vitalproteins.com'" src="//www.vitalproteins.com/cdn/shop/files/vital_proteins_logo_horizontal_09b05023-247f-441c-8598-9296bc15bcae_400x.png?v=1613708082" alt="Vital Proteins" loading="eager">
Affected pages/ /products/hair-boost /collections/all-products /pages/sign-up-thanks /tools/recurring/login
Component · Ref QXYBT4
Affected pagehttps://www.vitalproteins.com/pages/sign-up-thanks
Elementdiv#menu-item-shop-products
Accessible nameShop Products
Markup
<div class="flex gap-1 items-center text-sm font-medium cursor-pointer mx-6 hover:underline data-[active=active]:underline group text-color-scheme-buttonBackground font-sans" onclick="desktopMenuManager.open('shop-products')" id="menu-item-shop-products">
              Shop Products&nbsp; <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg" class="group-data-[active=active]:hidden" style="width: 14px; height: 14px; fill: rgb(24, 63, 134);"> <path d="M233.4 406.6C245.9 419.1 266.2 419.1 278.7 406.6L470.7 214.6C483.2 202.1 483.2 181.8 470.7 169.3C458…
Affected pages/ /products/hair-boost /collections/all-products /pages/sign-up-thanks /tools/recurring/login
Component · Ref 0ETM5E
Affected pagehttps://www.vitalproteins.com/
Elementdiv#product-template-images-container > div:nth-of-type(1)
Accessible nameAll Collagen
Markup
<div class="flex flex-col flex-1 px-1 last:pr-0 group cursor-pointer" style="max-width: fit-content;" onclick="window.open('/collections/collagen', '_self')">
                <img loading="lazy" class="w-full rounded-sm w-[160px] h-[166px] object-cover border border-white group-hover:border-color-scheme-buttonBackground" src="//www.vitalproteins.com/cdn/shop/files/2026_DTC_Paperboard-Update_Navigation_Shop_Products_All-Collagen_200x.jpg?v=1782926824" alt="" role="presentation">
                <div class="text-[#183F86] font-abc-monument-grotesk font-medium text-xs mt-2 group-hover:underline">…
Affected pages/ /products/hair-boost /collections/all-products /pages/sign-up-thanks /tools/recurring/login
Component · Ref B0U027
Affected pagehttps://www.vitalproteins.com/tools/recurring/login
Elementdiv#header-section > div:nth-of-type(3) > img
Markup
<img alt="Search icon" onclick="searchBarManager.search()" class="header-icon-image" src="https://cdn.shopify.com/s/files/1/2074/9385/files/search-icon.svg?v=1750324948">
Affected pages/ /products/hair-boost /collections/all-products /pages/sign-up-thanks /tools/recurring/login
Component · Ref 0FTW6M
Affected pagehttps://www.vitalproteins.com/collections/all-products
Elementsvg#header-close-mobile-menu
Markup
<svg width="384" height="512" viewBox="0 0 384 512" fill="none" xmlns="http://www.w3.org/2000/svg" class="header-icon-image fill-color-scheme-buttonBackground" onclick="mobileMenuManager.closeMenu()" id="header-close-mobile-menu" style="display: none; width: 15px; height: 15px;"> <g clip-path="url(#clip0_12_12)"> <path d="M380.2 58.2999C385.9 51.5999 385.1 41.4999 378.3 35.7999C371.5 30.0999 361.5 30.8999 355.7 37.6999L192 231.2L28.2 37.6999C22.5 30.9999 12.4 30.0999 5.7 35.7999C-1 41.4999 -1.9 51.5999 3.8 58.2999L171 256L3.8 453.7C-1.9 460.4 -1.1 470.5 5.7 476.3C12.5 482.1 22.5 481.2 28.2 474…
Affected pages/ /products/hair-boost /collections/all-products /pages/sign-up-thanks /tools/recurring/login
Component · Ref GRR0VZ
Affected pagehttps://www.vitalproteins.com/collections/all-products
Elementdiv#header-section > div:nth-of-type(5) > div:nth-of-type(3) > a
Accessible nameView items in Bag
Markup
<a aria-label="View items in Bag" class="relative flex" onclick="window.cartManager.openCart()"> <span class="cartCount bg-color-scheme-text text-color-scheme-background">0</span> <svg class="h-7 w-7 mx-1 cursor-pointer" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 22"> <path d="M23.595 15.776H6.84L5.026 3.35H25.69c.419 0 .698.14.977.42.28.278.419.697.28 1.116l-1.397 9.354c-.28.838-.977 1.536-1.954 1.536Zm-15.916-.977h15.916c.418 0 .837-.28.837-.698l1.396-9.354c0-.14 0-.14-.14-.28-.139-.14-.139-.14-.278-.14H6.143L7.68 14.8Z" fill="#183F86"></path> <path d="M24.293 18.429H8.23…
Affected pages/ /products/hair-boost /collections/all-products /pages/sign-up-thanks /tools/recurring/login
Component · Ref Q8DETC
Affected pagehttps://www.vitalproteins.com/collections/all-products
Elementdiv#header-section > div:nth-of-type(5) > div:nth-of-type(1)
Markup
<div class="header-search-btn" onclick="searchBarManager.openSearchBar()"> <svg class="header-icon-image" xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33" fill="none"> <path class="stroke-color-scheme-buttonBackground" d="M16.052 22.7151C20.7137 22.7151 24.4928 18.936 24.4928 14.2743C24.4928 9.61249 20.7137 5.83337 16.052 5.83337C11.3902 5.83337 7.61108 9.61249 7.61108 14.2743C7.61108 18.936 11.3902 22.7151 16.052 22.7151Z" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round"></path> <path class="stroke-color-scheme-buttonBackground" d="M21.5743 21.1593…
Affected pages/ /products/hair-boost /collections/all-products /pages/sign-up-thanks /tools/recurring/login
High

Page has no main landmark

WCAG 1.3.1 (A)5 instances5 inspected pages

No <main> or role=main region is present, so screen reader users cannot jump to primary content.

Why it matters

No <main> or role=main region is present, so screen reader users cannot jump to primary content.

Recommended correction

Wrap the primary content in a single <main> element or role=main region.

View 5 affected elements
Component · Ref RM9JZJ
Affected pagehttps://www.vitalproteins.com/products/hair-boost
Elementhtml > body
Accessible name<style> .product_section .product_form { opacity: 1; } .multi_select, form .select { display: block !important; }</style> #1 Collagen Brand ¹ Stay Vital Free Shipping on Subscription Orders #top-shout-bar { height: 36px; color: #ffffff; font-family: Monument Grotesk, sans-serif; } #top-shout-bar .top-shout-bar__link { color: inherit; font-size: 12px; } #top-shout-bar .text-medium-gray { color: #ffffff; } .slider-text { position: absolute; top: 6px; left: 0; opacity: 0; transition: opacity 1s ease-in-out; width: 100%; text-align: center; } .slider-text.active { opacity: 1; z-index: 55; } // Get all the slider text elements const sliderTexts = document.querySelectorAll('.slider-text'); // Set the initial active index to 0 let activeIndex = 0; // Function to set the active slide and update the index function setActiveSlide() { // Set the current active slide to inactive sliderTexts[activeIndex].classList.remove('active'); // Increment the active index or reset to 0 if at the end activeIndex = (activeIndex + 1) % sliderTexts.length; // Set the new active slide to active sliderTexts[activeIndex].classList.add('active'); } // Call the setActiveSlide function every 3 seconds (adjust as needed) setInterval(setActiveSlide, 3000); .btn-element-primary{ background: #355C7E; color: white; align-items: center; padding: 10px 33px; border-radius: 4px; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 16px; cursor: pointer; border: 0; width: fit-content; height: unset; min-height: unset; display: flex; align-items: center; justify-content: center; } .btn-element-primary-cards{ background: #355C7E; color: white; display: inline-flex; align-items: center; padding: 10px 33px; border-radius: 4px; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 16px; cursor: pointer; border: 0; height: unset; min-height: unset; } .btn-element-primary-responsive{ background: #355C7E; color: white; display: inline-flex; align-items: center; padding: 0.694vw 2.29vw; border-radius: 0.277vw; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 1.11vw; cursor: pointer; border: 0; width: fit-content; height: unset; min-height: unset; animation: unset; transition: unset; } .btn-element-primary-responsive-ribbon{ background: #355C7E; color: white; display: inline-flex; align-items: center; padding: 0.694vw 2.29vw; border-radius: 0.277vw; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 1.11vw; cursor: pointer; border: 0; width: fit-content; height: unset; min-height: unset; animation: unset; transition: unset; } .btn-element-white{ background: white !important; color: #355C7E !important; } .btn-element-secondary{ display: inline-flex; align-items: center; border-radius: 4px; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 16px; cursor: pointer; width: fit-content; height: unset; min-height: unset; background: transparent; color: #355C7E; border: 2px solid #355C7E; box-sizing: border-box; padding: 8px 24px; } .btn-element-primary:hover { display: inline-flex; align-items: center; padding: 10px 33px; border-radius: 4px; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 16px; cursor: pointer; border: 0; width: fit-content; height: unset; min-height: unset; background: #567693; border: unset; } .btn-element-primary-cards:hover { display: inline-flex; align-items: center; padding: 10px 33px; border-radius: 4px; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 16px; cursor: pointer; border: 0; height: unset; min-height: unset; background: #567693; border: unset; } .btn-element-primary-responsive:hover{ color: white; display: inline-flex; align-items: center; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; cursor: pointer; width: fit-content; height: unset; min-height: unset; animation: unset; transition: unset; background: #567693; border: unset; } .btn-element-primary-responsive-ribbon:hover{ color: white; display: inline-flex; align-items: center; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; cursor: pointer; width: fit-content; height: unset; min-height: unset; animation: unset; transition: unset; background: #567693; border: unset; } .btn-element-secondary:hover{ display: inline-flex; align-items: center; padding: 10px 33px; border-radius: 4px; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 16px; cursor: pointer; width: fit-content; height: unset; min-height: unset; color: #567693; border: 2px solid #567693; } .btn-element-primary-disabled, .btn-element-primary-disabled:hover, .btn-element-primary:disabled { display: inline-flex; align-items: center; padding: 10px 33px; border-radius: 4px; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 16px; cursor: initial; border: 0; width: fit-content; height: unset; min-height: unset; background: #CDD2D5 !important; } .btn-element-secondary-disabled, .btn-element-secondary-disabled:hover { display: inline-flex; align-items: center; padding: 10px 33px; border-radius: 4px; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 16px; cursor: pointer; width: fit-content; height: unset; min-height: unset; background: transparent !important; color: #CDD2D5 !important; border: 2px solid #CDD2D5 !important; } .btn-element-full-width { display: inline-flex; align-items: center; padding: 10px 33px; border-radius: 4px; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 16px; cursor: pointer; border: 0; height: unset; min-height: unset; width: 100%; justify-content: center; } .btn-element-full-width:hover{ width: 100%; } @media screen and (max-width: 1023px){ .btn-element-primary-responsive{ padding: 1.30vw 4.30vw; border-radi…[truncated by Evolize: exceeded D1 value limit]
Markup
<body class="404 mobile_nav-fixed--false" style="width: 100%; overflow: auto;" data-money-format="${{amount}}"><noscript> <style>
    .product_section .product_form {
      opacity: 1;
    }

    .multi_select,
    form .select {
      display: block !important;
    }</style>
</noscript>

 <!-- BEGIN sections: header-group -->
<div id="shopify-section-sections--28676164780216__announcement-bar" class="shopify-section shopify-section-group-header-group announcement-bar-section"><div class="tailwind color-background-2"> <div class="w-full h-[36px]"></div> <div id="top-shout-bar" class="fixed top…
Affected pages/ /products/hair-boost /collections/all-products /pages/sign-up-thanks /tools/recurring/login
High

Form fields use placeholder text as the only label

WCAG 1.3.1 (A)16 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 matters

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.

Recommended correction

Add a persistent <label> associated with each field. Keep the placeholder for example text only, not as the label.

View 16 affected elements
Component · Ref RAF2E
Affected pagehttps://www.vitalproteins.com/
Elementinput#header-search-bar-input
Rolecombobox
Markup
<input id="header-search-bar-input" class="bg-light-gray-bg snize-input-style" placeholder="Search" autocapitalize="off" autocomplete="off" autocorrect="off" name="q" role="combobox" aria-haspopup="listbox" aria-autocomplete="list" aria-expanded="false">
Affected pages/ /products/hair-boost /collections/all-products /pages/sign-up-thanks /tools/recurring/login
Component · Ref XA3Y92
Affected pagehttps://www.vitalproteins.com/products/hair-boost
Elementdiv:nth-of-type(1) > div > div:nth-of-type(3) > div:nth-of-type(2) > form > input
Rolecombobox
Markup
<input type="text" name="q" class="search_box snize-input-style" placeholder="Search..." value="" role="combobox" aria-haspopup="listbox" aria-autocomplete="list" aria-expanded="false" autocorrect="off" autocapitalize="off" autocomplete="off">
Medium

Text has insufficient colour contrast

WCAG 1.4.3 (AA)21 instances5 inspected pages

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Why it matters

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Recommended correction

Increase the contrast ratio to at least 4.5:1 for normal text and 3:1 for large text.

View 21 affected elements
Component · Ref 1ZPM2I
Affected pagehttps://www.vitalproteins.com/products/hair-boost
Element#onetrust-policy-text > p:nth-child(2)
Accessible nameWe also use these tools for marketing, research, and monitoring. We may share your data with third parties, including marketing vendors, social media companies, and research partners. To review your choices, click “Your Privacy Choices”. For more information, see our Privacy Policy.
Markup
<p>
Affected pages/ /products/hair-boost /collections/all-products /pages/sign-up-thanks /tools/recurring/login
Component · Ref X48AYX
Affected pagehttps://www.vitalproteins.com/collections/all-products
Element#product-6588016623800 > .my-0.mt-0 > .font-abc-monument.pt-0.my-1 > .text-dark-gray.line-through.empty\:mr-0
Accessible name$16.99
Markup
<div class="text-dark-gray opacity-40 line-through mr-2 empty:mr-0" style="text-stroke: 1px; -webkit-text-stroke: 1px;">$16.99
</div>
Component · Ref L42XOA
Affected pagehttps://www.vitalproteins.com/pages/sign-up-thanks
Element#rich-text-01M0XCE05SCPEY41KVG399D8NQ > div > span
Accessible nameGET 15% OFF!
Markup
<span style="font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif; font-weight: 400; color: rgb(24, 63, 134);">GET 15% OFF!</span>
Affected pages/products/hair-boost /pages/sign-up-thanks
Component · Ref ZRJZKN
Affected pagehttps://www.vitalproteins.com/
Element.md\:max-w-1\/2.max-w-full.items-center:nth-child(3) > .lg\:text-base.font-normal.text-\[\#183F86\]
Accessible nameExclusive Offers
Markup
<div class="font-normal text-sm lg:text-base text-[#183F86]">
                            Exclusive Offers
                        </div>
Component · Ref RVX75O
Affected pagehttps://www.vitalproteins.com/collections/all-products
Element.z-20
Accessible nameAll Products
Markup
<div class="z-20 w-3/5 md:w-4/5 font-kapra-neue  text-4xl md:text-8xl text-white text-center uppercase text-hero-mobile lg:text-hero-desktop">
      All Products</div>
Component · Ref F2CSE3
Affected pagehttps://www.vitalproteins.com/
Element.pt-8 > .lg\:text-4xl
Accessible nameSubscribe & Save
Markup
<h2 class="font-sans font-medium text-center normal-case text-2xl lg:text-4xl text-[#183F86]">Subscribe &amp; Save</h2>
Component · Ref 6OXOXF
Affected pagehttps://www.vitalproteins.com/products/hair-boost
Element.fda-statement.border-none.text-center:nth-child(3)
Accessible name^Results may vary. Various studies have suggested benefits following daily consumption of collagen peptides for several months.Refer to product labels and vitalproteins.com for recommended serving sizes and more information.
Markup
<p class="fda-statement text-center border-none text-color-scheme-text text-sm">
Component · Ref 4O5G6F
Affected pagehttps://www.vitalproteins.com/
Element.hero-text > sup
Accessible name¹
Markup
<sup>¹</sup>
Component · Ref 2JIY4L
Affected pagehttps://www.vitalproteins.com/
Elementh1
Accessible nameLook, feel and move your best with our premium collagen-based products.**
Markup
<h1 class="text-base md:text-3xl xl:text-4xl text-white normal-case font-sans leading-tight">Look, feel and move your best with our premium collagen-based products.**</h1>
Component · Ref NVZF4D
Affected pagehttps://www.vitalproteins.com/
Element.mt-4.text-center.text-\[\#183F86\]
Accessible nameAt Vital Proteins, we’re all about helping people look, feel and move their best.**^ And collagen. We’re all about that, too. Which is kind of the same thing.
Markup
<p class="text-center mt-4 text-[#183F86]">At Vital Proteins, we’re all about helping people look, feel and move their best.**^ And collagen. We’re all about that, too. Which is kind of the same thing.</p>
Component · Ref 9K5I1Z
Affected pagehttps://www.vitalproteins.com/
Element.hero-text
Accessible name#1 Collagen Brand ¹
Markup
<p class="hero-text text-[40px] md:text-[60px] xl:text-[80px] text-white normal-case font-sans leading-none w-3/4 mx-auto md:ml-0 md:w-full">#1 Collagen Brand <sup>¹</sup></p>
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 matters

Meaningful content is not contained in a landmark (header/nav/main/footer/aside), so assistive-technology users cannot reach it via landmark navigation.

Recommended correction

Wrap primary content in <main> and other regions in appropriate landmark elements.

View 5 affected elements
Component · Ref 25AB9R
Affected pagehttps://www.vitalproteins.com/collections/all-products
Elementdiv#\33 > p
Accessible nameFree Shipping on Subscription Orders
Markup
<p><a class="top-shout-bar__link" title="Subscription Free Shipping" href="/products/collagen-peptides">Free Shipping on Subscription Orders</a></p>
Affected pages/ /products/hair-boost /collections/all-products /pages/sign-up-thanks /tools/recurring/login
Low

Page has no level-one heading

WCAG 1.3.1 (A)1 instance1 inspected page

The page exposes no <h1>, so its topic is not conveyed in the heading structure.

Why it matters

The page exposes no <h1>, so its topic is not conveyed in the heading structure.

Recommended correction

Add a single descriptive <h1> that names the page's primary purpose.

View 1 affected element
Component · Ref RG61EW
Affected pagehttps://www.vitalproteins.com/tools/recurring/login
Elementhtml > body
Accessible name<style> .product_section .product_form { opacity: 1; } .multi_select, form .select { display: block !important; }</style> #1 Collagen Brand ¹ Stay Vital Free Shipping on Subscription Orders #top-shout-bar { height: 36px; color: #ffffff; font-family: Monument Grotesk, sans-serif; } #top-shout-bar .top-shout-bar__link { color: inherit; font-size: 12px; } #top-shout-bar .text-medium-gray { color: #ffffff; } .slider-text { position: absolute; top: 6px; left: 0; opacity: 0; transition: opacity 1s ease-in-out; width: 100%; text-align: center; } .slider-text.active { opacity: 1; z-index: 55; } // Get all the slider text elements const sliderTexts = document.querySelectorAll('.slider-text'); // Set the initial active index to 0 let activeIndex = 0; // Function to set the active slide and update the index function setActiveSlide() { // Set the current active slide to inactive sliderTexts[activeIndex].classList.remove('active'); // Increment the active index or reset to 0 if at the end activeIndex = (activeIndex + 1) % sliderTexts.length; // Set the new active slide to active sliderTexts[activeIndex].classList.add('active'); } // Call the setActiveSlide function every 3 seconds (adjust as needed) setInterval(setActiveSlide, 3000); .btn-element-primary{ background: #355C7E; color: white; align-items: center; padding: 10px 33px; border-radius: 4px; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 16px; cursor: pointer; border: 0; width: fit-content; height: unset; min-height: unset; display: flex; align-items: center; justify-content: center; } .btn-element-primary-cards{ background: #355C7E; color: white; display: inline-flex; align-items: center; padding: 10px 33px; border-radius: 4px; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 16px; cursor: pointer; border: 0; height: unset; min-height: unset; } .btn-element-primary-responsive{ background: #355C7E; color: white; display: inline-flex; align-items: center; padding: 0.694vw 2.29vw; border-radius: 0.277vw; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 1.11vw; cursor: pointer; border: 0; width: fit-content; height: unset; min-height: unset; animation: unset; transition: unset; } .btn-element-primary-responsive-ribbon{ background: #355C7E; color: white; display: inline-flex; align-items: center; padding: 0.694vw 2.29vw; border-radius: 0.277vw; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 1.11vw; cursor: pointer; border: 0; width: fit-content; height: unset; min-height: unset; animation: unset; transition: unset; } .btn-element-white{ background: white !important; color: #355C7E !important; } .btn-element-secondary{ display: inline-flex; align-items: center; border-radius: 4px; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 16px; cursor: pointer; width: fit-content; height: unset; min-height: unset; background: transparent; color: #355C7E; border: 2px solid #355C7E; box-sizing: border-box; padding: 8px 24px; } .btn-element-primary:hover { display: inline-flex; align-items: center; padding: 10px 33px; border-radius: 4px; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 16px; cursor: pointer; border: 0; width: fit-content; height: unset; min-height: unset; background: #567693; border: unset; } .btn-element-primary-cards:hover { display: inline-flex; align-items: center; padding: 10px 33px; border-radius: 4px; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 16px; cursor: pointer; border: 0; height: unset; min-height: unset; background: #567693; border: unset; } .btn-element-primary-responsive:hover{ color: white; display: inline-flex; align-items: center; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; cursor: pointer; width: fit-content; height: unset; min-height: unset; animation: unset; transition: unset; background: #567693; border: unset; } .btn-element-primary-responsive-ribbon:hover{ color: white; display: inline-flex; align-items: center; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; cursor: pointer; width: fit-content; height: unset; min-height: unset; animation: unset; transition: unset; background: #567693; border: unset; } .btn-element-secondary:hover{ display: inline-flex; align-items: center; padding: 10px 33px; border-radius: 4px; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 16px; cursor: pointer; width: fit-content; height: unset; min-height: unset; color: #567693; border: 2px solid #567693; } .btn-element-primary-disabled, .btn-element-primary-disabled:hover, .btn-element-primary:disabled { display: inline-flex; align-items: center; padding: 10px 33px; border-radius: 4px; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 16px; cursor: initial; border: 0; width: fit-content; height: unset; min-height: unset; background: #CDD2D5 !important; } .btn-element-secondary-disabled, .btn-element-secondary-disabled:hover { display: inline-flex; align-items: center; padding: 10px 33px; border-radius: 4px; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 16px; cursor: pointer; width: fit-content; height: unset; min-height: unset; background: transparent !important; color: #CDD2D5 !important; border: 2px solid #CDD2D5 !important; } .btn-element-full-width { display: inline-flex; align-items: center; padding: 10px 33px; border-radius: 4px; font-family: Avenir-Next, sans-serif; font-style: normal; font-weight: 600; font-size: 16px; cursor: pointer; border: 0; height: unset; min-height: unset; width: 100%; justify-content: center; } .btn-element-full-width:hover{ width: 100%; } @media screen and (max-width: 1023px){ .btn-element-primary-responsive{ padding: 1.30vw 4.30vw; border-radi…[truncated by Evolize: exceeded D1 value limit]
Markup
<body class="mobile_nav-fixed--false" style="width: 100%; overflow: auto;" data-money-format="${{amount}}"><noscript> <style>
    .product_section .product_form {
      opacity: 1;
    }

    .multi_select,
    form .select {
      display: block !important;
    }</style>
</noscript>

 <!-- BEGIN sections: header-group -->
<div id="shopify-section-sections--28676164780216__announcement-bar" class="shopify-section shopify-section-group-header-group announcement-bar-section"><div class="tailwind color-background-2"> <div class="w-full h-[36px]"></div> <div id="top-shout-bar" class="fixed top-0 l…

05 · Most affected inspected pages

06 · About this assessment

Evolize inspects publicly accessible website pages using automated browser-based testing and deterministic accessibility rules. Automated testing can identify many reproducible technical issues but cannot determine complete WCAG or legal compliance.

  • Publicly accessible surfaces only — no credentials, private systems, or source-code access.
  • Findings apply to the pages and states successfully inspected; automated analysis may not detect every issue.
  • Results reflect the site at the scan date and may have changed since.

Evolize provides digital risk intelligence and does not provide legal advice, certify compliance, or guarantee that litigation will not occur. Methodology · Security · Example assessment

07 · Continuous monitoring

This public report captures one assessment. Evolize monitoring rescans the website, detects new and recurring findings, tracks changes over time and verifies corrections.

Is information in this report inaccurate or outdated? Request a correction or removal.