Accessible dialog tooltip

Example 1

Accessible dialog tooltip window

---

ARIA

Role	Attribute	Element	Usage
dialog		div	Identifies the element that serves as the dialog container.
	aria-labelledby=IDREF	div	Gives the dialog an accessible name by referring to the element that provides the dialog title.
	aria-describedby=IDREF	div	Gives the dialog an accessible description by referring to the dialog content that describes the primary message or purpose of the dialog. Used in three of the four dialogs included in the example. See the above accessibility features section for an explanation.
	aria-modal=true	div	Tells assistive technologies that the windows underneath the current dialog are not available for interaction (inert).

Keyboard Shortcuts

You can close it using Esc, or by using Enter or Space if you’re on the close button.

Mouse users can click outside the modal window to close it (this option can be disabled if needed).

If you never activate a modal window, it won’t be anywhere in the code.

---

Example 2

Show me another tooltip

And another one?