ARIA-Live-Regionen

Live-Regionen

Dynamische Inhalte, die ohne Neuladen der Seite aktualisiert werden, sind in der Regel entweder eine Region oder ein Widget. Einfache inaktive Inhaltsänderungen sollten als Live-Regionen gekennzeichnet werden. Eine Live-Region wird explizit durch das aria-live-Attribut gekennzeichnet.

aria-live: Das aria-live=POLITENESS_SETTING wird verwendet, um die Priorität festzulegen, mit der der Screenreader Updates zu Live-Regionen behandeln soll - die möglichen Einstellungen sind: off, polite oder assertive. Dieses Attribut ist bei weitem das wichtigste.

Normalerweise wird nur aria-live="polite" verwendet. Jede Region, die Updates erhält, die für den Benutzer wichtig sind, die aber nicht so schnell sind, dass sie störend wirken, sollte dieses Attribut erhalten. Der Screenreader wird Änderungen ankündigen, wenn der Benutzer nicht aktiv ist.

aria-live="assertive" sollte nur für zeitkritische Benachrichtigungen verwendet werden, die unbedingt sofortige Aufmerksamkeit des Benutzers erfordern. Im Allgemeinen wird eine Änderung einer assertiven Live-Region jede Ansage unterbrechen, die ein Screenreader derzeit macht. Daher kann es äußerst störend und ärgerlich sein und sollte nur sparsam eingesetzt werden.

Widersprüchlich ist aria-live="off" nicht dazu gedacht, dass Änderungen nicht angekündigt werden sollten. Wenn ein Element aria-live="off" hat (oder eine role mit diesem impliziten Wert, wie role="marquee" oder role="timer"), sollen Änderungen des Inhalts des Elements nur angekündigt werden, wenn der Fokus auf dem Element liegt oder sich darin befindet.

Einfaches Beispiel: Dropdown-Box aktualisiert nützliche Informationen auf dem Bildschirm

Eine Website, die sich auf die Bereitstellung von Informationen über Planeten spezialisiert hat, bietet eine Dropdown-Box. Wenn ein Planet aus dem Dropdown ausgewählt wird, wird auf der Seite eine Region mit Informationen zum 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, wird die Information in der Live-Region angekündigt. Da die Live-Region aria-live="polite" hat, wird der Screenreader warten, bis der Benutzer eine Pause macht, bevor die Aktualisierung angekündigt wird. Daher wird das Durchgehen der Liste und das Auswählen eines anderen Planeten keine Updates in der Live-Region ankündigen. Updates in der Live-Region werden nur für den schließlich ausgewählten Planeten angekündigt.

Hier ist ein Screenshot von VoiceOver auf einem Mac, das die Aktualisierung (per Untertitel) der Live-Region ankündigt:

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 sind gut unterstützt. Vispero hat 2014 Informationen über den Stand der Unterstützung von Live-Regionen veröffentlicht. Paul J. Adam hat die Unterstützung von aria-atomic und aria-relevant besonders erforscht.

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

2. aria-relevant

   : Das 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 ist: additions text.

Grundlegende Beispiele: aria-atomic

Zur Veranschaulichung von aria-atomic, betrachten Sie eine Seite 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 eingefügte Zeichenkette angekündigt. Bei nachfolgenden Aufrufen werden nur die Teile des Inhalts, die sich im Vergleich zum vorherigen Inhalt geändert haben, angekündigt. Wenn sich die Uhr beispielsweise von "17:33" auf "17:34" ändert, werden unterstützende Technologien nur "34" ansagen, was für Benutzer nicht sehr hilfreich sein wird.

Ein Weg, dies zu umgehen, wäre, zuerst den gesamten Inhalt der Live-Region zu löschen (in diesem Fall den innerHTML von sowohl <span id="clock-hours"> als auch <span id="clock-mins"> leer zu setzen) und dann den neuen Inhalt einzufügen. Dies kann jedoch manchmal unzuverlässig sein, da es vom genauen Timing dieser beiden Updates abhängt.

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

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

Ein weiteres Beispiel für aria-atomic - ein Update/Benachrichtigung als Ergebnis 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" kündigt der Screenreader nur den geänderten Wert des Jahres an. Mit aria-atomic="true" kündigt der Screenreader "Das gesetzte Jahr ist: geänderter Wert" an.

Einfaches Beispiel: aria-relevant

Mit aria-relevant können Sie angeben, welche Arten von Änderungen/Aktualisierungen an einer Live-Region angekündigt werden sollen.

Betrachten Sie als Beispiel eine Chatseite, die eine Liste der derzeit angemeldeten Benutzer anzeigen möchte. Anstatt nur die derzeit angemeldeten Benutzer anzukündigen, möchten wir auch eine Ansage speziell dann auslösen, wenn ein Benutzer aus der Liste entfernt wird. Wir können dies 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 nicht mehr aktiv ist, bevor er dem Benutzer Updates präsentiert. Dies ist der am häufigsten verwendete Wert, da das Unterbrechen des Benutzers mit "assertive" den Fluss unterbrechen könnte.
• aria-atomic ist nicht gesetzt (false standardmäßig), sodass nur die hinzugefügten oder entfernten Benutzer angekündigt werden sollten und nicht jedes Mal die gesamte Liste.
• aria-relevant="additions removals" stellt sicher, dass sowohl hinzugefügte als auch entfernte Benutzer aus der Liste angekündigt werden.

Siehe auch

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