ARIA roller och attribut: bästa val jämfört

ARIA-roller och -attribut i W3C:s specifikation WAI-ARIA 1.2 är över hundra till antalet, även om ett fåtal löser de flesta tillgänglighetsproblem i XHTML- och CSS-widgets. En roll definierar vad ett element är och ett attribut dess tillstånd eller relationer, men ARIA ändrar inte webbläsarens beteende: varje tillagd roll kräver att interaktion implementeras med JavaScript.

Accessible Rich Internet Applications (ARIA) är en W3C-specifikation som lägger till semantik till HTML-element som inte har dem i en inbyggd form. En roll beskriver vad är ett element (en knapp, en tab, en dialog), medan ett attribut beskriver dess tillstånd eller dess relationer (aria-expanderade, aria-kontroller, aria-labelledby). Den första regeln för ARIA, publicerad av W3C i Using ARIA, är trubbig: om det finns ett inbyggt HTML-element som redan gör jobbet, använd det och lägg inte till ARIA.

Anledningen är att ARIA inte ändrar webbläsarens beteende. En <div role="button"> får inte fokus med Tab, svarar inte på Enter-tangenten eller mellanslag och skickas inte in med ett formulär. Det förändrar bara vad hjälpmedlet meddelar. All interaktion måste implementeras med JavaScript och hanteras noggrant. I XHTML/CSS-projekt där HTML är statisk och JS är minimal betyder detta att var och en av ariarollerna och attributen som läggs till är ett löfte som din kod måste uppfylla.

Den andra regeln i ARIA ber att inte ändra den ursprungliga semantiken såvida den inte är absolut nödvändig. En <h2 role="tab"> bryter strukturen för rubriker och förvirrar skärmläsare som navigerar efter regioner. Den tredje regeln kräver att alla ARIA-kontroller kan användas med ett tangentbord. Den fjärde ber att inte använda aria-hidden="true" på element som får fokus. Den femte, och den mest bortglömda, påminner oss om att alla interaktiva element kräver ett tillgängligt namn: en roll utan etikett är en mute-knapp.

Hur man väljer: kriterier före listan

Att välja roll eller attribut är inte en smaksak. Dessa kriterier, tillämpade i ordning, undviker de flesta fel angående ariaroller och attribut:

1. Finns det ett inbyggt HTML-element? Om så är fallet, använd det. <button>, <detaljer>, <dialog>, <input type="checkbox"> täcker fler fall än vad folk tror.
2. Behöver widgeten dynamiska tillstånd? Om den växlar mellan öppen/stängd, vald/ej vald eller expanderad/komprimerad, behöver du tillståndsattribut (‘aria-expanderade’, ‘aria-valda’, ‘aria-pressed’).
3. Behöver det relationer mellan element? Relationsattribut (‘aria-kontroller’, ‘aria-labelledby’, ‘aria-describedby’, ‘aria-owns’) kopplar samman delar som tillgänglighetsträdet inte kan härleda från DOM.
4. Behöver det livemeddelanden? Live-regioner (aria-live, role="status", role="alert") löser uppdateringar utan att flytta fokus.
5. Kan jag underhålla det? Ett komplext ARIA-mönster utan tangentbords- eller skärmläsartest är värre än att ha ingenting.

Underhållskostnaden är det mest ignorerade kriteriet. En välgjord role="tablist" kräver piltangenthantering, roterande tabindex, synkronisering av aria-valda och aria-kontroller och korrekt döljning av inaktiva paneler. Om teamet inte kan hantera det är en uppsättning länkar med ankare mer tillgänglig och billigare.

Relaterat: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

Jämförelse av de mest användbara ARIA-rollerna

Följande tabell sammanfattar de roller som återkommer i verkliga granskningar, med deras inbyggda motsvarighet när sådan finns och den vanligaste fällan.

Rol	Para qué sirve	Alternativa nativa	Trampa frecuente
knapp	Kontroll que ejecuta una acción	<knapp>	No añadir manejo de Enter/Espacio ni tabindex="0"
länk	Navigera till en annan URL	<a href>	Usarlo para acciones que no navegan
dialog	Ventana modal o ingen modal	<dialog>	No atrapar el foco ni devolverlo al cerrar
tablist / tab / tabpanel	Interfaz de pestañas	Ninguna directa	Ingen sincronizar aria-selected con el panel synlig
meny / menuitem	Menú de aplicación	<välj> o lista de enlaces	Användarmenyn för navegación webb
varning	Mensaje urgente e inmediato	role="status" för inte brådskande	Abusar de él y saturar al lector de pantalla
status	Actualización informativa	<utgång>	No insertarlo en el DOM antes de actualizar
förloppsindikator	Progreso de una tarea	<framsteg>	Ingen aktualizar aria-valuenow
verktygstips	Descripción emergente	titel (limitado)	No asociarlo con aria-describedby
combobox	Campo con lista de sugerencias	<datalist> (limitado)	Ingen anunciar el número de resultados

