[a11y] Accessibility issues
kennethlarsen opened this issue · comments
I noticed some accessibility issues on the frontpage which would be fairly simple to fix. These issues might be good for first time contributions.
Headings
There are several nonconsecutive headings.
-
"More than just code" is an h1 but is followed by an h3. Should be follwed by an h2.
-
"Join the Revolution" is an h1 but is followed by an h3. Should be follwed by an h2.
-
"Get started today" is an h1 but is followed by an h3. Should be follwed by an h2.
Contrast
There is insufficient contrast several places.
-
Navbar: The color combination #ffffff/#2d86fb has a contrast ratio of 3.55, which is not sufficient. At this size, you will need a ratio of at least 4.5. (try #ffffff/#0074e4 instead)
-
"Collaborate on code, data, policy, or procurement within your agency or with the public.": The color combination #b6d5fe/#2d86fb has a contrast ratio of 2.35, which is not sufficient. (try #e2eeff/#2d86fb instead).
-
Links: The color combination #b6d5fe/#2d86fb has a contrast ratio of 2.35, which is not sufficient. (Try #e2eeff/#2d86fb instead)
Some of these might be addressed in #524
I can take a look at this over the weekend and compare with #524 to see what still needs to be addressed. I just need a bit of time to build a local and review any code standards.
Most of the issues in the original issue have been addressed, but I decided to just run W3C Validator and Wave against the new site and see if anything else appeared. I will try to get a PR open with the fixes tomorrow, but for the contrast issue I think there may need to be some discussion on color direction as the AAA passing green and orange doesn't really stand out compared to the gray.
https://government.github.com/
There is now a skipped heading warning with the first list, starting with "Collaborate on code". These are all H3s, but there is no H2 between the site header and the H3s.
W3C did see a missing end section tag and extra ending div tag.
https://government.github.com/community/
There is a jump from "Who's Using GitHub" H1 to an H4. And under Governments (H3) it goes to an H6 subtitle.
The search input is also missing a form label.
https://government.github.com/accessibility/
Only one skipped heading here, Summary is an H3 instead of an H2 after the Accessibility (H1).
Wave is reporting a contrast issue on this page, for the green "Supports" and orange "Supports with exceptions" in the tables. I'm not sure if you are aiming for AAA Passing, as that gets a to be a pretty dark green and orange if you go with just a color fix.
On the Wave report, there was also an issue on each page about the GitHub octocat back to home icon. There is no text in the link, just an svg. I can probably just add something like this to see if it will fix the issue. CSS Tricks
this got merged in #608, closing out. Thanks for everyone's help looking out for a11y!