Tech Talk ARIA

Dynamische Inhalte

Auf interaktiven Webseiten / -anwendungen werden Nutzer immer wieder über Ereignisse informiert. Produkt wurde dem Warenkorb hinzugefügt, gelöscht, etc. Wird eine Nachricht angezeigt oder ein Status aktualisiert, bemerkt der Sehende dies über farbige Boxen. Um a11y konform zu arbeiten müssen wir für Benachrichtungen auf der Tonspur sorgen aria-live Attribut.

              
<div id="status" role="status" aria-live="assertive">
  Hey hast du Hunger? Bestell dir doch eine Pizza!
</div>
<button onclick="makeOrder()">Pizza bestellen</button>

/**
  off       The default. Updates should not be announced.

  polite    Updates should be announced only if the user is idle.

  assertive Updates should be announced to the user as soon as possible.
*/
              
            

Widget mit Tabs

Tastaturnavigation mit JavaScript implementiert

            
<div id="tab-component">
  <div role="tablist" aria-label="Tabs mit Details zum Produkt">
    <button id="tab-1" role="tab" aria-selected="true" aria-controls="panel-1">Details</button>
    <button id="tab-2" role="tab" aria-selected="false" aria-controls="panel-2">Inhalt</button>
    <button id="tab-3" role="tab" aria-selected="false" aria-controls="panel-3">Downloads</button>
    <button id="tab-4" role="tab" aria-selected="false" aria-controls="panel-4">Bewertungen</button>
  </div>
  <div id="panel-1" role="tabpanel" class="selected" tabindex="0" aria-labelledby="tab-1">
    <p>Details zum Produkt</p>
  </div>
  <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2">
    <p>Lieferumfang</p>
  </div>
  <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3">
    <p>Produktanleitung herunterladen</p>
  </div>
  <div id="panel-4" role="tabpanel" tabindex="0" aria-labelledby="tab-4">
    <p>Bewertungen anderer Kunden</p>
  </div>
</div>
            
          

            
const tabComponent = document.getElementById("tab-component");
const tabs = tabComponent.querySelectorAll("button");
const panels = tabComponent.querySelectorAll("div[role=tabpanel]");
let lastFocussed = null;
for (let i = 0; i < tabs.length; i++) {
	tabs[i].addEventListener("click", (event) => {
		tabs.forEach((tab) => {
			tab.setAttribute("aria-selected", false);
		});

		panels.forEach((panel) => {
			panel.classList.remove("selected");
		});
		event.target.setAttribute("aria-selected", true);
		panels[i].classList.add("selected");
	});
	tabs[i].addEventListener("keydown", (event) => {
		if (event.key === "ArrowDown") {
			lastFocussed = document.activeElement;
			tabComponent.querySelector("div[role='tabpanel'].selected").focus();
		} else if (
			event.key === "ArrowLeft" &&
			document.activeElement.previousElementSibling
		) {
			document.activeElement.previousElementSibling.focus();
		} else if (
			event.key === "ArrowRight" &&
			document.activeElement.nextElementSibling
		) {
			document.activeElement.nextElementSibling.focus();
		}
	});

	// key up does not work if nvda is running
	// other screenreader are not tested
	panels[i].addEventListener("keydown", (event) => {
		if (event.key === "ArrowUp") {
			lastFocussed ? lastFocussed.focus() : null;
		}
	});
}