Valet mellan role="alert" och role="status" är ett bra exempel på ett beslut med nyanser gällande ariaroller och attribut. alert avbryter den aktuella skärmläsarens läsning; status väntar på att användaren ska slutföra. För ett formulärvalideringsfel är “alert” lämpligt. För “3 resultat hittades” medan användaren skriver, är status korrekt och alert resulterar i att vara påträngande.

Oumbärliga ARIA-attribut och hur de kombineras

Attributen är förknippade med fyra familjer, och var och en löser ett distinkt problem.

Värt att titta på: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Etikett. ‘aria-etikett’ ger ett namn när det inte finns någon synlig text. aria-labeledby refererar till id för ett annat element och är att föredra när texten redan finns på skärmen, eftersom den har en enda källa till sanning. aria-describedby lägger till en längre beskrivning, till exempel hjälptexten för ett fält. Skillnaden spelar roll: namnet är vad användaren hör när han fokuserar; beskrivningen är ytterligare sammanhang som kan avbrytas.

Estados. “aria-expanderade” (sant/falskt) för dragspel och rullgardinsmenyer. “aria-vald” för flikar och alternativ. “aria-markerad” för anpassade kryssrutor, med värdet “blandad” för tre-tillstånd. aria-tryckt för växlingsknappar. “aria-inaktiverad” när elementet fortfarande är fokuserbart men inte fungerar, till skillnad från det ursprungliga attributet “disabled”, som tar bort det från tabbordningen.

Relationer. aria-kontroller indikerar vilket element en knapp styr. aria-owns omorganiserar tillgänglighetsträdet när DOM inte återspeglar det visuella förhållandet. aria-activedescendant låter dig behålla fokus på en behållare medan den tillkännager det aktiva elementet, ett vanligt mönster i kombinationsrutor.

Liveregioner. aria-live="polite" eller "assertive" definierar brådska. aria-atomic="true" gör att hela blocket tillkännages istället för bara den modifierade delen. aria-relevanta filter vilka ändringar meddelas.

En detalj som ofta förbises: ARIA-attribut fungerar bara på element med en giltig roll. aria-expanderade på en <div> utan roll kommer inte att meddelas. Och ARIA booleska värden är textsträngar (“true”, “false”), inte JavaScript booleska värden; att skriva aria-expanded="false" som en boolesk egenskap kommer att ge inkonsekventa resultat.

Fel som förstör en widgets tillgänglighet

Felet mer kostnad och använder ARIA för att installera en HTML mal estructurado. Añadir role="navigation" a un <div> cuando ya había un <nav> disponible duplica regiones y confunde la navegación por landmarks.

Relaterat: IAAP CPACC / WAS Certification — La certificación profesional que acredita tu experiencia and accesibilidad.

Det andra felet är fokus. En modal widget som inte flyttar fokus när den öppnas, inte fångar den när den är öppen och inte återför den till avtryckaren vid stängning lämnar tangentbordsanvändaren att navigera genom osynligt innehåll. Det ursprungliga <dialog>-elementet löser en del av detta, men inte allt: att återställa fokus är fortfarande utvecklarens ansvar.

El tercer error es ocultar con aria-hidden elementos que suen siendo enfocables. Un menú cerrado con aria-hidden="true" pero sin display: none o visibility: hidden mantiene sus enlaces en el orden de tabulación, y el usuario enfoca elementos que no puede ver. La combinación correcta es ocultar visualmente y del árbol de accesibilidad a la vez.

Det fjärde felet är det frånvarande tillgängliga namnet. En <knapp> med en enda SVG-ikon kräver en aria-etikett eller en <span class="visually-hidden"> med text. En dekorativ SVG kräver aria-hidden="true" och focusable="false" så Internet Explorer och vissa äldre webbläsare inkluderar det inte i tabbordningen.

Värt att titta på: UserWay — Widget för accessibilidad med plan gratis för empezar Hoy Mismo.

Herramientas para probar rolls y atributos ARIA

Det finns inget verktyg i stället för att testa med en faktisk skärmläsare, men kombinationen av olika verktyg upptäcker de flesta misslyckanden i ariaroller och attribut.

Statisk validering. W3C ARIA-valideraren (en del av Nu HTML Checker) upptäcker icke-existerande roller, dåligt skrivna attribut och förbjudna kombinationer. ax DevTools och Lighthouse pekar ut roller utan tillgängliga namn och saknade obligatoriska attribut.

Inspektion av tillgänglighetsträd. Med Chrome och Firefox DevTools kan du se tillgänglighetsträdet exakt som det tas emot av hjälpmedel. Det är det snabbaste sättet att kontrollera om en roll faktiskt tillämpades och vilket tillgängligt namn webbläsaren beräknade.

Manuell testning. Navigera bara i hela widgeten med tangentbordet (Tab, Skift+Tab, pilar, Enter, Mellanslag, Escape) och sedan med NVDA på Windows, JAWS om tillgängligt eller VoiceOver på macOS och iOS. Kombinationen av en stationär läsare och en mobil täcker de flesta verkliga fall.

