ARIA-Live-Regionen

Live-Regionen

Dynamische Inhalte, die ohne Neuladen der Seite aktualisiert werden, sind im Allgemeinen entweder eine Region oder ein Widget. Einfache Inhaltsänderungen, die nicht interaktiv sind, sollten als Live-Regionen gekennzeichnet werden. Eine Live-Region wird explizit über das Attribut aria-live gekennzeichnet.

aria-live: aria-live=POLITENESS_SETTING wird verwendet, um die Priorität festzulegen, mit der ein Screenreader Aktualisierungen von Live-Regionen behandeln soll. Die möglichen Einstellungen sind: off, polite oder assertive. Dieses Attribut ist mit Abstand das wichtigste.

Normalerweise wird nur aria-live="polite" verwendet. Jede Region, die Aktualisierungen erhält, welche für den Benutzer wichtig sind, aber nicht so häufig erfolgen, dass sie störend wirken, sollte dieses Attribut erhalten. Der Screenreader spricht Änderungen aus, sobald der Benutzer inaktiv ist.

aria-live="assertive" sollte nur für zeitkritische Benachrichtigungen verwendet werden, die unbedingt die sofortige Aufmerksamkeit des Benutzers erfordern. Im Allgemeinen unterbricht eine Änderung an einer assertiven Live-Region jede Ansage, die ein Screenreader gerade ausgibt. Daher kann dies äußerst störend und unterbrechend sein und sollte nur sparsam verwendet werden.

Entgegen der Intuition bedeutet aria-live="off" nicht, dass Änderungen nicht angesagt werden sollen. Wenn ein Element aria-live="off" hat (oder eine role mit diesem impliziten Wert besitzt, etwa role="marquee" oder role="timer"), sollen Änderungen am Inhalt des Elements nur dann angesagt werden, wenn sich der Fokus auf oder innerhalb des Elements befindet.

Live-Regionen werden typischerweise als Klartext angesagt, sodass Links, Schaltflächen und andere Semantik im aktualisierten Inhalt möglicherweise nicht in der Ansage selbst vermittelt werden.

Assistive Technologien sagen im Allgemeinen nur dynamische Änderungen am Inhalt einer Live-Region an. Erstellen Sie die Live-Region, bevor Sie ihren Inhalt aktualisieren. Beginnen Sie mit einer leeren Live-Region und geben Sie ihr dann Zeit, assistiven Technologien zur Verfügung gestellt zu werden, bevor Sie ihren Inhalt aktualisieren. Wenn Sie die Region mit JavaScript erstellen (indem Sie entweder ein neues Element einfügen oder aria-live zu einem bestehenden Element hinzufügen), verschieben Sie die Inhaltsaktualisierung auf eine spätere Event-Loop-Aufgabe, beispielsweise mit setTimeout(). Das Verhalten kann je nach Kombination aus Browser und assistiver Technologie variieren. Die zuverlässigste Methode, um sicherzustellen, dass Live-Regionen registriert werden, besteht darin, sie in das initiale Markup aufzunehmen.

Grundlegendes Beispiel: Dropdown-Feld aktualisiert nützliche Informationen auf dem Bildschirm

Eine Website, die auf Informationen über Planeten spezialisiert ist, bietet ein Dropdown-Feld. Wenn ein Planet aus dem Dropdown ausgewählt wird, wird eine Region auf der Seite mit Informationen über den ausgewählten Planeten aktualisiert.

<fieldset>
  <legend>Planet information</legend>
  <label for="planetsSelect">Planet:</label>
  <select id="planetsSelect" aria-controls="planetInfo">
    <option value="">Select a planet…</option>
    <option value="mercury">Mercury</option>
    <option value="venus">Venus</option>
    <option value="earth">Earth</option>
    <option value="mars">Mars</option>
  </select>
  <button id="renderPlanetInfoButton">Go</button>
</fieldset>

