quasar-testing icon indicating copy to clipboard operation
quasar-testing copied to clipboard

Published 20 hours ago • verified publisher icon quasarframework

Quality Extension: a11y

Open nothingismagick opened this issue 5 years ago • 3 comments

Audit for A11Y

  • https://github.com/vue-a11y/vue-axe
  • https://pa11y.org/ => fork: https://www.npmjs.com/package/@a11ygato/audit-engine
  • https://github.com/liip/TheA11yMachine (A, AA, AAA & 508) => uses pa11y internally, makes cute dashboards

OMG LIST! https://docs.google.com/spreadsheets/d/10CTezA0iDdaWggaqxuHawj-5u8YXdZeWBJsIkuvJ364

nothingismagick avatar Mar 05 '19 12:03 nothingismagick

this is an example report from pa11y:

$ pa11y https://v1.quasar-framework.org

Welcome to Pa11y

 > Running Pa11y on URL https://v1.quasar-framework.org

Results for URL: https://v1.quasar-framework.org/

 • Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
   ├── WCAG2AA.Principle1.Guideline1_1.1_1_1.H37
   ├── #q-app > div > section:nth-child(1) > div > div:nth-child(2) > div:nth-child(1) > img
   └── <img src="https://cdn.quasar-framework.org/logo/svg/quasar-logo.svg" class="landing__logo">

 • 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.09:1. Recommendation: change background to #949494.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G145.Fail
   ├── #q-app > div > section:nth-child(1) > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(1) > div:nth-child(1)
   └── <div class="text-weight-bold">Quasar</div>

 • 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.09:1. Recommendation: change background to #949494.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G145.Fail
   ├── #q-app > div > section:nth-child(1) > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(1) > div:nth-child(2)
   └── <div>Framework</div>

 • 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 1.09:1. Recommendation: change background to #767676.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── #q-app > div > section:nth-child(1) > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(2)
   └── <div class="text-subtitle1 text-italic q-pl-sm">High performance, <strong>Mater...</div>

 • 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 1.09:1. Recommendation: change background to #767676.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── #q-app > div > section:nth-child(1) > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(2) > strong:nth-child(1)
   └── <strong>Material Design 2</strong>

 • 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 1.09:1. Recommendation: change background to #767676.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── #q-app > div > section:nth-child(1) > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(2) > strong:nth-child(2)
   └── <strong>Vuejs</strong>

 • 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 4.25:1. Recommendation: change text colour to #0076dc.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── #q-app > div > section:nth-child(1) > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(3) > div > a:nth-child(1) > div:nth-child(2) > div
   └── <div>About</div>

 • 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 4.25:1. Recommendation: change text colour to #0076dc.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── #q-app > div > section:nth-child(1) > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(3) > div > a:nth-child(2) > div:nth-child(2) > div
   └── <div>Get started</div>

 • 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 1.09:1. Recommendation: change background to #767676.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── #q-app > div > section:nth-child(1) > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(3) > div > div
   └── <div class="text-body2">v1.0.0-beta.8</div>

 • 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 4.25:1. Recommendation: change background to #0076dc.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── #q-app > div > section:nth-child(2) > div > div:nth-child(2) > a:nth-child(1) > div:nth-child(2) > div
   └── <div>SPA (Single Page App)</div>

 • 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 3.67:1. Recommendation: change background to #008579.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── #q-app > div > section:nth-child(2) > div > div:nth-child(2) > a:nth-child(2) > div:nth-child(2) > div
   └── <div>PWA (Progressive Web App)</div>

 • 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.16:1. Recommendation: change background to #ac6600.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── #q-app > div > section:nth-child(2) > div > div:nth-child(2) > a:nth-child(4) > div:nth-child(2) > div
   └── <div>Hybrid Mobile App</div>

 • 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 3.68:1. Recommendation: change background to #e13023.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── #q-app > div > section:nth-child(2) > div > div:nth-child(2) > a:nth-child(5) > div:nth-child(2) > div
   └── <div>Multi-platform Desktop App</div>

 • Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
   ├── WCAG2AA.Principle1.Guideline1_1.1_1_1.H37
   ├── #q-app > div > section:nth-child(3) > div > div:nth-child(1) > div > img
   └── <img src="https://cdn.quasar-framework.org/img/responsive.png" class="doc-img">

 • 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 4.25:1. Recommendation: change text colour to #0076dc.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── #q-app > div > section:nth-child(5) > div > div:nth-child(1)
   └── <div class="text-h6 text-primary q-mb-xl">Proudly sponsored by</div>

 • 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.
   ├── WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2
   ├── #q-app > div > section:nth-child(5) > div > div:nth-child(2) > a:nth-child(1)
   └── <a><img width="200px" src="https:/...</a>

 • Error: Anchor element found with no link content and no name and/or ID attribute.
   ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.EmptyNoId
   ├── #q-app > div > section:nth-child(5) > div > div:nth-child(2) > a:nth-child(1)
   └── <a><img width="200px" src="https:/...</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.
   ├── WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2
   ├── #q-app > div > section:nth-child(5) > div > div:nth-child(2) > a:nth-child(2)
   └── <a href="https://truelogic.com" target="_blank"><img width="200px" src="https:/...</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.
   ├── WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2
   ├── #q-app > div > section:nth-child(5) > div > div:nth-child(2) > a:nth-child(3)
   └── <a href="https://www.tayloredtechnology.net" target="_blank"><img width="200px" src="https:/...</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.
   ├── WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2
   ├── #q-app > div > section:nth-child(5) > div > div:nth-child(2) > a:nth-child(4)
   └── <a href="http://campuscloudservices.com" target="_blank"><img width="222px" src="https:/...</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.
   ├── WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2
   ├── #q-app > div > section:nth-child(5) > div > div:nth-child(2) > a:nth-child(5)
   └── <a href="https://www.jugglestreet.com" target="_blank"><img width="222px" src="https:/...</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.
   ├── WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2
   ├── #q-app > div > section:nth-child(5) > div > div:nth-child(2) > a:nth-child(6)
   └── <a href="http://comcomservices.com" target="_blank"><img width="222px" src="https:/...</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.
   ├── WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2
   ├── #q-app > div > section:nth-child(5) > div > div:nth-child(2) > a:nth-child(7)
   └── <a href="http://www.kalisio.com" target="_blank"><img width="222px" src="https:/...</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.
   ├── WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2
   ├── #q-app > div > section:nth-child(5) > div > div:nth-child(2) > a:nth-child(8)
   └── <a href="http://platformpurple.com" target="_blank"><img width="222px" src="https:/...</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.
   ├── WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2
   ├── #q-app > div > section:nth-child(5) > div > div:nth-child(2) > a:nth-child(9)
   └── <a href="http://www.bgasoft.com" target="_blank"><img width="222px" src="https:/...</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.
   ├── WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2
   ├── #q-app > div > section:nth-child(5) > div > div:nth-child(2) > a:nth-child(10)
   └── <a href="https://www.letsbutterfly.com/" target="_blank"><img width="170px" src="https:/...</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 4.25:1. Recommendation: change text colour to #0076dc.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── #q-app > div > section:nth-child(5) > div > div:nth-child(3)
   └── <div class="text-h6 text-primary q-mt-xl q-mb-lg q-pt-md">Partners</div>

 • 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.
   ├── WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2
   ├── #q-app > div > section:nth-child(5) > div > div:nth-child(4) > a:nth-child(1)
   └── <a href="https://utopian.io/" target="_blank"><img width="170px" src="https:/...</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.
   ├── WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2
   ├── #q-app > div > section:nth-child(5) > div > div:nth-child(4) > a:nth-child(2)
   └── <a href="https://wallabyjs.com/" target="_blank"><img width="110px" src="https:/...</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.
   ├── WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2
   ├── #q-app > div > section:nth-child(5) > div > div:nth-child(4) > a:nth-child(3)
   └── <a href="https://snyk.io/" target="_blank"><img width="170px" src="https:/...</a>

 • Error: Anchor element found with a valid href attribute, but no link content has been supplied.
   ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
   ├── #q-app > div > section:nth-child(6) > div > div:nth-child(1) > a:nth-child(1)
   └── <a href="https://github.com/quasarframework/quasar" target="_blank"><i aria-hidden="true" class="q-...</a>

 • Error: Anchor element found with a valid href attribute, but no link content has been supplied.
   ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
   ├── #q-app > div > section:nth-child(6) > div > div:nth-child(1) > a:nth-child(2)
   └── <a href="https://twitter.com/quasarframework" target="_blank"><i aria-hidden="true" class="q-...</a>

 • Error: Anchor element found with a valid href attribute, but no link content has been supplied.
   ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
   ├── #q-app > div > section:nth-child(6) > div > div:nth-child(1) > a:nth-child(3)
   └── <a href="https://medium.com/quasar-framework" target="_blank"><i aria-hidden="true" class="q-...</a>

 • Error: Anchor element found with a valid href attribute, but no link content has been supplied.
   ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
   ├── #q-app > div > section:nth-child(6) > div > div:nth-child(1) > a:nth-child(4)
   └── <a href="https://discord.gg/5TDhbDg" target="_blank"><i aria-hidden="true" class="q-...</a>

 • Error: Anchor element found with a valid href attribute, but no link content has been supplied.
   ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
   ├── #q-app > div > section:nth-child(6) > div > div:nth-child(1) > a:nth-child(5)
   └── <a href="https://forum.quasar-framework.org/" target="_blank"><i aria-hidden="true" class="q-...</a>

 • Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
   ├── WCAG2AA.Principle1.Guideline1_1.1_1_1.H37
   ├── #q-app > div > section:nth-child(7) > div > a:nth-child(1) > div:nth-child(2) > div:nth-child(1) > div > img
   └── <img src="https://cdn.quasar-framework.org/img/quasar-logo.png">

 • Error: Anchor element found with a valid href attribute, but no link content has been supplied.
   ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
   ├── #q-app > div > section:nth-child(7) > div > a:nth-child(3)
   └── <a tabindex="0" href="https://github.com/quasarframework/quasar" target="_blank" class="q-btn inline relative-position q-btn-item non-selectable q-mr-xs q-btn--rectangle q-focusable q-hoverable q-btn--flat"><div class="q-focus-helper"></d...</a>

 • Error: Anchor element found with a valid href attribute, but no link content has been supplied.
   ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
   ├── #q-app > div > section:nth-child(7) > div > a:nth-child(4)
   └── <a tabindex="0" href="https://twitter.com/quasarframework" target="_blank" class="q-btn inline relative-position q-btn-item non-selectable q-mr-xs q-btn--rectangle q-focusable q-hoverable q-btn--flat"><div class="q-focus-helper"></d...</a>

 • Error: Anchor element found with a valid href attribute, but no link content has been supplied.
   ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
   ├── #q-app > div > section:nth-child(7) > div > a:nth-child(5)
   └── <a tabindex="0" href="https://medium.com/quasar-framework" target="_blank" class="q-btn inline relative-position q-btn-item non-selectable q-mr-xs gt-xs q-btn--rectangle q-focusable q-hoverable q-btn--flat"><div class="q-focus-helper"></d...</a>

 • Error: Anchor element found with a valid href attribute, but no link content has been supplied.
   ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
   ├── #q-app > div > section:nth-child(7) > div > a:nth-child(6)
   └── <a tabindex="0" href="https://discord.gg/5TDhbDg" target="_blank" class="q-btn inline relative-position q-btn-item non-selectable q-mr-xs q-btn--rectangle q-focusable q-hoverable q-btn--flat"><div class="q-focus-helper"></d...</a>

 • Error: Anchor element found with a valid href attribute, but no link content has been supplied.
   ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
   ├── #q-app > div > section:nth-child(7) > div > a:nth-child(7)
   └── <a tabindex="0" href="https://forum.quasar-framework.org/" target="_blank" class="q-btn inline relative-position q-btn-item non-selectable gt-xs q-btn--rectangle q-focusable q-hoverable q-btn--flat"><div class="q-focus-helper"></d...</a>

41 Errors

nothingismagick avatar Mar 06 '19 23:03 nothingismagick

Comment from rocco at vue-land

If you notice 99% of those react docs are just restating the standards and very little with react. Taking a look at the wcag is a good starting point , semantic html, and looking at the aria website. The wcag has some good examples pages you can take a look at as well. It’s also good to know what level you are targeting. A, AA , or AAA. Taking the time to learn the screen reader you are coding for will be a huge help. For example IE with JAWS doesn’t handle aria-live all that well so understanding this fundamentals will get you pretty far. Granted this takes a lot of time but it’s pretty rewarding in the end knowing all users can use your app.

nothingismagick avatar Mar 06 '19 23:03 nothingismagick

Logging:

Three levels of written errors and one kind of audio error

The written errors would be in the console, and would range from:

  1. minimal unixy
  2. moderate and helpful
  3. sarcastic, mean and insulting the audio errors would be recordings of a small child laughing at you, unless you get a perfectly bad score - then the child cries

nothingismagick avatar Mar 07 '19 16:03 nothingismagick