Pa11y results for "https://mermaidmagic.com/activity/?page=3"

Generated at: Mon Jun 23 2025 09:30:46 GMT+0000 (Coordinated Universal Time)

Runners (with issues): htmlcs

Toggle by type 30 errors 0 warnings 0 notices

• Error: Anchor element found with a valid href attribute, but no link content has been supplied.

  htmlcs: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent

  <a href="/ " class="text-light text-decoration-none current"> <span><svg ...</a>

  (selector "#main-nav > ul > li:nth-child(1) > a")

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 3:1, but text in this element has a contrast ratio of 1.95:1. Recommendation: change background to #232323.

  htmlcs: WCAG2AA.Principle1.Guideline1_4.1_4_3.G145.Fail

  <span>VIDEO</span>

  (selector "#main-nav > ul > li:nth-child(2) > a > span")

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 3:1, but text in this element has a contrast ratio of 1.95:1. Recommendation: change background to #232323.

  htmlcs: WCAG2AA.Principle1.Guideline1_4.1_4_3.G145.Fail

  <span>ACTIVITIES</span>

  (selector "#main-nav > ul > li:nth-child(3) > a > span")

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 3:1, but text in this element has a contrast ratio of 1.95:1. Recommendation: change background to #232323.

  htmlcs: WCAG2AA.Principle1.Guideline1_4.1_4_3.G145.Fail

  <span>CHARACTERS</span>

  (selector "#main-nav > ul > li:nth-child(4) > a > span")

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 3:1, but text in this element has a contrast ratio of 1.95:1. Recommendation: change background to #232323.

  htmlcs: WCAG2AA.Principle1.Guideline1_4.1_4_3.G145.Fail

  <span>MERTROPIA'S BLOG</span>

  (selector "#main-nav > ul > li:nth-child(5) > a > span")

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 3:1, but text in this element has a contrast ratio of 1.95:1. Recommendation: change background to #232323.

  htmlcs: WCAG2AA.Principle1.Guideline1_4.1_4_3.G145.Fail

  <span>|</span>

  (selector "#main-nav > ul > li:nth-child(6) > span")

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 3:1, but text in this element has a contrast ratio of 1.95:1. Recommendation: change background to #232323.

  htmlcs: WCAG2AA.Principle1.Guideline1_4.1_4_3.G145.Fail

  <span>EN</span>

  (selector "#main-nav > ul > li:nth-child(7) > a > span")

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 3:1, but text in this element has a contrast ratio of 1.95:1. Recommendation: change background to #232323.

  htmlcs: WCAG2AA.Principle1.Guideline1_4.1_4_3.G145.Fail

  <span>IT</span>

  (selector "#main-nav > ul > li:nth-child(8) > a > span")