<div role="region" id="planetInfo" aria-live="polite">
  <h2 id="planetTitle">No planet selected</h2>
  <p id="planetDescription">Select a planet to view its description</p>
</div>

<p>
  <small>
    Information from
    <a href="https://en.wikipedia.org/wiki/Solar_System">Wikipedia</a>
  </small>
</p>

const PLANETS_INFO = {
  mercury: {
    title: "Mercury",
    description:
      "Mercury is the smallest and innermost planet in the Solar System. It is named after the Roman deity Mercury, the messenger to the gods.",
  },

  venus: {
    title: "Venus",
    description:
      "Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty.",
  },

  earth: {
    title: "Earth",
    description:
      "Earth is the third planet from the Sun and the only object in the Universe known to harbor life.",
  },

  mars: {
    title: "Mars",
    description:
      'Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System after Mercury. In English, Mars carries a name of the Roman god of war, and is often referred to as the "Red Planet".',
  },
};

function renderPlanetInfo(planet) {
  const planetTitle = document.querySelector("#planetTitle");
  const planetDescription = document.querySelector("#planetDescription");

  if (planet in PLANETS_INFO) {
    planetTitle.textContent = PLANETS_INFO[planet].title;
    planetDescription.textContent = PLANETS_INFO[planet].description;
  } else {
    planetTitle.textContent = "No planet selected";
    planetDescription.textContent = "Select a planet to view its description";
  }
}

const renderPlanetInfoButton = document.querySelector(
  "#renderPlanetInfoButton",
);

renderPlanetInfoButton.addEventListener("click", (event) => {
  const planetsSelect = document.querySelector("#planetsSelect");
  const selectedPlanet =
    planetsSelect.options[planetsSelect.selectedIndex].value;

  renderPlanetInfo(selectedPlanet);
});

Wenn der Benutzer einen neuen Planeten auswählt, werden die Informationen in der Live-Region angesagt. Da die Live-Region aria-live="polite" besitzt, wartet der Screenreader, bis der Benutzer pausiert, bevor er die Aktualisierung ansagt. Daher werden beim Navigieren in der Liste und Auswählen eines anderen Planeten keine Aktualisierungen in der Live-Region angesagt. Aktualisierungen in der Live-Region werden nur für den letztlich ausgewählten Planeten angesagt.

Hier ist ein Screenshot von VoiceOver auf dem Mac, das die Aktualisierung der Live-Region (über Untertitel) ansagt:

Rollen mit impliziten Live-Region-Attributen

Elemente mit den folgenden role="…"-Werten fungieren standardmäßig als Live-Regionen:

Zusätzliche Live-Region-Attribute

Live-Regionen werden gut unterstützt. Vispero veröffentlichte 2014 Informationen über den Stand der Unterstützung von Live-Regionen. Paul J. Adam hat insbesondere die Unterstützung von aria-atomic und aria-relevant untersucht.

1. aria-atomic: aria-atomic=BOOLEAN wird verwendet, um festzulegen, ob der Screenreader die Live-Region immer als Ganzes darstellen soll, selbst wenn sich nur ein Teil der Region ändert. Die möglichen Einstellungen sind: false oder true. Die Standardeinstellung ist false.

2. aria-relevant

   : aria-relevant=[LIST_OF_CHANGES] wird verwendet, um festzulegen, welche Arten von Änderungen für eine Live-Region relevant sind. Die möglichen Einstellungen sind eine oder mehrere der folgenden: additions, removals, text, all. Die Standardeinstellung lautet: additions text.

Grundlegende Beispiele: aria-atomic

Betrachten Sie zur Veranschaulichung von aria-atomic eine Website mit einer einfachen Uhr, die Stunden und Minuten anzeigt. Die Uhr wird jede Minute aktualisiert, wobei die neue verbleibende Zeit den aktuellen Inhalt überschreibt.

<div id="clock" role="timer" aria-live="polite">
  <span id="clock-hours"></span>
  <span id="clock-mins"></span>
</div>

