RE: Best approach for meeting Success Criterion 1.4.13 Content on Hover or Focus via ESC key

Hi Steve,

Thanks for that, the question in the call was about a CSS-only version which doesn’t use a script.
E.g. https://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

Demo page: https://csswizardry.com/demos/css-dropdown/


There is a tendency for some devs to prefer a non-JS version if possible, but some do note the accessibility issues (even prior to WCAG 2.1)
https://purecss.io/menus/#dropdowns


Without a JS handler for key presses I don’t see a method of activating on :hover and being dismissible? Even the button-within trigger area would need JS.

For the tooltip example (e.g. Bootstrap<https://getbootstrap.com/docs/4.1/components/tooltips/>) that’s added with JS so I think it would be fairly straightforward to add a window event that toggles the tooltips.

Detlev – If you are using JavaScript you can attach a window-level event that could close any hover content that’s open. I’m not very strong with JS, but for example you could add a class of ‘open’ to any block that is shown on hover (by JS). The window event could then find all those elements and hide them.

In general I think you’d want to put that sort of function into the widget (e.g. the drop-down menus), rather than have a generic function for that. Unless you use a lot of hover content!

A positive technique would be useful, perhaps starting with Steve’s example, or something similar to Heydon’s tooltips?
https://inclusive-components.design/tooltips-toggletips/


Cheers,

-Alastair

Received on Tuesday, 28 August 2018 22:07:47 UTC