Accessibility errors found in your template #1
Description
The user @carlsonsantana validate your site template "https://nakorndev.github.io/jekyll-bulma-theme/" and found these accessibility errors:
- Page https://nakorndev.github.io/jekyll-bulma-theme/:
- Issue 5db9413a-3e7f-4f75-9ac1-c9b63d6a7f5a:
- Type: Error
- Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
- Message: 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 4.17:1. Recommendation: change background to #fefefe.
- Selector:
html > body > footer > div > div > p:nth-child(2) > a:nth-child(4) - Context:
<a href="https://pages.github.com/">GitHub Pages</a>
- Issue bd69c3f8-5232-485a-9a1a-b77be34173b9:
- Type: Error
- Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
- Message: 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 4.17:1. Recommendation: change background to #fefefe.
- Selector:
html > body > footer > div > div > p:nth-child(2) > a:nth-child(3) - Context:
<a href="https://jekyllrb.com">Jekyll</a>
- Issue 12fb74c7-afc9-4d91-be18-c89d83d3490b:
- Type: Error
- Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
- Message: 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 4.17:1. Recommendation: change background to #fefefe.
- Selector:
html > body > footer > div > div > p:nth-child(2) > a:nth-child(2) - Context:
<a href="https://github.com/nakorndev">nakorndev</a>
- Issue 525d65e7-8639-47c7-9d05-a08ea49556bc:
- Type: Error
- Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
- Message: 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 4.17:1. Recommendation: change background to #fefefe.
- Selector:
html > body > footer > div > div > p:nth-child(1) > a:nth-child(4) - Context:
<a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>
- Issue 9cd56302-5dbf-4665-94bb-daffb6ce35a9:
- Type: Error
- Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
- Message: 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 4.17:1. Recommendation: change background to #fefefe.
- Selector:
html > body > footer > div > div > p:nth-child(1) > a:nth-child(3) - Context:
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>
- Issue e3be4655-227e-4d4e-ace0-c804b0055de9:
- Type: Error
- Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
- Message: 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 4.17:1. Recommendation: change background to #fefefe.
- Selector:
html > body > footer > div > div > p:nth-child(1) > a:nth-child(2) - Context:
<a href="https://jgthms.com">Jeremy Thomas</a>
- Issue 7b0afd89-86d3-4933-b976-d870c84e85de:
- Type: Error
- Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
- Message: 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 3.1:1. Recommendation: change text colour to #606060.
- Selector:
#app > main > section:nth-child(2) > div > nav > a:nth-child(1) - Context:
<a class="pagination-previous" disabled="">Previous</a>
- Issue 21705971-af80-429c-9168-4bcaffdfe9fb:
- Type: Error
- Code: WCAG2AA.Principle2.Guideline2_4.2_4_1.H64.1
- Message: Iframe element requires a non-empty title attribute that identifies the frame.
- Selector:
#app > main > section:nth-child(1) > div > article:nth-child(3) > div > div > div:nth-child(1) > iframe - Context:
<iframe width="854" height="480" src="https://www.youtube.com/embed/bM7SZ5SBzyY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
- Issue 7855c835-709f-47b4-9c93-a2dc91265b7c:
- Type: Error
- Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
- Message: 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.43:1. Recommendation: change background to #1d1c12.
- Selector:
#app > main > section:nth-child(1) > div > article:nth-child(2) > div > div > div:nth-child(1) > div:nth-child(2) > div > pre > code > span:nth-child(5) - Context:
<span class="nt"></a></span>
- Issue b866233b-a2bc-4777-972d-acb7df598ea1:
- Type: Error
- Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
- Message: 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.43:1. Recommendation: change background to #1d1c12.
- Selector:
#app > main > section:nth-child(1) > div > article:nth-child(2) > div > div > div:nth-child(1) > div:nth-child(2) > div > pre > code > span:nth-child(4) - Context:
<span class="nt">></span>
- Issue ecf1221d-b5e4-45f5-aa12-6e542f8373e5:
- Type: Error
- Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
- Message: 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.43:1. Recommendation: change background to #1d1c12.
- Selector:
#app > main > section:nth-child(1) > div > article:nth-child(2) > div > div > div:nth-child(1) > div:nth-child(2) > div > pre > code > span:nth-child(1) - Context:
<span class="nt"><a</span>
- Issue 8b1ccdcf-71b6-4dcb-82a2-cdbd55f300f0:
- Type: Error
- Code: WCAG2AA.Principle1.Guideline1_3.1_3_1.F68
- Message: This form field should be labelled in some way. Use the label element (either with a "for" attribute or wrapped around the form field), or "title", "aria-label" or "aria-labelledby" attributes as appropriate.
- Selector:
#app > main > section:nth-child(1) > div > article:nth-child(1) > div > div > div:nth-child(1) > ul:nth-child(31) > li:nth-child(2) > input - Context:
<input type="checkbox" class="task-list-item-checkbox" disabled="disabled">
- Issue 84fae548-2224-48d8-9640-2c8e6ff1a0d9:
- Type: Error
- Code: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.InputCheckbox.Name
- Message: This checkboxinput element does not have a name available to an accessibility API. Valid names are: label element, title undefined, aria-label undefined, aria-labelledby undefined.
- Selector:
#app > main > section:nth-child(1) > div > article:nth-child(1) > div > div > div:nth-child(1) > ul:nth-child(31) > li:nth-child(2) > input - Context:
<input type="checkbox" class="task-list-item-checkbox" disabled="disabled">
- Issue 21ea6f60-5042-4a6c-81e8-235168f841a3:
- Type: Error
- Code: WCAG2AA.Principle1.Guideline1_3.1_3_1.F68
- Message: This form field should be labelled in some way. Use the label element (either with a "for" attribute or wrapped around the form field), or "title", "aria-label" or "aria-labelledby" attributes as appropriate.
- Selector:
#app > main > section:nth-child(1) > div > article:nth-child(1) > div > div > div:nth-child(1) > ul:nth-child(31) > li:nth-child(1) > input - Context:
<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked">
- Issue a2823734-3a46-4ed4-9640-00e0fa329183:
- Type: Error
- Code: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.InputCheckbox.Name
- Message: This checkboxinput element does not have a name available to an accessibility API. Valid names are: label element, title undefined, aria-label undefined, aria-labelledby undefined.
- Selector:
#app > main > section:nth-child(1) > div > article:nth-child(1) > div > div > div:nth-child(1) > ul:nth-child(31) > li:nth-child(1) > input - Context:
<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked">
- Issue 97f7badd-8ce2-4923-9ad4-2945fb54a97c:
- Type: Error
- Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
- Message: 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 3.22:1. Recommendation: change text colour to #363636.
- Selector:
#app > main > section:nth-child(1) > div > article:nth-child(1) > div > div > div:nth-child(1) > p:nth-child(23) > code - Context:
<code class="highlighter-rouge">var example = true</code>
- Issue ac3fe9f8-2c67-4d1e-b3e6-5b7c80f48b80:
- Type: Error
- Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
- Message: 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 3.22:1. Recommendation: change text colour to #363636.
- Selector:
#app > main > section:nth-child(1) > div > article:nth-child(1) > div > div > div:nth-child(1) > p:nth-child(20) > code:nth-child(2) - Context:
<code class="highlighter-rouge">######</code>
- Issue 6b589f18-9a08-4b45-b5f9-f58c391855fb:
- Type: Error
- Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
- Message: 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 3.22:1. Recommendation: change text colour to #363636.
- Selector:
#app > main > section:nth-child(1) > div > article:nth-child(1) > div > div > div:nth-child(1) > p:nth-child(20) > code:nth-child(1) - Context:
<code class="highlighter-rouge">#</code>
- Issue ccdb0c55-960c-44d9-b869-6dfbdac7ad3b:
- Type: Error
- Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
- Message: 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 3.22:1. Recommendation: change text colour to #363636.
- Selector:
#app > main > section:nth-child(1) > div > article:nth-child(1) > div > div > div:nth-child(1) > p:nth-child(18) > code:nth-child(2) - Context:
<code class="highlighter-rouge">##</code>
- Issue c34af18b-b6f3-424f-b249-70f9bd6bdcf7:
- Type: Error
- Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
- Message: 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 3.22:1. Recommendation: change text colour to #363636.
- Selector:
#app > main > section:nth-child(1) > div > article:nth-child(1) > div > div > div:nth-child(1) > p:nth-child(18) > code:nth-child(1) - Context:
<code class="highlighter-rouge">#</code>
- Issue 89eaf2a6-fba1-48f1-ad9f-25bfde83b0f6:
- Type: Error
- Code: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
- Message: Anchor element found with a valid href attribute, but no link content has been supplied.
- Selector:
#navMenu > div:nth-child(2) > a:nth-child(3) - Context:
<a class="navbar-item is-hidden-touch text-facebook" target="_blank" href="https://www.facebook.com/nakorndev"> <svg class="svg-inli...</a>
- Issue bfd0f0fc-7d42-4784-9665-5bb27d27186b:
- Type: Error
- Code: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
- Message: Anchor element found with a valid href attribute, but no link content has been supplied.
- Selector:
#navMenu > div:nth-child(2) > a:nth-child(2) - Context:
<a class="navbar-item is-hidden-touch text-twitter" target="_blank" href="https://twitter.com/nakorndev"> <svg class="svg-inli...</a>
- Issue bbaf1453-8b33-4bfb-8016-18312226269d:
- Type: Error
- Code: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
- Message: Anchor element found with a valid href attribute, but no link content has been supplied.
- Selector:
#navMenu > div:nth-child(2) > a:nth-child(1) - Context:
<a class="navbar-item is-hidden-touch text-github" target="_blank" href="https://github.com/nakorndev/jekyll-bulma-theme"> <svg class="svg-inli...</a>
- Issue 5fc2c260-263f-49ab-bb02-609c44939ecc:
- Type: Error
- Code: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
- Message: Anchor element found with a valid href attribute, but no link content has been supplied.
- Selector:
#navbar > div:nth-child(2) > nav > a:nth-child(4) - Context:
<a class="navbar-item is-hidden-desktop text-facebook" target="_blank" href="https://www.facebook.com/nakorndev"> <svg class="svg-inline...</a>
- Issue c34c91c1-27c1-43aa-8cd7-3c8ba38fe19d:
- Type: Error
- Code: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
- Message: Anchor element found with a valid href attribute, but no link content has been supplied.
- Selector:
#navbar > div:nth-child(2) > nav > a:nth-child(3) - Context:
<a class="navbar-item is-hidden-desktop text-twitter" target="_blank" href="https://twitter.com/nakorndev"> <svg class="svg-inline...</a>
- Issue f0e95f62-fc43-4e5a-ad4b-8e973f028202:
- Type: Error
- Code: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
- Message: Anchor element found with a valid href attribute, but no link content has been supplied.
- Selector:
#navbar > div:nth-child(2) > nav > a:nth-child(2) - Context:
<a class="navbar-item is-hidden-desktop text-github" target="_blank" href="https://github.com/nakorndev/jekyll-bulma-theme"> <svg class="svg-inline...</a>
- Issue 5db9413a-3e7f-4f75-9ac1-c9b63d6a7f5a:
You can check these accessibility errors using pa11y.
You can view the full validation results in our website.