Accessibility Audit Report
Generated: 2026-03-28T05:34:14.274Z
Tool: axe-core / @axe-core/playwright
Standard: WCAG 2.1 Level AA
Pages audited: 16
Executive Summary
| Metric | Count |
|---|---|
| Pages audited | 16 |
| Total violations | 103 |
| ├─ Critical | 5 |
| ├─ Serious | 9 |
| ├─ Moderate | 89 |
| └─ Minor | 0 |
| Passes (rules that passed) | 711 |
| Incomplete (needs manual review) | 48 |
Page-by-Page Results
Home (index.html)
URL: http://localhost:4000/
Violations: 8
Passes: 45
Incomplete: 3
Violations
- [SERIOUS]
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Affected nodes (20):.samples-list > ul > li:nth-child(1) > strong
HTML:<strong>Application:</strong>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1li:nth-child(1) > ul > li:nth-child(1) > a
HTML:<a href="/samples/application/chatroom.html">Chatroom</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1li:nth-child(1) > ul > li:nth-child(2) > a
HTML:<a href="/samples/application/dashboard.html">Dashboard</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1li:nth-child(1) > ul > li:nth-child(3) > a
HTML:<a href="/samples/application/search.html">Search</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1li:nth-child(1) > ul > li:nth-child(4) > a
HTML:<a href="/samples/application/settings.html">Settings</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1.samples-list > ul > li:nth-child(2) > strong
HTML:<strong>Content-driven:</strong>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1.samples-list > ul > li:nth-child(2) > ul > li:nth-child(1) > a
HTML:<a href="/samples/content-driven/archive.html">Archive</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1.samples-list > ul > li:nth-child(2) > ul > li:nth-child(2) > a
HTML:<a href="/samples/content-driven/article.html">Article</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1li:nth-child(2) > ul > li:nth-child(3) > a
HTML:<a href="/samples/content-driven/post.html">Post</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1li:nth-child(2) > ul > li:nth-child(4) > a
HTML:<a href="/samples/content-driven/profile.html">Profile</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1.samples-list > ul > li:nth-child(3) > strong
HTML:<strong>Knowledge:</strong>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1a[href$="docs.html"]
HTML:<a href="/samples/knowledge/docs.html">Docs</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1a[href$="faq.html"]
HTML:<a href="/samples/knowledge/faq.html">FAQ</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1.samples-list > ul > li:nth-child(4) > strong
HTML:<strong>Marketing:</strong>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1.samples-list > ul > li:nth-child(4) > ul > li:nth-child(1) > a
HTML:<a href="/samples/marketing/landing.html">Landing</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1.samples-list > ul > li:nth-child(4) > ul > li:nth-child(2) > a
HTML:<a href="/samples/marketing/gallery.html">Gallery</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1a[href$="form.html"]
HTML:<a href="/samples/marketing/form.html">Form</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1.samples-list > ul > li:nth-child(5) > strong
HTML:<strong>Utility:</strong>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1a[href$="404.html"]
HTML:<a href="/samples/utility/404.html">404</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1a[href$="splash.html"]
HTML:<a href="/samples/utility/splash.html">Splash</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
- [MODERATE]
landmark-banner-is-top-level– Ensure the banner landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-banner-is-top-level?application=playwright
Affected nodes (1):.genesis-header
HTML:<header class="genesis-header">
Fix: Fix any of the following: The banner landmark is contained in another landmark.
- [MODERATE]
landmark-contentinfo-is-top-level– Ensure the contentinfo landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-contentinfo-is-top-level?application=playwright
Affected nodes (1):footer
HTML:<footer class="genesis-footer">
Fix: Fix any of the following: The contentinfo landmark is contained in another landmark.
- [MODERATE]
landmark-main-is-top-level– Ensure the main landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-main-is-top-level?application=playwright
Affected nodes (1):.genesis-demo
HTML:<main class="genesis-demo">
Fix: Fix any of the following: The main landmark is contained in another landmark.
- [MODERATE]
landmark-no-duplicate-banner– Ensure the document has at most one banner landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-banner?application=playwright
Affected nodes (1):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: Document has more than one banner landmark
- [MODERATE]
landmark-no-duplicate-contentinfo– Ensure the document has at most one contentinfo landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-contentinfo?application=playwright
Affected nodes (1):genesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: Document has more than one contentinfo landmark
- [MODERATE]
landmark-no-duplicate-main– Ensure the document has at most one main landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-main?application=playwright
Affected nodes (1):#skip-target
HTML:<main id="skip-target" tabindex="-1" class="genesis-main">
Fix: Fix any of the following: Document has more than one main landmark
- [MODERATE]
landmark-unique– Ensure landmarks are unique
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-unique?application=playwright
Affected nodes (3):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable#skip-target
HTML:<main id="skip-target" tabindex="-1" class="genesis-main">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishablegenesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
Incomplete (needs manual review)
-
aria-prohibited-attr– Ensure ARIA attributes are not prohibited for an element’s role
Help: https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr?application=playwright
Nodes: 1 -
aria-valid-attr-value– Ensure all ARIA attributes have valid values
Help: https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=playwright
Nodes: 5 -
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Nodes: 114
Application – Chatroom
URL: http://localhost:4000/samples/application/chatroom.html
Violations: 6
Passes: 45
Incomplete: 3
Violations
- [MODERATE]
landmark-banner-is-top-level– Ensure the banner landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-banner-is-top-level?application=playwright
Affected nodes (1):.genesis-header
HTML:<header class="genesis-header">
Fix: Fix any of the following: The banner landmark is contained in another landmark.
- [MODERATE]
landmark-contentinfo-is-top-level– Ensure the contentinfo landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-contentinfo-is-top-level?application=playwright
Affected nodes (1):.genesis-footer
HTML:<footer class="genesis-footer">
Fix: Fix any of the following: The contentinfo landmark is contained in another landmark.
- [MODERATE]
landmark-no-duplicate-banner– Ensure the document has at most one banner landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-banner?application=playwright
Affected nodes (1):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: Document has more than one banner landmark
- [MODERATE]
landmark-no-duplicate-contentinfo– Ensure the document has at most one contentinfo landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-contentinfo?application=playwright
Affected nodes (1):.chatroom-input
HTML:<footer class="chatroom-input">
Fix: Fix any of the following: Document has more than one contentinfo landmark
- [MODERATE]
landmark-unique– Ensure landmarks are unique
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-unique?application=playwright
Affected nodes (2):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishablegenesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
- [SERIOUS]
scrollable-region-focusable– Ensure elements that have scrollable content are accessible by keyboard
Help: https://dequeuniversity.com/rules/axe/4.11/scrollable-region-focusable?application=playwright
Affected nodes (1):.chatroom-messages
HTML:<div class="chatroom-messages">
Fix: Fix any of the following: Element should have focusable content Element should be focusable
Incomplete (needs manual review)
-
aria-prohibited-attr– Ensure ARIA attributes are not prohibited for an element’s role
Help: https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr?application=playwright
Nodes: 1 -
aria-valid-attr-value– Ensure all ARIA attributes have valid values
Help: https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=playwright
Nodes: 5 -
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Nodes: 21
Application – Dashboard
URL: http://localhost:4000/samples/application/dashboard.html
Violations: 7
Passes: 47
Incomplete: 3
Violations
- [MODERATE]
heading-order– Ensure the order of headings is semantically correct
Help: https://dequeuniversity.com/rules/axe/4.11/heading-order?application=playwright
Affected nodes (1):article[data-widget-id="widget-0"] > .dashboard-widget__header > h3
HTML:<h3 class="dashboard-widget__title">Users</h3>
Fix: Fix any of the following: Heading order invalid
- [MODERATE]
landmark-banner-is-top-level– Ensure the banner landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-banner-is-top-level?application=playwright
Affected nodes (1):.genesis-header
HTML:<header class="genesis-header">
Fix: Fix any of the following: The banner landmark is contained in another landmark.
- [MODERATE]
landmark-complementary-is-top-level– Ensure the complementary landmark or aside is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-complementary-is-top-level?application=playwright
Affected nodes (1):aside
HTML:<aside class="dashboard__side-panel">
Fix: Fix any of the following: The null landmark is contained in another landmark.
- [MODERATE]
landmark-contentinfo-is-top-level– Ensure the contentinfo landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-contentinfo-is-top-level?application=playwright
Affected nodes (1):footer
HTML:<footer class="genesis-footer">
Fix: Fix any of the following: The contentinfo landmark is contained in another landmark.
- [MODERATE]
landmark-no-duplicate-banner– Ensure the document has at most one banner landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-banner?application=playwright
Affected nodes (1):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: Document has more than one banner landmark
- [MODERATE]
landmark-no-duplicate-contentinfo– Ensure the document has at most one contentinfo landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-contentinfo?application=playwright
Affected nodes (1):genesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: Document has more than one contentinfo landmark
- [MODERATE]
landmark-unique– Ensure landmarks are unique
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-unique?application=playwright
Affected nodes (2):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishablegenesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
Incomplete (needs manual review)
-
aria-prohibited-attr– Ensure ARIA attributes are not prohibited for an element’s role
Help: https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr?application=playwright
Nodes: 2 -
aria-valid-attr-value– Ensure all ARIA attributes have valid values
Help: https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=playwright
Nodes: 5 -
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Nodes: 53
Application – Search
URL: http://localhost:4000/samples/application/search.html
Violations: 9
Passes: 44
Incomplete: 3
Violations
- [SERIOUS]
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Affected nodes (19):a[href$="layouts"]
HTML:<a href="/docs/layouts">Getting Started with <mark>Jekyll</mark> <mark>Layouts</mark></a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 27.0pt (36px), font weight: normal). Expected contrast ratio of 3:1article:nth-child(1) > .search-result__meta > span:nth-child(1)
HTML:<span><i class="far fa-folder" aria-hidden="true"></i> Documentation</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1article:nth-child(1) > .search-result__meta > span:nth-child(2)
HTML:<span><i class="far fa-calendar" aria-hidden="true"></i> Jan 15, 2024</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1article:nth-child(1) > .search-result__meta > span:nth-child(3)
HTML:<span><i class="far fa-user" aria-hidden="true"></i> John Doe</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1a[href$="layout-taxonomy"]
HTML:<a href="/docs/layout-taxonomy"><mark>Layout</mark> Taxonomy</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 27.0pt (36px), font weight: normal). Expected contrast ratio of 3:1article:nth-child(2) > .search-result__meta > span:nth-child(1)
HTML:<span><i class="far fa-folder" aria-hidden="true"></i> Documentation</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1article:nth-child(2) > .search-result__meta > span:nth-child(2)
HTML:<span><i class="far fa-calendar" aria-hidden="true"></i> Jan 12, 2024</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1article:nth-child(2) > .search-result__meta > span:nth-child(3)
HTML:<span><i class="far fa-user" aria-hidden="true"></i> Sarah Johnson</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1a[href$="post"]
HTML:<a href="/samples/post">Sample Post Using <mark>Layout</mark></a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 27.0pt (36px), font weight: normal). Expected contrast ratio of 3:1article:nth-child(3) > .search-result__meta > span:nth-child(1)
HTML:<span><i class="far fa-folder" aria-hidden="true"></i> Sample</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1article:nth-child(3) > .search-result__meta > span:nth-child(2)
HTML:<span><i class="far fa-calendar" aria-hidden="true"></i> Jan 15, 2024</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1a[href$="quick-reference"]
HTML:<a href="/docs/quick-reference"><mark>Layout</mark> Quick Reference</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 27.0pt (36px), font weight: normal). Expected contrast ratio of 3:1article:nth-child(4) > .search-result__meta > span:nth-child(1)
HTML:<span><i class="far fa-folder" aria-hidden="true"></i> Documentation</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1article:nth-child(4) > .search-result__meta > span:nth-child(2)
HTML:<span><i class="far fa-calendar" aria-hidden="true"></i> Jan 20, 2024</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1a[href$="implementation-guide"]
HTML:<a href="/docs/implementation-guide">Implementation Guide</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 27.0pt (36px), font weight: normal). Expected contrast ratio of 3:1article:nth-child(5) > .search-result__meta > span:nth-child(1)
HTML:<span><i class="far fa-folder" aria-hidden="true"></i> Documentation</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1article:nth-child(5) > .search-result__meta > span:nth-child(2)
HTML:<span><i class="far fa-calendar" aria-hidden="true"></i> Jan 18, 2024</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1article:nth-child(5) > .search-result__meta > span:nth-child(3)
HTML:<span><i class="far fa-user" aria-hidden="true"></i> Mike Park</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1.search-pagination__link[href="#"]:nth-child(5)
HTML:<a href="#" class="search-pagination__link">Next</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
- [MODERATE]
landmark-banner-is-top-level– Ensure the banner landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-banner-is-top-level?application=playwright
Affected nodes (1):.genesis-header
HTML:<header class="genesis-header">
Fix: Fix any of the following: The banner landmark is contained in another landmark.
- [MODERATE]
landmark-complementary-is-top-level– Ensure the complementary landmark or aside is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-complementary-is-top-level?application=playwright
Affected nodes (1):aside
HTML:<aside class="search__sidebar" aria-label="Search filters">
Fix: Fix any of the following: The complementary landmark is contained in another landmark.
- [MODERATE]
landmark-contentinfo-is-top-level– Ensure the contentinfo landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-contentinfo-is-top-level?application=playwright
Affected nodes (1):footer
HTML:<footer class="genesis-footer">
Fix: Fix any of the following: The contentinfo landmark is contained in another landmark.
- [MODERATE]
landmark-no-duplicate-banner– Ensure the document has at most one banner landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-banner?application=playwright
Affected nodes (1):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: Document has more than one banner landmark
- [MODERATE]
landmark-no-duplicate-contentinfo– Ensure the document has at most one contentinfo landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-contentinfo?application=playwright
Affected nodes (1):genesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: Document has more than one contentinfo landmark
- [MODERATE]
landmark-unique– Ensure landmarks are unique
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-unique?application=playwright
Affected nodes (2):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishablegenesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
- [SERIOUS]
link-in-text-block– Ensure links are distinguished from surrounding text in a way that does not rely on color
Help: https://dequeuniversity.com/rules/axe/4.11/link-in-text-block?application=playwright
Affected nodes (4):.search-pagination__link--active
HTML:<a href="#" class="search-pagination__link search-pagination__link--active" aria-current="page">1</a>
Fix: Fix any of the following: The link has insufficient color contrast of 2.62:1 with the surrounding text. (Minimum contrast is 3:1, link text: #c99500, surrounding text: #fdfcf8) The link has no styling (such as underline) to distinguish it from the surrounding text.search-pagination__link[href="#"]:nth-child(3)
HTML:<a href="#" class="search-pagination__link">2</a>
Fix: Fix any of the following: The link has insufficient color contrast of 2.62:1 with the surrounding text. (Minimum contrast is 3:1, link text: #c99500, surrounding text: #fdfcf8) The link has no styling (such as underline) to distinguish it from the surrounding text.search-pagination__link[href="#"]:nth-child(4)
HTML:<a href="#" class="search-pagination__link">3</a>
Fix: Fix any of the following: The link has insufficient color contrast of 2.62:1 with the surrounding text. (Minimum contrast is 3:1, link text: #c99500, surrounding text: #fdfcf8) The link has no styling (such as underline) to distinguish it from the surrounding text.search-pagination__link[href="#"]:nth-child(5)
HTML:<a href="#" class="search-pagination__link">Next</a>
Fix: Fix any of the following: The link has insufficient color contrast of 2.62:1 with the surrounding text. (Minimum contrast is 3:1, link text: #c99500, surrounding text: #fdfcf8) The link has no styling (such as underline) to distinguish it from the surrounding text
- [MODERATE]
page-has-heading-one– Ensure that the page, or at least one of its frames contains a level-one heading
Help: https://dequeuniversity.com/rules/axe/4.11/page-has-heading-one?application=playwright
Affected nodes (1):html
HTML:<html lang="en-US">
Fix: Fix all of the following: Page must have a level-one heading
Incomplete (needs manual review)
-
aria-prohibited-attr– Ensure ARIA attributes are not prohibited for an element’s role
Help: https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr?application=playwright
Nodes: 1 -
aria-valid-attr-value– Ensure all ARIA attributes have valid values
Help: https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=playwright
Nodes: 5 -
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Nodes: 13
Application – Settings
URL: http://localhost:4000/samples/application/settings.html
Violations: 8
Passes: 46
Incomplete: 3
Violations
- [CRITICAL]
aria-required-parent– Ensure elements with an ARIA role that require parent roles are contained by them
Help: https://dequeuniversity.com/rules/axe/4.11/aria-required-parent?application=playwright
Affected nodes (5):-
.settings-nav-link--active
HTML: `<a class=”settings-nav-link settings-nav-link–active” href=”#profile” data-tab-toggle=”” aria-current=”page” role=”tab” aria-selected=”true” tabindex=”0”><i class="fas fa-user" aria-hidden="true"></i> Profile </a>` Fix: Fix any of the following: Required ARIA parent role not present: tablist -
a[href$="#security"]
HTML: `<a class=”settings-nav-link” href=”#security” data-tab-toggle=”” role=”tab” aria-selected=”false” tabindex=”-1”><i class="fas fa-lock" aria-hidden="true"></i> Security </a>` Fix: Fix any of the following: Required ARIA parent role not present: tablist -
a[href$="#notifications"]
HTML: `<a class=”settings-nav-link” href=”#notifications” data-tab-toggle=”” role=”tab” aria-selected=”false” tabindex=”-1”><i class="fas fa-bell" aria-hidden="true"></i> Notifications </a>` Fix: Fix any of the following: Required ARIA parent role not present: tablist -
a[href$="#privacy"]
HTML: `<a class=”settings-nav-link” href=”#privacy” data-tab-toggle=”” role=”tab” aria-selected=”false” tabindex=”-1”><i class="fas fa-shield-alt" aria-hidden="true"></i> Privacy </a>` Fix: Fix any of the following: Required ARIA parent role not present: tablist -
a[href$="#preferences"]
HTML: `<a class=”settings-nav-link” href=”#preferences” data-tab-toggle=”” role=”tab” aria-selected=”false” tabindex=”-1”><i class="fas fa-cog" aria-hidden="true"></i> Preferences </a>` Fix: Fix any of the following: Required ARIA parent role not present: tablist
-
- [MODERATE]
heading-order– Ensure the order of headings is semantically correct
Help: https://dequeuniversity.com/rules/axe/4.11/heading-order?application=playwright
Affected nodes (1):#profile > genesis-cognition[intent="motive"] > h3
HTML:<h3 class="settings-pane__heading">Profile</h3>
Fix: Fix any of the following: Heading order invalid
- [MODERATE]
landmark-banner-is-top-level– Ensure the banner landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-banner-is-top-level?application=playwright
Affected nodes (1):header
HTML:<header class="genesis-header">
Fix: Fix any of the following: The banner landmark is contained in another landmark.
- [MODERATE]
landmark-complementary-is-top-level– Ensure the complementary landmark or aside is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-complementary-is-top-level?application=playwright
Affected nodes (1):aside
HTML:<aside class="settings-sidebar" aria-label="Settings navigation">
Fix: Fix any of the following: The complementary landmark is contained in another landmark.
- [MODERATE]
landmark-contentinfo-is-top-level– Ensure the contentinfo landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-contentinfo-is-top-level?application=playwright
Affected nodes (1):footer
HTML:<footer class="genesis-footer">
Fix: Fix any of the following: The contentinfo landmark is contained in another landmark.
- [MODERATE]
landmark-no-duplicate-banner– Ensure the document has at most one banner landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-banner?application=playwright
Affected nodes (1):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: Document has more than one banner landmark
- [MODERATE]
landmark-no-duplicate-contentinfo– Ensure the document has at most one contentinfo landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-contentinfo?application=playwright
Affected nodes (1):genesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: Document has more than one contentinfo landmark
- [MODERATE]
landmark-unique– Ensure landmarks are unique
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-unique?application=playwright
Affected nodes (3):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishablegenesis-environment[logic="navigation-sidebar"]
HTML:<genesis-environment logic="navigation-sidebar" role="navigation" aria-label="Sidebar navigation" data-logic="navigation-sidebar" data-viewport="desktop">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishablegenesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
Incomplete (needs manual review)
-
aria-prohibited-attr– Ensure ARIA attributes are not prohibited for an element’s role
Help: https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr?application=playwright
Nodes: 1 -
aria-valid-attr-value– Ensure all ARIA attributes have valid values
Help: https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=playwright
Nodes: 5 -
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Nodes: 23
Content-Driven – Archive
URL: http://localhost:4000/samples/content-driven/archive.html
Violations: 7
Passes: 45
Incomplete: 3
Violations
- [SERIOUS]
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Affected nodes (12):article:nth-child(3) > .archive-item__content > h3 > .archive-item__link
HTML:<a href="/samples/content-driven/sample-post.html" class="archive-item__link">Getting Started with Jekyll Layouts</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 27.0pt (36px), font weight: normal). Expected contrast ratio of 3:1time[datetime="2024-01-15"]
HTML:<time datetime="2024-01-15" class="archive-item__date">January 15, 2024</time>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1article:nth-child(3) > .archive-item__content > .archive-item__tags > .archive-item__tag:nth-child(1)
HTML:<span class="archive-item__tag">Jekyll</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1article:nth-child(3) > .archive-item__content > .archive-item__tags > .archive-item__tag:nth-child(2)
HTML:<span class="archive-item__tag">Tutorial</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1article:nth-child(4) > .archive-item__content > h3 > .archive-item__link
HTML:<a href="/samples/content-driven/sample-article.html" class="archive-item__link">The Architecture of Modern Web Layouts</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 27.0pt (36px), font weight: normal). Expected contrast ratio of 3:1time[datetime="2024-01-20"]
HTML:<time datetime="2024-01-20" class="archive-item__date">January 20, 2024</time>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1article:nth-child(4) > .archive-item__content > .archive-item__tags > .archive-item__tag:nth-child(1)
HTML:<span class="archive-item__tag">CSS</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1article:nth-child(4) > .archive-item__content > .archive-item__tags > .archive-item__tag:nth-child(2)
HTML:<span class="archive-item__tag">Architecture</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1a[href="#"]
HTML:<a href="#" class="archive-item__link">Building Responsive Galleries</a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.69 (foreground color: #c99500, background color: #ffffff, font size: 27.0pt (36px), font weight: normal). Expected contrast ratio of 3:1time[datetime="2024-01-10"]
HTML:<time datetime="2024-01-10" class="archive-item__date">January 10, 2024</time>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1article:nth-child(5) > .archive-item__content > .archive-item__tags > .archive-item__tag:nth-child(1)
HTML:<span class="archive-item__tag">Gallery</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1article:nth-child(5) > .archive-item__content > .archive-item__tags > .archive-item__tag:nth-child(2)
HTML:<span class="archive-item__tag">Responsive</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
- [MODERATE]
heading-order– Ensure the order of headings is semantically correct
Help: https://dequeuniversity.com/rules/axe/4.11/heading-order?application=playwright
Affected nodes (1):article:nth-child(3) > .archive-item__content > h3
HTML:<h3 class="archive-item__title"> <a href="/samples/content-driven/sample-post.html" class="archive-item__link">Getting Started with Jekyll Layouts</a> </h3>
Fix: Fix any of the following: Heading order invalid
- [MODERATE]
landmark-banner-is-top-level– Ensure the banner landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-banner-is-top-level?application=playwright
Affected nodes (1):.genesis-header
HTML:<header class="genesis-header">
Fix: Fix any of the following: The banner landmark is contained in another landmark.
- [MODERATE]
landmark-contentinfo-is-top-level– Ensure the contentinfo landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-contentinfo-is-top-level?application=playwright
Affected nodes (1):footer
HTML:<footer class="genesis-footer">
Fix: Fix any of the following: The contentinfo landmark is contained in another landmark.
- [MODERATE]
landmark-no-duplicate-banner– Ensure the document has at most one banner landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-banner?application=playwright
Affected nodes (1):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: Document has more than one banner landmark
- [MODERATE]
landmark-no-duplicate-contentinfo– Ensure the document has at most one contentinfo landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-contentinfo?application=playwright
Affected nodes (1):genesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: Document has more than one contentinfo landmark
- [MODERATE]
landmark-unique– Ensure landmarks are unique
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-unique?application=playwright
Affected nodes (2):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishablegenesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
Incomplete (needs manual review)
-
aria-prohibited-attr– Ensure ARIA attributes are not prohibited for an element’s role
Help: https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr?application=playwright
Nodes: 1 -
aria-valid-attr-value– Ensure all ARIA attributes have valid values
Help: https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=playwright
Nodes: 5 -
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Nodes: 11
Content-Driven – Article
URL: http://localhost:4000/samples/content-driven/article.html
Violations: 4
Passes: 44
Incomplete: 3
Violations
- [MODERATE]
landmark-banner-is-top-level– Ensure the banner landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-banner-is-top-level?application=playwright
Affected nodes (1):.genesis-header
HTML:<header class="genesis-header">
Fix: Fix any of the following: The banner landmark is contained in another landmark.
- [MODERATE]
landmark-contentinfo-is-top-level– Ensure the contentinfo landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-contentinfo-is-top-level?application=playwright
Affected nodes (1):genesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: The contentinfo landmark is contained in another landmark.
- [MODERATE]
landmark-no-duplicate-banner– Ensure the document has at most one banner landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-banner?application=playwright
Affected nodes (1):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: Document has more than one banner landmark
- [MODERATE]
landmark-unique– Ensure landmarks are unique
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-unique?application=playwright
Affected nodes (1):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
Incomplete (needs manual review)
-
aria-prohibited-attr– Ensure ARIA attributes are not prohibited for an element’s role
Help: https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr?application=playwright
Nodes: 1 -
aria-valid-attr-value– Ensure all ARIA attributes have valid values
Help: https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=playwright
Nodes: 5 -
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Nodes: 17
Content-Driven – Post
URL: http://localhost:4000/samples/content-driven/post.html
Violations: 6
Passes: 42
Incomplete: 3
Violations
- [SERIOUS]
aria-prohibited-attr– Ensure ARIA attributes are not prohibited for an element’s role
Help: https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr?application=playwright
Affected nodes (2):span[aria-label="Categories"]
HTML:<span class="post__taxonomy-label" aria-label="Categories"> <i class="fas fa-folder" aria-hidden="true"></i> </span>
Fix: Fix all of the following: aria-label attribute cannot be used on a span with no valid role attribute.span[aria-label="Tags"]
HTML:<span class="post__taxonomy-label" aria-label="Tags"> <i class="fas fa-tags" aria-hidden="true"></i> </span>
Fix: Fix all of the following: aria-label attribute cannot be used on a span with no valid role attribute.
- [MODERATE]
landmark-banner-is-top-level– Ensure the banner landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-banner-is-top-level?application=playwright
Affected nodes (1):.genesis-header
HTML:<header class="genesis-header">
Fix: Fix any of the following: The banner landmark is contained in another landmark.
- [MODERATE]
landmark-contentinfo-is-top-level– Ensure the contentinfo landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-contentinfo-is-top-level?application=playwright
Affected nodes (1):.genesis-footer
HTML:<footer class="genesis-footer">
Fix: Fix any of the following: The contentinfo landmark is contained in another landmark.
- [MODERATE]
landmark-no-duplicate-banner– Ensure the document has at most one banner landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-banner?application=playwright
Affected nodes (1):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: Document has more than one banner landmark
- [MODERATE]
landmark-no-duplicate-contentinfo– Ensure the document has at most one contentinfo landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-contentinfo?application=playwright
Affected nodes (1):.post__footer-cta
HTML: `<footer class=”post__footer-cta”>
<genesis-cognition intent=”axiom”> <h2 class=”post__cta-title”>Share this post</h2> </genesis-cognition>
<genesis-synapse vector=”execute”> <a href=”#share” class=”post__cta-button”>Share</a> </genesis-synapse>
</footer>`
Fix: Fix any of the following: Document has more than one contentinfo landmark
- [MODERATE]
landmark-unique– Ensure landmarks are unique
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-unique?application=playwright
Affected nodes (2):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishablegenesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
Incomplete (needs manual review)
-
aria-prohibited-attr– Ensure ARIA attributes are not prohibited for an element’s role
Help: https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr?application=playwright
Nodes: 1 -
aria-valid-attr-value– Ensure all ARIA attributes have valid values
Help: https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=playwright
Nodes: 5 -
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Nodes: 19
Content-Driven – Profile
URL: http://localhost:4000/samples/content-driven/profile.html
Violations: 5
Passes: 42
Incomplete: 3
Violations
- [MODERATE]
landmark-banner-is-top-level– Ensure the banner landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-banner-is-top-level?application=playwright
Affected nodes (1):.genesis-header
HTML:<header class="genesis-header">
Fix: Fix any of the following: The banner landmark is contained in another landmark.
- [MODERATE]
landmark-contentinfo-is-top-level– Ensure the contentinfo landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-contentinfo-is-top-level?application=playwright
Affected nodes (1):footer
HTML:<footer class="genesis-footer">
Fix: Fix any of the following: The contentinfo landmark is contained in another landmark.
- [MODERATE]
landmark-no-duplicate-banner– Ensure the document has at most one banner landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-banner?application=playwright
Affected nodes (1):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: Document has more than one banner landmark
- [MODERATE]
landmark-no-duplicate-contentinfo– Ensure the document has at most one contentinfo landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-contentinfo?application=playwright
Affected nodes (1):genesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: Document has more than one contentinfo landmark
- [MODERATE]
landmark-unique– Ensure landmarks are unique
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-unique?application=playwright
Affected nodes (2):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishablegenesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
Incomplete (needs manual review)
-
aria-prohibited-attr– Ensure ARIA attributes are not prohibited for an element’s role
Help: https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr?application=playwright
Nodes: 1 -
aria-valid-attr-value– Ensure all ARIA attributes have valid values
Help: https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=playwright
Nodes: 5 -
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Nodes: 18
Knowledge – Docs
URL: http://localhost:4000/samples/knowledge/docs.html
Violations: 6
Passes: 45
Incomplete: 3
Violations
- [SERIOUS]
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Affected nodes (6):a[href$="getting-started"]
HTML:<a class="docs-nav-link" href="/docs/getting-started"> Getting Started </a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.51 (foreground color: #00a0ff, background color: #eef3f4, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1a[href$="layouts"]
HTML:<a class="docs-nav-link" href="/docs/layouts"> Layouts </a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.51 (foreground color: #00a0ff, background color: #eef3f4, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1a[href$="base"]
HTML:<a class="docs-nav-link" href="/docs/layouts/base"> Base Templates </a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.51 (foreground color: #00a0ff, background color: #eef3f4, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1a[href$="specialized"]
HTML:<a class="docs-nav-link" href="/docs/layouts/specialized"> Specialized </a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.51 (foreground color: #00a0ff, background color: #eef3f4, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1a[href$="components"]
HTML:<a class="docs-nav-link" href="/docs/components"> Components </a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.51 (foreground color: #00a0ff, background color: #eef3f4, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1a[href$="customization"]
HTML:<a class="docs-nav-link" href="/docs/customization"> Customization </a>
Fix: Fix any of the following: Element has insufficient color contrast of 2.51 (foreground color: #00a0ff, background color: #eef3f4, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
- [MODERATE]
landmark-banner-is-top-level– Ensure the banner landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-banner-is-top-level?application=playwright
Affected nodes (1):header
HTML:<header class="genesis-header">
Fix: Fix any of the following: The banner landmark is contained in another landmark.
- [MODERATE]
landmark-contentinfo-is-top-level– Ensure the contentinfo landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-contentinfo-is-top-level?application=playwright
Affected nodes (1):footer
HTML:<footer class="genesis-footer">
Fix: Fix any of the following: The contentinfo landmark is contained in another landmark.
- [MODERATE]
landmark-no-duplicate-banner– Ensure the document has at most one banner landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-banner?application=playwright
Affected nodes (1):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: Document has more than one banner landmark
- [MODERATE]
landmark-no-duplicate-contentinfo– Ensure the document has at most one contentinfo landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-contentinfo?application=playwright
Affected nodes (1):genesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: Document has more than one contentinfo landmark
- [MODERATE]
landmark-unique– Ensure landmarks are unique
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-unique?application=playwright
Affected nodes (2):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishablegenesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
Incomplete (needs manual review)
-
aria-prohibited-attr– Ensure ARIA attributes are not prohibited for an element’s role
Help: https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr?application=playwright
Nodes: 1 -
aria-valid-attr-value– Ensure all ARIA attributes have valid values
Help: https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=playwright
Nodes: 5 -
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Nodes: 18
Knowledge – FAQ
URL: http://localhost:4000/samples/knowledge/faq.html
Violations: 8
Passes: 46
Incomplete: 3
Violations
- [CRITICAL]
aria-required-children– Ensure elements with an ARIA role that require child roles contain them
Help: https://dequeuniversity.com/rules/axe/4.11/aria-required-children?application=playwright
Affected nodes (1):genesis-navigation
HTML:<genesis-navigation type="tabs" data-type="tabs" data-orientation="horizontal" role="tablist">
Fix: Fix any of the following: Element has children which are not allowed: [role=group]
- [CRITICAL]
aria-required-parent– Ensure elements with an ARIA role that require parent roles are contained by them
Help: https://dequeuniversity.com/rules/axe/4.11/aria-required-parent?application=playwright
Affected nodes (4):.faq__category--active
HTML:<button type="button" class="faq__category faq__category--active" role="tab" tabindex="0" aria-selected="false">All</button>
Fix: Fix any of the following: Required ARIA parent role not present: tablist.faq__category[role="tab"][type="button"]:nth-child(2)
HTML:<button type="button" class="faq__category" role="tab" tabindex="-1" aria-selected="false">General</button>
Fix: Fix any of the following: Required ARIA parent role not present: tablist.faq__category[role="tab"][type="button"]:nth-child(3)
HTML:<button type="button" class="faq__category" role="tab" tabindex="-1" aria-selected="false">Technical</button>
Fix: Fix any of the following: Required ARIA parent role not present: tablist.faq__category[role="tab"][type="button"]:nth-child(4)
HTML:<button type="button" class="faq__category" role="tab" tabindex="-1" aria-selected="false">Licensing</button>
Fix: Fix any of the following: Required ARIA parent role not present: tablist
- [MODERATE]
heading-order– Ensure the order of headings is semantically correct
Help: https://dequeuniversity.com/rules/axe/4.11/heading-order?application=playwright
Affected nodes (1):#faq-1
HTML:<h3 class="faq-item__header" id="faq-1"> <button class="faq-item__button" type="button" data-collapse-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1"> What ships with the theme? </button> </h3>
Fix: Fix any of the following: Heading order invalid
- [MODERATE]
landmark-banner-is-top-level– Ensure the banner landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-banner-is-top-level?application=playwright
Affected nodes (1):.genesis-header
HTML:<header class="genesis-header">
Fix: Fix any of the following: The banner landmark is contained in another landmark.
- [MODERATE]
landmark-contentinfo-is-top-level– Ensure the contentinfo landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-contentinfo-is-top-level?application=playwright
Affected nodes (1):.genesis-footer
HTML:<footer class="genesis-footer">
Fix: Fix any of the following: The contentinfo landmark is contained in another landmark.
- [MODERATE]
landmark-no-duplicate-banner– Ensure the document has at most one banner landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-banner?application=playwright
Affected nodes (1):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: Document has more than one banner landmark
- [MODERATE]
landmark-no-duplicate-contentinfo– Ensure the document has at most one contentinfo landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-contentinfo?application=playwright
Affected nodes (1):.faq__footer-cta
HTML:<footer class="faq__footer-cta">
Fix: Fix any of the following: Document has more than one contentinfo landmark
- [MODERATE]
landmark-unique– Ensure landmarks are unique
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-unique?application=playwright
Affected nodes (2):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishablegenesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
Incomplete (needs manual review)
-
aria-prohibited-attr– Ensure ARIA attributes are not prohibited for an element’s role
Help: https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr?application=playwright
Nodes: 9 -
aria-valid-attr-value– Ensure all ARIA attributes have valid values
Help: https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=playwright
Nodes: 5 -
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Nodes: 28
Marketing – Landing
URL: http://localhost:4000/samples/marketing/landing.html
Violations: 6
Passes: 44
Incomplete: 3
Violations
- [SERIOUS]
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Affected nodes (2):blockquote:nth-child(1) > genesis-cognition[intent="gloss"] > cite
HTML:<cite>— Alex Chen, Front-end Engineer</cite>
Fix: Fix any of the following: Element has insufficient color contrast of 1.04 (foreground color: #fdfcf8, background color: #faf7ec, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1blockquote:nth-child(2) > genesis-cognition[intent="gloss"] > cite
HTML:<cite>— Maria Garcia, Design Systems Lead</cite>
Fix: Fix any of the following: Element has insufficient color contrast of 1.04 (foreground color: #fdfcf8, background color: #faf7ec, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
- [MODERATE]
landmark-banner-is-top-level– Ensure the banner landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-banner-is-top-level?application=playwright
Affected nodes (1):.genesis-header
HTML:<header class="genesis-header">
Fix: Fix any of the following: The banner landmark is contained in another landmark.
- [MODERATE]
landmark-contentinfo-is-top-level– Ensure the contentinfo landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-contentinfo-is-top-level?application=playwright
Affected nodes (1):.genesis-footer
HTML:<footer class="genesis-footer">
Fix: Fix any of the following: The contentinfo landmark is contained in another landmark.
- [MODERATE]
landmark-no-duplicate-banner– Ensure the document has at most one banner landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-banner?application=playwright
Affected nodes (1):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: Document has more than one banner landmark
- [MODERATE]
landmark-no-duplicate-contentinfo– Ensure the document has at most one contentinfo landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-contentinfo?application=playwright
Affected nodes (1):.landing__footer-cta
HTML:<footer class="landing__footer-cta">
Fix: Fix any of the following: Document has more than one contentinfo landmark
- [MODERATE]
landmark-unique– Ensure landmarks are unique
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-unique?application=playwright
Affected nodes (2):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishablegenesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
Incomplete (needs manual review)
-
aria-prohibited-attr– Ensure ARIA attributes are not prohibited for an element’s role
Help: https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr?application=playwright
Nodes: 1 -
aria-valid-attr-value– Ensure all ARIA attributes have valid values
Help: https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=playwright
Nodes: 5 -
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Nodes: 10
Marketing – Gallery
URL: http://localhost:4000/samples/marketing/gallery.html
Violations: 8
Passes: 42
Incomplete: 3
Violations
- [CRITICAL]
aria-required-children– Ensure elements with an ARIA role that require child roles contain them
Help: https://dequeuniversity.com/rules/axe/4.11/aria-required-children?application=playwright
Affected nodes (1):genesis-navigation
HTML:<genesis-navigation type="tabs" data-type="tabs" data-orientation="horizontal" role="tablist">
Fix: Fix any of the following: Element has children which are not allowed: [role=group]
- [CRITICAL]
aria-required-parent– Ensure elements with an ARIA role that require parent roles are contained by them
Help: https://dequeuniversity.com/rules/axe/4.11/aria-required-parent?application=playwright
Affected nodes (4):.gallery__filter--active
HTML:<button class="gallery__filter gallery__filter--active" data-filter="all" role="tab" tabindex="0" aria-selected="false">All</button>
Fix: Fix any of the following: Required ARIA parent role not present: tablistbutton[data-filter="web"]
HTML:<button class="gallery__filter" data-filter="web" role="tab" tabindex="-1" aria-selected="false">Web</button>
Fix: Fix any of the following: Required ARIA parent role not present: tablistbutton[data-filter="mobile"]
HTML:<button class="gallery__filter" data-filter="mobile" role="tab" tabindex="-1" aria-selected="false">Mobile</button>
Fix: Fix any of the following: Required ARIA parent role not present: tablistbutton[data-filter="brand"]
HTML:<button class="gallery__filter" data-filter="brand" role="tab" tabindex="-1" aria-selected="false">Brand</button>
Fix: Fix any of the following: Required ARIA parent role not present: tablist
- [SERIOUS]
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Affected nodes (12):figure[data-category="web"]:nth-child(3) > figcaption > .gallery-item__title
HTML:<span class="gallery-item__title">E-commerce Platform</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1figure[data-category="web"]:nth-child(3) > figcaption > .gallery-item__description
HTML:<span class="gallery-item__description">End-to-end shopping experience</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1figure[data-category="mobile"]:nth-child(4) > figcaption > .gallery-item__title
HTML:<span class="gallery-item__title">Mobile Banking</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1figure[data-category="mobile"]:nth-child(4) > figcaption > .gallery-item__description
HTML:<span class="gallery-item__description">Secure, fast financial tools</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1figure[data-category="brand"]:nth-child(5) > figcaption > .gallery-item__title
HTML:<span class="gallery-item__title">Corporate Identity</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1figure[data-category="brand"]:nth-child(5) > figcaption > .gallery-item__description
HTML:<span class="gallery-item__description">Complete brand system</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1figure[data-category="web"]:nth-child(6) > figcaption > .gallery-item__title
HTML:<span class="gallery-item__title">Portfolio</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1figure[data-category="web"]:nth-child(6) > figcaption > .gallery-item__description
HTML:<span class="gallery-item__description">Curated creative showcase</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1figure[data-category="mobile"]:nth-child(7) > figcaption > .gallery-item__title
HTML:<span class="gallery-item__title">Fitness Tracker</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1figure[data-category="mobile"]:nth-child(7) > figcaption > .gallery-item__description
HTML:<span class="gallery-item__description">Health metrics at a glance</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1figure[data-category="brand"]:nth-child(8) > figcaption > .gallery-item__title
HTML:<span class="gallery-item__title">Startup Brand</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1figure[data-category="brand"]:nth-child(8) > figcaption > .gallery-item__description
HTML:<span class="gallery-item__description">Tech identity from zero</span>
Fix: Fix any of the following: Element has insufficient color contrast of 1.02 (foreground color: #fdfcf8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
- [MODERATE]
landmark-banner-is-top-level– Ensure the banner landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-banner-is-top-level?application=playwright
Affected nodes (1):.genesis-header
HTML:<header class="genesis-header">
Fix: Fix any of the following: The banner landmark is contained in another landmark.
- [MODERATE]
landmark-contentinfo-is-top-level– Ensure the contentinfo landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-contentinfo-is-top-level?application=playwright
Affected nodes (1):footer
HTML:<footer class="genesis-footer">
Fix: Fix any of the following: The contentinfo landmark is contained in another landmark.
- [MODERATE]
landmark-no-duplicate-banner– Ensure the document has at most one banner landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-banner?application=playwright
Affected nodes (1):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: Document has more than one banner landmark
- [MODERATE]
landmark-no-duplicate-contentinfo– Ensure the document has at most one contentinfo landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-contentinfo?application=playwright
Affected nodes (1):genesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: Document has more than one contentinfo landmark
- [MODERATE]
landmark-unique– Ensure landmarks are unique
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-unique?application=playwright
Affected nodes (2):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishablegenesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
Incomplete (needs manual review)
-
aria-prohibited-attr– Ensure ARIA attributes are not prohibited for an element’s role
Help: https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr?application=playwright
Nodes: 1 -
aria-valid-attr-value– Ensure all ARIA attributes have valid values
Help: https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=playwright
Nodes: 5 -
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Nodes: 13
Marketing – Form
URL: http://localhost:4000/samples/marketing/form.html
Violations: 5
Passes: 46
Incomplete: 3
Violations
- [MODERATE]
landmark-banner-is-top-level– Ensure the banner landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-banner-is-top-level?application=playwright
Affected nodes (1):.genesis-header
HTML:<header class="genesis-header">
Fix: Fix any of the following: The banner landmark is contained in another landmark.
- [MODERATE]
landmark-contentinfo-is-top-level– Ensure the contentinfo landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-contentinfo-is-top-level?application=playwright
Affected nodes (1):.genesis-footer
HTML:<footer class="genesis-footer">
Fix: Fix any of the following: The contentinfo landmark is contained in another landmark.
- [MODERATE]
landmark-no-duplicate-banner– Ensure the document has at most one banner landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-banner?application=playwright
Affected nodes (1):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: Document has more than one banner landmark
- [MODERATE]
landmark-no-duplicate-contentinfo– Ensure the document has at most one contentinfo landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-contentinfo?application=playwright
Affected nodes (1):.form__footer
HTML:<footer class="form__footer">
Fix: Fix any of the following: Document has more than one contentinfo landmark
- [MODERATE]
landmark-unique– Ensure landmarks are unique
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-unique?application=playwright
Affected nodes (2):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishablegenesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
Incomplete (needs manual review)
-
aria-prohibited-attr– Ensure ARIA attributes are not prohibited for an element’s role
Help: https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr?application=playwright
Nodes: 5 -
aria-valid-attr-value– Ensure all ARIA attributes have valid values
Help: https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=playwright
Nodes: 5 -
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Nodes: 23
Utility – 404
URL: http://localhost:4000/samples/utility/404.html
Violations: 5
Passes: 42
Incomplete: 3
Violations
- [MODERATE]
landmark-banner-is-top-level– Ensure the banner landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-banner-is-top-level?application=playwright
Affected nodes (1):header
HTML:<header class="genesis-header">
Fix: Fix any of the following: The banner landmark is contained in another landmark.
- [MODERATE]
landmark-contentinfo-is-top-level– Ensure the contentinfo landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-contentinfo-is-top-level?application=playwright
Affected nodes (1):footer
HTML:<footer class="genesis-footer">
Fix: Fix any of the following: The contentinfo landmark is contained in another landmark.
- [MODERATE]
landmark-no-duplicate-banner– Ensure the document has at most one banner landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-banner?application=playwright
Affected nodes (1):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: Document has more than one banner landmark
- [MODERATE]
landmark-no-duplicate-contentinfo– Ensure the document has at most one contentinfo landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-contentinfo?application=playwright
Affected nodes (1):genesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: Document has more than one contentinfo landmark
- [MODERATE]
landmark-unique– Ensure landmarks are unique
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-unique?application=playwright
Affected nodes (2):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishablegenesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
Incomplete (needs manual review)
-
aria-prohibited-attr– Ensure ARIA attributes are not prohibited for an element’s role
Help: https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr?application=playwright
Nodes: 1 -
aria-valid-attr-value– Ensure all ARIA attributes have valid values
Help: https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=playwright
Nodes: 5 -
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Nodes: 16
Utility – Splash
URL: http://localhost:4000/samples/utility/splash.html
Violations: 5
Passes: 46
Incomplete: 3
Violations
- [MODERATE]
landmark-banner-is-top-level– Ensure the banner landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-banner-is-top-level?application=playwright
Affected nodes (1):header
HTML:<header class="genesis-header">
Fix: Fix any of the following: The banner landmark is contained in another landmark.
- [MODERATE]
landmark-contentinfo-is-top-level– Ensure the contentinfo landmark is at top level
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-contentinfo-is-top-level?application=playwright
Affected nodes (1):footer
HTML:<footer class="genesis-footer">
Fix: Fix any of the following: The contentinfo landmark is contained in another landmark.
- [MODERATE]
landmark-no-duplicate-banner– Ensure the document has at most one banner landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-banner?application=playwright
Affected nodes (1):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: Document has more than one banner landmark
- [MODERATE]
landmark-no-duplicate-contentinfo– Ensure the document has at most one contentinfo landmark
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-no-duplicate-contentinfo?application=playwright
Affected nodes (1):genesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: Document has more than one contentinfo landmark
- [MODERATE]
landmark-unique– Ensure landmarks are unique
Help: https://dequeuniversity.com/rules/axe/4.11/landmark-unique?application=playwright
Affected nodes (2):genesis-header
HTML:<genesis-header sticky="true" class="sticky" role="banner">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishablegenesis-footer
HTML:<genesis-footer show-back-to-top="true" role="contentinfo">
Fix: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
Incomplete (needs manual review)
-
aria-prohibited-attr– Ensure ARIA attributes are not prohibited for an element’s role
Help: https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr?application=playwright
Nodes: 6 -
aria-valid-attr-value– Ensure all ARIA attributes have valid values
Help: https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=playwright
Nodes: 5 -
color-contrast– Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright
Nodes: 21
Unique Violations (Deduplicated)
| Rule | Impact | Affected Pages | Description |
|---|---|---|---|
aria-required-parent |
critical | Application – Settings, Knowledge – FAQ, Marketing – Gallery | Ensure elements with an ARIA role that require parent roles are contained by them |
aria-required-children |
critical | Knowledge – FAQ, Marketing – Gallery | Ensure elements with an ARIA role that require child roles contain them |
color-contrast |
serious | Home (index.html), Application – Search, Content-Driven – Archive, Knowledge – Docs, Marketing – Landing, Marketing – Gallery | Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds |
scrollable-region-focusable |
serious | Application – Chatroom | Ensure elements that have scrollable content are accessible by keyboard |
link-in-text-block |
serious | Application – Search | Ensure links are distinguished from surrounding text in a way that does not rely on color |
aria-prohibited-attr |
serious | Content-Driven – Post | Ensure ARIA attributes are not prohibited for an element’s role |
landmark-banner-is-top-level |
moderate | Home (index.html), Application – Chatroom, Application – Dashboard, Application – Search, Application – Settings, Content-Driven – Archive, Content-Driven – Article, Content-Driven – Post, Content-Driven – Profile, Knowledge – Docs, Knowledge – FAQ, Marketing – Landing, Marketing – Gallery, Marketing – Form, Utility – 404, Utility – Splash | Ensure the banner landmark is at top level |
landmark-contentinfo-is-top-level |
moderate | Home (index.html), Application – Chatroom, Application – Dashboard, Application – Search, Application – Settings, Content-Driven – Archive, Content-Driven – Article, Content-Driven – Post, Content-Driven – Profile, Knowledge – Docs, Knowledge – FAQ, Marketing – Landing, Marketing – Gallery, Marketing – Form, Utility – 404, Utility – Splash | Ensure the contentinfo landmark is at top level |
landmark-main-is-top-level |
moderate | Home (index.html) | Ensure the main landmark is at top level |
landmark-no-duplicate-banner |
moderate | Home (index.html), Application – Chatroom, Application – Dashboard, Application – Search, Application – Settings, Content-Driven – Archive, Content-Driven – Article, Content-Driven – Post, Content-Driven – Profile, Knowledge – Docs, Knowledge – FAQ, Marketing – Landing, Marketing – Gallery, Marketing – Form, Utility – 404, Utility – Splash | Ensure the document has at most one banner landmark |
landmark-no-duplicate-contentinfo |
moderate | Home (index.html), Application – Chatroom, Application – Dashboard, Application – Search, Application – Settings, Content-Driven – Archive, Content-Driven – Post, Content-Driven – Profile, Knowledge – Docs, Knowledge – FAQ, Marketing – Landing, Marketing – Gallery, Marketing – Form, Utility – 404, Utility – Splash | Ensure the document has at most one contentinfo landmark |
landmark-no-duplicate-main |
moderate | Home (index.html) | Ensure the document has at most one main landmark |
landmark-unique |
moderate | Home (index.html), Application – Chatroom, Application – Dashboard, Application – Search, Application – Settings, Content-Driven – Archive, Content-Driven – Article, Content-Driven – Post, Content-Driven – Profile, Knowledge – Docs, Knowledge – FAQ, Marketing – Landing, Marketing – Gallery, Marketing – Form, Utility – 404, Utility – Splash | Ensure landmarks are unique |
heading-order |
moderate | Application – Dashboard, Application – Settings, Content-Driven – Archive, Knowledge – FAQ | Ensure the order of headings is semantically correct |
landmark-complementary-is-top-level |
moderate | Application – Dashboard, Application – Search, Application – Settings | Ensure the complementary landmark or aside is at top level |
page-has-heading-one |
moderate | Application – Search | Ensure that the page, or at least one of its frames contains a level-one heading |
Recommendations
Address violations in impact order: critical → serious → moderate → minor.
Each violation entry links to the axe-core help URL for remediation guidance.
Incomplete results require manual inspection with assistive technologies (e.g., VoiceOver, NVDA).