Axe Accessibility Report

Violations

Axe found 5 violations.

Elements must have sufficient color contrast

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

Learn more

Rule: color-contrast
Impact: serious
Tags: WCAG 2 Level AA, WCAG 1.4.3

1 node triggered this violation.

<input type="search" name="search" placeholder="Sök efter butik eller båge" class="w-[260px] h-[35px] bg-gray-250 border-b border-[rgba(0, 0, 0, 0.1)] appearance-none focus:outline-none px-[30px] focus:border-pink hidden xl:flex text-sm1">

Heading levels should only increase by one

Ensures the order of headings is semantically correct

Learn more

Rule: heading-order
Impact: moderate
Tags: Best practice

1 node triggered this violation.

<h4 style="text-align: center"><span style="color: rgba(0, 0, 0, 1)">Nya glasögon börjar med en synundersökning</span></h4>

Document must have one main landmark

Ensures the document has a main landmark

Learn more

Rule: landmark-one-main
Impact: moderate
Tags: Best practice

1 node triggered this violation.

<html id="html" lang="sv">

Ensures landmarks are unique

Landmarks must have a unique role or role/label/title (i.e. accessible name) combination

Learn more

Rule: landmark-unique
Impact: moderate
Tags: Best practice

1 node triggered this violation.

<nav class="grid grid-rows-1 grid-flow-col gap-0 h-[55px] px-[26px]">

All page content must be contained by landmarks

Ensures all page content is contained by landmarks

Learn more

Rule: region
Impact: moderate
Tags: Best practice

44 nodes triggered this violation.

<section style="--sf-backgrоund-color: #6F0F3D" class="row flex flex-wrap ">

<section style="" class="row flex flex-wrap ">

<section style="" class="row flex flex-wrap pt-sfm pb-sfl center-block">

<section style="" class="row flex flex-wrap ">

<div class=" content-block">
<h3 style="text-align: center">Nyheter 2024:</h3></div>

<div class="relative mt-l" id="frame-W037C1">

<a href="/glasogon/glasogonbagar/model-w040?color=C1" class="flex flex-col hover:no-underline" id="link-for-frame-W040">

<div class="flex 
                            items-center 
                            focus:outline-none 
                            focus:bg-white 
                            w-fit
                            focus-within:outline-dashed
                            focus-within:outline-1
                            focus-within:outline-offset-[4px]
                            focus-within:outline-black">

<input type="checkbox" id="W040C2" name="W040C2" class="scc opacity-0 absolute h-[20px] w-[20px]" data-model="W040" data-targeturl="/glasogon/glasogonbagar/model-w040?color=C2" data-thumbnailurl="https://cdn.smarteyes.com/content/images/default-source/products/frames/w040c2_front.tmb-tbn-pr-768.webp?sfvrsn=b4b8536a_2">

<label for="W040C2" class="select-none sr-only">
        W040C2
    </label>

<div class="absolute top-0 w-full z-10]">

<a href="/glasogon/glasogonbagar/model-r226?color=C1" class="flex flex-col hover:no-underline" id="link-for-frame-R226">

<div class="flex 
                            items-center 
                            focus:outline-none 
                            focus:bg-white 
                            w-fit
                            focus-within:outline-dashed
                            focus-within:outline-1
                            focus-within:outline-offset-[4px]
                            focus-within:outline-black">

<input type="checkbox" id="R226C2" name="R226C2" class="scc opacity-0 absolute h-[20px] w-[20px]" data-model="R226" data-targeturl="/glasogon/glasogonbagar/model-r226?color=C2" data-thumbnailurl="https://cdn.smarteyes.com/content/images/default-source/products/frames/r226c2_front.tmb-tbn-pr-768.webp?sfvrsn=5d42990f_2">

<label for="R226C2" class="select-none sr-only">
        R226C2
    </label>

<div class="absolute top-0 w-full z-10]">

<div class="flex items-center mt-sfm mb-sfm justify-center">
            <a href="https://www.smarteyes.se/glasogon/glasogonmodeller" class="  btn-primary-black" data-call-to-action="">
                Se alla bågar
            </a>
</div>

<section style="" class="row flex flex-wrap pt-sfs pb-sfs">

<a href="/glasogon/glasogonbagar/model-r239?color=C1" class="flex flex-col hover:no-underline" id="link-for-frame-R239">

<div class="flex 
                            items-center 
                            focus:outline-none 
                            focus:bg-white 
                            w-fit
                            focus-within:outline-dashed
                            focus-within:outline-1
                            focus-within:outline-offset-[4px]
                            focus-within:outline-black">

<input type="checkbox" id="R239C2" name="R239C2" class="scc opacity-0 absolute h-[20px] w-[20px]" data-model="R239" data-targeturl="/glasogon/glasogonbagar/model-r239?color=C2" data-thumbnailurl="https://cdn.smarteyes.com/content/images/default-source/products/frames/r239c2_front.tmb-tbn-pr-768.webp?sfvrsn=682476d4_3">

<label for="R239C2" class="select-none sr-only">
        R239C2
    </label>

<div class="absolute top-0 w-full z-10]">

<a href="/glasogon/glasogonbagar/model-r237?color=C1" class="flex flex-col hover:no-underline" id="link-for-frame-R237">