• Error: This button element does not have a name available to an accessibility API. Valid names are: title undefined, element content, aria-label undefined, aria-labelledby undefined.

  htmlcs: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Button.Name

  <button id="menu-toggle" class="menu-toggle d-xl-none"> <img src="/static/asset...</button>

  (selector "#menu-toggle")

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

  htmlcs: WCAG2AA.Principle1.Guideline1_1.1_1_1.H37

  <img src="/static/assets/images/trigger-menu.6355fd6a4c03.svg" class="d-block" data-cmp-info="10">

  (selector "#menu-toggle > img")

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

  htmlcs: WCAG2AA.Principle1.Guideline1_1.1_1_1.H37

  <img src="/media/images/mm-banner-activities.original.jpg" class="d-block img-fluid" data-cmp-info="10">

  (selector "#main-banner > div > img")

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

  htmlcs: WCAG2AA.Principle1.Guideline1_1.1_1_1.H37

  <img src="/media/images/cover_Color_Nerissa_in_Morton_Bay.original.jpg" class="img-fluid d-block" data-cmp-info="10">

  (selector "#activities-grid > div > div > div:nth-child(1) > div:nth-child(1) > div > a > div:nth-child(1) > img")

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 3:1, but text in this element has a contrast ratio of 2.21:1. Recommendation: change background to #102d00.

  htmlcs: WCAG2AA.Principle1.Guideline1_4.1_4_3.G145.Fail

  <p class="h4 mb-0 link-box--title bold">Color Nerissa in Morton Bay</p>

  (selector "#activities-grid > div > div > div:nth-child(1) > div:nth-child(1) > div > a > div:nth-child(2) > p")

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

  htmlcs: WCAG2AA.Principle1.Guideline1_1.1_1_1.H37

  <img src="/media/images/cover_Color_Merlinda_in_Morton_Bay.original.jpg" class="img-fluid d-block" data-cmp-info="10">

  (selector "#activities-grid > div > div > div:nth-child(1) > div:nth-child(2) > div > a > div:nth-child(1) > img")

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 3:1, but text in this element has a contrast ratio of 2.21:1. Recommendation: change background to #102d00.

  htmlcs: WCAG2AA.Principle1.Guideline1_4.1_4_3.G145.Fail

  <p class="h4 mb-0 link-box--title bold">Color Merlinda in Morton Bay</p>

  (selector "#activities-grid > div > div > div:nth-child(1) > div:nth-child(2) > div > a > div:nth-child(2) > p")

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

  htmlcs: WCAG2AA.Principle1.Guideline1_1.1_1_1.H37

  <img src="/media/images/cover_Color_Mermaid_Sasha.original.jpg" class="img-fluid d-block" data-cmp-info="10">

  (selector "#activities-grid > div > div > div:nth-child(1) > div:nth-child(3) > div > a > div:nth-child(1) > img")

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 3:1, but text in this element has a contrast ratio of 2.21:1. Recommendation: change background to #102d00.

  htmlcs: WCAG2AA.Principle1.Guideline1_4.1_4_3.G145.Fail

  <p class="h4 mb-0 link-box--title bold">Color Mermaid Sasha</p>

  (selector "#activities-grid > div > div > div:nth-child(1) > div:nth-child(3) > div > a > div:nth-child(2) > p")

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

  htmlcs: WCAG2AA.Principle1.Guideline1_1.1_1_1.H37

  <img src="/media/images/cover_Merlindas-mini-notebook.original.jpg" class="img-fluid d-block" data-cmp-info="10">

  (selector "#activities-grid > div > div > div:nth-child(1) > div:nth-child(4) > div > a > div:nth-child(1) > img")

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 3:1, but text in this element has a contrast ratio of 2.21:1. Recommendation: change background to #102d00.

  htmlcs: WCAG2AA.Principle1.Guideline1_4.1_4_3.G145.Fail

  <p class="h4 mb-0 link-box--title bold">Merlinda's mini-notebook</p>

  (selector "#activities-grid > div > div > div:nth-child(1) > div:nth-child(4) > div > a > div:nth-child(2) > p")

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

  htmlcs: WCAG2AA.Principle1.Guideline1_1.1_1_1.H37

  <img src="/media/images/cover_Color_Mermaid_Merlinda.original.jpg" class="img-fluid d-block" data-cmp-info="10">

  (selector "#activities-grid > div > div > div:nth-child(1) > div:nth-child(5) > div > a > div:nth-child(1) > img")

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 3:1, but text in this element has a contrast ratio of 2.21:1. Recommendation: change background to #102d00.

  htmlcs: WCAG2AA.Principle1.Guideline1_4.1_4_3.G145.Fail

  <p class="h4 mb-0 link-box--title bold">Color Mermaid Merlinda</p>

  (selector "#activities-grid > div > div > div:nth-child(1) > div:nth-child(5) > div > a > div:nth-child(2) > p")

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

  htmlcs: WCAG2AA.Principle1.Guideline1_1.1_1_1.H37

  <img src="/media/images/cover_2025-Calendar.original.jpg" class="img-fluid d-block" data-cmp-info="10">

  (selector "#activities-grid > div > div > div:nth-child(1) > div:nth-child(6) > div > a > div:nth-child(1) > img")

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 3:1, but text in this element has a contrast ratio of 2.21:1. Recommendation: change background to #102d00.

  htmlcs: WCAG2AA.Principle1.Guideline1_4.1_4_3.G145.Fail

  <p class="h4 mb-0 link-box--title bold">2025 Mermaid Magic Calendar</p>

  (selector "#activities-grid > div > div > div:nth-child(1) > div:nth-child(6) > div > a > div:nth-child(2) > p")

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.33:1. Recommendation: change background to #478524.

  htmlcs: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail

  <a href="?page=1" class="bg-quaternary">1</a>

  (selector "#activities-grid > div > div > div:nth-child(2) > div > ul > li:nth-child(1) > a")

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.33:1. Recommendation: change background to #478524.

  htmlcs: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail

  <a href="?page=2" class="bg-quaternary">2</a>

  (selector "#activities-grid > div > div > div:nth-child(2) > div > ul > li:nth-child(2) > a")

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.33:1. Recommendation: change background to #478524.

  htmlcs: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail

  <span class="current bg-quaternary">3</span>

  (selector "#activities-grid > div > div > div:nth-child(2) > div > ul > li:nth-child(3) > span")

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.33:1. Recommendation: change background to #478524.

  htmlcs: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail

  <a href="?page=4" class="bg-quaternary">4</a>

  (selector "#activities-grid > div > div > div:nth-child(2) > div > ul > li:nth-child(4) > a")

• Error: Img element is the only content of the link, but is missing alt text. The alt text should describe the purpose of the link.

  htmlcs: WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2

  <a href="https://www.instagram.com/mermaidmagic_official"> ...</a>

  (selector "#footer > div > div > div > ul > li:nth-child(1) > a")

• Error: Img element is the only content of the link, but is missing alt text. The alt text should describe the purpose of the link.

  htmlcs: WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2

  <a href="https://www.tiktok.com/@mermaidmagicofficial" data-cmp-ab="2"> ...</a>

  (selector "#footer > div > div > div > ul > li:nth-child(2) > a")

• Error: Img element is the only content of the link, but is missing alt text. The alt text should describe the purpose of the link.

  htmlcs: WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2

  <a href="https://www.youtube.com/@MermaidMagicEN"> ...</a>

  (selector "#footer > div > div > div > ul > li:nth-child(3) > a")