Bästa praxis för tillgänglighet (a11y)

Tillgänglighet, ofta förkortat a11y, innebär att utforma och bygga produkter som alla kan använda, oavsett funktionsförmåga.

• Det säkerställer att personer med funktionsnedsättningar kan uppfatta, förstå, navigera i och interagera med era UI-komponenter.
• Det omfattar användare med visuella, auditiva, motoriska och kognitiva nedsättningar.
• Att bygga tillgängliga komponenter gynnar alla användare genom att förbättra den övergripande användbarheten.

Om tillgänglighet ignoreras kan en betydande del av era potentiella användare utestängas. Utöver etiska överväganden finns det starka praktiska och juridiska skäl:

• Bredare målgrupp: Nå fler användare över hela världen.
• Förbättrad SEO: Många a11y-metoder går hand i hand med bra SEO.
• Efterlevnad av lagar: Undvik potentiella stämningar och följ lagar som ADA.
• Bättre UX för alla: Funktioner som tangentbordsnavigering och tydlig kontrast hjälper alla.

Web Content Accessibility Guidelines (WCAG) är den internationella standarden för webbtillgänglighet, framtagen av W3C.

WCAG bygger på fyra huvudprinciper, som ofta sammanfattas med akronymen POUR:

• Möjlig att uppfatta: Information måste presenteras på sätt som användare kan uppfatta.
• Användbar: Gränssnittskomponenter och navigering måste gå att använda.
• Begriplig: Informationen och användargränssnittets funktion måste vara begripliga.
• Robust: Innehållet måste vara tillräckligt robust för att tolkas tillförlitligt av många olika användarprogram, inklusive hjälpmedel.

Att använda rätt HTML-element är det mest grundläggande steget för tillgänglighet. Semantisk HTML ger innehållet betydelse som hjälpmedel kan förstå.

Använd till exempel <button> för en knapp, inte en <div> som formgetts för att se ut som en knapp. Då får den inbyggd tangentbordsinteraktion och roller.

Prova att köra det här exemplet:

Ibland räcker inte inbyggd HTML för att förmedla hela betydelsen eller tillståndet hos en komplex UI-komponent. Det är här WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) kommer in.

ARIA-attribut ger hjälpmedel ytterligare semantisk information, men ändrar inte hur ett element ser ut eller beter sig för seende användare.

• Roller: Definierar typen av UI-element (t.ex. role="alert", role="navigation").
• Tillstånd: Beskriver ett elements aktuella tillstånd (t.ex. aria-expanded="true", aria-checked="false").
• Egenskaper: Anger attribut för ett element (t.ex. aria-labelledby="heading").

Attributet aria-label är viktigt för att ange ett tillgängligt namn för element som annars kanske saknar ett eller vars visuella etikett inte är tillräcklig.

Det används ofta för knappar som endast innehåller en ikon eller när knappens syfte inte framgår tydligt av den visuella texten.

Prova att köra det här exemplet:

Många användare, bland annat personer med motoriska nedsättningar eller personer som är blinda, navigerar på webbplatser med endast ett tangentbord. Säkerställ att alla interaktiva element kan nås och användas med tangentbord.

• Tabbordning: Element bör kunna navigeras i en logisk ordning med tangenten Tab.
• Fokusindikatorer: Se till att det fokuserade elementet syns tydligt, till exempel med en kontur.
• Interaktiva element: Knappar, länkar och formulärkontroller bör kunna användas med Enter eller Space.
• tabindex: Använd tabindex="0" för element som inte kan fokuseras naturligt men behöver kunna fokuseras, och tabindex="-1" för att göra element programmerbart fokuserbara men inte fokuserbara med tabbtangenten. Undvik tabindex-värden större än 0.

Tillräcklig färgkontrast mellan text och bakgrund är avgörande för användare med nedsatt syn eller färgblindhet. WCAG rekommenderar specifika kontrastförhållanden:

• Normal text: Minst 4.5:1 i kontrastförhållande.
• Stor text (18pt/24px eller fetstil i 14pt/18.66px): Minst 3:1 i kontrastförhållande.
• UI-komponenter/grafiska objekt: Minst 3:1 i kontrastförhållande mot intilliggande färger.

Använd kontrastkontroller online eller webbläsarens utvecklarverktyg för att verifiera era färgval.

Bilder förmedlar visuell information, men skärmläsare kan inte "se" dem. Attributet alt ger en textbeskrivning av en bild.

• Beskrivande alt: Beskriv innehållet och funktionen för informativa bilder.
• Tom alt (alt=""): Används för rent dekorativa bilder som inte förmedlar viktig information.
• Undvik upprepningar: Börja inte med "Bild av..." om det är uppenbart.

Prova att köra det här exemplet:

I den här lektionen utforskade vi viktiga aspekter av att bygga tillgängliga UI-komponenter. Vi lärde oss att a11y säkerställer att alla kan använda era produkter, i enlighet med WCAG-principerna.

• Semantisk HTML är grunden.
• ARIA-attribut förbättrar semantiken för komplexa komponenter.
• Tangentbordsnavigering är avgörande för användbarheten.
• Färgkontrast säkerställer läsbarhet.
• Alt-text beskriver bilder för skärmläsare.

Genom att tillämpa dessa bästa metoder skapar ni en mer inkluderande och robust användarupplevelse för alla.