Tech Talk ARIA

ARIA States

States und Properties / Atributes werden in einem Atemzug genannt. Status sind Properties die einen temporären Zustand eines Elements beschreiben bspw. aria-expanded true/false, aria-disabled, aria-checked oder aria-invalid.

Accordion with <div>

Standard Akkordeon made by Codium AI

Accordion Item 1

This is the content of the first section.

Accordion Item 2

This is the content of the second section.

Accordion Item 3

This is the content of the third section.

            
<div class="accordion">Accordion Item 1</div>
<div class="panel">
  <p>This is the content of the first section.</p>
</div>

<div class="accordion">Accordion Item 2</div>
<div class="panel">
  <p>This is the content of the second section.</p>
</div>

<div class="accordion">Accordion Item 3</div>
<div class="panel">
  <p>This is the content of the third section.</p>
</div>

<script>
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function () {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.display === "block") {
        panel.style.display = "none";
      } else {
        panel.style.display = "block";
      }
    });
  }
</script>

Accordion with <div>

Der tabindex muss gesetzt werden, damit der SR es wieder vorliest. Weiterhin muss JS geschrieben werden damit neben der Klick Methode auch die Tastatur berückstichtigt wird.

Best Practises

keine divs mit tabindex nutzen, sondern <button> inklusive <h3>, bzw. die semantisch nächste Headline
eine Alternative kann auch <details> inklusive <summary> sein

This is the content of the first section.

This is the content of the second section.

This is the content of the third section.

        
<style>
  .accordion-a11y-ready[aria-expanded="false"]::before {
    content: "▶";
  }
  .accordion-a11y-ready[aria-expanded="true"]::before {
    content: "▼";
  }
</style>

<div
  class="accordion-a11y-ready"
  role="button"
  tabindex="0"
  aria-expanded="false"
>
  Accordion Item 1
</div>
<div class="panel">
  <p>This is the content of the first section.</p>
</div>

<div
  class="accordion-a11y-ready"
  role="button"
  tabindex="0"
  aria-expanded="false"
>
  Accordion Item 2
</div>
<div class="panel">
  <p>This is the content of the second section.</p>
</div>

<div
  class="accordion-a11y-ready"
  role="button"
  tabindex="0"
  aria-expanded="false"
>
  Accordion Item 3
</div>
<div class="panel">
  <p>This is the content of the third section.</p>
</div>

<script>
  var acc = document.getElementsByClassName("accordion-a11y-ready");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function () {
      var isExpanded =
        this.getAttribute("aria-expanded") === "true"
          ? true
          : false;

      this.setAttribute("aria-expanded", !isExpanded);
      var panel = this.nextElementSibling;
      panel.style.display = !isExpanded ? "block" : "none";
    });

    acc[i].addEventListener("keydown", function (event) {
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault();
        this.click();
      }
    });
  }
</script>

Accordion with <summary>

Weniger Code gleiche Funktionalität

Accordion Item 1

This is the content of the first section.

Accordion Item 2

This is the content of the second section.

Accordion Item 3

This is the content of the third section.

            
<div>
<details>
  <summary>Accordion Item 1</summary>
  <p>This is the content of the first section.</p>
</details>
<details>
  <summary>Accordion Item 2</summary>
  <p>This is the content of the second section.</p>
</details>