Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the addition content is:
Dismissible
Hoverable
Persistent
Content that can be triggered via pointer hover should also be able to be triggered by keyboard focus.
For functionality that can be operated using a single pointer, at least one of the following is true:
No Down-Event
Abort or Undo
Up Reversal
Essential
Use the default behaviour of controls (e.g. onclick or mouseup event) and do not override that behaviour with an explicit down-event trigger.
Keyboard input
Focus and focus order
Ensure a meaningful tab order by positioning focusable content in the same sequence as the underlying code.
Ensure the keyboard navigation order is logical and intuitive. Typically, this means ensuring the navigation follows the visual flow of the page, left to right, top to bottom. It moves through the banner, main navigation, page navigation and controls, then footer on a typical page.
Avoid using tabindex values greater than 0.
Visual focus indicator
Avoid styles that remove or limit the visibility of keyboard focus indicators
Use CSS to design a highly-visible focus indicator with strong contrast
Links must have a visible focus state.
Keyboard functionality
Ensure all page content can be operated through a keyboard.
When possible, use native HTML links and form controls rather than custom elements.
Use the onclick event of anchors and buttons.
Pair mouse event handlers with keyboard event handlers.
Keyboard trap
Make sure the user can get in and out of the interactive elements by using only the keyboard.
Focus management with JavaScript-injected content
Whenever a pop up appears on the page as a result of the user interaction or invoking a control, ensure that the user returns to the same place where the interaction first started.
Touch input
All functionality should be accessible via pointer input devices, e.g., via a mouse, a finger on a touch screen, or an electronic stylus.
All functionalities can be operated by a single click or tap, double tap, double click, long press, or click & hold.
Write JavaScript event handlers that trigger on both keyboard and mouse click. A mouse-accessible interface is generally touch accessible.
Ensure the target size is at least 44px by 44px (Level AAA, optional)
Voice input
When a control has an accessible name set via an ARIA label as well as a visible label, the visible label text must be part of or match the ARIA label.
Motion actuation
If you provide motion actuation (functions triggered by sensor input such as shaking), ensure the functions can also be triggered by conventional user interface components.