Octo-Pushing These Bytes Through

Large reports can take a few moments to display correctly.

 Accessibility Scan Report

Audited site https://www.example.com/

11 pages scanned · 4 skipped · 3 PDFs checked

Max Crawl: 1000 (Default) Screenshot Mode: Per Type

Summary

An automated accessibility scan has taken place on example.com, at desktop (1280 × 800) and mobile (375 × 667) sizes. 11 of the 18 pages found were scanned against WCAG 2.2 Level AA and best practice rules, along with 3 linked PDFs. 4 pages were skipped, and issues on pages outside this scope are not included.

A total of 9 unique issue types have been identified across the website: 3 critical, 4 serious, 1 moderate and 1 minor. Together they account for 208 instances. 78% of the issue types identified are of major severity (critical or serious), which can prevent some users from accessing parts of the website. While these issues were identified, 19 automated checks passed successfully on every page scanned.

The most critical issues relate to Ensure <img> elements have alternative text or a role of none or presentation and Ensure buttons have discernible text, which can create significant barriers for users of assistive technology. From an instance perspective, Ensure links have discernible text was the most common issue, appearing 66 times. This concludes the automated scan.

Scan Summary

Critical: 3

Serious: 4

Moderate: 1

Minor: 1

Total Unique Axe Issue Types Found: 9

Issue Overview

critical Ensure <img> elements have alternative text or a role of none or presentation
critical Ensure buttons have discernible text
critical Ensure select element has an accessible name
serious Ensure ARIA attributes are not prohibited for an element's role
serious Ensure links have discernible text
serious Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
serious Ensure touch targets have sufficient size and space
moderate Ensure the order of headings is semantically correct
minor Ensure image alternative is not repeated as text

Top 5 Issues by Severity and Instance Count

  • Ensure <img> elements have alternative text or a role of none or presentation26
  • Ensure buttons have discernible text22
  • Ensure select element has an accessible name8
  • Ensure links have discernible text66
  • Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds46

Top 5 Pages with Most Issue Types

  • https://www.example.com/shop/07
  • https://www.example.com/shop/17
  • https://www.example.com/shop/27
  • https://www.example.com/shop/37
  • https://www.example.com/shop5
PDF Checks (3), 6 issues

