Skip to content

Use rem unit for the narrow window breakpoint #321

@GuillaumeMMM

Description

@GuillaumeMMM

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 :
Image
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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions