Testing aria-controls

The button below uses aria-controls to create a relationship between the controller (the button) and the controlled element (the content panel).

HTML markup 
<button
  id="toggle"
  type="button"
  aria-controls="extra-info"
  aria-expanded="false">
  <!-- "false" changed to "true" when button activated -->
  Show extra information
</button>
<div id="extra-info" hidden></div>
<!-- "hidden" removed when button activated -->

Note: aria-controls has inconsistent support across browser and screen reader combinations. Many screen readers do not announce the relationship during normal navigation. It is still worth using because some assistive technologies and accessibility tools expose these relationships.

Testing home