Automated checks of each PDF's tags, text, security, title, language, images, headings, tables, form fields, links, tab order and bookmarks. Passing them does not mean a PDF is fully accessible: reading order, colour contrast and the quality of the tags and alternative text still need checking by hand.

  • wholesale-price-list.pdf

    https://www.example.com/docs/wholesale-price-list.pdf
    Tagged2 issues
    All Checks (13) 7 passed, 2 issues
    Tags PassTagged (has a structure tree).
    Text layer PassContains selectable text.
    Screen reader access PassNot encrypted, so assistive technology can read it.
    Document title PassTitle: "Wholesale Price List 2026"
    Title shown in title bar PassSet to show the title (DisplayDocTitle is true).
    Document language Issue foundNo /Lang entry in the document catalog.
    Image alternative text PassNo images are tagged as figures.
    Headings Pass1 heading tagged.
    Table headers Issue foundThe table has no header cells (TH).
    Form field names Not checkedNo form fields found.
    Links Not checkedNo links found.
    Tab order Not checkedNo pages with links or form fields.
    Bookmarks Not checkedNot needed for documents of 20 pages or fewer.
    Serious PDF has no document language
    DescriptionThis PDF does not declare its main language, so screen readers may read it aloud with the wrong voice and pronunciation.
    WCAG3.1.1 Language of Page (Level A)
    ReferencePDF technique PDF16
    How To FixSet the document language (File > Properties > Advanced > Language in Adobe Acrobat, or set the language in the source document before exporting).
    Serious PDF tables have no header cells
    DescriptionSome tables have no header cells (TH), so screen readers cannot tell users which row or column a value belongs to.
    WCAG1.3.1 Info and Relationships (Level A)
    ReferencePDF technique PDF6
    How To FixMark header rows or columns as headers in the source document before exporting, or change their cells from TD to TH in the PDF's tags.

  • brewing-guide.pdf

    https://www.example.com/docs/brewing-guide.pdf
    TaggedNo issues found
    All Checks (13) 10 passed
    Tags PassTagged (has a structure tree).
    Text layer PassContains selectable text.
    Screen reader access PassNot encrypted, so assistive technology can read it.
    Document title PassTitle: "Harbourline Brewing Guide"
    Title shown in title bar PassSet to show the title (DisplayDocTitle is true).
    Document language PassLanguage: en-GB
    Image alternative text PassNo images are tagged as figures.
    Headings Pass3 headings tagged.
    Table headers PassThe table has header cells.
    Form field names Not checkedNo form fields found.
    Links Not checkedNo links found.
    Tab order Not checkedNo pages with links or form fields.
    Bookmarks PassHas bookmarks.

  • annual-sourcing-report.pdf

    https://www.example.com/docs/annual-sourcing-report.pdf
    Not Tagged4 issues
    All Checks (13) 2 passed, 4 issues
    Tags Issue foundNo tags (/StructTreeRoot) found.
    Text layer PassContains selectable text.
    Screen reader access PassNot encrypted, so assistive technology can read it.
    Document title Issue foundNo title in the document properties (Info /Title or XMP dc:title).
    Title shown in title bar Not checkedNot checked because the PDF has no title.
    Document language Issue foundNo /Lang entry in the document catalog.
    Image alternative text Not checkedNot checked because the PDF is not tagged.
    Headings Not checkedNot checked because the PDF is not tagged.
    Table headers Not checkedNot checked because the PDF is not tagged.
    Form field names Not checkedNo form fields found.
    Links Not checkedNot checked because the PDF is not tagged.
    Tab order Not checkedNot checked because the PDF is not tagged.
    Bookmarks Issue foundNo bookmarks in 24 pages.
    Serious PDF is not tagged
    DescriptionThis PDF has no tags, so screen readers cannot tell headings, lists, tables and reading order apart.
    WCAG1.3.1 Info and Relationships (Level A)
    ReferenceUnderstanding 1.3.1
    How To FixExport the PDF with tags turned on (for example "Create tagged PDF" or "Document structure tags for accessibility"), or add tags in a PDF editor such as Adobe Acrobat, then check the reading order.
    Serious PDF has no document language
    DescriptionThis PDF does not declare its main language, so screen readers may read it aloud with the wrong voice and pronunciation.
    WCAG3.1.1 Language of Page (Level A)
    ReferencePDF technique PDF16
    How To FixSet the document language (File > Properties > Advanced > Language in Adobe Acrobat, or set the language in the source document before exporting).
    Moderate PDF has no document title
    DescriptionThis PDF does not set a document title in its properties, so PDF readers show and announce the file name instead of a meaningful title.
    WCAG2.4.2 Page Titled (Level A)
    ReferencePDF technique PDF18
    How To FixSet the Title in the document properties (File > Properties > Description in Adobe Acrobat, or in the source document before exporting).
    Minor Long PDF has no bookmarks
    DescriptionThis PDF has more than 20 pages but no bookmarks, so users cannot jump straight to a section.
    WCAG2.4.5 Multiple Ways (Level AA)
    ReferencePDF technique PDF2
    How To FixCreate bookmarks from headings when exporting (for example, Create bookmarks using Headings in Word), or add them in a PDF editor.
Skipped Pages (4)
Breakdown by Reason (3)
  • Disallowed by robots.txt2
  • Redirects outside the scanned site1
  • Skipped: HTTP Error 4041
Passed Checks (19)

The following accessibility rules were successfully passed on every page and viewport scanned.

Accessibility Issues Found (9)

Buttons must have discernible text

Next Issue
Details
DescriptionEnsure buttons have discernible text
Rulebutton-name (Help)
Initial Impactcritical 4.1.2 Name, Role, Value (Level A)
Instances Found22 across 11 page(s)/file(s).

Representative Screenshot from Desktop_1280x800:

