pa11y audit - Githubissues

lougroshek commented 3 years ago

home

Blog links, entire div with custom-link underlined should be a button or link, not just the arrow icon.
For elements like the one below, nothing inside of an anchor tag should have role="button". That's basically a button inside a link. Two things that can receive focus. Confusing for the user.

<a href="/explorer">Go to the Explorer <div class=" inline-svg down-arrow-sm" role="button" tabindex="0"><svg aria-hidden="true" width="9" height="10" viewBox="0 0 9 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.44849 9.26255L4.44849 3.20812L4.44849 0.180908" stroke-width="0.686"></path><path d="M8.91797 4.74146V4.74146C6.45533 4.74145 4.45897 6.7783 4.45897 9.24094V9.24094" stroke-width="0.686"></path><path d="M0 4.74146V4.74146C2.46264 4.74146 4.459 6.7783 4.459 9.24094V9.24094" stroke-width="0.686"></path></svg></div></a>

Results for URL: http://localhost:8000/

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #gatsby-focus-wrapper > div:nth-child(1) > div:nth-child(1) > div > div:nth-child(2) > div > div:nth-child(2) > 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.45:1. Recommendation: change text colour to #060100. ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail ├── #hero > div > div:nth-child(1) > div:nth-child(2) > p > span └── a data tool that reveals where ...

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #hero > div > div:nth-child(1) > div:nth-child(2) > div:nth-child(3) > a:nth-child(1) > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #hero > div > div:nth-child(1) > div:nth-child(2) > div:nth-child(3) > a:nth-child(2) > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #hero > div > div:nth-child(2) > div > div > div > div:nth-child(2) > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #page > div:nth-child(4) > div > div:nth-child(3) > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #page > div:nth-child(5) > div > div:nth-child(3) > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #sign-up-bar > div > div:nth-child(1) > div > div:nth-child(2) > div └──

8 Errors

about

Results for URL: http://localhost:8000/about

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #gatsby-focus-wrapper > div:nth-child(1) > div:nth-child(1) > div > div:nth-child(2) > div > div:nth-child(2) > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #hero > div > div:nth-child(1) > div > div:nth-child(3) > div > div:nth-child(2) > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #hero > div > div:nth-child(2) > div > div:nth-child(2) > div:nth-child(3) > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #sign-up-bar > div > div:nth-child(1) > div > div:nth-child(2) > div └──

4 Errors

in-action

Results for URL: http://localhost:8000/in-action/

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #gatsby-focus-wrapper > div:nth-child(1) > div:nth-child(1) > div > div:nth-child(2) > div > div:nth-child(2) > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #hero > div > div:nth-child(1) > div:nth-child(2) > div:nth-child(3) > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #hero > div > div:nth-child(2) > div > div > div > div:nth-child(2) > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #page > div:nth-child(2) > div:nth-child(2) > div:nth-child(3) > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #sign-up-bar > div > div:nth-child(1) > div > div:nth-child(2) > div └──

5 Errors

in-action/dallas-isd

Results for URL: http://localhost:8000/in-action/dallas-isd

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #gatsby-focus-wrapper > div:nth-child(1) > div:nth-child(1) > div > div:nth-child(2) > div > div:nth-child(2) > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #hero > div > div:nth-child(1) > div > div:nth-child(3) > div > div:nth-child(2) > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #sign-up-bar > div > div:nth-child(1) > div > div:nth-child(2) > div └──

3 Errors

in-action/operation-connectivity

Results for URL: http://localhost:8000/in-action/operation-connectivity

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #gatsby-focus-wrapper > div:nth-child(1) > div:nth-child(1) > div > div:nth-child(2) > div > div:nth-child(2) > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #hero > div > div:nth-child(1) > div > div:nth-child(3) > div > div:nth-child(2) > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #sign-up-bar > div > div:nth-child(1) > div > div:nth-child(2) > div └──

3 Errors

faq

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #gatsby-focus-wrapper > div:nth-child(1) > div:nth-child(1) > div > div:nth-child(2) > div > div:nth-child(2) > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #hero > div > div:nth-child(2) > div > div > div > div:nth-child(2) > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #faq-page > div:nth-child(2) > div:nth-child(2) > span > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #methods-paper > div > div:nth-child(2) > div:nth-child(2) > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #methods-paper > div > div:nth-child(2) > div:nth-child(3) > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #sign-up-bar > div > div:nth-child(1) > div > div:nth-child(2) > div └──

6 Errors

contact

Results for URL: http://localhost:8000/contact

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #gatsby-focus-wrapper > div:nth-child(1) > div:nth-child(1) > div > div:nth-child(2) > div > div:nth-child(2) > div └──

• Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined. ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name ├── #sign-up-bar > div > div:nth-child(1) > div > div:nth-child(2) > div └──

2 Errors

hoshmn commented 3 years ago

Thanks for walking me through this, @lougroshek. I cleared up these pa11y issues, except for the "insufficient contrast" of the red text in the hero on the homepage (pa11y's suggestion is to make the text black...). I think I got rid of all the cases of nested buttons as well -- these mainly had to do with the InlineSvg component (made a prop to control whether they're tabbable). The one place I intentionally left a nested button in a link is in index.js, as Firefox needed it for some reason for the link to be focusable (adding tabIndex="0" to the didn't do it. Seems better to have one spot where Chrome users who tab hit the same element twice in a row than have Firefox users miss the link completely? <a href="/explorer"> {/* NOTE: in firefox this <a> wasn't receiving focus */} <span tabIndex="0" role="button"> Go to the Explorer <InlineSvg type="down-arrow-sm" tabIndexed={false} ariaLabel="" /> </span> </a>

lougroshek commented 3 years ago

@hoshmn Great job working through these. It looks like this issue with the anchor tags is a documented issue with Firefox, and has no impact on or relevance to screen readers. If it were an issue with screen readers, it would be a compelling reason for keeping the above. You can apply the fix I've linked to to make anchor tags tabbable in Firefox on your device, but tabbing in Firefox isn't necessarily a good way to test screen reader behavior. Regardless, we shouldn't nest buttons inside of links.

Regarding the color contrast issue, maybe @sashasashasasha has some ideas about that.

hoshmn commented 3 years ago

Ahh gotcha, interesting. Removed the nested button. Thanks!

Hyperobjekt / cpal-site

pa11y audit #19

menu

home

about

in-action

in-action/dallas-isd

in-action/operation-connectivity

faq

contact