Tillgänglighet och inkluderande design - Mönster
Få reda på mer om Välarkitekturerad rättvisa → Tillgänglighet med Lightning och Experience Cloud
Mönster
| Var man ska leta | Hur bra ser ut |
|---|---|
| Plattform | Designstandarder | ✅ WCAG 2.2 nivå AA är det lägsta tillgänglighetsfältet för eget arbete (Experience Cloud, LWCs, egna teman), verifierat av byggteamet |
| Plattform | Designstandarder | ✅ Uppfattas princip: Textalternativ finns för bilder och ikoner; bildtexter medföljer videor |
| Plattform | Designstandarder | ✅ Operativ princip: All funktionalitet kan endast styras via tangentbord, utan att behöva muspekaren eller peka — röststyrning och växelåtkomstteknik förlitar sig på samma tangentbord/fokusmodell |
| Plattform | LWC | ✅ Standard Lightning används som de ska, vilket ger grundläggande tillgänglighet automatiskt |
| Plattform | LWC | ✅ Egna komponenter implementerar explicit tillgänglighet validerad genom tester med skärmläsare |
| Plattform | Testplaner | ✅ Tillgänglighetstest inkluderas i alla testfaser (inte ad hoc eller valfritt) |
Antimönster
| Var man ska leta | Hur dåligt ser ut |
|---|---|
| Plattform | Designstandarder | ⚠️ WCAG 2.2 Nivå AA behandlas som valfritt eller “trevligt att ha” istället för minimikrav |
| Plattform | Designstandarder | ⚠️ Bilder och ikoner saknar textalternativ; videor saknar bildtexter |
| Plattform | Designstandarder | ⚠️ Funktionalitet kräver mus- eller pekinteraktion utan tangentbordsalternativ |
| Plattform | LWC | ⚠️ Egna komponenter byggs utan implementering eller validering av tillgänglighet |
| Plattform | LWC | ⚠️ Egna indatakomponenter använder div-element och CSS-stil utan semantisk betydelse eller tangentbordsåtkomst |
| Plattform | Testplaner | ⚠️ Tillgänglighetstester är ad hoc, valfria eller utförs endast innan lansering (inte under hela utvecklingen) |
Mönster
| Var man ska leta | Hur bra ser ut |
|---|---|
| Plattform | LWC | ✅ Semantiska HTML-element (sidhuvud, navigering, huvud, åt sidan, sidfot, artikel, sektion) används i egna Lightning |
| Plattform | LWC | ✅ ARIA landmärken, roller och egenskaper tillämpas där semantisk HTML ensam inte kan förmedla gränssnittbeteende |
| Plattform | LWC | ✅ Dynamiska innehållsuppdateringar använder aria-live regioner som meddelar ändringar till skärmläsare användare |
| Plattform | LWC | ✅ Egna interaktiva komponenter har uttryckliga rolldefinitioner som matchar deras beteende |
| Plattform | LWC | ✅ Formuläretiketter är uttryckligen associerade med alla formulärinmatningar med rätt etikettelement eller aria-labelby-attribut |
| Plattform | LWC | ✅ Lightning indatakomponenter är konfigurerade med obligatoriska etikettattribut som ger inbyggd etikettassociation |
| Plattform | Testplaner | ✅ Tester utförs med faktiska skärmläsare: JAWS och NVDA på Windows, VoiceOver på macOS och iOS, TalkBack på Android |
| Plattform | Testplaner | ✅ Manuella tester med verklig hjälpmedelsteknik utförs av personer som förstår hur skärmläsare användare navigerar |
| Plattform | Designstandarder | ✅ Platshållartext används aldrig som den enda etiketten eftersom platshållare försvinner vid fokus och ger otillräckligt sammanhang för skärmläsare |
Antimönster
| Var man ska leta | Hur dåligt ser ut |
|---|---|
| Plattform | LWC | ⚠️ Div-tunga markeringsremsor som betyder från innehållshierarkin tvingar skärmläsaranvändare att navigera linjärt |
| Plattform | LWC | ⚠️ ARIA används inte där enbart semantisk HTML inte kan förmedla gränssnittsbeteende |
| Plattform | LWC | ⚠️ Dynamiska innehållsuppdateringar använder inte aria-liveregioner; skärmläsaranvändare missar viktiga ändringar |
| Plattform | LWC | ⚠️ Egna interaktiva komponenter saknar uttryckliga rolldefinitioner; skärmläsare meddelar dem felaktigt |
| Plattform | LWC | ⚠️ Formulärinmatningar saknar uttrycklig etikettassociation; platshållartext används som enda etikett |
| Plattform | Testplaner | ⚠️ Automatiska tillgänglighetsverktyg används uteslutande; manuella skärmläsartester utförs inte |
| Plattform | Testplaner | ⚠️ Tester utförs av seende användare som inte är bekanta med hur skärmläsare faktiskt navigerar |
Mönster
| Var man ska leta | Hur bra ser ut |
|---|---|
| Plattform | Designstandarder | ✅ Fullständig funktionalitet är tillgänglig via tangentbord utan att kräva mus eller touch interaktion vid någon punkt i användarresor |
| Plattform | LWC | ✅ Logisk fokusordning följer visuell layout och interaktionsflöde |
| Plattform | LWC | ✅ När dynamiska innehållsinläsningar eller moduler öppnas hanteras fokus programmatiskt för att guida tangentbordsanvändare till nytt innehåll |
| Plattform | LWC | ✅ Modal och flytande komponenter flyttar fokus till modal titel eller första interaktiva element vid öppen; returnera fokus till utlösarknapp vid stängning |
| Plattform | Designstandarder | ✅ Synliga fokusindikatorer visar tydligt vilket element som har tangentbordsfokus hela tiden |
| Plattform | Designstandarder | ✅ Fokusindikatorer uppfyller kontrastkravet 3:1 mot omgivande innehåll |
| Plattform | LWC | ✅ Användare kan navigera in i och ut ur alla komponenter med hjälp av tangentbord ensam utan att fastna |
| Plattform | LWC | ✅ Modala dialoger fångar fokus inom modulen när den är öppen (förhindra åtkomst till dolt innehåll) men släpp fokus på stäng |
| Plattform | Designstandarder | ✅ Kortkommandon för frekventa åtgärder undviker konflikter med kortkommandon i skärmläsare och webbläsare |
| Plattform | Designstandarder | ✅ Kortkommandon med en bokstav aktiveras endast när specifika komponenter har fokus (inte globalt) för att undvika konflikter med skärmläsarens navigeringskommandon |
| Plattform | Dokumentation | ✅ Alla egna kortkommandon dokumenteras i tillgängligt hjälpinnehåll |
| Plattform | Testplaner | ✅ Teststeg inkluderar endast tangentbordsnavigering genom alla användarresor utan att använda musen eller touch |
Antimönster
| Var man ska leta | Hur dåligt ser ut |
|---|---|
| Plattform | Designstandarder | ⚠️ Funktionalitet kräver mus- eller touchinteraktion; användare som endast använder tangentbord kan inte utföra nyckeluppgifter |
| Plattform | LWC | ⚠️ Fokusordning följer inte logisk visuell layout; användare flikar igenom element i oväntad ordning |
| Plattform | LWC | ⚠️ Modeller öppna utan fokushantering; tangentbordsanvändare är strandsatta på nu dold utlösarknapp |
| Plattform | LWC | ⚠️ Modalstängning returnerar inte fokus till utlösarknapp; användare måste jaga efter sin plats på sidan |
| Plattform | Designstandarder | ⚠️ Fokusindikatorer undertrycks av estetiska skäl; användare kan inte se vilket element som har fokus |
| Plattform | Designstandarder | ⚠️ Fokusindikatorer har otillräcklig kontrast (<3:1) |
| Plattform | LWC | ⚠️ Användare fastnar i gränssnittsregioner utan flyktmekanism (tangentbordsfällor) |
| Plattform | LWC | ⚠️ Inbäddat innehåll (iframes, tredjepartswidgets) fångar permanent tangentbordsfokus |
| Plattform | Designstandarder | ⚠️ Genvägar med en bokstav aktiveras globalt i konflikt med skärmläsarens navigeringskommandon med en bokstav |
| Plattform | Dokumentation | ⚠️ Egna kortkommandon är odokumenterade; användare kan inte upptäcka dem |
Mönster
| Var man ska leta | Hur bra ser ut |
|---|---|
| Plattform | Designstandarder | ✅ Minst 4,5:1 kontrastförhållande för normal text under 18pt eller 14pt fetstil |
| Plattform | Designstandarder | ✅ Minst 3:1 kontrastförhållande för stor text och för meningsfulla UI-komponenter och grafik (formulärkanter, informationsikoner); rent dekorativa och inaktiverade element undantas |
| Plattform | Experience Cloud | ✅ Egna teman och varumärkta Experience Cloud-webbplatser inkluderar explicit kontrastvalidering med hjälp av webbläsarverktyg eller automatiserade bockar |
| Plattform | Designstandarder | ✅ Textstorlek till 200% stöds utan förlust av innehåll eller funktionalitet (WCAG-krav) |
Antimönster
| Var man ska leta | Hur dåligt ser ut |
|---|---|
| Plattform | Designstandarder | ⚠️ Textkontrastförhållanden hamnar under 4,5:1 (normal text) eller 3:1 (stor text och användargränssnittkomponenter) |
| Plattform | Experience Cloud | ⚠️ Egna teman distribueras utan kontrastvalidering; användare med nedsatt syn kan inte läsa innehåll |
| Plattform | Designstandarder | ⚠️ Textändring utöver 200 % gör att layouter förlorar innehåll eller funktionalitet |
Mönster
| Var man ska leta | Hur bra ser ut |
|---|---|
| Plattform | CI/CD | ✅ Axel-core eller Lighthouse tillgänglighetsskanning är integrerad i CI / CD-pipelines som fångar strukturella problem på varje distribuering |
| Plattform | CI/CD | ✅ Byggen misslyckas när kritiska tillgänglighetsproblem upptäcks |
| Plattform | Testplaner | ✅ Manuella tester med skärmläsare, endast tangentbordsnavigering och webbläsarzoom till 200% utförs regelbundet under hela utvecklingen |
| Plattform | Testplaner | ✅ Tester avslöjar interaktionsproblem inklusive förvirrande meddelandeordning, fokushanteringsfel och tangentbordsfällor |
| Plattform | Företag | ✅ Användare med funktionshinder inkluderas i användbarhetstester genom hela designprocessen |
| Plattform | Företag | ✅ Användbarhetstester avslöjar praktiska hinder som automatiserade och manuella experttester missar |
| Plattform | Testplaner | ✅ Automatiserade tester (~ 57% av problem i volym), manuella tester (interaktionsproblem) och användartester (verkliga hinder) utförs alla |
Antimönster
| Var man ska leta | Hur dåligt ser ut |
|---|---|
| Plattform | CI/CD | ⚠️ Tillgänglighetsskanning är inte integrerad i CI/CD-pipeline |
| Plattform | CI/CD | ⚠️ Byggnader fortsätter trots kritiska tillgänglighetsproblem |
| Plattform | Testplaner | ⚠️ Manuell testning med hjälpmedelsteknik utförs inte; endast automatiserad skanning används |
| Plattform | Företag | ⚠️ Användare med funktionshinder inkluderas inte i användbarhetstester |
| Plattform | Testplaner | ⚠️ Automatiserad tillgänglighetsskanner körs en gång innan lansering och tillgänglighetstest anses vara gjort |