{{#> web/layout/default title="Accessibility" parentPageName="Helpers" }}

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Accessibility</h2>

    <div class="docs-Stack docs-Stack--start">

      <div>
        <p>
          The following element is visually hidden, but still accessible by <abbr>AT</abbr> (Assistive Technology).
          Use dev tools to check it's really there!
        </p>

        <p class="accessibility-hidden">This text is visually hidden</p>
      </div>

      <div>
        <p>Toggle display of an element inside the toggle button depending on <code>aria-expanded</code>.</p>

        <button type="button" aria-expanded="true">
          <span class="accessibility-open">Show less</span>
          <span class="accessibility-closed">Show more</span>
        </button>

        <button type="button" aria-expanded="false">
          <span class="accessibility-open">Show less</span>
          <span class="accessibility-closed">Show more</span>
        </button>
      </div>

    </div>

  </div>

</section>

{{/web/layout/default}}
