I denna artikel kommer vi att granska några användbara verktyg, krav och rekommendationer som är lämpliga att komma ihåg i arbetet med universell design av innehåll på nätet.
I denna artikel kommer vi att undersöka följande områden:
- Kontrastkontrast
- Avstånd och avstånd för den
- Applicera etiketter på formulär och inmatningar
- Alternativ text på icke- textbilder och element
- Lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek le
- Kör en tillgänglighetsanalys med Axe
- Prova ett textläsarverktyg – för en djupare förståelse
- Undvik fel och utelämnanden i kod med validering
Kontrasthåld
När det gäller design är det lätt att rita nya som du tycker ser snygg och ren ut. Men det vi ofta glömmer är att det finns vissa människor som har utmaningar med låga kontraster. Personer med låg syn och personer med läs- och skrivsvårigheter kan ha svårt att läsa och uppfatta innehållet korrekt om kontrastförhållandet är för lågt. Detta gäller vanligtvis för objekt som titlar, stycken och knappar. Därför är det viktigt att se till att bakgrunds- och förgrundsfärgen har rätt kontrastförhållande i förhållande till varandra. I WCAG 2.0Det krävs att kontrastförhållandet mellan bakgrund och förgrund ska vara på 4,5:1. .
Exempel på kontrastförhållande i arbetet med titlar och stycken.
Kontrollera kontrastförhållandet med Google Chromes utvecklarverktyg
Använd Google Chromes inbyggda utvecklarverktyg för att se kontrasten mellan bakgrunds- och förgrundsfärg. Öppna i fönster med CTRL + Shift + C eller på Mac med CMD + alternativ + C och välj det objekt du vill inspektera närmare.
Kontrollera kontrasten till Stark för Adobe XD
Stark är en förlängning till Adobe XD som låter dig kontrollera kontraster och genomföra färgblindhetsanalyser. LLadda ner Stark till Adobe XD
Avstånd och avstånd för den
För personer som kämpar med nedsatt syn och dyslexi kan texten på webbplatsen skapa utmaningar. Det är viktigt att se till att vi har en bra läsbar titel och punkt. Enligt den kommande WCAG 2.1, rekommenderas att ha minst:
- Linjeavstånd till minst 1,5 gånger teckensnittets storlek
- Avstånd med punkt till minst 2 gånger teckensnittets storlek
- Avståndet i textblock bör vara minst 0,12 gånger teckenstorleken
- Avståndet mellan ord bör vara minst 0,16 gånger teckenstorleken
Applicera etiketter på formulär och inmatningar
Personer med nedsatt syn och personer med läs- och skrivsvårigheter kan använda textläsningsverktyg för att höra och navigera sig runt i innehållet. Särskilt när det gäller former. Därför är det viktigt att formulären använder etiketter på indatafält så att verktyget för textläsning uppfattar fälten korrekt.
I arbetet med formulär kan vi använda etiketter (etiketter). Etiketter hjälper till att se till att inmatningsfälten (indata) uppfattas korrekt av verktyget och att fältet är identifierbart och vettigt.
I ett formulär kan en HTML-tagg användas: <label> för att verktyget att uppfatta fältet korrekt. Alternativ text för icke- textbilder och objekt
För att läsa verktyget att uppfatta bilder, former, illustrationer och andra delar av icke-textinnehåll krävs en alternativ beskrivning av elementet.
Bilder bör ha en alternativ text som beskriver innehållet. Detta gäller alla element utom för bilder eller former som är av dekorativt syfte, då den alternativa texten bör vara tom.
Exempel på bild med alternativ text och dekorativ bild utan alternativ text.
Lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek lek le
Det rekommenderas att länken beskrivas enligt innehållet i länkens destinationssida. Vi har till exempel utvecklat en Förteckning över principer för saluföringVilket ger dig en bättre förståelse för marknadsföring. Länken måste också uppfattas som en länk till sammanhanget kring dem, så att den inte skapar förvirring om förekomsten av en länk eller till exempel text. För att klargöra detta kan en linje användas nedanför länken. I CSS-dokumentet kan en textdekoration läggas till: underlinje; på ankartaggen.
Kör en tillgänglighetsanalys med Axe
Axe kan du utföra webb-sida tillgänglighet analyser och hjälpa dig att upptäcka designfel. Ladda ner Axe för Google Chrome
Prova ett textläsarverktyg – för en djupare förståelse
Ett textläsningsverktyg kan ge djupare inblick i hur webbplatsen faktiskt känns för personer som påverkas av blindhet, nedsatt syn, dyslexi och andra kognitiva utmaningar.
Hämta Chrome Vox för Google Chrome Läs mer om tillgänglighet för Mac OS
Undvik fel och utelämnanden i kod med validering
Kod som innehåller fel på webbplatsen kan orsaka tillgänglighetsverktyg och användare med speciella verktyg för att inte kunna navigera runt eller uppfatta sidan korrekt. Därför är det viktigt att validera koden på webbplatsen och se till att vi korrigerar potentiella fel som valideringsverktyget hittar.
Gå till W3C-validator för HTML Gå till W3C Validator för CSS
R: Vad står det i förordningen? – Direktoratet för offentlig förvaltning och IKT G G G 2.0- Standarden – Direktoratet för förvaltning och IKT Förslag till webblösning – Direktoratet för förvaltning och IKT Webbdirektivet och WCAG 2.1 – Direktoratet för offentlig förvaltning och IKT Riktlinjer för webbinnehållsackreditering (WCAG) Översikt – W3C