Accessibility Bug: The scrolling text area does not have a tab index
The click to reveal widget forces a scrolling text box. This text box cannot be scrolled by a keyboard user, because there is no tab index on the box itself. It is also not clear that the text box is scrollable, because the thumb for the scrollbar is hidden until scrolling with the mouse. This box should be responsive on browser zoom and expand vertically to show the text, rather than cut the text off in a scrolling area. If it must do a scrolling area, that scrolling area needs the scroll bar thumb as an indicator, and also needs to be focusable with tab.
Adam Gojanovich
shared this idea
-
Adam Gojanovich
commented
In the click to reveal widget overlay, if you add text to the body, it automatically becomes a scrolling text box. There are a few problems with this.
When there is a scrolling textbox area within a webpage, it needs to have the attribute tabindex=0 in order for a keyboard user to focus on it, and use the arrow keys to scroll. Otherwise you cannot scroll the textbox at all without a mouse device. There appears to be a tabindex on the overlay modal itself instead, so you can tab to the whole overlay, but still cannot scroll with the arrow keys
Notice the focus ring in the screenshot. That focus ring should be on the scrolling text box, not the whole modal itself. Having the whole modal be focusable is a mistake as it is not useful.
There is no visible indicator that there is a scrolling area. Even if I set macOS to "always show scrollbars," the captivate output has that disabled, and scrollbars aren't shown except on mouse hover. If I'm not using a mouse and navigating with keyboard only, I don't see those scrollbars at all.
When using browser zoom, the container reflows to get larger, but the text area shrinks showing significantly less text.
Overall, it would be much better if this text area was not a scrolling area, but was a responsive container that would expand on zoom. But at the very least, there should be a visible indicator of scroll, and the tabindex should be moved to the correct element.
-
Saurav Ghosh
commented
Hi Adam,
Could you please share more details on this?
