Digital accessibility audit of website https://carolinesvedbom.com/
Executive summary
This report details the accessibility evaluation of https://carolinesvedbom.com/, conducted between February 25 and March 5, 2025. The evaluation assessed compliance with WCAG 2.2 Levels A and AA, using the WCAG-EM methodology. Of the 55 success criteria, 26 were rated as sufficient. This report focuses on the remaining 29 criteria and provides recommendations for improvement.
The Evaluation Result
Compliant: 26
Not compliant: 29
Total: 55
Not compliant success criteria of WCAG 2.1 and 2.2, level A:
1.1.1 Non-text Content
1.2.2 Captions (Prerecorded)
1.3.1 Info and Relationships
1.3.2 Meaningful Sequence
1.4.1 Use of Color
2.1.1 Keyboard
2.1.2 No Keyboard Trap
2.2.1 Timing Adjustable
2.2.2 Pause, Stop, Hide
2.4.3 Focus Order
2.4.4 Link Purpose (In Context)
2.5.3 Label in Name
3.1.1 language of Page
3.2.2 On input
3.3.1 Error Identification
3.3.2 Labels or Instructions
4.1.2 Name, Role, Value
Not compliant success criteria of WCAG 2.1 and 2.2, level AA:
1.3.5 Identify Input Purpose
1.4.3 Contrast (Minimum)
1.4.4 Resize Text
1.4.5 Images of Text
1.4.10 Reflow
1.4.11 Non-text Contrast
1.4.13 Content on hover or focus
2.4.6 Headings and Labels
2.4.7 Focus Visible
2.4.11 Focus Not Obscured (Minimum) (not yet standard)
All pages on the website https://carolinesvedbom.com/
Not in scope:
Subwebsite(s) where the HTML and/or system deviates from the analyzed website
Accessibility support baseline
Mozilla Firefox, version 131
Google Chrome, version 130
Apple Safari, version 17
PAC software to test PDF
NVDA screen reader in combination with Firefox
VoiceOver screen reader in combination with Safari
Common browsers and assistive technologies
Technologies used on this website
HTML
CSS
JavaScript
WAI-ARIA
SVG
PDF
About this audit
Reading Guide
This report is structured around the website's content, allowing you to address accessibility issues page by page. This approach facilitates a more efficient workflow. Each identified issue includes examples, but these are not exhaustive. It is crucial to check for similar issues throughout the website.
Standard Used
This evaluation assessed the website's compliance with WCAG 2.2 Levels A and AA, the international standard for digital accessibility. WCAG (Web Content Accessibility Guidelines) is also included in the European standard EN 301 549. This report provides concise descriptions of the success criteria. For detailed information, refer to the WCAG documentation and Webbriktlinjer.
The evaluation was primarily manual, with automated tools like axe-core and Chrome Developer Tools used for specific criteria.
Important Considerations
This report is a valuable tool for improving website accessibility. However, it's essential to acknowledge its limitations:
Sample-Based Evaluation: The sample-based approach may not uncover all accessibility issues.
Falsification Principle: The evaluation focuses on identifying non-compliance rather than confirming complete compliance.
Evolving Insights: Interpretations of the WCAG standard can evolve, leading to potential variations in future evaluations.
Potential for New Issues: Addressing one accessibility issue might inadvertently introduce another.
Regular evaluations are crucial for maintaining and improving website accessibility.
Priority in Solving Issues
When determining the priority of the issues mentioned in this report, you can follow one of the common approaches:
Level of Success Criteria
Level A of WCAG 2.1 → Priority 1
Level AA of WCAG 2.2 → Priority 2
The five new criteria in WCAG 2.2 are not yet part of EN 301 546 → Priority 3
Most Critical Issues
Keyboard accessibility: If an element is not accessible via the keyboard, it is also inaccessible to visitors using screen readers and fails other success criteria beyond vision-related ones.
Knoledge of your audience
You know your target audience best and can prioritize resolving identified issues based on the needs of the people who use your website.
To give you a general idea of how a visitor experiences the home page and a product page on your website, we have made a screen recording. The videos are added as unlisted videos to our secret YouTube channel. Try listening to these videos with your eyes closed.
Contrast ratio of brown and white is less than 4.5:1
The color contrast between the white text (#FFFFFF) and brown background (#AB8C52) across all pages, is insufficient (2.7:1). There are several nuances of brown color present. This color is also used in text on the white background.
This low contrast ratio makes the text difficult to read and violates accessibility guidelines.
Some examples of this color combination are:
'REGISTRERA' button in the '10% PÅ FÖRSTA KÖPET!' dialog widow
The number of products next to the shopping card icon
The link “SE ALLT” under the heading “NYHETER” on the homepage
The buttons in the cookie banner
The buttons in the cookie banner on hover (contrast 1.6:1)
The language switch button
The "LÄGG I VARUKORG" button
Solution:
This text is less than 19px, therefore the contrast must be at least 4,5:1.
Insufficient contrast of white text on images and video
On every page of the website, white text is present over photos and videos. This results in insufficient contrast. See for example "FLORAL FÊTE" on the home page.
Solution:
The contrast of text less than 19px must be at least 4.5:1.
The contrast of bold text between 19px and text larger than 24px must be at least 3.0:1.
Some interactive elements on this website have accessible names written in English. The screenreader uses Swedish pronunciation rules to read these names. This results in mispronunciation.
Important: aria-label and alt attribute text are read aloud to visitors. Ensure they are written in the website's language.
Some examples are:
The input field “Namn” with the accessible name "Name", under the heading "10% PÅ FÖRSTA KÖPET!" in dialog window on the homepage
The close buttons in dialog windows have names “Close dialog”
The “Previous” and “Next” buttons in the carousel on the homepage
In the product categories section under the heading “NYHETER” there are links with images. Their accessible names are in English, e.g. “Earrings”.
The dialog with form “MEDDELA MIG NÄR PRODUKTEN FINNS I LAGER”
Solution:
Translate the accessible names into Swedish to ensure they are pronounced correctly by screen readers.
Error messages are in English, while the website is in Swedish
The '10% PÅ FÖRSTA KÖPET!' dialog contains a form with the error message “This email is invalid” in the “Email” field, displayed in English, while the main language of the website is Swedish. Error messages should be in the same language as the website's primary content.
Visible text is missing from accessible name button
This website contains interactive elements where the visual text is not present in the accessible name of the element. This discrepancy can cause issues for users who rely on voice control to interact with the page. Voice commands are based on the visible text of elements. If the accessible name differs significantly, the voice commands will not work.
See for example:
The input field “Namn” with the accessible name "Name", under the heading "10% PÅ FÖRSTA KÖPET!" in dialog window on the homepage
When the search bar in the top menu is opened, a list of suggestions is provided. Тhe button with visible text "RENSA" has an accessible name of "Återställ".
Solution:
Ensure the accessible name includes the visible text, preferably at the beginning. Ideally, the accessible name should be identical to the visible text.
Tip: search for all aria-labels in the project and check if the value of this label is in Swedish and has the same text as the visual text on the element (see previous issue).
In the cookie banner headings are present which are not marked up as a heading. This lack of proper heading markup prevents screen readers from interpreting the text's semantic meaning and hinders navigation for users who rely on assistive technologies. Headings are essential for conveying content structure.
See the following texts:
'Välj Typ av cookies som du accepterar att använda'
‘Strikt obligatoriska cookies’
‘Analytics och Statistik’
And more
More examples are:
When the search bar in the top menu is opened, a list of suggestions is provided. The following texts in this section are not marked up as headings: “Förslag”and “Sidor”.
Solution:
Ensure this text is marked up with an appropriate heading element (<h1> to <h6>) to accurately reflect its role and hierarchy.
On some occasions the <em> element is used for styling texts. The <em> element has semantic meaning, indicating emphasis and emotion, and should not be used for purely visual italic styling.
Some examples are:
In the cookie banner, the <em> element is being misused for styling. See the text 'Genom att klicka på ovanstående knappar ger jag mitt samtycke till att samla …'.
On the page Anemone Ring, under the heading “LEVERANSVILLKOR”, the em-element “Budbee hemleverans (49 kr)” and “Budbee box (29 kr)” is misused for styling purposes.
On the page Twisted Bracelet / Any Colour, when a user makes a pre-order, a window with shopping basket appears. Under the button "TILL KASSAN", the <em> element is misused for styling purposes.
Check if this element is used on other pages.
Solution:
Remove the <em> tags and apply italic styling using CSS or use the <i> element.
On some occasions the <strong> element is used for styling texts. The <strong> element has semantic meaning and should only be used to emphasize specific words or phrases within a sentence, not for visual styling. To achieve bold styling, use CSS instead.
See for example:
On the homepage, under the heading "THE PERFECT WORLD FOUNDATION", the <strong> element is misused for styling purposes. Entire sentences are wrapped in a <strong> element.
On the page Jewelry for charity under the heading "THE PERFECT WORLD FOUNDATION", the <strong> element is misused for styling purposes in the sentence “10 % av försäljningen online …”.
On the page TPW interview – Caroline Svedbom under the heading “MEET THE FOUNDER OF TPW!”, the <strong> element is used in the paragraph starting with “In this exclusive interview…”.
On the page Din varukorg – Caroline Svedbom under the heading "Varukorg", the <strong> element is misused in words "Plating:", "Stone color:", "Kristallfärg:", and "Meddelande”.
On the page Din varukorg – Caroline Svedbom under the logo, this element is used in the words “Information” and “Totalt” and under the heading “DU KANSKE OCKSÅ GILLAR”.
Check if this element is used on other pages.
Remove the unnecessary <strong> tags and apply bold styling through CSS. The <b>element does not have a semantic meaning and can be used to give text more weight.
The cookie banner's modal dialog fails to properly trap keyboard focus. Focus can escape the dialog and navigate to the underlying page content. Visitors may unintentionally activate the underlying interactive elements.
This issue is seen in other elements. See for example:
In the product carousel on the homepage under the heading “NYHETER” the "Handla nu" button opens a dialog window. Currently, keyboard focus can escape the open dialog and move to the underlying page content.
On the home page, images under the heading “FROM INSTAGRAM @CAROLINESVEDBOM” open in a new window. Currently, keyboard focus can leave this window and move to the underlying page while the window remains open.
In the dialog “MEDDELA MIG NÄR PRODUKTEN FINNS I LAGER”.
Solution:
Implement focus trapping to ensure focus remains within the dialog until it is closed. This can be achieved through programmatic focus management, allowing closure via a close button, the Escape key, or automated closure upon focus loss.
Button cannot be operated with space bar and Enter key
The language switch button is not properly keyboard accessible. It cannot be activated using the Spacebar or the Enter key. All buttons must be operable using both the Spacebar and the Enter key. This is standard keyboard interaction for buttons and is essential for users who rely on keyboard navigation.
This issue is seen in other elements of the website. For example:
The "Get 10% Off" button
On the homepage under the heading “FÖLJ @CAROLINESVEDBOM” there are images and video.These images and video open in a dialog window. The arrow icons and the icon with “x” are not keyboard accessible.
The close button in the dialog with form “MEDDELA MIG NÄR PRODUKTEN FINNS I LAGER”.
Solution:
Ensure the button can be activated with both keys. Use native HTML elements in buttons.
When the page is viewed at a screen resolution of 1280 by 1024 and zoomed in to 400%, the text above the buttons in the cookie banner is lost.
See more examples of this issue on the home page, under the heading “FÖLJ @CAROLINESVEDBOM” there are images.These images open in a dialog window. When this dialog window is viewed at a screen resolution of 1280 by 1024 and zoomed in to 400%, text under images is partially lost.
Zooming to 400% should not impair the readability of any informative element.
In the '10% PÅ FÖRSTA KÖPET!' dialog, the image lacks an alt attribute. All <img> elements require an alt attribute for accessibility. When this attribute is missing, the screen reader reads the name of the file.
This issue is seen on many occasions on this website.
Some examples are:
The images in the submenu’s and the mobile menu
The logos of “Klarna” and “Swish” in the footer of the website
On the homepage images below “ÖRHÄNGEN”, “ÖRARMBANDHÄNGEN”, “RINGAR”, and other.
On the home page, under the heading "NYHETER", there are three beige images (truck, box, round arrows) added using an <img> element, but the alt attribute is missing for all of them.
Images on the homepage under the heading “HANDGJORT I GREKLAND”.
Solution:
If the image is purely decorative and conveys no meaning, the alt attribute should be present but empty (alt="").
If the image is informative, the alt attribute should contain a clear and concise description of the image's content.
In the '10% PÅ FÖRSTA KÖPET!' dialog, a form is present. The input field with placeholder text "Namn" lacks a permanent label.
See more examples on the homepage under “NYHETSBREV” in the input fields “Namn” and "Nyhetsbrev Email".
Solution:
Input fields must always have a visible label, whether text or an icon. Placeholder text is not a substitute for a label, as it disappears when the user begins typing. Input fields without visible labels can confuse users, as they may not understand the expected input. Add a visible label, either as text or an icon, associated with the input field.
The same is observed in the “Email” field.
In the '10% PÅ FÖRSTA KÖPET!' dialog, a form contains error messages in the field “Namn” that do not adequately describe the errors. The current messages are often instructions ("this field is required") rather than explanations of what went wrong.
The same is observed in the “Email” field.
Solution:
Error messages should be more specific, explaining the nature of the error. For example, instead of "this field is required," a better message would be "This field has not been filled in" or even better, "Field ‘Name’ is empty". Adjust the error messages to clearly inform users about the specific problem with their input.
In the '10% PÅ FÖRSTA KÖPET!' dialog, a form containing input fields for personal information ‘Name’ and ‘DD/MM/YYYY’ are missing the autocomplete attribute. See also the form on the home page under the heading “NYHETSBREV”.
On the page Kontakta vår kundtjänst the form under the heading “Kontakta vår kundtjänst” contains input fields for personal information (e.g., name, email address, phone number). The autocomplete attribute is missing.
Solution:
When forms collect personal data, the appropriate autocomplete attribute should be used with these input elements. This enables browsers and assistive technologies to assist users by, for example, automatically populating the fields. The autocomplete attribute is currently missing from this input field. The email address field should use autocomplete="email". More information on using this attribute and required values can be found at: Input purposes.
In the '10% PÅ FÖRSTA KÖPET!' dialog, error messages appear briefly after form submission, but then disappear. This short duration may not be enough time for all users to read and understand the errors. The same is observed in the “Email” field.
Solution:
Error messages should persist on the page until the user takes action to dismiss them. Consider making the error messages remain visible and adding a close button so users can manually dismiss them when they are ready.
In the '10% PÅ FÖRSTA KÖPET!' dialog, the text "Vänligen fyll i ditt födelsedatum:" has no relationship with the input field DD/MM/YYYY and the checkbox "Ja tack, jag vill gärna ha ert nyhetsbrev och godkänner Caroline Svedboms Integritets Policy." This lack of connection means screen reader users are unaware of the relationship between this text and the form elements it describes.
Solution:
This text must be explicitly connected to its corresponding form elements. This can be done using techniques like aria-labelledby or by properly structuring the form with <fieldset> and <legend> elements. A heading element (<h2>) can also be a solution.
Accessible name does not describe the dialog window
In the '10% PÅ FÖRSTA KÖPET!' dialog, the dialog window has the accessible name "POPUP Form", which does not accurately describe its purpose and meaning. See also the dialog with form “MEDDELA MIG NÄR PRODUKTEN FINNS I LAGER”.
Solution:
Dialog windows should have a clear and descriptive accessible name that informs users about their content and function. Without a meaningful name, screen reader users may not understand the purpose of the dialog. Update the accessible name to clearly reflect the dialog’s purpose.
<div role=”dialog” aria-label=”Rabbat på första köpet”>
In the product carousel on the homepage under the heading “NYHETER” a "Handla nu" button opens a dialog window. This dialog lacks both a proper ARIA role and an accessible name. Consequently, screen readers cannot identify the element as a dialog, nor can they convey its purpose or content.
On the home page, under the heading “FÖLJ @CAROLINESVEDBOM” there are images and video open a dialog window. These dialogs lack both a proper ARIA role and an accessible name.
Solution:
This can be resolved by adding role="dialog" and aria-label="Handla snabt [Product name]" to the dialog element.
The logo at the top of the website displays the full text "Caroline Svedbom Jewelry" but its alt text is only "Logotype Caroline Svedbom" The alt text should contain all the visible text in the logo to ensure that visitors who cannot see the image receive the same information.
On several pages, under the heading “HITTA INSPIRATION FRÅN VÅR INSTAGRAM” an image "Will you be our Valentine?.." opens in a dialog window. There is a link with an image with the text “Sauce” on it. The image is hidden from the screen reader. This makes it impossible for blind users (and those relying on screen readers) to understand where the link leads.
Solution:
To resolve this, provide the link with meaningful content. This can be done by:
Adding text to the <a> element: Include descriptive text within the link itself.
Using aria-label: Add an aria-label attribute to the link with a concise description of its destination.
All links must have a clear and accessible link purpose.
The same issue is observed on this page with other images.
Visible link text is not present in accessible name
On several pages, an image under the heading “HITTA INSPIRATION FRÅN VÅR INSTAGRAM” visible text ("Sauce") is not included in its accessible name ("Make Instagram, TikTok, UGC & Influencer Content Shoppable"), which is provided via an aria-label. This mismatch prevents the logo (which is likely a link) from being activated using voice control. When the visible text differs from the accessible name, voice commands based on the visible text will not work.
Solution:
To ensure voice control functionality, include the visible text in the accessible name, preferably at the beginning. In this case, change the aria-label to include the visible text.
Redundant images are not hidden from the screen reader
The link with the logo has three images. All three are visible to the screen reader. This results in unnecessary repetition of the alternative text.
Solution:
Hide the redundant images from the screen reader using aria-hidden="true". Do not use display: none as this will hide the images from all users.
Link has no content
The logo in the header functions as a link that lacks content and, therefore, has no discernible link purpose. This makes it impossible for blind users (and those relying on screen readers) to understand where the link leads. To resolve this, provide the link with meaningful content.
Solution:
All links must have a clear and accessible link purpose.
This can be done by:
Adding text to the <a> element: Include descriptive text within the link itself. Hide this text from the page with sr-only CSS class.
Using aria-label: Add an aria-label attribute to the link with a concise description of its destination.
On this website multiple links use the vague text "LÄS MER." This text does not adequately describe the link's destination, creating ambiguity, especially for users with cognitive disabilities or those relying on screen readers. Vague link text like "read more" or "click here" should be avoided. Ensure link text clearly indicates the destination.
See for example the link on the homepage under the heading “HANDGJORT I GREKLAND”, on the page Sustainability and on the product pages.
Solution:
If the link's context is visually clear (e.g., within a specific section), you can supplement the vague text with visually hidden text that provides more context. For example, "Read more (about the project)" or "Read more (on the blog)."
Relationship between links in a submenu is missing in HTML
In the header, some menu links have submenu’s. See “Smycken”, “Kategorier” and others. The content of a submenu is visually presented as a group, but this grouping is not reflected in the HTML structure. When links are visually grouped, this relationship should also be present in the HTML to ensure that visitors using assistive technologies, such as screen readers, understand the relationship.
This issue is seen in other elements on the website. See for example the suggestion list in the search bar.
Solution:
Wrap the links in a <ul> element to properly represent the group in the HTML. This will convey the semantic relationship between the links to assistive technologies.
Accessible name of menu buttons is too long - advice
The links in the main menu are coded as button elements (role=”button”). These buttons have quite long accessible names. The content of the submenu the button opens is included in the accessible name of the button
Failure to make additional content dismissible without moving pointer hover or keyboard focus.
When hovering over the main menu "Smycken" and "Kategorier", additional content appears that overlaps existing page content. Users should be able to easily close this additional content without requiring mouse or keyboard actions.
Solution:
Allowing users to close the additional content by pressing the Escape key is a common and accessible solution. This provides a quick way to dismiss the overlaying content and maintain focus on the relevant parts of the page.
In the main menu, the keyboard focus is not visible on the image in the submenu under "Smycken" and "Kategorier". Keyboard focus must be clearly visible on all interactive links with the image. Keyboard-only users need this visual cue to understand their location on the page and interact with elements correctly.
See other examples of this issue:
The plus button under “FÖLJ @CAROLINESVEDBOM” on the homepage
The button "REGISTRERA" under “NYHETSBREV” on the home page
Solution:
Ensure these elements have a visible keyboard focus indicator, either by restoring the default focus style or implementing a custom accessible focus indicator.
The best solution here is to combine the link with an image and the link with the text. They both have the same destination.
When this page is viewed on a small screen with the mobile menu open, the menu overlaps interactive elements on the underlying page (like the link "search"). These underlying elements can still receive keyboard focus, even though they are hidden by the menu. Focusable elements must be visible. Allowing focus on hidden elements creates confusion for keyboard and screen reader users.
Solution:
This can be resolved by:
Trapping keyboard focus: Keep focus within the mobile menu until it is explicitly closed (via a close button or the ESC key).
Automatically closing the menu: Close the menu as soon as focus moves outside of it.
Fails: WCAG 2.2 - 2.4.11 Focus not obscured
Button does not have the correct role - advice
In the header of the website, the "VARUKORG" button is incorrectly coded as an a-element (link). This is semantically incorrect, as the element functions as a button that triggers an action, not as a link that navigates to a different location.
Solution:
To correct this, change the element to a <button> element or add role="button" to the existing element if it cannot be changed to a <button>. This will ensure the element is correctly identified as a button by assistive technologies. If you apply role="button", test if this solution works with keyboard navigation.
Shopping Cart text update is not announced by the screen reader
The shopping cart icon in the header of the website contains a number that indicates the number of products in the cart. When a product is added to the card, the number changes. This update is not announced by the screen reader.
Solution:
Adding role="status" to the element displaying the count will resolve this. Ensure the message is clear and informative, for example, "XX items in cart."
The search bar: suggestion list is missing the proper role
The search bar in the top menu provides a list of suggestions as the user types. This suggestion list is a status message, as it provides information about the results of an action (typing) and does not receive focus. However, it is not automatically announced by screen readers because its role is not defined in the code.
Solution:
To make this list accessible, add role="status" to the element containing the suggestion list. This will ensure that screen readers announce the suggestions as they appear. For more information on using role="status", see ARIA19.
Fails SC 4.1.3
Link does not have an accessible name
In the mobile menu, in the sections under the "Kategorier" and “Smycken” there are links with images present. The link lacks an accessible name. This prevents screen reader users from communicating the link's purpose or destination. All links must have accessible names that clearly describe their function.
This issue is seen in other elements as well. See for example:
Images on the homepage under the heading “HANDGJORT I GREKLAND” and under “FÖLJ @CAROLINESVEDBOM”
On the home page, under the heading “FÖLJ @CAROLINESVEDBOM” there are images and a video that open dialog windows. In these dialog windows arrows and the button with an “x” lack both a proper ARIA role and an accessible name.
Solution:
Provide this link with an accessible name, either by using descriptive link text, an aria-label, or other appropriate techniques.
Button has no code indicating that a submenu opens
The button labeled "SWE • SEK" opens a list with languages, but this functionality is not indicated in the code.
Solution:
Use the aria-expanded attribute to indicate the non-modal dialog's state: aria-expanded="true" when the dialog is open and aria-expanded="false" when it's closed. This helps screen reader users understand the relationship between the button and the submenu.
The "Get 10% Off" button is missing the proper role. The screen reader does not recognize this element as an interactive element.
Solution:
To correct this, change the element to a <button> element or add role="button" to the existing element if it cannot be changed to a button. This will ensure the element is correctly identified as a button by assistive technologies.
The "Get 10% Off" button opens a dialog window, but this functionality is not indicated in the code.
Solution:
To convey this behavior to assistive technologies, add the attribute aria-haspopup="dialog" to the button element. This attribute signals that the button triggers a dialog window. This helps screen reader users understand the relationship between the button and the dialog.
In some forms on this website the HTML5 validation is used. HTML5 validation messages are not consistently supported across browsers and screen readers. Browsers render these messages differently, and there's no guarantee of their visibility or duration.
See for example:
On the home page under "Nyhetsbrev Email"
On this page, a form under the heading “Mini Twisted Bracelet” uses only HTML5 validation for the "Kristallfärg" input field.
In the dialog “MEDDELA MIG NÄR PRODUKTEN FINNS I LAGER”
On page Mini Twisted Bracelet, a form under the heading “Mini Twisted Bracelet” uses only HTML5 validation for the "Kristallfärg" input field.
Check other forms on this website.
Solution:
To ensure consistent and accessible error messaging, implement custom error messages for these input fields. Also, check for other forms on the site that rely solely on HTML5 validation and apply the same solution.
In some forms on this website the HTML5 validation is used. These default messages are not reliably supported across all browsers and screen readers. Each browser renders them differently, and their accessibility (e.g., completeness, duration) is not guaranteed.
Check other forms on this website.
Solution:
To provide consistent and accessible error feedback, implement custom error messages for this form. Furthermore, it is crucial to check all other forms on the website for similar reliance on HTML5 default error messages and apply the same solution where necessary.
In some forms on this website the HTML5 validation is used. The error messages are displayed in English “Please fill in this field” when the form is submitted with empty or incorrect data. Because the site is in Swedish and lacks a language switch, screen readers may attempt to pronounce these English error messages using Swedish pronunciation rules, leading to unintelligibility.
Check other forms on this website.
Solution:
Custom error messages in Swedish should be implemented for this form. Additionally, all other forms on the website should be reviewed for the same issue and corrected accordingly.
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
Logo is added as background image
On this page, the logos of the clients above the heading “NYHETER” are added as a background image, making it invisible to screen readers. Additionally, no text alternative is provided. This makes the logo inaccessible to visitors who cannot see images. Logos convey information and must have a text alternative. They should not be placed as background images unless an accessible alternative is provided.
Solution
To make these logos accessible, use an <img> element with appropriate alt text that includes all the text content of the logo. This will ensure that screen reader users receive the same information as sighted visitors.
This page features a video that plays automatically and cannot be paused or stopped. Automatically playing media can be disruptive for users with cognitive disabilities, hindering their ability to focus on other content.
See also videos in the Instagram feed.
Solution:
A mechanism to stop, pause, or hide this video is required. This applies to all moving, blinking, scrolling, or automatically updating content that appears alongside other information, starts automatically, and runs for more than five seconds.
When this page is viewed at a screen resolution of 1280 by 1024 and zoomed in to 200%, the following text under the heading "NYHETER" becomes invisible: “100% Fossilfria leveranser med Budbee”.
Zooming to 200% should not impair the visibility or readability of any informative element.
Fails SC 1.4.4
Buttons to choose the color of a product cannot be operated with keyboard
On this page, in the carousel under the heading “NYHETER,” some products have several color options. The buttons for selecting color do not receive focus and are not keyboard accessible. All buttons must be operable using a keyboard.
The name of the color is only visible to a visitor with a mouse
On this page, in the carousel under the heading “NYHETER,” some products have several color options. When a visitor moves the mouse over а color swatch, a tooltip opens displaying the color name. This functionality is not available to keyboard-only users. Tooltips must be accessible to all users, including those who navigate using the keyboard.
Solution:
Ensure the tooltip can be triggered by keyboard focus, and potentially provide an alternative way to access the tooltip content (e.g., via permanently visible text).
When the page is viewed on a smaller screen, the “Handla nu” button in the carousel changes to a cart icon. This icon lacks a text alternative. As a result, the button loses its accessible name.
To add this name, use one of the following:
aria-label: Add an aria-label attribute to the button element with a concise description of its function.
Visually hidden text: This text is already present, but is hidden with display:none. Use sr-only class instead.
In the product carousel, products with several color options have a button with an arrow and the accessible name 'Se alt'.
The name of each button must be unique because they show different products.
Text is not a heading, <h> element used for styling
Under the product category section, the texts “Leveranstid 2-3 vardagar”, “Fri frakt från 995 kr” and “100% Fossilfria leveranser med Budbee” are not headings, but they are incorrectly marked up with an <h2> element to increase their font size. Using heading elements for purely visual styling is semantically incorrect.
Solution:
Since these texts are not headings (they have no associated content), remove the <h2> element and use CSS to achieve the desired visual styling
In the carousel under the heading “NYHETER” some products are not keyboard accessible. See for example “Timo Earrings / Soft Mint Combo”, “Rosita ring” and more.
All interactive elements must be fully accessible via keyboard. Users should be able to navigate through all product cards and interact with their options without requiring a mouse.
Movement (longer than 5 sec.) cannot be stopped / paused / played back
Under the heading "KUNDRECENSIONER” there is a carousel with reviews that moves content after every few seconds. This carousel cannot be stopped, paused or hidden.
Under the heading "KUNDRECENSIONER", there are buttons with accessible names "Previous Page" and "Next Page." After these buttons, focus moves to links within customer reviews. However, some of these focused elements are outside the visible area of the page, meaning users cannot see where their focus is.
This can create confusion for keyboard users, as they may not realize where their focus is located, making navigation difficult.
Fails: WCAG 2.2 - 2.4.11 Focus not obscured
Content cannot be opened by keyboard
Under the heading “FÖLJ @CAROLINESVEDBOM,” there are images and videos. Extra content can be opened by clicking on these images. However, this content is not accessible to users who navigate the website by keyboard only.
Fails: EN 9.2.1.1 | WCAG 2.1.1 | All funktionalitet ska kunna användas med tangentbord
Video has no captions
On this page, under the heading “FÖLJ @CAROLINESVEDBOM” there is a video which is opened in a dialog window. This video with spoken words but captions are missing. Captions are essential for deaf and hard-of-hearing users to access the video's content. Captions should be added to the video to make it accessible.
The input fields under the text "Fyll i dina uppgifter nedan för att få vårt nyhetsbrev." have a gray border. The contrast ratio between the border and the page's background is 2,1:1.
This fails to meet the minimum contrast requirement of 3.0:1 for input field boundaries against adjacent areas. Insufficient contrast makes it difficult to visually distinguish the input field's boundaries, impacting usability.
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
Placeholder text is not a label
On this page, an input field with placeholder texts “Namn” , “Telefon”, "Email", “Meddelande” are present. However, they lack a persistent label; the placeholder texts are being used as a label.
Solution:
Input fields require labels that are always visible. Placeholder text cannot fulfill this role, as it disappears when the user begins typing. A proper, always-visible label must be provided.
On this page, the keyboard focus is not visible on the button "Skicka". Keyboard focus must be clearly visible on all interactive elements (links, buttons, input fields).
Status message is not announced as a status message
On this page, underunder heading “Kontakta vår kundtjänst”, a form displays the status message "Tack för ditt meddelande. Vi återkommer inom vanligtvis 24 timmar på vardagar" upon submission without a page reload, and the keyboard focus is not moved to the message. This means screen readers might not announce the message.
To ensure screen readers announce the status message, add either aria-live="polite" or role="status" to the element containing the message.
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
Dialog window has no accessible name
On this page, under the heading “HITTA INSPIRATION FRÅN VÅR INSTAGRAM” images and videos open in a dialog window. These dialog windows lack an accessible name, preventing screen readers from conveying its content to users. This can be fixed by adding an aria-label attribute to the dialog window, providing a clear and concise description of its purpose and content.
An informative image as background, no text alternative
On this page, under the heading “HITTA INSPIRATION FRÅN VÅR INSTAGRAM” images and videos open in a dialog window. In this dialog window icon “+” and arrows are informative images, which have been added as a background image, and no text alternative is provided. Background images are inaccessible to screen readers, meaning blind users will not receive the information conveyed by the image.
This information must be made available through a text alternative. This can be achieved by using an aria-label.
On this page, under the heading “HITTA INSPIRATION FRÅN VÅR INSTAGRAM” there is a video which is opened in a dialog window. This video has spoken words but captions are missing. Captions are essential for deaf and hard-of-hearing users to access the video's content.
Captions should be added to the video to make it accessible.
On this page, under the heading “HITTA INSPIRATION FRÅN VÅR INSTAGRAM” there is a video that plays automatically and cannot be paused or stopped. Automatically playing media can be disruptive for users with cognitive disabilities, hindering their ability to focus on other content.
A mechanism to stop, pause, or hide this video is required. This applies to all moving, blinking, scrolling, or automatically updating content that appears alongside other information, starts automatically, and runs for more than five seconds.
On this page, under the heading “HITTA INSPIRATION FRÅN VÅR INSTAGRAM” there are images and video.These images and video open in a dialog window. Icons as arrows and icon “x” are not keyboard accessible. All buttons must be operable using keyboard.
On this page, under the heading “HITTA INSPIRATION FRÅN VÅR INSTAGRAM” an image "Will you be our Valentine?" opens in a dialog window. Multiple links on this image use the vague texts “1”, “2”, “3”, “4". These texts do not adequately describe the link's destination, creating ambiguity, especially for users with cognitive disabilities or those relying on screen readers.
Vague link text like "read more", "click here" or just numbers should be avoided.
Ensure link text clearly indicates the destination. If the link's context is visually clear (e.g., within a specific section), you can supplement the vague text with visually hidden text that provides more context.
The same issue is observed on this page with other images, with link “Shop” in this dialog window.
On this page, under the heading “HITTA INSPIRATION FRÅN VÅR INSTAGRAM” an image "Will you be our Valentine?" opens in a dialog window. The keyboard focus is not visible on the following elements: links on this image “1”, “2”, “3”, “4". Keyboard focus must be clearly visible on all interactive elements (links, buttons, input fields).
The same issue is observed on this page with other images, under images on the button with an icon”+”.
On this page, under the heading “HITTA INSPIRATION FRÅN VÅR INSTAGRAM” there are images and video.These images and video open in a dialog window. In this dialog window a button with text “Shop” has insufficient color contrast. The white text (#FFFFFF) against the braun background (#B0996B) has a contrast ratio of 2.8:1, which is below the required minimum of 4.5:1 for standard text.
Ensure that the button's text and icon have sufficient contrast against the background. The text should have a contrast ratio of at least 4.5:1, and the icon (if it's informative) should have a contrast ratio of at least 3:1.
Color contrast of informative icons is not sufficient
On this page, under the heading “HITTA INSPIRATION FRÅN VÅR INSTAGRAM” with images, there is a button with an icon “+”. This informative icon “x” has insufficient color contrast. The white icon (#FFFFFF) against the light grau background (#E5E5E5) has a contrast ratio of 1.3:1, which is below the required 3.0:1 for graphical elements conveying information. Ensure that the icons have a contrast ratio of at least 3.0:1 against their background.
On this page, under the heading “HITTA INSPIRATION FRÅN VÅR INSTAGRAM” with images, there is a button with an icon “+”. The accessible name of this button does not describe its function. This makes it difficult for blind users and those relying on screen readers to understand the button's purpose. The accessible name should clearly and concisely convey the button's action.
Update the accessible name (e.g., using aria-label) to accurately reflect the button's function.
Part of content is in different language, but no language code is applied
On this page, under the heading "HITTA INSPIRATION FRÅN VÅR INSTAGRAM" there is a sentence in a different language without a language code. This causes screen readers to use the primary language's pronunciation rules, potentially mispronouncing the foreign language text.
To ensure correct pronunciation, add a lang attribute with the appropriate language code to the element containing the foreign language text. For example, if the text is in English, add lang="en" to the element.
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
Video plays automatically
At the top of the page under the header there’s a video that plays automatically and cannot be paused or stopped. Automatically playing media can be disruptive for users with cognitive disabilities, hindering their ability to focus on other content.
A clear mechanism to stop, pause, or hide this video is required. This applies to all moving, blinking, scrolling, or automatically updating content that appears alongside other information, starts automatically, and runs for more than five seconds.
This page contains some elements in a different language than the primary language of the page, but there is no language switch implemented. For example, “FRONT ROW COLLECTION” heading under the video, “ONLINE EXCLUSIVE” text below it are in English. When content is in a different language, it needs an inline language change.
This can be done by adding a lang attribute to the element containing the text (e.g., <span lang="en">English text</span> or <p lang="fr">French text</p>). This allows screen readers to switch to the correct pronunciation rules for that language.
On this page, the following text under the heading “FRONT ROW COLLECTION” is not marked up as headings: “ONLINE EXCLUSIVE”. When text functions as a heading but lacks proper markup, it loses its semantic meaning and becomes inaccessible to visitors who rely on assistive technologies like screen readers. Headings are crucial for navigating and understanding content structure.
Ensure these texts are marked up with the appropriate heading elements (<h1> to <h6>) to reflect their role and hierarchy in the content.
Informative elements are hidden from the screen reader
On this page, in the carousel under the heading “FRONT ROW COLLECTION” there are product cards. Each card has a text “Förbeställ” that is not visible to screen readers. Informative elements or interactive functionality should not be hidden from screen readers. Doing so makes the content inaccessible to users relying on assistive technologies.
On this page, below the carousel, there’s an image containing embedded text starting with “Introducing our “Front Row Collection” where…”. Embedding text within images makes it inaccessible to many users. They cannot resize or customize the text (font, color, etc.) to suit their needs.
It is strongly recommended to use actual text instead of embedding it in images. This allows users to control the text's appearance for improved readability.
On this page, below the carousel, there’s an image containing embedded text starting with “Introducing our “Front Row Collection” where…”. The alt attribute for this image is empty. Images containing text require a text alternative.
All images placed using the <img> element must have alt attributes to provide a text equivalent. This allows screen readers to communicate the image's information or function to blind users. For informative images (including those with embedded text), the alt attribute cannot be empty. It must contain a description of the image and its text content.
On this page, under the image with text “Introducing our “Front Row Collection” there are two images added with <img>
elements, but the alt attributes are missing for them. All <img> elements should have an alt attribute. If the image is purely decorative and conveys no meaning, the alt attribute should be present but empty (alt=""). If the image is informative, the alt attribute should contain a clear and concise description of the image's content.
On this page, under the image with text “Introducing our “Front Row Collection” where…”, there are two images that function as links. The alt attributes are missing. This results in a link with no accessible content, making its destination unclear. This also violates WCAG Success Criterion 4.1.2, as the link lacks an accessible name.
To resolve this, provide the link with accessible text content. This can be achieved by:
Adding hidden text within the link: Include descriptive text within the link element but hide it visually using CSS (e.g..sr-only class).
Using aria-label: Add an aria-label attribute to the link element with a concise description of the link's destination.
Combining the link with adjacent text: Associate the link with existing text above or below it, semantically connecting them. This can often be done using heading elements or list structures.
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
Accessible name of an iframe is missing
This page contains an iframe without a title attribute. Iframes require descriptive titles, typically provided via the title attribute. This title should describe the type of content within the iframe, offering a unique and meaningful description. This text assists blind users in determining whether exploring the iframe's content is worthwhile.
This page contains an iframe without a lang attribute, leading to uncertainty about the content's language. The absence of a defined language can make it difficult for users relying on assistive technologies and may result in incorrect content rendering.
To meet accessibility requirements, the lang attribute should be added to the iframe, specifying the primary language of the embedded content.
On this page, under the heading "Våra återförsäljare", an input field is present. The gray (#777777) placeholder text against the white (#ffffff) background has a contrast ratio of 4,47:1.
This does not meet the minimum required contrast ratio of 4.5:1.
On this site the search results and shops on the list are not keyboard-focusable, making them inaccessible to users who rely on keyboard navigation. Users must be able to navigate through and interact with search results using only the keyboard.
To ensure accessibility, search results should be properly structured to receive focus in a logical order, allowing users to browse and select them without requiring a mouse.
On this page, under the heading "Våra återförsäljare", a search input is present. The contrast ratio between the gray border and the page's background is 1,3:1. The icon of a magnifying glass is gray and has the contrast of 2.3:1.
This fails to meet the minimum contrast requirement of 3.0:1 for informative UI-elements. Insufficient contrast makes it difficult to visually distinguish the input field's boundaries, impacting usability.
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
Part of content is in different language, but no language code is applied
The main part of the page contains an interview in English while the language code of the page is set to Swedish (lang="sv"). This causes screen readers to use the primary language pronunciation rules, potentially mispronouncing the foreign language text.
To ensure correct pronunciation, add a lang attribute with the appropriate language code to the element containing the foreign language text. For example, if the text is in English, add lang="en" to the element (in this particular page to <main> element).
On this page, under the headings “Lastly, which is your favorite piece from the new collection?” and “Resort Collection” there are links with vague texts: “SE MER” and "SE ALLA”. These texts do not adequately describe the link's destination, creating ambiguity, especially for users with cognitive disabilities or those relying on screen readers. Vague link text like "read more" or "click here" should be avoided.
Ensure link text clearly indicates the destination. If the link's context is visually clear (e.g., within a specific section), you can supplement the vague text with visually hidden text that provides more context. For example, "Read more (about the project)" or "Read more (on the blog)."
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
Heading misses the proper markup
On this page, the following texts are not marked up as headings: “Integritets policy”,“1. Introduktion”, “2. Vad är personuppgifter och vad innebär behandlingen av personuppgifter?” and others. When text functions as a heading but lacks proper markup, it loses its semantic meaning and becomes inaccessible to visitors who rely on assistive technologies like screen readers. Headings are crucial for navigating and understanding content structure.
Ensure these texts are marked up with the appropriate heading elements (<h1> to <h6>) to reflect their role and hierarchy in the content.
On this page, the following text is incorrectly marked up with <strong> instead of proper heading elements: “Innehållsförteckning”. The <strong> element is for semantic emphasis, not for creating headings. Using it in place of heading elements (<h1> to <h6>) misrepresents the content's structure and makes it inaccessible to assistive technologies.
Remove the <strong> elements and use the appropriate heading elements for these texts.
On this page, there are several lists marked with bullets, for example under the headings “Innehållsförteckning”, “1. Introduktion” and others. Similar issue is with numerated sublists, e.g. 2.1, 2.2, 7.1, 7.2 and others. These lists lack proper markup.
Content visually presented as a list should be semantically marked up as a list using <ul> or <ol> elements. This ensures that screen readers correctly identify and announce the list, including the number of items, to blind users. Proper list markup provides the same structural information to all visitors and improves navigation for screen reader users.
At the bottom of this page there’s a block of text with two paragraphs that is incorrectly marked up as a single <p> element: “Caroline Svedbom AB…” and “I brevet…”. The visual structure of the content should be accurately reflected in the HTML.
If the content visually consists of multiple paragraphs, each paragraph should be enclosed in its own <p> element. This ensures that the semantic structure of the content is conveyed to assistive technologies like screen readers, providing the same structural information to all visitors.
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
Link has not enough content
On this page, the heading "Varukorg", there is a link with the text "TA BORT," but it does not provide a description of its purpose, leaving its destination unclear to users. This makes it impossible for blind users (and those relying on screen readers) to understand where the link leads.
Solution:
To resolve this, provide the link with meaningful content. This can be done by:
Adding text to the <a> element: Include descriptive text within the link itself.
Using aria-label: Add an aria-label attribute to the link with a concise description of its destination.
Ensure that all links have a clear and accessible link purpose.
On this page, under the "Lägg till ordernoteringar" section, an informative image is present with the text "AMEX" and alternative text "American Express".
Informative images must have meaningful alt-text that describes the important information conveyed by the image. To avoid confusion, the alt text should be accurate and reflect the content of the image.
Solution:
Update the alt text of the image to "AMEX" to correctly describe the image.
On this page, under the "Lägg till ordernoteringar" section, images “Klarna.” and “Swish” are included using an <img> element, but the alt attribute is missing. All <img> elements should have an alt attribute.
Solution:
The alt attribute should contain a clear and concise description of the image's content.
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
Keyboard focus is not visible
On this page, the keyboard focus is not visible on the logo “Carpline Svedbom Jewerly” with link. Keyboard focus must be clearly visible on all interactive elements links. Keyboard-only users need this visual cue to understand their location on the page and interact with elements correctly.
Solution:
Ensure these elements have a visible keyboard focus indicator, either by restoring the default focus style or implementing a custom accessible focus indicator.
The logo at the top of the website is missing alt text. Images that convey information, like logos, require alt text to be accessible. An empty alt attribute (alt="") indicates a purely decorative image, which is not the case for a logo.
Solution:
Add appropriate alt text to the logo image that conveys its meaning or purpose (e.g., the company or website name).
On this page, under the heading “Kontakt” the checkbox labeled “Skicka mig nyheter och erbjudanden via e-post” has insufficient color contrast between the checkbox itself and its background. The white (HEX #FFFFFF) checkbox on the brown (HEX #B59864) background has a contrast ratio of 2.7:1, which is below the required 3,0:1 for interactive elements.
Solution:
Increase the contrast between the checkbox and its background to at least 3,0:1 to ensure it is clearly visible and easily distinguishable for users, including those with visual impairments.
On this page, under the "Kontakt" and “Leveransadress” sections, input fields are present. The contrast ratio between the brown (HEX #B59864) border and the white (HEX #FFFFFF) background of the page is 2.7:1.
This fails to meet the minimum contrast requirement of 3.0:1 for input field boundaries against adjacent areas. Insufficient contrast makes it difficult to visually distinguish the input field's boundaries, impacting usability.
On this page, the tooltip with the "?" icon in the "Telefon" field is not programmatically associated with the corresponding input field. When tooltips are used to provide additional information or clarification, they should be properly linked to the relevant input field using attributes such as aria-describedby. This ensures that assistive technologies can inform users about the relationship between the tooltip and the input field.
Solution:
To fix this, add the aria-describedby attribute to the input field and reference the ID of the tooltip, establishing a clear relationship.
On this page, in the dialog that opens when clicking on the "Återbetalningspolicy" link, under the heading"ÅNGERRÄTT OCH RETUR" a block of text with multiple paragraphs is incorrectly marked up as a single <p> element. The visual structure of the content should be accurately reflected in the HTML.
Solution:
If the content visually consists of multiple paragraphs, each paragraph should be enclosed in its own <p> element. This ensures that the semantic structure of the content is conveyed to assistive technologies like screen readers, providing the same structural information to all visitors.
On this page,in the dialog that opens when clicking on the "Fraktpolicy" link, the following texts are not marked up as headings: "LEVERANS," "Postnord (49 kr)," "Budbee (29-49 kr)," and "Hämta i butik (0 kr)." Headings are essential for users relying on screen readers to navigate and understand content structure. When headings are not properly marked up, they lose their semantic meaning and are inaccessible to assistive technologies.
The same issue is observed in the dialog that opens when clicking on the "Användarvillkor" link.
Solution:
Use the appropriate heading elements (<h1> to <h6>) to mark these texts as headings. This will ensure that screen reader users can navigate and understand the hierarchy of information on the page.
On this page,in the dialog that opens when clicking on the "Integritetspolicy" link, the text "Innehållsförteckning" is incorrectly marked up with <strong> instead of a proper heading element. The <strong> element is intended for emphasizing text, not for marking headings. Using it as a substitute for heading elements (<h1> to <h6>) misrepresents the content's structure and makes it inaccessible to assistive technologies.
Solution:
Replace the <strong> element with the appropriate heading element (<h1> to <h6>) to properly represent the structure and make it accessible for screen readers.
On this page, in the dialog that opens when clicking on the "Integritetspolicy" link, a list with items is present under the heading” Integritetspolicy” but lacks proper markup. Content visually presented as a list should be semantically marked up as a list using <ul> or <ol> elements. This ensures that screen readers correctly identify and announce the list, including the number of items, to blind users.
Solution:
Proper list markup provides the same structural information to all visitors and improves navigation for screen reader users.
The same issue is observed in the dialog that opens when clicking on the "Användarvillkor" link.
Visible text is missing from accessible name button
On this page, the button with visible text "Tillämpa" has an accessible name of "Använd rabattkod". This discrepancy can cause issues for users who rely on voice control to interact with the page. Voice commands are based on the visible text of elements. If the accessible name differs significantly, the voice commands will not work.
The button “Lägg till” has the name “Add [product name]”.
The button “Alterativ” has the name “View [product name]”.
Ensure the accessible name includes the visible text, preferably at the beginning. Ideally, the accessible name should be identical to the visible text.
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
Relationship between radio buttons is missing in the HTML
On this page, a group of radio buttons is present, preceded by the text "Betalning". While visually grouped, this relationship is not programmatically defined in the HTML. This prevents assistive technologies from understanding the grouping.
Solution:
The radio buttons (and checkboxes) should be enclosed within a <fieldset> element. Furthermore, the <fieldset> should have a <legend> element containing the text "Betalning" (or a more descriptive label) to act as the group's label. This establishes the proper association between the label and the grouped elements.
The same is observed under the heading “ Faktureringsadress”.
This page embeds a payment form in an iframe with the lang attribute set to "en" (English), but the form's interactive elements, such as button labels and input field placeholders, are in Swedish.
Button name does not describe what the button does
On this page, on the input field “Säkerhetskod” under the “Kontokort” radiobutton, the icon “?” triggers tooltips. This button has the function of displaying the card available for payment, but its accessible name is "+1" which does not accurately describe its function. This makes it difficult for blind users and those relying on screen readers to understand the button's purpose. The accessible name should clearly and concisely convey the button's action.
Solution:
Update the accessible name (e.g., using aria-label) to accurately reflect the button's function (Display Card for Payment).
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
Duplicate alt text in image carousel
On this page there is an image carousel. Two images in this carousel have the same alt text: “Anemone Ring / Crystal”. Screen readers rely on alt text to differentiate images, and duplicate text can cause confusion.
Solution:
Each image should have a unique alt attribute that accurately describes its content.
On this page, the images in the product carousel act as links to open the image full screen. The images inside this full screen view are missing alt attributes. Informative images require text alternatives. If an informative image is included using an img-element, the alt attribute is mandatory and must contain descriptive and unique text.
On this page, under the "Anemone Ring / Golden Shadow" (next to the button "LÄGG I VARUKORG"), there are three beige images (truck, box, etc.) added using an <img> element, but the alt attribute is missing. All <img> elements must have an alt attribute. If the image is purely decorative and conveys no meaning, the alt attribute should be present but empty (alt="").
Links to open images full screen are missing content
On this page, the images in the product carousel act as links to open the image full screen. These images are placed inside the <a> elements. Because the images are hidden, the links have no content. The link purpose and accessible name are missing.
On this page, under the texts “Välj Plätering:” and “Välj Kristallfärg:” there are swatches for selecting material and crystals. They trigger a tooltip on hover, but this functionality is not available to keyboard-only users. Tooltips must be accessible to all users, including those who navigate using the keyboard. Ensure the tooltip can be triggered by keyboard focus on the swatch, and potentially provide an alternative way to access the tooltip content (e.g., via a link or button).
Links used instead of buttons in quantity selector
On this page, within the quantity selection list (1, 2, 3...), the elements are marked up as a-links instead of button elements. Links are intended for navigation, while buttons are designed for interactive actions.
Solution:
Using the correct semantic elements ensures proper functionality and accessibility.
On this page, the link “LÄS MER” under the heading "HANDGJORT I GREKLAND" points to About page . Under the heading “SMYCKESVÅRD” a link with the same text is present, but the destination of this second link is different Care.
Fails SC 2.4.4
Link text is not clear enough
On this page, multiple links use the vague text “LÄS MER”. This text does not adequately describe the link's destination, creating ambiguity, especially for users with cognitive disabilities or those relying on screen readers. Vague link text like "Läs mer" or "Klicka här" should be avoided.
Solution:
Ensure link text clearly indicates the destination. If the link's context is visually clear (e.g., within a specific section), you can supplement the vague text with visually hidden text that provides more context. For example, "Läs mer (om projektet)" or "Läs mer (på bloggen)".
Button name does not describe what the button does
On this page, the button labeled "1" has the function quantity selection, but its accessible name is "1", which does not accurately describe its function. This makes it difficult for blind users and those relying on screen readers to understand the button's purpose. The accessible name should clearly and concisely convey the button's action.
Solution:
Update the accessible name (e.g., using aria-label) to accurately reflect the button's function.
This page contains one or more aria-label attributes with text different from the visible text on the element. For example, link “9 Recensioner” under the heading “Anemone Ring / Crystal” has accessible name “9 reviews”.
This discrepancy can prevent voice control functionality. Voice commands rely on the visible text of elements. If the accessible name differs, voice commands will not activate the link.
Solution:
Ensure that the accessible name includes the visible text, preferably at the beginning. Ideally, the accessible name should be identical to the visible
text.
This page contains one or more aria-label attributes with text in English. For example, “9 Recensioner” under the heading “Anemone Ring / Crystal”. More examples are: “Previous Page”, “Goto Page 2”, “Next Page”, “vote up Review by Kerstin E. on 25 Feb 2025", "vote down Review by Johanna P. on 24 Feb 2025".
Screen readers will pronounce these English labels using the pronunciation rules of the page's primary language, which is Swedish in this case. This can lead to mispronunciation and make the labels difficult to understand.
On this page, under the tab “DU KANSKE OCKSÅ GILLAR” there are images. The image next to the heading “Siri Necklace / Light Rose” has a "Handla nu" button (on hover). This button opens a modal window. Under the heading “Siri Necklace / Light Rose”, there is a sentence in a different language without a language code: “This necklace will take you from day to night effortlessly. With beautiful small stones in colour this piece of jewelry will sparkle beautifully on your neck. The Siri collection comes...”. This causes screen readers to use the primary language's pronunciation rules, potentially mispronouncing the foreign language text.
Solution:
Translate the aria-label texts into Swedish to ensure they are pronounced correctly by screen readers.
When the visitor selects a product and activates the 'Lägg i varukorg' button by keyboard, the side panel with the shopping cart opens, and focus is correctly placed inside this panel. However, after pressing the close button, the focus does not return to the trigger button or the next logical element on the page. Instead, it is sent to the browser. This focus order is not logical.
Fails SC 2.4.3
Paragraphs are separated with <br> elements instead of <p> elements
On this page, under the headings "LEVERANSVILLKOR", "ÅNGERRÄTT OCH RETUR" there are several paragraphs, but in the code, the text is placed inside one <p> element. This is not the correct approach. To properly structure the content, each paragraph should be placed within a p-element.
On this page, the following texts under the heading "LEVERANSVILLKOR" are incorrectly marked up with <strong> instead of proper heading elements: “Postnord (49 kr)”, “Budbee (29-49 kr)”, “Hämta i butik (0 kr)”. The <strong> element is for semantic emphasis, not for creating headings. Using it in place of heading elements ( <h2> to <h6> ) misrepresents the content's structure and makes it inaccessible to assistive technologies.
Solution
Remove the <strong> elements and use the appropriate heading elements for these texts.
On this page, a button with i-icon next to “RECENSIONER” opens a dialog window containing a close button. The close grey button has insufficient color contrast between the button and the white background. The contrast ratio of 2,3:1 is too low. This makes the button difficult or impossible to see for some users, especially those with low vision or color blindness. Additionally, if the icon is intended to serve as a visual label for an input field, the low contrast means it's not a valid visual label.
Solution
Ensure that the icon has a contrast ratio of at least 3,0:1 against its background.
On this page, a button with an i-icon next to “RECENSIONER” opens a dialog window when clicked. This functionality is currently inaccessible to users who cannot use a mouse.
Solution
The button's functionality should also be triggered by pressing the Spacebar or Enter key.
On this page, a button with i-icon next to “RECENSIONER” opens a dialog window that cannot be closed using the Escape key or a close button. This prevents keyboard-only users from dismissing the dialog and continuing their interaction with the page
Solution
The dialog should be closable either by pressing the Escape key or by including a keyboard-accessible close button.
On this page, a button with i-icon next to “RECENSIONER” opens a dialog box. Currently, keyboard focus can escape the open dialog and move to the underlying page content.
This is incorrect behavior for modal dialogs. While the dialog is open, keyboard focus must be constrained within the dialog.
Solution
This can be achieved by trapping the focus within the dialog until it is closed (either by clicking a close button or pressing the Escape key). Alternatively, the dialog could automatically close when focus attempts to leave it.
On this page, the icon “i” next to the heading “RECENSIONER” is a button but does not have the correct accessible role. This prevents screen readers from identifying it as a button, making it inaccessible to blind users. They will not know that this element is interactive and can be clicked.
Solution:
Make sure the button has the right accessible role.
On this page, the " Frågor \ Svar" button that opens a form for questions is incorrectly coded as an a-element (link). This is semantically incorrect, as the element functions as a button that triggers an action, not as a link that navigates to a different location. To correct this, change the element to a <button> element or add role="button" to the existing element if it cannot be changed to a <button>. This will ensure the element is correctly identified as a button by assistive technologies.
Dialog box does not have correct role and accessible name
On this page, a button with i-icon next to “RECENSIONER” opens a dialog window “Information kring betyg” . This dialog lacks both a proper ARIA role and an accessible name. Consequently, screen readers cannot identify the element as a dialog, nor can they convey its purpose or content.
Solution
This can be resolved by adding role="dialog" and aria-label="Description of the content" (replacing "Description of the content" with a concise description of the dialog's purpose) to the dialog element.
This page contains a link " Frågor \ Svar" under the heading "RECENSIONER". This link opens a form “STÄLL EN FRÅGA”. In this form the red star on a white background has a contrast ratio of 2.9:1. This text is less than 19px, therefore the contrast must be at least 4.5:1.
If the visitor submits this form with empty fields or wrong entries, error messages appear. The colour of these texts is red. These texts have too little contrast against the white background, namely 3,6:1. It should be at least 4,5:1.
This page contains a link " Frågor \ Svar" under the heading "RECENSIONER". This link opens a form “STÄLL EN FRÅGA”. Submitting form opens a window with а brown (#D5CAB6) text “Tack för att du skickat en fråga!” on white (#FFFFFF) background. The color contrast ratio is too low: 1,6:1.
This text is less than 19px, therefore the contrast must be at least 4,5:1.
This page contains a link " Frågor \ Svar" under the heading "RECENSIONER". This link opens a form “STÄLL EN FRÅGA”. The form with error messages displayed in English (for example, “Name field cannot be empty”), while the rest of the website is in Swedish.
This page contains a link " Frågor \ Svar" under the heading "RECENSIONER". This link opens a form “STÄLL EN FRÅGA”. Subbmitting form opens a window containing a close button. This close button lacks an accessible name, preventing screen readers from communicating its function to users.
Solution
This can be resolved by providing an accessible name, such as using an aria-label attribute.
Blind visitors are not notified that the form has been submitted
This page contains a link " Frågor \ Svar" under the heading "RECENSIONER". This link opens a form “STÄLL EN FRÅGA”. When the form is successfully submitted, a feedback message “Tack för att du skickat en fråga!...” appears without reloading the page. The focus is not sent to this message.
A screen reader can read this message to a blind visitor only if the message is marked in the code as a status message is marked in the code.
Solution
To do this, the message must be given the attribute aria-live="polite" or role="status". This ensures that screen readers automatically read out the message.
On this page, the arrow pagination buttons have insufficient color contrast between the button and the background. The contrast ratio of 1.6:1 is too low. This makes the button difficult or impossible to see for some users, especially those with low vision or color blindness. Additionally, if the icon is intended to serve as a visual label for an input field, the low contrast means it's not a valid visual label
Solution
Ensure that the icon has a contrast ratio of at least 3.0:1 against its background.
On this page, under the heading “RECENSIONER” there are tabs. The brown (#D5CAB6) line under the selected tab on a white (#FFFFFF) background has a contrast ratio of 1.6:1. The contrast of informative elements compared to adjacent areas in a chart must be at least 3.0:1 to ensure users can distinguish them.
Relationship between a link and its content is missing
On this page there are links “DU KANSKE OCKSÅ” and “GILLARSENAST VISADE PRODUKTER” that open sections with hidden content. The relationship between the link and the section it opens is missing in the HTML.
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
Contrast ratio is less than 4.5:1
On this page, under the heading “Gia Stud Bracelet / Pastel Rainbow Combo” the light grey (#CDCDCD) text “995 kr” on the white (#FFFFFF) background has a contrast ratio of 1,6:1. This text is less than 19px, therefore the contrast must be at least 4.5:1.
In the dialog “MEDDELA MIG NÄR PRODUKTEN FINNS I LAGER” a form is present. The E-mail input field is missing the autocomplete attribute. When forms collect personal data, the appropriate autocomplete attribute should be used with these input elements.
Custom focus indicator has insufficient color contrast
In the dialog “MEDDELA MIG NÄR PRODUKTEN FINNS I LAGER” a form is present. The input fields use a custom keyboard focus indicator, which looks like a blue HEX #C2DBFE border on a white HEX #FFFFFF background. The contrast ratio between these colors is 1,4:1, which is below the required minimum of 3.0:1.
Similar issue is with “Meddela mig” button which has a gray HEX #A0A2A4 focus border on a white HEX #FFFFFF background, contrast ratio is 2.6:1.
Custom keyboard focus indicators must meet contrast requirements, unlike the default browser focus indicator. Since users cannot adjust custom focus indicators, they must have a contrast ratio of at least 3.0:1 against the background. Increase the contrast of the custom focus indicator to meet this requirement.
In the dialog “MEDDELA MIG NÄR PRODUKTEN FINNS I LAGER” a form is present. If the visitor submits this form with correct entries, a successful submission message appears “Din notifikation har blivit registerad. Stang”. The color of this text is green HEX #3DA439. This text has too little contrast against the light green HEX #DFF0D8 background, which is 2,7:1. It should be at least 4.5:1.
In the dialog “MEDDELA MIG NÄR PRODUKTEN FINNS I LAGER” a form is present. When this form is successfully submitted the success message is displayed under “Middela mig” button and then the dialog closes automatically in several seconds. This time limit may not be sufficient for all users to comfortably read or interact with the message.
A control mechanism must be implemented that allows users to either remove the time limit entirely or extend it up to 20 hours.
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
Information not available to the screen reader
On the product page, some color options may be sold out. While a visual line indicates this, screen reader users cannot access this information. To ensure accessibility, include visually hidden text or use accessible names (e.g., aria-label) within the color swatches to convey the sold-out status.
On this page, the keyboard focus is not visible on the button "FÖRBESTÄLL" in form under the heading “Mini Twisted Bracelet”. Keyboard focus must be clearly visible on all interactive elements (links, buttons, input fields).
On this page under the button "FÖRBESTÄLL" there is а red text “Förbeställning: Leveranstid 6-8 veckor” (#FF0000) on white background (#FFFFFF). The color contrast ratio is too low: 3,98:1.
On this page, when a user makes a pre-order, a new dialog window “Du kanske också gillar” appears with additional items. Under the name of item there is form, where a select element is present without a label. The first option in the select element cannot serve as a label because it disappears when a different option is selected.
Part of content is in different language, but no language code is applied
On this page, when a user makes a pre-order, a new dialog window “Du kanske också gillar” appears with additional items. On this window there are buttons as arrows. Their accessible names "Go to last slide"and "Next slide" in a different language without a language code.
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
Current page in pagination is only indicated visually
On this page, the pagination below the search results visually distinguishes the current page number, but this distinction is not present in the HTML code.
This prevents a screen reader from passing this information to the visitor.
Solution:
To make this information accessible, add either:
Hidden text: Include visually hidden text within the current page's link that indicates it is the current page (e.g., <span class="sr-only">Current page</span>);
aria-current attribute: Add the aria-current="page" attribute to the link element of the current page.
On this page, the pagination links lack sufficient context. While sighted users understand that "1," "2," "3," etc. represent page numbers, this is not clear to users with low vision or those using screen readers.
Solution:
Adding the word "page" to the link text (e.g., "Page 1," "Page 2") would provide the necessary context and improve accessibility. Use ‘sr-only’ class to hide this text from the page.
The relationship between links in pagination is not defined in the code
On this page, the pagination links below the search results are visually grouped, but this grouping is not present in the HTML structure.
If it is obvious to a sighted visitor that a group of links, such as pagination, belong together, then that structure should also be present in the HTML code.
Solution:
Include paging links in an ul or ol element, for example, to correctly represent the group in the code. This allows auxiliary software to understand the semantic relationship between the links.
On this page a sidebar with filters contains a groups label (for example, “Kategori”, “Stone color”) which are not connected to its group of checkboxes.
This prevents the screen reader from recognizing the relationship between the group label and the checkboxes. The individual labels of each checkbox are read out without the group label.
Solution:
This can be solved by using <fieldset> and <legend> elements. Other solutions are also possible.
The "Filters" button opens a sidebar with filters. When some filters are selected, new buttons uppear at the top of the sidebar. These button remove the selected options. The icon of a cross indicates the function of the button. This information is not present in the HTML.
Informative images require a text alternative that accurately and succinctly conveys the image's key information. This can be solved by adding screen reader only text to the button or by using an aria-label.
The search bar under the menu has insufficient color contrast between its border and the background. The grey (#F0F0F0) border on the white (#FFFFFF) background has a contrast ratio of 1,1:1.
Solution:
Ensure that the contrast between the border of the search bar and the background is at least 3,0:1.
The search bar under the menu has a placeholder "Sökresultat" and the accessible name is "Sök i vår butik". The visible text on interactive elements (input fields, links, buttons) should be present in the accessible name. Discrepancies can cause issues for users relying on voice control, as their spoken commands might not activate the intended elements.
Solution:
To ensure voice activation works reliably, the visible text should be part of the accessible name, and ideally, it should come first.
On this page, selecting a filter option causes the keyboard focus to unexpectedly shift to the top of the page. Visitors are not notified of this context change before it happens. Unexpected context changes, such as focus shifts triggered by form interactions (e.g., checking a checkbox, filling an input, or selecting a dropdown option), should be avoided.
Solution:
Context changes like form submissions or opening new windows should only occur with prior user warning.
On this page, on a small screen, the "х" button for closing the “Filters” sidebar is incorrectly coded as an a-element (link). This is semantically incorrect, as the element functions as a button that triggers an action, not as a link that navigates to a different location.
Solution:
To correct this, change the element to a <button> element or add role="button" to the existing element if it cannot be changed to a button. This will ensure the element is correctly identified as a button by assistive technologies.
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
Notification about custom search results is not automatically read aloud by screen readers
On this page, filters modify search results, and a message like "Visa N resultat" appears on a button at the bottom of filters sidebar without a page reload. However, this message, which is a status message, is not announced by screen readers because it doesn't receive keyboard focus. Status messages should be automatically read aloud when they appear or change.
Solution:
Adding role="status" to the element containing the "XX results found" message will ensure screen readers announce it.
Visible link text is not present in accessible name
On this page in the “Filter” sidebar there is a link “Visa N resultat”. Visible text ("Visa N resultat") is not included in its accessible name ("Dölj filter"), which is provided via an aria-label. This mismatch prevents the link from being activated using voice control. When the visible text differs from the accessible name, voice commands based on the visible text will not work.
To ensure voice control functionality, include the visible text in the accessible name, preferably at the beginning. In this case, change the aria-label to include the visible text.
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
Focus escapes the dialog window
On this page, a “FILTER” button opens a dialog box. Currently, keyboard focus can escape the open dialog and move to the underlying page content.
This is incorrect behavior for modal dialogs. While the dialog is open, keyboard focus must be constrained within the dialog. This can be achieved by trapping the focus within the dialog until it is closed (either by clicking a close button or pressing the Escape key). Alternatively, the dialog could automatically close when focus attempts to leave it.
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
Heading misses the proper markup
On this page, the following texts are not marked up as headings: "Hur är arbetsvillkoren på företaget?”, “Hur arbetar vi med socialt ansvarstagande i företaget?". When text functions as a heading but lacks proper markup, it loses its semantic meaning and becomes inaccessible to visitors who rely on assistive technologies like screen readers. Headings are crucial for navigating and understanding content structure.
Solution:
Ensure these texts are marked up with the appropriate heading elements (<h1> to <h6>) to reflect their role and hierarchy in the content.
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
Text is not a heading, <h> element used for styling
The text "We believe that jewelry and environmental responsibility can exist in harmony, leading the way towards a more conscious tomorrow" on this page is not a heading, but it is incorrectly marked up with an <h2> element to increase its font size. Using heading elements for purely visual styling is semantically incorrect.
Since this text is not a heading, remove the <h2> element and use CSS to achieve the desired visual styling.
On this page, under the heading "THE PERFECT WORLD FOUNDATION" a block of text with multiple paragraphs is incorrectly marked up as a single <p> element. The visual structure of the content should be accurately reflected in the HTML.
If the content visually consists of multiple paragraphs, each paragraph should be enclosed in its own <p> element. This ensures that the semantic structure of the content is conveyed to assistive technologies like screen readers, providing the same structural information to all visitors.
On this page, the buttons as arrows in the carousel under the heading "THE PERFECT WORLD FOUNDATION" have the function for navigation, but its accessible names are "Previous" and “Next” which do not accurately describe its function. This makes it difficult for blind users and those relying on screen readers to understand the button's purpose.
Solution:
The accessible name of these buttons should be updated to "Previous slide" and "Next slide" to provide more context about their function.
This page contains a section of text ("THE PERFECT WORLD FOUNDATION”, “CHILDHOOD EDITION BRACELET") in a different language than the primary language of the page, but there is no language switch implemented. When content is in a different language, it needs an inline language change.
Solution:
This can be done by adding a lang attribute to the element containing the text (e.g., <span lang="en">English text</span> or <p lang="fr">French text</p>). This allows screen readers to switch to the correct pronunciation rules for that language.
On this page, a carousel under ""THE PERFECT WORLD FOUNDATION”" contains images that lack text alternatives.
Solution:
Informative images require text alternatives so that screen readers can convey the image's information or function to visually impaired users. Images included via the <img> element must have alt attributes, and these attributes cannot be empty for informative images.
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
Heading misses the proper markup
On this page, the text “Recensioner av” is not marked up as a heading. When text functions as a heading but lacks proper markup, it loses its semantic meaning and becomes inaccessible to visitors who rely on assistive technologies like screen readers. Headings are crucial for navigating and understanding content structure.
Solution:
Ensure these texts are marked up with the appropriate heading elements (<h1> to <h6>) to reflect their role and hierarchy in the content.
On this page, there is a problem with the brown (#D5CAB6) and white (#FFFFFF) color combination for the text (for example, "Recensioner av", "5960 Recensioner", uppercase letter in the circle on reviews), link text (pagination "1", "2” and so on) and the background of the page. The color contrast ratio is 1,6:1.
This text is less than 19px, therefore, the contrast must be at least 4,5:1.
Colour contrast of text is too low (text smaller than 24px and not bold)
On this page, under the tab “RECENSIONER” there is a brown circle with a letter. The white (#FFFFFF) letter on a brown (#E6DFD3) background has a contrast ratio of 1,3:1. This text is smaller than 24px and not bold, therefore the contrast should be at least 4.5:1.
On this page, the brown (#D5CAB6) rating star icons, pagination arrows, and the brown line under the current tab text all have a contrast ratio of 1,6:1 on a white (#FFFFFF) background. The contrast of informative elements compared to adjacent areas in a chart must be at least 3,0:1 to ensure users can distinguish them. Check all colors in this graph.
This page contains aria-label attributes with text in English. For example, “Previous Page”, "vote up Review by Agneta R. on 12 Feb 2021", "vote down Review by Agneta R. on 12 Feb 2021", “Previous Page”, “Goto Page 2”, “Next Page”.
Screen readers will pronounce these English labels using the pronunciation rules of the page's primary language, which is Swedish in this case. This make the labels difficult to understand.
Solution:
Translate the aria-label texts into Swedish to ensure they are pronounced correctly by screen readers.
On this page, when a user navigates using the keyboard, the keyboard focus moves into the main content area, users cannot shift focus to the header or footer. Users are unable to navigate out of the form to other interactive elements on the page.
This keyboard trap prevents visitors who only use a keyboard from freely navigating the page. These include people with motor or visual impairments, for example. This makes the website less usable and less accessible.
Solution:
Make sure it is always possible to use the keyboard to take the focus back out of the form, or add skip links that allow visitors to skip parts.
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
alt absent on <img>
On this page, team photos are included using an <img> element, but the alt attribute is missing. All <img> elements should have an alt attribute. If the image is purely decorative and conveys no meaning, the alt attribute should be present but empty (alt=""). If the image is informative, the alt attribute should contain a clear and concise description of the image's content.
On this page, the HTML order of the employee's photo is located before his/her name (names marked up as a heading).
This order is not optimal for accessibility. When a page contains multiple articles, each with an image, text, and a heading, the heading should come first in the HTML.
Solution:
You solve this by placing all content (images and text) associated with a particular header in the code under that header. This creates a logical structure.
Some functionality and content present on this page are already described in other chapters of this report. Below you can read about issues unique to this specific page.
Contrast ratio is less than 4.5:1
On this page there is а beige (#AB8C52) text “LÄS MER” on white background. The color contrast ratio is too low: 3,2:1.
This text is less than 19px, therefore the contrast must be at least 4,5:1.
Compliant: 26
Not compliant: 29
