Pan of gold nuggets FAQs and Tooltips Pan of gold nuggets

This page is designed to provide information on how to make FAQs and Tooltips accessible to all users.


Problem: Many applications have FAQ sections and Tooltips that are not accessible.

Solution: Properly code FAQs and Tooltips for maximum accessibility and usability.



Information about FAQs and Tooltips

The FAQ section below was coded for accessibility as described in the Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions provided by WAI-ARIA Authoring Practices 1.2

The Tooltip section below was coded for accessibility as described in the Deque University Tooltip Example


Example: Parking FAQs

Park at the nearest available parking meter without paying the meter and call 999-999-9999 to report the problem.
You should come to the Parking office and report the loss.

Example: Tooltips


Gold Nugget A positive disposition always catches more fish than a negative disposition.


Coding for FAQs

Key Points to Accessible FAQs:
  • The semantic structure of the FAQ is conveyed with native dl (description-list), dt (discription -term) and dd (description -details) elements.
  • Button text is used to display the question, and to show/hide the answers.
  • aria-controls=”ID” identifies the element controlled by the button.
  • aria-expanded=”true/false” tells screen readers that content is visible/invisible.
  • HTML:
    HTML for FAQs

Coding for Tooltips

Key Points to Accessible Tooltips:
  • A tooltip provides extra information about a form field, a link, a button, or other focusable element. It must be triggered by both focus and hover events and remains on the screen as long as the trigger has the focus.
  • The focus does not move to the tooltip.
  • HTML:
    HTML for FAQs

Helpful Links for FAQs and Tooltips

Gold Nugget Description List definition MSDN
Gold Nugget Description Term definition MSDN
Gold Nugget Description Details definition MSDN
Gold Nugget Tooltips by Deque University