Back to Accessibility Report

Axe-core® Accessibility Results

axe-core found 17 violations

# Description Axe rule ID WCAG Impact Count
1 Elements must meet minimum color contrast ratio thresholds color-contrast WCAG 2 Level AA, WCAG 1.4.3 serious 10
2 All page content should be contained by landmarks region Best practice moderate 7

Failed

1. Elements must meet minimum color contrast ratio thresholds

Learn more

color-contrast

WCAG 2 Level AA, WCAG 1.4.3

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

serious

Issue Tags: cat.color wcag2aa wcag143 TTv5 TT13.c EN-301-549 EN-9.1.4.3 ACT

# Issue Description To solve this violation, you need to...
1

Element location

p > code

Element source

<code style="background: rgb(229, 231, 235); padding: 2px 4px; border-radius: 3px; font-size: 11px;">window.location.search</code>

Fix any of the following:

  • Element has insufficient color contrast of 3.9 (foreground color: #6b7280, background color: #e5e7eb, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

p > code
2

Element location

div:nth-child(3) > div:nth-child(1) > span

Element source

<span style="font-size: 11px; color: rgb(220, 38, 38); font-weight: 600; padding: 2px 6px; background: rgb(254, 226, 226); border-radius: 4px;">FALSE</span>

Fix any of the following:

  • Element has insufficient color contrast of 3.95 (foreground color: #dc2626, background color: #fee2e2, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

div:nth-child(3) > div:nth-child(1) > span
3

Element location

div:nth-child(1) > div:nth-child(3) > div:nth-child(2) > span

Element source

<span style="font-size: 11px; color: rgb(220, 38, 38); font-weight: 600; padding: 2px 6px; background: rgb(254, 226, 226); border-radius: 4px;">FALSE</span>

Fix any of the following:

  • Element has insufficient color contrast of 3.95 (foreground color: #dc2626, background color: #fee2e2, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

div:nth-child(1) > div:nth-child(3) > div:nth-child(2) > span
4

Element location

div:nth-child(3) > span

Element source

<span style="font-size: 11px; color: rgb(220, 38, 38); font-weight: 600; padding: 2px 6px; background: rgb(254, 226, 226); border-radius: 4px;">FALSE</span>

Fix any of the following:

  • Element has insufficient color contrast of 3.95 (foreground color: #dc2626, background color: #fee2e2, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

div:nth-child(3) > span
5

Element location

div:nth-child(4) > span

Element source

<span style="font-size: 11px; color: rgb(220, 38, 38); font-weight: 600; padding: 2px 6px; background: rgb(254, 226, 226); border-radius: 4px;">FALSE</span>

Fix any of the following:

  • Element has insufficient color contrast of 3.95 (foreground color: #dc2626, background color: #fee2e2, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

div:nth-child(4) > span
6

Element location

div:nth-child(5) > span

Element source

<span style="font-size: 11px; color: rgb(220, 38, 38); font-weight: 600; padding: 2px 6px; background: rgb(254, 226, 226); border-radius: 4px;">FALSE</span>

Fix any of the following:

  • Element has insufficient color contrast of 3.95 (foreground color: #dc2626, background color: #fee2e2, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

div:nth-child(5) > span
7

Element location

div:nth-child(6) > span

Element source

<span style="font-size: 11px; color: rgb(220, 38, 38); font-weight: 600; padding: 2px 6px; background: rgb(254, 226, 226); border-radius: 4px;">FALSE</span>

Fix any of the following:

  • Element has insufficient color contrast of 3.95 (foreground color: #dc2626, background color: #fee2e2, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

div:nth-child(6) > span
8

Element location

div:nth-child(7) > span

Element source

<span style="font-size: 11px; color: rgb(220, 38, 38); font-weight: 600; padding: 2px 6px; background: rgb(254, 226, 226); border-radius: 4px;">FALSE</span>

Fix any of the following:

  • Element has insufficient color contrast of 3.95 (foreground color: #dc2626, background color: #fee2e2, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

div:nth-child(7) > span
9

Element location

div:nth-child(8) > span

Element source

<span style="font-size: 11px; color: rgb(220, 38, 38); font-weight: 600; padding: 2px 6px; background: rgb(254, 226, 226); border-radius: 4px;">FALSE</span>

Fix any of the following:

  • Element has insufficient color contrast of 3.95 (foreground color: #dc2626, background color: #fee2e2, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

div:nth-child(8) > span
10

Element location

div:nth-child(9) > span

Element source

<span style="font-size: 11px; color: rgb(22, 163, 74); font-weight: 600; padding: 2px 6px; background: rgb(220, 252, 231); border-radius: 4px;">TRUE</span>

Fix any of the following:

  • Element has insufficient color contrast of 3 (foreground color: #16a34a, background color: #dcfce7, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

div:nth-child(9) > span

2. All page content should be contained by landmarks

Learn more

region

Best practice

Ensure all page content is contained by landmarks

moderate

Issue Tags: cat.keyboard best-practice

# Issue Description To solve this violation, you need to...
1

Element location

#storybook-root > div:nth-child(1)

Element source

<div style="position: fixed; top: 10px; right: 10px; background: white; border: 1px solid rgb(224, 224, 224); border-radius: 8px; padding: 16px; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px; z-index: 1000; min-width: 280px; max-width: 350px;">

Fix any of the following:

  • Some page content is not contained by landmarks
2

Element location

.StoreDetailsV2-module-storeDetailsBackButton-qZMd8 > span

Element source

<span>Back to Store Finder</span>

Fix any of the following:

  • Some page content is not contained by landmarks
3

Element location

.StoreDetailsV2-module-storeDetailsTitle-nrElt

Element source

<div class="StoreDetailsV2-module-storeDetailsTitle-nrElt">Ploom sticks nr. 2476 di roma</div>

Fix any of the following:

  • Some page content is not contained by landmarks
4

Element location

.StoreDetailsV2-module-storeDetailsStoreInfo-R9L2O

Element source

<p class="StoreDetailsV2-module-storeDetailsStoreInfo-R9L2O"><span>via boccea, 1052, roma, 00166, IT</span><span>0000 00000</span></p>

Fix any of the following:

  • Some page content is not contained by landmarks
5

Element location

.StoreLocatorGetDirection-module-directionCta-qrGdO > span

Element source

<span>Get directions</span>

Fix any of the following:

  • Some page content is not contained by landmarks
6

Element location

.StoreDetailsCard-module-storeDetailsCard-0w7Wd

Element source

<div class="StoreDetailsCard-module-storeDetailsCard-0w7Wd"><p class="StoreDetailsCard-module-storeDetailsCardTitle-qwN8O">Opening hours</p><div><span>Open:</span> 10:00 - 12:00</div></div>

Fix any of the following:

  • Some page content is not contained by landmarks
7

Element location

.StoreDetailsNearbyShops-module-nearbyShopsTitleContainer-r8TqX

Element source

<div class="StoreDetailsNearbyShops-module-nearbyShopsTitleContainer-r8TqX"><p class="StoreDetailsNearbyShops-module-nearbyShopsTitle-l3qps">Nearby shops</p></div>

Fix any of the following:

  • Some page content is not contained by landmarks