Kap 5.4 - Små interaktioner utan ramverk

Mål

• Bygga små interaktioner med knapp, event och klass.
• Förstå när aria-expanded behöver uppdateras.
• Använda JavaScript för att visa, dölja eller byta läge.

Visa och dölj meny

En vanlig interaktion är en menyknapp på små skärmar. Knappen växlar en klass på menyn.

const menuButton = document.querySelector(".menu-button");
const menu = document.querySelector(".menu");

menuButton.addEventListener("click", function () {
    menu.classList.toggle("is-open");
});

Vad är ARIA?

ARIA står för Accessible Rich Internet Applications. ARIA-attribut ger hjälpmedel, till exempel skärmläsare, extra information om en interaktiv komponents funktion och aktuella läge.

ARIA skapar inte själva funktionen. JavaScript öppnar och stänger fortfarande menyn, medan ARIA beskriver för hjälpmedel vad knappen styr och om menyn är öppen.

• aria-controls="aria-demo-menu" kopplar knappen till elementet med id="aria-demo-menu".
• aria-expanded="false" betyder att det styrda innehållet är stängt.
• aria-expanded="true" betyder att det styrda innehållet är öppet.

Uppdatera tillgängligt läge

Om en knapp öppnar och stänger något bör aria-expanded alltid spegla det verkliga läget. Annars kan det som hjälpmedlet meddelar motsäga det som syns på skärmen.

const isOpen = menu.classList.toggle("is-open");
menuButton.setAttribute("aria-expanded", String(isOpen));

Tabs och aktiva lägen

Tabs, filterknappar och temaväxling bygger ofta på samma idé: hitta element, lyssna på klick och ändra klass eller text.

button.addEventListener("click", function () {
    panel.classList.add("active");
});

När räcker enkel JavaScript?

För små komponenter behöver du oftast inget ramverk. Börja enkelt och bygg bara mer avancerat när problemet kräver det.

Lösningsförslag

När du har provat själv kan du ladda ner ett kommenterat exempel med HTML, CSS och JavaScript.

Ladda ner lösningsförslag för kapitel 5.4