Download Thumbnail: Representative screenshot for issue button-name on Desktop_1280x800 View Screenshot
Affected Elements & Instances (22)
  • Page/File: https://www.example.com/
    • Desktop_1280x800 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: .actions > button
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...
    • Mobile_375x667 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: .actions > button
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...
  • Page/File: https://www.example.com/contact
    • Desktop_1280x800 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: .actions > button
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...
    • Mobile_375x667 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: .actions > button
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...
  • Page/File: https://www.example.com/about
    • Desktop_1280x800 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: button
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...
    • Mobile_375x667 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: button
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...
  • Page/File: https://www.example.com/shop
    • Desktop_1280x800 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: button
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...
    • Mobile_375x667 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: button
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...
  • Page/File: https://www.example.com/journal
    • Desktop_1280x800 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: button
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...
    • Mobile_375x667 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: button
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...
  • Page/File: https://www.example.com/shop/0
    • Desktop_1280x800 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: .icon-btn:nth-child(1)
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...
    • Mobile_375x667 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: .icon-btn:nth-child(1)
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...
  • Page/File: https://www.example.com/shop/1
    • Desktop_1280x800 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: .icon-btn:nth-child(1)
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...
    • Mobile_375x667 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: .icon-btn:nth-child(1)
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...
  • Page/File: https://www.example.com/shop/2
    • Desktop_1280x800 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: .icon-btn:nth-child(1)
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...
    • Mobile_375x667 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: .icon-btn:nth-child(1)
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...
  • Page/File: https://www.example.com/shop/3
    • Desktop_1280x800 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: .icon-btn:nth-child(1)
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...
    • Mobile_375x667 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: .icon-btn:nth-child(1)
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...
  • Page/File: https://www.example.com/journal/harvest-notes
    • Desktop_1280x800 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: button
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...
    • Mobile_375x667 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: button
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...
  • Page/File: https://www.example.com/journal/home-espresso
    • Desktop_1280x800 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: button
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...
    • Mobile_375x667 (1 instances)
    • HTML: <button class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>Selector: button
      Primary Recommendation:
      Element does not have inner text that is visible to screen readers
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • ...

Images must have alternative text

Previous IssueNext Issue
Details
DescriptionEnsure <img> elements have alternative text or a role of none or presentation
Ruleimage-alt (Help)
Initial Impactcritical 1.1.1 Non-text Content (Level A)
Instances Found26 across 8 page(s)/file(s).

Representative Screenshot from Desktop_1280x800:

Download Thumbnail: Representative screenshot for issue image-alt on Desktop_1280x800 View Screenshot
Affected Elements & Instances (26)
  • Page/File: https://www.example.com/
    • Desktop_1280x800 (3 instances)
    • HTML: <img src="data:image/svg+xml;u...">Selector: .hero > img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
    • HTML: <img src="data:image/svg+xml;u...">Selector: a[href$="shop/0"] > img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
    • HTML: <img src="data:image/svg+xml;u...">Selector: a[href$="shop/2"] > img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
    • Mobile_375x667 (3 instances)
    • HTML: <img src="data:image/svg+xml;u...">Selector: .hero > img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
    • HTML: <img src="data:image/svg+xml;u...">Selector: a[href$="shop/0"] > img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
    • HTML: <img src="data:image/svg+xml;u...">Selector: a[href$="shop/2"] > img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
  • Page/File: https://www.example.com/shop
    • Desktop_1280x800 (4 instances)
    • HTML: <img src="data:image/svg+xml;u...">Selector: .card[href$="shop/0"]:nth-child(1) > img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
    • HTML: <img src="data:image/svg+xml;u...">Selector: .card[href$="shop/2"]:nth-child(3) > img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
    • HTML: <img src="data:image/svg+xml;u...">Selector: .card[href$="shop/0"]:nth-child(5) > img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
    • HTML: <img src="data:image/svg+xml;u...">Selector: .card[href$="shop/2"]:nth-child(7) > img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
    • Mobile_375x667 (4 instances)
    • HTML: <img src="data:image/svg+xml;u...">Selector: .card[href$="shop/0"]:nth-child(1) > img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
    • HTML: <img src="data:image/svg+xml;u...">Selector: .card[href$="shop/2"]:nth-child(3) > img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
    • HTML: <img src="data:image/svg+xml;u...">Selector: .card[href$="shop/0"]:nth-child(5) > img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
    • HTML: <img src="data:image/svg+xml;u...">Selector: .card[href$="shop/2"]:nth-child(7) > img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
  • Page/File: https://www.example.com/journal
    • Desktop_1280x800 (1 instances)
    • HTML: <img src="data:image/svg+xml;u...">Selector: a[href$="home-espresso"] > img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
    • Mobile_375x667 (1 instances)
    • HTML: <img src="data:image/svg+xml;u...">Selector: a[href$="home-espresso"] > img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
  • Page/File: https://www.example.com/shop/0
    • Desktop_1280x800 (1 instances)
    • HTML: <img src="data:image/svg+xml;u...">Selector: img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
    • Mobile_375x667 (1 instances)
    • HTML: <img src="data:image/svg+xml;u...">Selector: img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
  • Page/File: https://www.example.com/shop/1
    • Desktop_1280x800 (1 instances)
    • HTML: <img src="data:image/svg+xml;u...">Selector: img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
    • Mobile_375x667 (1 instances)
    • HTML: <img src="data:image/svg+xml;u...">Selector: img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
  • Page/File: https://www.example.com/shop/2
    • Desktop_1280x800 (1 instances)
    • HTML: <img src="data:image/svg+xml;u...">Selector: img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
    • Mobile_375x667 (1 instances)
    • HTML: <img src="data:image/svg+xml;u...">Selector: img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
  • Page/File: https://www.example.com/shop/3
    • Desktop_1280x800 (1 instances)
    • HTML: <img src="data:image/svg+xml;u...">Selector: img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
    • Mobile_375x667 (1 instances)
    • HTML: <img src="data:image/svg+xml;u...">Selector: img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
  • Page/File: https://www.example.com/journal/home-espresso
    • Desktop_1280x800 (1 instances)
    • HTML: <img src="data:image/svg+xml;u...">Selector: img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...
    • Mobile_375x667 (1 instances)
    • HTML: <img src="data:image/svg+xml;u...">Selector: img
      Primary Recommendation:
      Element does not have an alt attribute
      Or choose one of these alternatives:
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Element has no title attribute
      • Element's default semantics...

