GitBook has accessibility isssues

[ryceg]

AxeTools returns several rather severe issues with the GitBook dark mode.

• Resultant headings underneath the search title should increase by one- they should be <h2> elements instead of <h3> elements.
• Contrast in the search box is poor, with a contrast score of 1.79 (.
• Contrast in the results is extremely poor, with a score of 1.29.
• Hamburger menu does not have an arialabel or title, and is thus inaccessible to screenreaders.
• Landmarks should have a unique role or role/label/title (i.e. accessible name) combination; the <nav> element requires an aria-label.
• W3C logo on the main page requires an alttext.

I'd be happy to create a separate issue for each of these, or have a crack at them if you're tied up with other stuff.

[dspreadbury]

Thanks for taking the time to look at this, Rhys. If you'd like to suggest some modifications to the CSS styling to address the colour contrast, that would be reasonably easy for me to incorporate. Changes to the header styles etc. would require some authoring changes up-stream from the creation of the GitBook materials, which I'll need to think about. Changes to the alt text for elements like the navigation would ideally be made in GitBook itself so that we don't have to patch the output manually after each generation.

[dspreadbury]

@ryceg, I've recently changed over to using mdBook instead of GitBook for producing the SMuFL specification. Would you be able to check out the current version and let me know if you still find similar accessibility issues?

https://w3c.github.io/smufl/latest/

[ryceg]

Hi @dspreadbury,

I've taken a look at the update.

• The <a> element needs a slightly more contrasting colour to meet the contrast ratio of 4.5:1
• The <h1> element in the top should be changed to a <header> to more accurately reflect its role.
• The w3c logo should have a higher resolution image
• The print page <a> in the header should be changed to a <button>.

I'm afraid I'm not familiar enough with mdBook to be able to author a complete fix to all these issues, but I have made a pull request which at least addresses the contrast issues.

Additionally, because you are serving SVGs, they do not render well in the dark mode; you may wish to style it with a background CSS of white, or use a css filter:invert(.9) to flip the colours. I've added in a background CSS just for simplicity's sake.

You also might like to look into implementing a GitHub Action to automate the process of building; https://github.com/peaceiris/actions-mdbook