/* basic JavaScript to update the clock */
function updateClock() {
  const now = new Date();
  document.getElementById("clock-hours").textContent = now.getHours();
  document.getElementById("clock-mins").textContent =
    `0${now.getMinutes()}`.slice(-2);
}

/* first run */
updateClock();

/* update every minute */
setInterval(updateClock, 60000);

Beim ersten Ausführen der Funktion wird die gesamte hinzugefügte Zeichenfolge angesagt. Bei nachfolgenden Aufrufen werden nur die Teile des Inhalts angesagt, die sich gegenüber dem vorherigen Inhalt geändert haben. Wenn sich die Uhr beispielsweise von „17:33“ auf „17:34“ ändert, sagen assistive Technologien nur „34“ an, was für Benutzer nicht besonders nützlich ist.

Eine Möglichkeit, dies zu umgehen, wäre, zunächst den gesamten Inhalt der Live-Region zu leeren (in diesem Fall das innerHTML sowohl von <span id="clock-hours"> als auch von <span id="clock-mins"> auf leer zu setzen) und anschließend den neuen Inhalt einzufügen. Dies kann jedoch manchmal unzuverlässig sein, da es vom genauen Timing dieser beiden Aktualisierungen abhängt.

aria-atomic="true" stellt sicher, dass bei jeder Aktualisierung der Live-Region der gesamte Inhalt vollständig angesagt wird (z. B. „17:34“).

<div id="clock" role="timer" aria-live="polite" aria-atomic="true">…</div>

Ein weiteres Beispiel für aria-atomic – eine Aktualisierung/Benachrichtigung infolge einer Benutzeraktion.

<div id="date-input">
  <label for="year">Year:</label>
  <input type="text" id="year" value="1990" />
</div>

<div id="date-output" aria-atomic="true" aria-live="polite">
  The set year is:
  <span id="year-output">1990</span>
</div>

function change(event) {
  const yearOut = document.getElementById("year-output");

  switch (event.target.id) {
    case "year":
      yearOut.textContent = event.target.value;
      break;
  }
}

document.getElementById("year").addEventListener("blur", change);

Ohne aria-atomic="true" sagt der Screenreader nur den geänderten Wert des Jahres an. Mit aria-atomic="true" sagt der Screenreader „Das eingestellte Jahr ist: geänderter Wert“ an.

Grundlegendes Beispiel: aria-relevant

Mit aria-relevant können Sie festlegen, welche Arten von Änderungen/Aktualisierungen einer Live-Region angesagt werden sollen.

Betrachten Sie als Beispiel eine Chat-Website, die eine Liste der derzeit angemeldeten Benutzer anzeigen möchte. Anstatt nur die aktuell angemeldeten Benutzer anzusagen, möchten wir auch speziell dann eine Ansage auslösen, wenn ein Benutzer aus der Liste entfernt wird. Dies können wir erreichen, indem wir aria-relevant="additions removals" angeben.

<ul id="roster" aria-live="polite" aria-relevant="additions removals">
  <!-- use JavaScript to add and remove users here -->
</ul>

Aufschlüsselung der ARIA-Live-Eigenschaften:

• aria-live="polite" gibt an, dass der Screenreader warten soll, bis der Benutzer inaktiv ist, bevor er dem Benutzer Aktualisierungen präsentiert. Dies ist der am häufigsten verwendete Wert, da eine Unterbrechung des Benutzers mit „assertive“ dessen Arbeitsfluss unterbrechen könnte.
• aria-atomic ist nicht gesetzt (false ist der Standardwert), sodass nur die hinzugefügten oder entfernten Benutzer angesagt werden sollen und nicht jedes Mal die gesamte Liste.
• aria-relevant="additions removals" stellt sicher, dass sowohl zur Liste hinzugefügte als auch daraus entfernte Benutzer angesagt werden.

Siehe auch

• ARIA-Rollen
• Document.ariaNotify(), Element.ariaNotify()