Wp-graphql: Docs: accessibility audit

[jacobarriola]

I ran a quick lighthouse audit and found some accessibility flags that should be addressed:

1. Color contrast ratios - random copy throughout, most notably in the pink used in the <code> element and links inside the alert components.
2. Buttons on the side nav do not an accessible names - looks like the <button> elements have an embedded <h6>

Happy to get a PR going if this is an issue you'd like to get addressed.

[jasonbahl]

@jacobarriola I think it would be a great idea to audit the docs for accessibility and start working on fixing issues, such as those you've already pointed out.

Feel free to submit PRs to address.

If you're not sure where to begin, let us know and @TylerBarnes or I can help get you in the right direction.

Thanks!

[jacobarriola]

@jasonbahl was out last week, so I didn't get a chance to start this task. I will be digging in this week.

[jasonbahl]

@jacobarriola awesome! Thanks so much!

[jasonbahl]

@jacobarriola let me know if you want to chat sometime about doing a comprehensive audit and coming up with a list of action items to address.

Thanks!

[jacobarriola]

@jasonbahl for sure. Is the bug scrub a good time? Or should we discuss offline?

BTW, I ran into some issues with the Apollo theme when trying to change the font colors. I could not come up with a way to override or set custom colors.

[TylerBarnes]

@jacobarriola I believe I was using theme shadowing to override colors. This file might be the one https://github.com/wp-graphql/wp-graphql/blob/develop/docs/src/gatsby-theme-apollo-core/utils/colors.js

[jacobarriola]

Ok, thanks @TylerBarnes !

I'll take another stab at it. 👍

[jacobarriola]

@jasonbahl I ran an accessibility audit in Chrome via Axe extension and found the following issues.

A. Global issues

• [x] html element must have lang attribute. reference: https://dequeuniversity.com/rules/axe/3.4/html-has-lang
• [x] Zooming and scaling must not be disabled. Ensure <meta name="viewport"> does not disable text scaling and zooming. reference: https://dequeuniversity.com/rules/axe/3.4/meta-viewport
• [x] Document must have one main landmark (document as 2 elements). Reference https://dequeuniversity.com/rules/axe/3.4/landmark-one-main
• [x] Ensures landmarks are unique (two aside elements). https://dequeuniversity.com/rules/axe/3.4/landmark-unique
• [x] Heading levels should only increase by one. The HTML goes from an <h1> page title to an <h3>, which is behaving like a subtitle.

B. Color contrast ratios:

• [x] global link color
• [x] links inside.ant-alert-warning, ant-alert-info
• [x] code sytnax highlighting (the pink font color)

C. Other recommendations:

• [x] Add the react-axe plugin to show accessibility issues while developing

I can start working on these issues in the PR if you want me to move forward. Thanks!

[jacobarriola]

@TylerBarnes I noticed that you used a scaled-down seo component (https://github.com/wp-graphql/wp-graphql/blob/develop/docs/src/gatsby-theme-apollo-docs/components/seo.js) instead of the seo component that ships with the gatsby starter (https://github.com/wp-graphql/wp-graphql/blob/develop/docs/src/components/Seo/index.js). Is there are reason you chose to take this approach? Probably makes sense to go with the component that ships with the starter, since it contains a few of the elements that I'm going to address in my accessibility PR.

I'll use the component that ships with the starter and will remove the scaled down version, unless you want me to take a different approach.

[TylerBarnes]

Sorry @jacobarriola , I missed this notification! To be honest, I can't remember why, feel free to make any changes that make sense to you. I was working fairly quickly when I ported the old site to the Apollo theme, so there may be a few mistakes in there.

[jacobarriola]

@jasonbahl still working through this - FYI

[jasonbahl]

Closed by #1150

Thanks @jacobarriola!