Select element must have an accessible name

Previous IssueJump to Serious Issues
Details
DescriptionEnsure select element has an accessible name
Ruleselect-name (Help)
Initial Impactcritical 4.1.2 Name, Role, Value (Level A)
Instances Found8 across 4 page(s)/file(s).

Representative Screenshot from Desktop_1280x800:

Download Thumbnail: Representative screenshot for issue select-name on Desktop_1280x800 View Screenshot
Affected Elements & Instances (8)
  • Page/File: https://www.example.com/shop/0
    • Desktop_1280x800 (1 instances)
    • HTML: <select class="grind"><option>Whole bean</option><option>Filter</option><option>Espresso</option></select>Selector: select
      Primary Recommendation:
      Element does not have an implicit (wrapped) <label>
      Or choose one of these alternatives:
      • Element does not have an explicit <label>
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Ele...
    • Mobile_375x667 (1 instances)
    • HTML: <select class="grind"><option>Whole bean</option><option>Filter</option><option>Espresso</option></select>Selector: select
      Primary Recommendation:
      Element does not have an implicit (wrapped) <label>
      Or choose one of these alternatives:
      • Element does not have an explicit <label>
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Ele...
  • Page/File: https://www.example.com/shop/1
    • Desktop_1280x800 (1 instances)
    • HTML: <select class="grind"><option>Whole bean</option><option>Filter</option><option>Espresso</option></select>Selector: select
      Primary Recommendation:
      Element does not have an implicit (wrapped) <label>
      Or choose one of these alternatives:
      • Element does not have an explicit <label>
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Ele...
    • Mobile_375x667 (1 instances)
    • HTML: <select class="grind"><option>Whole bean</option><option>Filter</option><option>Espresso</option></select>Selector: select
      Primary Recommendation:
      Element does not have an implicit (wrapped) <label>
      Or choose one of these alternatives:
      • Element does not have an explicit <label>
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Ele...
  • Page/File: https://www.example.com/shop/2
    • Desktop_1280x800 (1 instances)
    • HTML: <select class="grind"><option>Whole bean</option><option>Filter</option><option>Espresso</option></select>Selector: select
      Primary Recommendation:
      Element does not have an implicit (wrapped) <label>
      Or choose one of these alternatives:
      • Element does not have an explicit <label>
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Ele...
    • Mobile_375x667 (1 instances)
    • HTML: <select class="grind"><option>Whole bean</option><option>Filter</option><option>Espresso</option></select>Selector: select
      Primary Recommendation:
      Element does not have an implicit (wrapped) <label>
      Or choose one of these alternatives:
      • Element does not have an explicit <label>
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Ele...
  • Page/File: https://www.example.com/shop/3
    • Desktop_1280x800 (1 instances)
    • HTML: <select class="grind"><option>Whole bean</option><option>Filter</option><option>Espresso</option></select>Selector: select
      Primary Recommendation:
      Element does not have an implicit (wrapped) <label>
      Or choose one of these alternatives:
      • Element does not have an explicit <label>
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Ele...
    • Mobile_375x667 (1 instances)
    • HTML: <select class="grind"><option>Whole bean</option><option>Filter</option><option>Espresso</option></select>Selector: select
      Primary Recommendation:
      Element does not have an implicit (wrapped) <label>
      Or choose one of these alternatives:
      • Element does not have an explicit <label>
      • aria-label attribute does not exist or is empty
      • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      • Ele...

Elements must only use permitted ARIA attributes

