Typografi
Textstorlek, färger och länkar.
Kontrast i text ska möta kraven från WCAG 2.1
https://www.w3.org/TR/WCAG21/#contrast-minimum
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for Large Text. Large-scale text and images of large-scale text [should] have a contrast ratio of at least 3:1;
Tips på verktyg för att mäta kontrast mellan två färger
Tillgänglighetskrav
Att signalera angelägenhet eller betydelse enbart med färg kan göra det svårt för färgblinda att tolka informationen korrekt.
Rekommendation
Använd alltid en ikon för att visuellt kommunicera status, brådska och allvar – inte enbart färg. Detta säkerställer att även färgblinda uppfattar budskapet som det är tänkt.
Skalbar text
Exempel på en biljett med text förstorat till 200 %
Exempel på en reseplan med text förstorat till 200 %
Skärmläsare och tangentbordsnavigering
https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html
iOS Platform information
https://developer.apple.com/documentation/swiftui/accessibilitytraits
https://developer.apple.com/documentation/uikit/uiaccessibilitytraits
Innehållets ordning vid tangentbordsnavigering
https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html
Vad?
På motsvarande vis som skärmläsaren avgör vilken en meningsfull uppläsningsordning är, behöver användaren av tangentbordsnavigering ges en meningsfull presentationsordning av innehållet.
Hur?
Vid tangentbordsnavigering använder användaren (Shift +) Tab-tangenten för att röra sig (bakåt)/framåt i innehållets presentationsordning. För att göra ett val trycker användaren på Enter.
Teknisk dokumentation
https://www.w3.org/WAI/WCAG21/Techniques/css/C27
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
Vid implementation på webben kan “tabindex” nyttjas för att styra presentationsordningen vid tabbande.
Alt-text för bilder
Resplus skall implementeras med så kallade “alt”-texter som en skärmläsare kan tillgodogöra sig. Alt-texter visas också när en bild inte kan laddas.
Mer information finns att läsa här:
- www.w3.org/WAI/WCAG22/quickref/?versions=2.0#qr-text-equiv-all
- axesslab.com/alt-texts
