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:
- Search and the navigation menu
- Actions on an empty books page, such as the list view button, or the Create New Book link under the Actions heading.
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.
- Open a self-hosted, or the demo instance at https://demo.bookstackapp.com
- Log in using existing or the demo credentials.
- A) Under MacOS, turn on VoiceOver via cmd+f5. You can use ctrl+option+arrow keys to move from item to item, and ctrl+option+space to activate one. Cmd+f5 turns VoiceOver off.
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.
- VoiceOver or NVDA only see a banner at the top, with the BookStack logo as a link, after which they navigate to the toggle details button, skipping the other items in-between. In addition, NVDA sees a few blank lines, one of them expands the navigation region.
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.
- Exact BookStack Version (Found in settings): BookStack v21.04
- PHP Version: PHP 8.0.3
- Hosting Method (Nginx/Apache/Docker): Manual, via Caddy
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.
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.