<div class="flex 
                            items-center 
                            focus:outline-none 
                            focus:bg-white 
                            w-fit
                            focus-within:outline-dashed
                            focus-within:outline-1
                            focus-within:outline-offset-[4px]
                            focus-within:outline-black">

<input type="checkbox" id="R237C2" name="R237C2" class="scc opacity-0 absolute h-[20px] w-[20px]" data-model="R237" data-targeturl="/glasogon/glasogonbagar/model-r237?color=C2" data-thumbnailurl="https://cdn.smarteyes.com/content/images/default-source/products/frames/r237c2_front.tmb-tbn-pr-768.webp?sfvrsn=7e303e68_2">

<label for="R237C2" class="select-none sr-only">
        R237C2
    </label>

<div class="absolute top-0 w-full z-10]">

<a href="/glasogon/glasogonbagar/model-r236?color=C1" class="flex flex-col hover:no-underline" id="link-for-frame-R236">

<div class="flex 
                            items-center 
                            focus:outline-none 
                            focus:bg-white 
                            w-fit
                            focus-within:outline-dashed
                            focus-within:outline-1
                            focus-within:outline-offset-[4px]
                            focus-within:outline-black">

<input type="checkbox" id="R236C2" name="R236C2" class="scc opacity-0 absolute h-[20px] w-[20px]" data-model="R236" data-targeturl="/glasogon/glasogonbagar/model-r236?color=C2" data-thumbnailurl="https://cdn.smarteyes.com/content/images/default-source/products/frames/r236c2_front.tmb-tbn-pr-768.webp?sfvrsn=f0698af1_2">

<label for="R236C2" class="select-none sr-only">
        R236C2
    </label>

<div class="absolute top-0 w-full z-10]">

<div class="flex items-center mt-sfm mb-sfm justify-center">
            <a href="https://www.smarteyes.se/glasogon/glasogonmodeller" class="  btn-primary-black" data-call-to-action="">
                Se alla bågar
            </a>
</div>

<section style="" class="row flex flex-wrap mt-sfm mb-sfs center-block">
        <div class="w-full  " style="">


<div class=" content-block">
<h3 style="text-align: center">Erbjudanden:</h3></div>
</div>
</section>

<section style="" class="row flex flex-wrap mb-sfm center-block">

<section style="--sf-backgrоund-color: #E50070" class="row flex flex-wrap ">

<section style="" class="row flex flex-wrap mt-sfl center-block">

<section style="" class="row flex flex-wrap mt-sfl center-block">

<section style="" class="row flex flex-wrap mt-sfl center-block">

<section style="--sf-backgrоund-image: url(https://cdn.smarteyes.com/content/images/default-source/desktop-hero-images/stores_2023.jpg?sfvrsn=2bb5dc30_3);--sf-background-size: cover;" class="row flex flex-wrap pt-sfl xl:pr-sfl pb-sfl xl:pl-sfl mt-sfl -sc-image">

<section style="--sf-backgrоund-color: #6F0F3D" class="row flex flex-wrap xl:pr-sfl pb-sfl xl:pl-sfm">

<section style="" class="row flex flex-wrap center-block">

<div class="w-full xl:w-c xl:mx-auto ">

Passed checks

Axe found 14 passing checks.

Description	Rule	Tags	Nodes
Required ARIA attributes must be provided	`aria-required-attr`	WCAG 2 Level A, WCAG 4.1.2	14
Certain ARIA roles must be contained by particular parents	`aria-required-parent`	WCAG 2 Level A, WCAG 1.3.1	14
ARIA roles used must conform to valid values	`aria-roles`	WCAG 2 Level A, WCAG 4.1.2	14
ARIA attributes must conform to valid names	`aria-valid-attr`	WCAG 2 Level A, WCAG 4.1.2	3
Elements must have sufficient color contrast	`color-contrast`	WCAG 2 Level AA, WCAG 1.4.3	60
Documents must have <title> element to aid in navigation	`document-title`	WCAG 2 Level A, WCAG 2.4.2	1
Heading levels should only increase by one	`heading-order`	Best practice	14
<html> element must have a lang attribute	`html-has-lang`	WCAG 2 Level A, WCAG 3.1.1	1
<html> element must have a valid value for the lang attribute	`html-lang-valid`	WCAG 2 Level A, WCAG 3.1.1	1
Images must have alternate text	`image-alt`	WCAG 2 Level A, WCAG 1.1.1	28
Ensures landmarks are unique	`landmark-unique`	Best practice	2
Zooming and scaling must not be disabled	`meta-viewport`	Best practice	1
Page must contain a level-one heading	`page-has-heading-one`	Best practice	1
All page content must be contained by landmarks	`region`	Best practice	723

Inapplicable checks

Axe found 4 inapplicable checks.

Description	Rule	Tags
Banner landmark must not be contained in another landmark	`landmark-banner-is-top-level`	Best practice
Main landmark must not be contained in another landmark	`landmark-main-is-top-level`	Best practice
Document must not have more than one main landmark	`landmark-no-duplicate-main`	Best practice
lang attribute must have a valid value	`valid-lang`	WCAG 2 Level AA, WCAG 3.1.2