Your daily frequent11y newsletter, brought to you by @ChrisBAshton:

Accessible Overflow

• A fascinating insight into browser behaviour by Marcus Herrmann. When navigating ‘overflow’ content, i.e. text that doesn’t fit inside its container, this requires us to scroll through the content. Many of us would simply use the mouse wheel to scroll within those containers, but how about users who navigate by keyboard? Keyboard users use the up and down arrows to move up and down the page, but what about the overflow content within the page?
• Firefox automatically puts such content in the tab order, making it reachable and its contents scrollable. In Chrome, Edge and Safari, however, overflow content is not scrollable with a keyboard by default. There is a Webkit issue and a Chrome intent to ship, but otherwise developers are stuck using the following workaround:
  1. Add tabindex="0" to the container
  2. Apply focus styles to the container, e.g. .my-owerflowing-div:focus { outline: 2px solid; }
  3. Add role="region" and supply an accessible name using, for example, an aria-label.
• Adrian Roselli wrote about this in more detail in Keyboard and Overflow.

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.