mirror of
https://github.com/BookStackApp/BookStack.git
synced 2026-02-05 00:29:48 +03:00
Parts of BookStack are not reachable when using a screen reader #2194
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @Flameborn on GitHub (Apr 16, 2021).
Describe the bug
Parts of BookStack are not reachable when using screen reading software, such as the built-in VoiceOver under MacOS via the Safari web browser.
The issue can be reproduced under Windows via NVDA, using Chrome or Firefox.
Currently, the discovered items are:
Other, non-Safari browsers, such as Brave or Firefox under MacOS work as expected, however, their Windows equivalent does not.
Steps To Reproduce
This is specifically for the Search and Navigation links, other invisible items behave similarly.
B) Under Windows, start NVDA. Use the arrow keys to navigate, enter to activate an item. NVDA can be turned off via insert+q, or the Exit item when right clicking on its system tray icon.
Expected behavior
Screen readers read all items, starting with the search box, shelves, books, profile, etc.
Your Configuration (please complete the following information):
Please note: This applies to my hosted instance, however, the issue can be reproduced via the demo instance as well.
In addition:
Maximizing or making a window full screen provides a temporary fix, however, if there is an icon or a control that makes these areas visible on-screen, they should be reachable via a screen reader, as per WCAG 2.1.
@tspivey commented on GitHub (Apr 16, 2021):
Testing on Windows, Firefox and Chrome doesn't show it either.
It shows up in Chrome if I maximize the window; otherwise the button to expand the navigation is just a blank line.
@ssddanbrown commented on GitHub (Apr 19, 2021):
Hi @Flameborn, Thanks for reporting and thanks @tspivey for confirming.
Just for my understanding, is this only apparent at smaller window widths when the header collapses into the menu? Just want to be sure since the last paragraph hints at this but the bug description and reproduction steps do not refer to window width or header state.
I generally use ChromeVox for my testing (Easiest option since I primarily use Linux) and I can confirm the header elements can be navigated when in desktop/expanded view but the sections and toggle are skipped on smaller widths when the header elements are collapsed to the menu.
@Flameborn commented on GitHub (Apr 19, 2021):
Hi @ssddanbrown,
Thank you for your reply.
Yes, I am suspecting that the window size could be responsible for the disappearance of the navigation links, and the actions on the books page.
When I wrote the steps to reproduce, I wasn't aware of window size differences in other browsers, however, @tspivey pointed this out and there is indeed a difference when the browser window is full screen, at least in the tested browsers.
Interestingly, my Brave does not need to be full screen for the navigation links to show up, unlike in Safari, this is why I was hesitant to state that this is mainly due to a window size difference.
If it is indeed the case, one possible fix could be to include a control that expands the collapsed items, or make it visible to a screen reader via a label (if one exists already).
This might be unrelated, but I also noticed that there is a Toggle Details button that does not seem to do anything when using a screen reader, at least I could not see page sections that became hidden when the button was pressed.
@ssddanbrown commented on GitHub (Apr 20, 2021):
Hi @Flameborn, Thanks for the response.
I've just released v21.04.1 which includes a bunch of changes to the header elements to address the concerns raised here.
When in "mobile" mode the menu toggle button should now be accessible, much better labelled and the info/content tabs on content pages should now be accessible. I've tested this on my own development environments, using chrome vox and browser accessibility tools but I'm hesitant to close this off until you could confirm things are now usable.
The demo site is up-to-date if you wanted to compare the experience against your own hosted instance.
@Flameborn commented on GitHub (Apr 20, 2021):
Hi @ssddanbrown,
Thank you very much for the extremely quick fix.
I've tested the demo app with Safari, Brave and Firefox under MacOS, and I can confirm that the issue is fixed.
The more detailed ARIA role and label for toggling between the content and the secondary actions on the books page is also a welcome addition, thank you!