WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Floating Toolbars

for

From: Patrick H. Lauke
Date: Mar 20, 2023 1:50PM

On 20/03/2023 18:53, Christine L Holmes wrote:
> How do you make floating toolbars keyboard/screen reader accessible.

Assuming by "floating toolbar" you mean something similar to floating
action buttons or similar (where something is constantly visible in a
particular screen location, despite scrolling):

Keep meaning to write some thoughts on this, but in brief, my suggestion
here would be: treat the floating toolbar like a *non-modal* dialog
(sadly, there's no APG pattern for this yet, despite some early
discussions on it - see https://github.com/w3c/aria-practices/issues/599
for instance, others
https://github.com/w3c/aria-practices/issues?q=is%3Aissue+is%3Aopen+non-modal).

At a high level, you navigate through the "main" page as normal, but the
floating toolbar is effectively "hidden" from AT (aria-hidden). When you
switch to it (with `F6` or similar), focus lands inside the toolbar, and
the main page is hidden, and focus is retained inside the floating toolbar.

If instead by "floating toolbar" you mean something more akin to a
sticky header, I'd say design it just as normal if it wasn't sticky.
Optionally, as a nice shortcut, perhaps offer a way to jump directly to
it (like a keyboard shortcut/combination) without having to scroll /
navigate all the way back to the actual start of the page where the
toolbar "lives" in the markup.

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke