Skip to content

Gatsby A11y Fixes

Flarnie Marchan edited this page Oct 2, 2017 · 9 revisions

Fixes needed for the new Gatsby Docs site

All Pages

Owner Size Description
Flarnie S Ensure that "#algolia-doc-search" has ARIA child-role "textbox" Edit: This seems like a non-issue, see https://github.com/dequelabs/axe-core/issues/549
Flarnie ? Ensure that "#algolia-doc-search" has 'aria-labelledby' that references something which doesn't exist.
? On any page with code samples - some of the colors don't provide enough contrast. Edit: Opened an issue for this - https://github.com/facebook/react/issues/10925

Home Page

Owner Size Description
S Need more contrast between font color and background in 'Result' header on examples. Edit: made separate issue for this - https://github.com/facebook/react/issues/10929

Docs Page

Owner Size Description
Flarnie S On "Docs > Installation" tab buttons need more contrast between font color and background.

Community Page

Note: Community page also has an issue with videos not showing up. See checklist item on main Gatsby checklist.

Owner Size Description
M On "Community > Where to get support" the "twitter-timeline" link renders with no text content. Needs some text content. Edit: This is only a problem because the twitter timeline widget is not appearing.
S On "Community > Conferences" there somewhere is a link that says "React.js Conf 2015 Keynote - Introducing React Native" with low contrast. This was removed or fixed
Flarnie S On "Community > Conferences" there is an iframe that needs a title.
S On "Community > Videos" all video title links need more color contrast. (not an issue after we added titles to iframes)
Flarnie S On "Community > Videos" all video iframes need a title attribute.
Flarnie S On "Community > Videos" image under "Going big with React" needs alt text.
Flarnie M On "Community > Videos" there are three links with no text - hard to see where 2/3 are.
Clone this wiki locally