Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Quality Extension: a11y #56

Open
nothingismagick opened this issue Mar 5, 2019 · 3 comments
Open

Quality Extension: a11y #56

nothingismagick opened this issue Mar 5, 2019 · 3 comments
Projects
Other

Comments

@nothingismagick
Copy link
Contributor

nothingismagick commented Mar 5, 2019 •
edited

Audit for A11Y

OMG LIST!
https://docs.google.com/spreadsheets/d/10CTezA0iDdaWggaqxuHawj-5u8YXdZeWBJsIkuvJ364
@nothingismagick
Copy link
Contributor Author

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
Copy link
Contributor Author

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
Copy link
Contributor Author

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

@IlCallo IlCallo added this to Needs triage in Other via automation Jun 1, 2022
@IlCallo IlCallo moved this from Needs triage to Low priority in Other Jun 1, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
Other
Low priority
Milestone
No milestone
Development

No branches or pull requests
1 participant
@nothingismagick