Referensdokumentation. W3C ARIA Authoring Practices Guide (APG) innehåller omfattande mönster med tangentbord och kodexempel. Detta är källan som bör konsulteras innan man uppfinner ett nytt mönster.

Cómo decidir en un proyecto XHTML/CSS real

På XHTML-webbplatser med lättvikts-CSS och JavaScript är den mest kostnadseffektiva strategin att börja med inbyggd HTML och lägga till ARIA endast där native inte når. Ett formulär med korrekt <label>, <fieldset> och <legend> kräver väldigt lite ARIA. En datatabell med <th scope> gör det inte heller. ARIA-roller kommer in när mönster dyker upp som HTML inte täcker: flikar, dragspel, kombinationsrutor med filtrering, modala dialoger och dynamiska meddelanden.

Det är tillrådligt att dokumentera varje användning av ARIA-roller och -attribut i själva koden med en kommentar som förklarar varför den finns där. När någon refaktorerar komponenten sex månader senare kommer de att veta om “aria-kontrollerna” fortfarande är nödvändiga eller har blivit föräldralösa. Föräldralösa ARIA-attribut - som pekar på “id:n som inte längre existerar - är en tyst källa till fel som ingen validator upptäcker på ett tillförlitligt sätt.

Behandla slutligen tillgänglighet som en del av komponentens definition av “klar”, inte som en efterföljande revision. En widget med ARIA-roller testade med tangentbordet och skärmläsaren från den första commit kostar mycket mindre än en reparerad efter granskningen.

Nyckelalternativ

• ARIA-roller och -attribut lägger inte till beteende: en roll utan tangentbord och fokushantering är värre än att inte ha någonting.
• Den första regeln i ARIA är att använda inbyggd HTML närhelst den finns; <knapp>, <dialog> och <detaljer> täcker fler fall än man kan tro.
• Attribut är grupperade i märkning, tillstånd, relationer och levande regioner; varje familj löser olika problem.
• role="alert" avbryter och role="status" väntar: om du väljer felaktigt mättas skärmläsaranvändaren.
• ARIA booleska värden är strängar (“true”/”false”`), och attribut fungerar bara på element med en giltig roll.
• Att testa med ett tangentbord och en riktig skärmläsare är obligatoriskt; validatorer upptäcker bara en del av felen.

Källor & vidare läsning

• WAI-ARIA — Wikipedia: Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) är en teknisk specifikation publicerad av World Wide Web Consortium (W3C) som…

Vanliga frågor

¿Cuál es la diferencia entre un roll y un atributo ARIA?

En roll definierar vad ett element är för hjälpmedel, till exempel role="tab" eller role="dialog". Ett attribut beskriver dess tillstånd eller dess relationer, till exempel “aria-expanderad” eller “aria-märkt av”. Roller tillämpas på elementet som representerar komponenten; attribut tillämpas vanligtvis på samma element eller de som är relaterade till det.

¿Cuándo debo usar ARIA en lugar de HTML nativo?

Endast när det inte finns något HTML-element som täcker mönstret. Den första regeln i W3C ARIA är explicit: om det finns ett inbyggt element, använd det. ARIA-roller behövs för tabbar, dragspel, kombinationsrutor med filtrering och modala dialoger, bland andra mönster som HTML inte kan implementera på egen hand.

¿Qué significa que un elemento tenga un nombre accessible?

Ett tillgängligt namn är texten som skärmläsaren meddelar när elementet fokuseras. Det beräknas från innehållet, från aria-label, från aria-labeledby eller från en associerad <label>, i en prioritetsordning som definieras av specifikationen. En interaktiv roll utan ett tillgängligt namn är en kontroll som användaren inte kan identifiera.

¿Por qué mi role="button" svarar du inte?

Eftersom ARIA inte lägger till beteende. En <div role="button"> behöver tabindex="0" för att ta emot fokus och keydown-hanterare för Enter och Space. Den enklaste och mest robusta lösningen är att använda det inbyggda elementet <button>, som redan inkluderar fokus, tangentbordsaktivering och formulärinlämning.

Är det dåligt att använda aria-hidden="true"?

Det är korrekt att dölja dekorativt eller duplicerat innehåll från tillgänglighetsträdet, men det bör aldrig tillämpas på element som får fokus. Om ett fokuserbart element lämnas med aria-hidden="true" kan tangentbordsanvändaren fokusera något som skärmläsaren inte meddelar. Kombinera det alltid med faktisk visuell döljning.

Vilka verktyg validerar ARIA-roller och attribut?

W3C Nu HTML Checker inkluderar validering av ARIA-roller och attribut och upptäcker icke-existerande roller eller förbjudna kombinationer. axe DevTools och Lighthouse pekar ut roller utan ett tillgängligt namn och saknade obligatoriska attribut. För att verifiera slutresultatet visar tillgänglighetsträdsinspektören i webbläsaren DevTools exakt vad hjälpmedlet tar emot.