Back to Critical IssuesNext Issue
Details
DescriptionEnsure ARIA attributes are not prohibited for an element's role
Rulearia-prohibited-attr (Help)
Initial Impactserious 4.1.2 Name, Role, Value (Level A)
Instances Found8 across 4 page(s)/file(s).

Representative Screenshot from Desktop_1280x800:

Download Thumbnail: Representative screenshot for issue aria-prohibited-attr on Desktop_1280x800 View Screenshot
Affected Elements & Instances (8)
  • Page/File: https://www.example.com/shop/0
    • Desktop_1280x800 (1 instances)
    • HTML: <span class="stars" aria-label="Rated 4.8 out of 5"></span>Selector: .stars
      Primary Recommendation:
      aria-label attribute cannot be used on "span" elements with no valid role attribute.
    • Mobile_375x667 (1 instances)
    • HTML: <span class="stars" aria-label="Rated 4.8 out of 5"></span>Selector: .stars
      Primary Recommendation:
      aria-label attribute cannot be used on "span" elements with no valid role attribute.
  • Page/File: https://www.example.com/shop/1
    • Desktop_1280x800 (1 instances)
    • HTML: <span class="stars" aria-label="Rated 4.8 out of 5"></span>Selector: .stars
      Primary Recommendation:
      aria-label attribute cannot be used on "span" elements with no valid role attribute.
    • Mobile_375x667 (1 instances)
    • HTML: <span class="stars" aria-label="Rated 4.8 out of 5"></span>Selector: .stars
      Primary Recommendation:
      aria-label attribute cannot be used on "span" elements with no valid role attribute.
  • Page/File: https://www.example.com/shop/2
    • Desktop_1280x800 (1 instances)
    • HTML: <span class="stars" aria-label="Rated 4.8 out of 5"></span>Selector: .stars
      Primary Recommendation:
      aria-label attribute cannot be used on "span" elements with no valid role attribute.
    • Mobile_375x667 (1 instances)
    • HTML: <span class="stars" aria-label="Rated 4.8 out of 5"></span>Selector: .stars
      Primary Recommendation:
      aria-label attribute cannot be used on "span" elements with no valid role attribute.
  • Page/File: https://www.example.com/shop/3
    • Desktop_1280x800 (1 instances)
    • HTML: <span class="stars" aria-label="Rated 4.8 out of 5"></span>Selector: .stars
      Primary Recommendation:
      aria-label attribute cannot be used on "span" elements with no valid role attribute.
    • Mobile_375x667 (1 instances)
    • HTML: <span class="stars" aria-label="Rated 4.8 out of 5"></span>Selector: .stars
      Primary Recommendation:
      aria-label attribute cannot be used on "span" elements with no valid role attribute.

Elements must meet minimum color contrast ratio thresholds

Previous IssueNext Issue
Details
DescriptionEnsure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Rulecolor-contrast (Help)
Initial Impactserious 1.4.3 Contrast (Minimum) (Level AA)
Instances Found46 across 10 page(s)/file(s).

Representative Screenshot from Desktop_1280x800:

