Scrollable divs (Re: WCAG2.1 and keyboard navigation)

(New subject: Scrollable divs)

Hi Matt,

I agree with your list of problems. I'll add that all nested scrollbars
(including iframes) are usually awkward for sighted use with voice control,
small mobile screens, browser zoom, and screen magnification.

We could talk about design solutions to avoid or reduce nested scrollbars,
such as popping a chat session into a new browser window. However,
overflow:auto has its uses, and some browsers make it tab-focusable
natively.

So, is there something missing in native browser behaviors or accessibility
APIs that would improve the experience for scrollable divs?

Mitchell Evan
mtchllvn@gmail.com
linkedin.com/in/mitchellrevan <https://www.linkedin.com/in/mitchellrevan>
Twitter @mitchellrevan <https://twitter.com/mitchellrevan>
+49 1525 8950540
+1 510 375 6104


On Mon, Aug 24, 2020 at 7:15 AM Matt King <a11ythinker@gmail.com> wrote:

> I’ve found focusable, Scrollable divs (e.g., overflow:auto) to be pretty
> problematic from a screen reader perspective.  They are not useful to a
> screen reader user, and they generate a ton of speech that can be pretty
> confusing to users. I haven’t figured out a role and name that would remove
> that confusion. While they apparently provide functionality similar to a
> scrollbar, they don’t fit the definition of an ARIA scrollbar.
>
>
>
> In some cases I’ve avoided the problem by removing their focusability and
> using a widget inside that provides scroll. For example, a grid that is
> navigable with arrow keys can scroll as focus moves from row to row. And,
> you can use page up and down to scroll a block of rows. That can satisfy
> the needs of both screen reader and keyboard users.
>
>
>
> BTW, a grid is a good widget for a chat log. It can provide infinite
> scroll and a grid cell can contain any type of element.
>
>
>
> Matt
>
>
>
> *From:* Mitchell Evan <mtchllvn@gmail.com>
> *Sent:* Friday, August 21, 2020 6:31 AM
> *To:* Marjanska, Martyna (SSC/SPC) <martyna.marjanska@canada.ca>
> *Cc:* Matt King <a11ythinker@gmail.com>; Will Ringland <wringlan@epic.com>;
> Amber Holladay <amber-holladay@pluralsight.com>; WAI Interest Group <
> w3c-wai-ig@w3.org>; Ginger Claassen <ginger.claassen@gmx.de>
> *Subject:* Re: WCAG2.1 and keyboard navigation
>
>
>
> Hi Martyna,
>
>
>
> Good catch! Here's the challenge: A block element such as a <div> or
> <section> becomes scrollable with CSS overflow:scroll or overflow:auto.
> Some browsers automatically make the scrollable block tab focusable, but
> other browsers don't.
>
>
>
> To enable keyboard access for visual scrolling in all browsers, here are
> some options:
>
> (1) Ensure that there are nested links or buttons near the top and bottom
> of the block's content, or
>
> (2) Add tabindex=0 to the block element (as described in the video you
> sent), or
>
> (3) Slowest but best: convince browser developers to fix the underlying
> problem. Example: https://www.chromestatus.com/feature/5231964663578624
>
>
>
> Cheers,
>
>
> Mitchell Evan
>
> mtchllvn@gmail.com
>
> linkedin.com/in/mitchellrevan <https://www.linkedin.com/in/mitchellrevan>
>
> Twitter @mitchellrevan <https://twitter.com/mitchellrevan>
>
> +49 1525 8950540
>
> +1 510 375 6104
>
>
>
>
>
> On Fri, Aug 21, 2020 at 2:49 PM Marjanska, Martyna (SSC/SPC) <
> martyna.marjanska@canada.ca> wrote:
>
> I would have to agree, almost never.
>
> Another example when tab focus on text may be needed is chatbot. I am
> testing one at the moment.
>
> The conversations usually have 3 elements:
>
>    1. bot said
>    2. user said
>    3. date
>
> The conversations are non-interactive elements typically wrapped in <div>.
> The navigation between the conversations and conversation history is
> painful.
>
> The recommendation (https://www.youtube.com/watch?v=pHvMPSL_2CM&t=73s) is
> to wrap the conversation in <section> element to create regions with
> tabindex=0 to give focus. This way user can easily tab (shift tab) from one
> block of text to another.
>
>
>
> Please tell me if this is wrong, or maybe you have different solutions.
>
>
>
> Regards,
>
> Martyna
>
>
>
>
>