a11y: opacity=1 for navigation, details, actions #2156

New Issue

OVERLORD · 2026-02-05T03:08:22+03:00

OVERLORD commented

2026-02-05 03:08:22 +03:00

Originally created by @SimpelMe on GitHub (Mar 12, 2021).

Describe the feature you'd like
Disable transitioning opacities while hovering navigations (page, book), details, actions. Have always opacity=1.

Describe the benefits this feature would bring to BookStack users
Currently the contrast for these named elements are to low for many people, as long as they aren't hovering these elements. Setting the opacity for these elements to 1 in general would increase accessibility and fit WCAG and BITV.

Additional context
Currently we set 'Custom HTML Head Content'. But we would appreciate this as an a11y option or default.

<style>
/* increases a11y in Light Mode - h5 is because of comments in footer */
.tri-layout-left-contents>*, .tri-layout-right-contents>*, .breadcrumbs, h5{
    opacity: 1.0 !important;
}
</style>

Originally created by @SimpelMe on GitHub (Mar 12, 2021). **Describe the feature you'd like** Disable transitioning opacities while hovering navigations (page, book), details, actions. Have always opacity=1. **Describe the benefits this feature would bring to BookStack users** Currently the contrast for these named elements are to low for many people, as long as they aren't hovering these elements. Setting the opacity for these elements to 1 in general would increase accessibility and fit WCAG and BITV. **Additional context** Currently we set 'Custom HTML Head Content'. But we would appreciate this as an a11y option or default. ``` <style> /* increases a11y in Light Mode - h5 is because of comments in footer */ .tri-layout-left-contents>*, .tri-layout-right-contents>*, .breadcrumbs, h5{ opacity: 1.0 !important; } </style> ```

OVERLORD added the 🎨 Design 💆 UX ♿ A11y labels 2026-02-05 03:08:22 +03:00

OVERLORD closed this issue

2026-02-05 03:08:26 +03:00

OVERLORD commented

2026-02-05 03:08:31 +03:00

@ssddanbrown commented on GitHub (Mar 13, 2021):

Thanks for the suggestion @SimpelMe.

To be honest, I quite like the fading of the secondary elements as it moves focus to the main content until someone needs to interact with those elements. Additionally, I don't want to introduce a slew of options for these kind of specific details.

This sounds like an idea case for the prefers-contrast media query, but it's still draft.

Is there something you find particularly lacking or insufficient in your current custom override solution?

@ssddanbrown commented on GitHub (Mar 13, 2021): Thanks for the suggestion @SimpelMe. To be honest, I quite like the fading of the secondary elements as it moves focus to the main content until someone needs to interact with those elements. Additionally, I don't want to introduce a slew of options for these kind of specific details. This sounds like an idea case for the [prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) media query, but it's still draft. Is there something you find particularly lacking or insufficient in your current custom override solution?

OVERLORD commented

2026-02-05 03:08:36 +03:00

@SimpelMe commented on GitHub (Mar 13, 2021):

I do like the fading too. But as we think about BookStack as a wiki for potentially many hundreds of employees we will focus for a11y a lot.

Til now I didn't heard about prefers-contrast media query. That looks very interesting and could be a way for us to implement it in the custom override solution too.

To be honest the custom override solution is more than many other software is providing. I'm only afraid of changes in css or class names you will do not knowing what changes customers did and why. So you probably wouldn't focus and test on these changes. But it's an issue we can deal with.

So at least this issue is maybe just a suggestion to others how to increase certain type of a11y if they focus on.

Thanks for your great software and feel free to close this issue.
Regards Simpel

@SimpelMe commented on GitHub (Mar 13, 2021): I do like the fading too. But as we think about BookStack as a wiki for potentially many hundreds of employees we will focus for a11y a lot. Til now I didn't heard about prefers-contrast media query. That looks very interesting and could be a way for us to implement it in the custom override solution too. To be honest the custom override solution is more than many other software is providing. I'm only afraid of changes in css or class names you will do not knowing what changes customers did and why. So you probably wouldn't focus and test on these changes. But it's an issue we can deal with. So at least this issue is maybe just a suggestion to others how to increase certain type of a11y if they focus on. Thanks for your great software and feel free to close this issue. Regards Simpel

OVERLORD commented

2026-02-05 03:08:39 +03:00

@ssddanbrown commented on GitHub (Nov 23, 2021):

Just checked in on this again, prefers-contrast is now better supported with Safari, Edge and chrome supporting it, and Firefox has support behind a flag. Therefore I've now added prefers-contrast media queries to prevent the fade-out of the suggested areas for better accessibility. I'm not 100% how controllable the enablement of this media query is for users, it might be inferred by OS settings, but I think we're on the right track by following browser-provided standards to handle this. Once it becomes more mature hopefully it'll be more commonly understood how this gets enabled.

The added queries have been added as part of 096ed722dd and will be part of the next release so I'll therefore close this off.

Thanks again for your input @SimpelMe

@ssddanbrown commented on GitHub (Nov 23, 2021): Just checked in on this again, `prefers-contrast` is now better supported with Safari, Edge and chrome supporting it, and Firefox has support behind a flag. Therefore I've now added `prefers-contrast` media queries to prevent the fade-out of the suggested areas for better accessibility. I'm not 100% how controllable the enablement of this media query is for users, it might be inferred by OS settings, but I think we're on the right track by following browser-provided standards to handle this. Once it becomes more mature hopefully it'll be more commonly understood how this gets enabled. The added queries have been added as part of 096ed722dd4cc554fd87943b063c8b61f6e0dac6 and will be part of the next release so I'll therefore close this off. Thanks again for your input @SimpelMe

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#2156