Download Thumbnail: Representative screenshot for issue color-contrast on Desktop_1280x800 View Screenshot
Affected Elements & Instances (46)
  • Page/File: https://www.example.com/
    • Desktop_1280x800 (6 instances)
    • HTML: <div class="eyebrow">Roasted this week</div>Selector: .eyebrow
      Primary Recommendation:
      Element has insufficient color contrast of 1.98 (foreground color: #b9b2a5, background color: #faf8f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: a[href$="shop/0"] > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: a[href$="shop/1"] > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: a[href$="shop/2"] > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: a[href$="shop/3"] > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <button class="btn" style="background:#7fae8c">Subscribe</button>Selector: form > button
      Primary Recommendation:
      Element has insufficient color contrast of 2.51 (foreground color: #ffffff, background color: #7fae8c, font size: 10.0pt (13.3333px), font weight: normal). Expected contrast ratio of 4.5:1
    • Mobile_375x667 (6 instances)
    • HTML: <div class="eyebrow">Roasted this week</div>Selector: .eyebrow
      Primary Recommendation:
      Element has insufficient color contrast of 1.98 (foreground color: #b9b2a5, background color: #faf8f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: a[href$="shop/0"] > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: a[href$="shop/1"] > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: a[href$="shop/2"] > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: a[href$="shop/3"] > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <button class="btn" style="background:#7fae8c">Subscribe</button>Selector: form > button
      Primary Recommendation:
      Element has insufficient color contrast of 2.51 (foreground color: #ffffff, background color: #7fae8c, font size: 10.0pt (13.3333px), font weight: normal). Expected contrast ratio of 4.5:1
  • Page/File: https://www.example.com/about
    • Desktop_1280x800 (1 instances)
    • HTML: <div class="eyebrow">Since 2016</div>Selector: .eyebrow
      Primary Recommendation:
      Element has insufficient color contrast of 1.98 (foreground color: #b9b2a5, background color: #faf8f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1
    • Mobile_375x667 (1 instances)
    • HTML: <div class="eyebrow">Since 2016</div>Selector: .eyebrow
      Primary Recommendation:
      Element has insufficient color contrast of 1.98 (foreground color: #b9b2a5, background color: #faf8f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1
  • Page/File: https://www.example.com/shop
    • Desktop_1280x800 (8 instances)
    • HTML: <div class="muted">250g · whole bean</div>Selector: .card[href$="shop/0"]:nth-child(1) > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: .card[href$="shop/1"]:nth-child(2) > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: .card[href$="shop/2"]:nth-child(3) > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: .card[href$="shop/3"]:nth-child(4) > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: .card[href$="shop/0"]:nth-child(5) > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: .card[href$="shop/1"]:nth-child(6) > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: .card[href$="shop/2"]:nth-child(7) > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: .card[href$="shop/3"]:nth-child(8) > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • Mobile_375x667 (8 instances)
    • HTML: <div class="muted">250g · whole bean</div>Selector: .card[href$="shop/0"]:nth-child(1) > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: .card[href$="shop/1"]:nth-child(2) > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: .card[href$="shop/2"]:nth-child(3) > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: .card[href$="shop/3"]:nth-child(4) > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: .card[href$="shop/0"]:nth-child(5) > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: .card[href$="shop/1"]:nth-child(6) > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: .card[href$="shop/2"]:nth-child(7) > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">250g · whole bean</div>Selector: .card[href$="shop/3"]:nth-child(8) > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
  • Page/File: https://www.example.com/journal
    • Desktop_1280x800 (2 instances)
    • HTML: <div class="muted">8 min read</div>Selector: a[href$="harvest-notes"] > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">5 min read</div>Selector: a[href$="home-espresso"] > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • Mobile_375x667 (2 instances)
    • HTML: <div class="muted">8 min read</div>Selector: a[href$="harvest-notes"] > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
    • HTML: <div class="muted">5 min read</div>Selector: a[href$="home-espresso"] > .body > .muted
      Primary Recommendation:
      Element has insufficient color contrast of 1.76 (foreground color: #c9c2b6, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1
  • Page/File: https://www.example.com/shop/0
    • Desktop_1280x800 (1 instances)
    • HTML: <div class="eyebrow">Signature blend</div>Selector: .eyebrow
      Primary Recommendation:
      Element has insufficient color contrast of 1.98 (foreground color: #b9b2a5, background color: #faf8f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1
    • Mobile_375x667 (1 instances)
    • HTML: <div class="eyebrow">Signature blend</div>Selector: .eyebrow
      Primary Recommendation:
      Element has insufficient color contrast of 1.98 (foreground color: #b9b2a5, background color: #faf8f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1
  • Page/File: https://www.example.com/shop/1
    • Desktop_1280x800 (1 instances)
    • HTML: <div class="eyebrow">Signature blend</div>Selector: .eyebrow
      Primary Recommendation:
      Element has insufficient color contrast of 1.98 (foreground color: #b9b2a5, background color: #faf8f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1
    • Mobile_375x667 (1 instances)
    • HTML: <div class="eyebrow">Signature blend</div>Selector: .eyebrow
      Primary Recommendation:
      Element has insufficient color contrast of 1.98 (foreground color: #b9b2a5, background color: #faf8f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1
  • Page/File: https://www.example.com/shop/2
    • Desktop_1280x800 (1 instances)
    • HTML: <div class="eyebrow">Signature blend</div>Selector: .eyebrow
      Primary Recommendation:
      Element has insufficient color contrast of 1.98 (foreground color: #b9b2a5, background color: #faf8f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1
    • Mobile_375x667 (1 instances)
    • HTML: <div class="eyebrow">Signature blend</div>Selector: .eyebrow
      Primary Recommendation:
      Element has insufficient color contrast of 1.98 (foreground color: #b9b2a5, background color: #faf8f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1
  • Page/File: https://www.example.com/shop/3
    • Desktop_1280x800 (1 instances)
    • HTML: <div class="eyebrow">Signature blend</div>Selector: .eyebrow
      Primary Recommendation:
      Element has insufficient color contrast of 1.98 (foreground color: #b9b2a5, background color: #faf8f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1
    • Mobile_375x667 (1 instances)
    • HTML: <div class="eyebrow">Signature blend</div>Selector: .eyebrow
      Primary Recommendation:
      Element has insufficient color contrast of 1.98 (foreground color: #b9b2a5, background color: #faf8f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1
  • Page/File: https://www.example.com/journal/harvest-notes
    • Desktop_1280x800 (1 instances)
    • HTML: <div class="eyebrow">Journal</div>Selector: .eyebrow
      Primary Recommendation:
      Element has insufficient color contrast of 1.98 (foreground color: #b9b2a5, background color: #faf8f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1
    • Mobile_375x667 (1 instances)
    • HTML: <div class="eyebrow">Journal</div>Selector: .eyebrow
      Primary Recommendation:
      Element has insufficient color contrast of 1.98 (foreground color: #b9b2a5, background color: #faf8f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1
  • Page/File: https://www.example.com/journal/home-espresso
    • Desktop_1280x800 (1 instances)
    • HTML: <div class="eyebrow">Journal</div>Selector: .eyebrow
      Primary Recommendation:
      Element has insufficient color contrast of 1.98 (foreground color: #b9b2a5, background color: #faf8f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1
    • Mobile_375x667 (1 instances)
    • HTML: <div class="eyebrow">Journal</div>Selector: .eyebrow
      Primary Recommendation:
      Element has insufficient color contrast of 1.98 (foreground color: #b9b2a5, background color: #faf8f4, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1

All touch targets must be 24px large, or leave sufficient space

Previous IssueJump to Moderate Issues
Details
DescriptionEnsure touch targets have sufficient size and space
Ruletarget-size (Help)
Initial Impactserious 2.5.8 Target Size (Minimum) (Level AA)
Instances Found24 across 4 page(s)/file(s).

Representative Screenshot from Desktop_1280x800:

Download Thumbnail: Representative screenshot for issue target-size on Desktop_1280x800 View Screenshot
Affected Elements & Instances (24)
  • Page/File: https://www.example.com/shop/0
    • Desktop_1280x800 (3 instances)
    • HTML: <button class="sw" style="background:#c8a77e" aria-label="Kraft"></button>Selector: button[aria-label="Kraft"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
    • HTML: <button class="sw" style="background:#2f5d46" aria-label="Harbour green"></button>Selector: button[aria-label="Harbour green"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
    • HTML: <button class="sw" style="background:#1d2420" aria-label="Charcoal"></button>Selector: button[aria-label="Charcoal"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
    • Mobile_375x667 (3 instances)
    • HTML: <button class="sw" style="background:#c8a77e" aria-label="Kraft"></button>Selector: button[aria-label="Kraft"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
    • HTML: <button class="sw" style="background:#2f5d46" aria-label="Harbour green"></button>Selector: button[aria-label="Harbour green"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
    • HTML: <button class="sw" style="background:#1d2420" aria-label="Charcoal"></button>Selector: button[aria-label="Charcoal"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
  • Page/File: https://www.example.com/shop/1
    • Desktop_1280x800 (3 instances)
    • HTML: <button class="sw" style="background:#c8a77e" aria-label="Kraft"></button>Selector: button[aria-label="Kraft"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
    • HTML: <button class="sw" style="background:#2f5d46" aria-label="Harbour green"></button>Selector: button[aria-label="Harbour green"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
    • HTML: <button class="sw" style="background:#1d2420" aria-label="Charcoal"></button>Selector: button[aria-label="Charcoal"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
    • Mobile_375x667 (3 instances)
    • HTML: <button class="sw" style="background:#c8a77e" aria-label="Kraft"></button>Selector: button[aria-label="Kraft"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
    • HTML: <button class="sw" style="background:#2f5d46" aria-label="Harbour green"></button>Selector: button[aria-label="Harbour green"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
    • HTML: <button class="sw" style="background:#1d2420" aria-label="Charcoal"></button>Selector: button[aria-label="Charcoal"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
  • Page/File: https://www.example.com/shop/2
    • Desktop_1280x800 (3 instances)
    • HTML: <button class="sw" style="background:#c8a77e" aria-label="Kraft"></button>Selector: button[aria-label="Kraft"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
    • HTML: <button class="sw" style="background:#2f5d46" aria-label="Harbour green"></button>Selector: button[aria-label="Harbour green"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
    • HTML: <button class="sw" style="background:#1d2420" aria-label="Charcoal"></button>Selector: button[aria-label="Charcoal"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
    • Mobile_375x667 (3 instances)
    • HTML: <button class="sw" style="background:#c8a77e" aria-label="Kraft"></button>Selector: button[aria-label="Kraft"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
    • HTML: <button class="sw" style="background:#2f5d46" aria-label="Harbour green"></button>Selector: button[aria-label="Harbour green"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
    • HTML: <button class="sw" style="background:#1d2420" aria-label="Charcoal"></button>Selector: button[aria-label="Charcoal"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
  • Page/File: https://www.example.com/shop/3
    • Desktop_1280x800 (3 instances)
    • HTML: <button class="sw" style="background:#c8a77e" aria-label="Kraft"></button>Selector: button[aria-label="Kraft"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
    • HTML: <button class="sw" style="background:#2f5d46" aria-label="Harbour green"></button>Selector: button[aria-label="Harbour green"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
    • HTML: <button class="sw" style="background:#1d2420" aria-label="Charcoal"></button>Selector: button[aria-label="Charcoal"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
    • Mobile_375x667 (3 instances)
    • HTML: <button class="sw" style="background:#c8a77e" aria-label="Kraft"></button>Selector: button[aria-label="Kraft"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
    • HTML: <button class="sw" style="background:#2f5d46" aria-label="Harbour green"></button>Selector: button[aria-label="Harbour green"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
    • HTML: <button class="sw" style="background:#1d2420" aria-label="Charcoal"></button>Selector: button[aria-label="Charcoal"]
      Primary Recommendation:
      Target has insufficient size (16px by 16px, should be at least 24px by 24px)
      Or choose one of these alternatives:
      • Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.

Heading levels should only increase by one

Back to Serious IssuesJump to Minor Issues
Details
DescriptionEnsure the order of headings is semantically correct
Ruleheading-order (Help)
Initial Impactmoderate Best practice
Instances Found6 across 3 page(s)/file(s).

Representative Screenshot from Desktop_1280x800:

Download Thumbnail: Representative screenshot for issue heading-order on Desktop_1280x800 View Screenshot
Affected Elements & Instances (6)
  • Page/File: https://www.example.com/shop
    • Desktop_1280x800 (1 instances)
    • HTML: <h3>Harbour Blend</h3>Selector: .card[href$="shop/0"]:nth-child(1) > .body > h3
      Primary Recommendation:
      Heading order invalid
    • Mobile_375x667 (1 instances)
    • HTML: <h3>Harbour Blend</h3>Selector: .card[href$="shop/0"]:nth-child(1) > .body > h3
      Primary Recommendation:
      Heading order invalid
  • Page/File: https://www.example.com/journal
    • Desktop_1280x800 (1 instances)
    • HTML: <h3>Harvest notes from the highlands</h3>Selector: a[href$="harvest-notes"] > .body > h3
      Primary Recommendation:
      Heading order invalid
    • Mobile_375x667 (1 instances)
    • HTML: <h3>Harvest notes from the highlands</h3>Selector: a[href$="harvest-notes"] > .body > h3
      Primary Recommendation:
      Heading order invalid
  • Page/File: https://www.example.com/journal/harvest-notes
    • Desktop_1280x800 (1 instances)
    • HTML: <h4>A slower harvest this year</h4>Selector: h4
      Primary Recommendation:
      Heading order invalid
    • Mobile_375x667 (1 instances)
    • HTML: <h4>A slower harvest this year</h4>Selector: h4
      Primary Recommendation:
      Heading order invalid

Alternative text of images should not be repeated as text

Back to Moderate Issues
Details
DescriptionEnsure image alternative is not repeated as text
Ruleimage-redundant-alt (Help)
Initial Impactminor Best practice
Instances Found2 across 1 page(s)/file(s).

Representative Screenshot from Desktop_1280x800:

Download Thumbnail: Representative screenshot for issue image-redundant-alt on Desktop_1280x800 View Screenshot
Affected Elements & Instances (2)
  • Page/File: https://www.example.com/journal/harvest-notes
    • Desktop_1280x800 (1 instances)
    • HTML: <img src="data:image/svg+xml;u..." alt="The Harbourline team" width="36" height="36">Selector: img[alt="The Harbourline team"]
      Primary Recommendation:
      Element contains <img> element with alt text that duplicates existing text
    • Mobile_375x667 (1 instances)
    • HTML: <img src="data:image/svg+xml;u..." alt="The Harbourline team" width="36" height="36">Selector: img[alt="The Harbourline team"]
      Primary Recommendation:
      Element contains <img> element with alt text that duplicates existing text

No Axe accessibility issues found.