-
Notifications
You must be signed in to change notification settings - Fork 61
Description
I'm building a website with docusaurus-theme-classic
, and for web accessibility reasons I believe it would be an improvement if the --ifm-narrow-window
was using the rem
unit instead of the px
unit. i.e. in variables.pcss doing :
@custom-media --ifm-narrow-window (max-width: 62.25rem);
Using pixels, people zooming in their browser with the option to only zoom texts (on Firefox : View > Zoom > Zoom Text Only, or on Google Chrome : Settings > Font Size > Very Large) would have texts overlaps since the media queries are not triggered.
Here is a screenshot of the docusaurus website navbar in Google Chrome using Very Large text size with 100% zoom in a 1180px window :
According to the WCAG 1.4.4 criterion :
Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)
It is not absolutely clear if the default browser zoom is enough or if the zoom of text only must be considered. But it seems worth considering both since the navbar display would be broken for people using the text only option set to large text. (My initial motivation being that the French a11y guidelines RGAA I am subjected to, and that are based on WCAG, always require text to be readable with a text-only 200% zoom).
Also, this issue has already been discussed in this docusaurus issue, but I believe that the modification should happen here first, since the main problem described is with the use of media queries in the navbar component.
If this change makes sense, I guess it should probably go along with using this --ifm-narrow-window
within docusaurus as well, but I might be missing context.
Thank you!