E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Floating Toolbars

Number of posts in this thread: 4 (In chronological order)

From: Christine L Holmes
Date: Mon, Mar 20 2023 12:53PM
Subject: Floating Toolbars
No previous message | Next message →

--_004_SA1PR13MB4975286D7E0B3B45614E2596BB809SA1PR13MB4975namp_
Content-Type: text/plain; charset="us-ascii"
Content-Transfer-Encoding: quoted-printable

How do you make floating toolbars keyboard/screen reader accessible.

Thanks
Christine

Accessibility is everyone's business.
________
[cid:image001.png@01D95B22.87DACF20]<https://www.northerntrust.com/>
Christine Holmes, CPACC, CSM, SA
Vice President | Digital Design and Accessibility| Experience Design and Re=
search
50 South La Salle Street, M-8, Chicago, Illinois 60603 USA
+1 312-557-8834 | = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >

Best Private Bank in the U.S.<https://www.northerntrust.com/united-states/p=
r/2021/ft-best-private-bank-us?utm_medium=3Demail&utm_source=3Doutlook&utm_=
campaign=3Dwm-brand-20211103&utm_content=3Dbrand> - Financial Times Group (=
2021)
Best Private Bank for Family Offices<https://www.northerntrust.com/united-s=
tates/pr/2021/ft-best-private-bank-us?utm_medium=3Demail&utm_source=3Doutlo=
ok&utm_campaign=3Dwm-brand-20211103&utm_content=3Dbrand> - Financial Times =
Group (2021)

CONFIDENTIALITY NOTICE: This communication is confidential, may be privileg=
ed and is meant only for the intended recipient. If you are not the intende=
d recipient, please notify the sender ASAP and delete this message from you=
r system.

NTAC:3NS-20

--_004_SA1PR13MB4975286D7E0B3B45614E2596BB809SA1PR13MB4975namp_
Content-Type: image/png; name="image001.png"
Content-Description: image001.png
Content-Disposition: inline; filename="image001.png"; size=3565;
creation-date="Mon, 20 Mar 2023 18:53:07 GMT";
modification-date="Mon, 20 Mar 2023 18:53:07 GMT"
Content-ID: <image001.png@01D95B22.87DACF20>
Content-Transfer-Encoding: base64

iVBORw0KGgoAAAANSUhEUgAAAIYAAAAnCAYAAADKOTDaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
bWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6
eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1
Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo
dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw
dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv
IiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RS
ZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpD
cmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOklu
c3RhbmNlSUQ9InhtcC5paWQ6NjA4REE5NTdCRDM0MTFFNUFBMUFERjk0NEZGN0U5MUEiIHhtcE1N
OkRvY3VtZW50SUQ9InhtcC5kaWQ6NjA4REE5NThCRDM0MTFFNUFBMUFERjk0NEZGN0U5MUEiPiA8
eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MDhEQTk1NUJEMzQx
MUU1QUExQURGOTQ0RkY3RTkxQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2MDhEQTk1NkJE
MzQxMUU1QUExQURGOTQ0RkY3RTkxQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8
L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PugNFHgAAApbSURBVHja7FwJtE1VGD7vKdPS
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

--_004_SA1PR13MB4975286D7E0B3B45614E2596BB809SA1PR13MB4975namp_--

From: Patrick H. Lauke
Date: Mon, Mar 20 2023 1:50PM
Subject: Re: Floating Toolbars
← Previous message | Next message →

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

From: glen walker
Date: Mon, Mar 20 2023 2:23PM
Subject: Re: Floating Toolbars
← Previous message | Next message →

Side question regarding sticky headers since Patrick mentioned it. I
typically mark them as failing 2.4.7 because I often get into a situation
where my focus is on an element that is "under" the sticky header and I
can't see it. It's usually a medium priority bug but I still fail it. I
usually recommend they have real screen real estate for the sticky header
and not let stuff float underneath it. So the sticky header is a sibling
DOM element to the rest of the page.

From: Patrick H. Lauke
Date: Mon, Mar 20 2023 2:56PM
Subject: Re: Floating Toolbars
← Previous message | No next message

On 20/03/2023 20:23, glen walker wrote:
> Side question regarding sticky headers since Patrick mentioned it. I
> typically mark them as failing 2.4.7 because I often get into a situation
> where my focus is on an element that is "under" the sticky header and I
> can't see it. It's usually a medium priority bug but I still fail it. I
> usually recommend they have real screen real estate for the sticky header
> and not let stuff float underneath it. So the sticky header is a sibling
> DOM element to the rest of the page.

See also the proposed new SCs
https://w3c.github.io/wcag/guidelines/22/#focus-not-obscured-minimum and
https://w3c.github.io/wcag/guidelines/22/#focus-not-obscured-enhanced

and one of the suggested techniques is to provide sufficient scroll
margin (as I did recently on Bootstrap docs, for instance
https://github.com/twbs/bootstrap/pull/37926)

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