Non-Scrolling Sidebars Can be Migraine Triggers

[MarjaE2]

Describe the bug
Just-the-docs pages default to using a wide non-scrolling sidebar next to scrolling content. (And a lot of other web pages and apps, e.g. Vector Wikipedia, read the docs, Firefox's preferences, etc. do the same.)

These can trigger migraines if users with certain visual processing issues and/or certain types of post-concussion syndrome try to scroll or page down. One part of the page goes down, another does not, brain tries to follow both.

In my experience, the smoother the scrolling, the worse the effect. I disable any type of smooth scrolling, reduce the frame rate, and try to page down instead, to unsmooth things.

In my experience, the wider the scrollbar, and the less its visual contrast and clear visual separation from the rest, the worse the effect. I rarely have trouble with narrow sidebars, or with seperate windows, or with scrollbars, vertical docks, vertical panels, etc. I am much more likely to have trouble with hovering elements, including modals, and with backgrounds, when either the foreground or background scrolls and the other does not.

I can't say whether other people with similar problems have the same patterns of what makes things better or worse.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://vorta.borgbase.com/
2. Page Down

Expected behavior
These days, I have to expect documentation sites to trigger migraines. But it'd be handy to have narrower sidebars, contrasting color schemes, and more distance between sidebars and content.

Desktop (please complete the following information):

• OS: MacOS, Fedora
• Browser: Firefox

[max06]

Hello @MarjaE2 and welcome to just-the-docs!

I am truly sorry to hear about your issues with migraine triggers.

(Following is my own, personal opinion)

We as developers are generally trying to make the user experience as good as we possibly can. Access to the navigation on pages with much content is one of those things. I, as a user, don't want to scroll all the way back to the top to get to another page. It disturbs the flow. We also try to make our "product" as aesthetically pleasing as possible. Since there's no objective definition of that fitting everyone, we go for the biggest part of the users. The downside is clear, there's always someone left. It's impossible to satisfy everyone.

Let's get practical. We don't run the page you mentioned. We provide a framework, a template, that can be used by everyone for everything. We deliver that framework with 2 default color schemes, a light one and a dark one. Users are also free to create their completely own color schemes, like the maintainer of the mentioned page did. We can't control them. And we don't want to. Which means, this doesn't classify as a bug.

Before i get attacked for being ableistic or discriminating: I am disabled. One part of that is sensory overstimulation. My surroundings outside are far from being perfect. I can't change that, but I can definitely change what I do about it. Like wearing noise cancelling headphones, and sunglasses. You could for example try the high contrast mode in osx. Or try out a browser with a reading mode feature.

I'll leave this issue open for my colleagues to give them the chance for their opinion.

[mattxwang]

Thank you for submitting an issue @MarjaE2! First of all, I'm sorry to hear that various websites have been migraine triggers. That's certainly not a positive experience, and we greatly appreciate you submitting this issue.

To provide an alternative perspective from @max06, I think there are a few different ways we (or the downstream users of the theme) can approach this problem. Let me enumerate a few things on my mind:

Client-side fixes:

• you could browse the site permanently in "mobile" mode. This collapses the sidebar into a hamburger menu that requires user interaction to click into; as you scroll through the site, the mobile nav does follow you around, but it's smaller.
• you could disable position: fixed on the .sidebar class (with a browser extension, user-loaded stylesheet, etc.). this has a negative side effect of shifting the page layout moderately, but it's still readable.
• like @max06 has suggested, something like reading mode (or an RSS-based approach) may work better

Theme user (i.e. borgbase) fixes:

• they could increase the contrast of the sidebar, especially since the orange they've picked is nonstandard for the theme

Theme developer (i.e. us) fixes:

• providing better accessibility defaults (for example, this seems like the opposite of prefers-reduced-motion - if anything, it sounds like you'd prefer more motion?)
• providing client-side customization for accessibility (similar to UserWay)
• better understanding this space, so we can create a better solution (there might be one that I'm unaware of!)

Which leads me into a few questions, if you don't mind -- all focused on seeing how we can help you!

When you say:

I rarely have trouble with narrow sidebars, or with seperate windows, or with scrollbars, vertical docks, vertical panels, etc. I am much more likely to have trouble with hovering elements, including modals, and with backgrounds, when either the foreground or background scrolls and the other does not.

What would the ideal setup be for you given the layout of our site? For example, would removing the alternating background help, or make the problem worse; how can we make it look closer to a vertical panel/dock instead of a modal?

Alternatively, do you mean that you'd prefer if the sidebar disappeared as you scrolled down the page?

In my experience, the smoother the scrolling, the worse the effect. I disable any type of smooth scrolling, reduce the frame rate, and try to page down instead, to unsmooth things.

My understanding is that we don't do this already on JtD; is your experience different? Perhaps we have a bug with our theme.

---

Hopefully we can find a solution that works for you while maintaining the core of our theme!