Små Tweaks Som Kan Göra en Enorm Inverkan på Din Webbplats Tillgänglighet

0
78

För en nybörjare, tillgängligheten kan vara skrämmande. Med alla de bästa avsikter i världen, inlärningskurva att utveckla kompatibla, fullt tillgängliga webbplatser och appar är enormt. Det är också svårt att hitta rätt råd, eftersom det är en ständigt föränderlig och alltmer trångt landskapet.

Jag har skrivit detta inlägg för att ge dig några tips på små saker som kan göra stor skillnad, samtidigt som de förhoppningsvis inte påverkar dina utvecklingsprocessen för mycket.

Låt oss dyka i!

Dokumentets Struktur och Semantik

Det förmodligen inte kommer som en överraskning att strukturera din HTML-kod i en organiserad, semantiska sätt kommer att göra stor skillnad. Skärmläsare förlita sig på ett väl strukturerat dokument för att följa en sammanhängande berättelse, så se till att du använder element i HTML5-specifikationen ger lyhört och effektivt.

Om du är osäker på hur man markup ditt arbete på rätt sätt, kolla in resurser såsom HTML5 Läkare, Kod Academy och naturligtvis, CSS-Tricks. Du kan även läsa artiklar som “att Skriva HTML-med tanke på tillgängligheten” och “Semantisk Struktur” för att få dig att gå i rätt riktning.

Låt oss titta på tre särskilda saker som kan bidra till att säkerställa en väl strukturerad och semantiska dokument.

Använda en Enda <main> – Elementet

Ett bra exempel på att bygga ett ansvarsfullt, semantiska dokumentets struktur är endast använda en <main> – elementet. Detta bör tjäna som en vägvisare för de flesta viktigt innehåll på sidan för användaren.

Lägg till ett ID till det och erbjuder en hoppa över länken i din huvudsakliga <header> så här:

<header roll=”banner”>
<h1>Dina huvudsakliga sidans titel</h1>
<a href=”#main-content”>Hoppa till huvudinnehåll</a>
</header>

<!– Längre ner i dokumentet –>
<viktigaste id=”main content”>
<!– Sätta din huvuddelen av innehållet i den här och andra riktigt viktiga saker –>
</main>

Detta lilla trick ska hjälpa dina användare med skärmläsare ut i stort sätt, eftersom de kan gå vidare och hoppa över den tjusiga bitar och dyka rätt in allt viktigt innehåll. Det är också bra för användare tangentbord för samma anledning.

Ett annat trevligt inslag är att lägga till ett :fokus stil att hoppa länk som gör det synligt. Prova att trycka på tab-tangenten på det här inlägget. Ganska snyggt, eller hur?

Använda Element På Lämpligt Sätt

Så, knappen <> – element är en smärta i baken för att rätt stil? Det betyder inte att du ska bifoga din JavaScript-händelser till en <div> eller <a href=”#”> om. Du ser, när du använder knappen<>, du får tangentbord händelser gratis. Du är även att hjälpa användare med skärmläsare ut eftersom det kommer att tillkännage element på rätt sätt. Kolla in detta exempel:

dokumentet.getElementsByTagName (“knappen”) [0].addEventListener (“klick”, evt => {
alert (“Åh, hej där!’);
});

Om en användare fokuserade på knappen och tryck på enter för att händelsen skulle brand. Som gör både din och användarnas liv lite lättare. Väl värt det, rätt?

Se Pennan klicka på Knappen exempel genom att Andy Bell (@hankchizljaw) på CodePen.

Få Din Rubrik Hierarki Låst

Det är riktigt vanligt för användare av skärmläsare att navigera på sidan med rubriken struktur. Det betyder att vi ska hjälpa dem och skapa en trevlig hierarki för dem. Låt oss ta en titt på en vanlig blogg inlägg:

<viktigaste id=”main content”>
<artikel>
<!– Sidans titel är upp i den huvudsakliga <header> i detta fall –>
<h2>Mitt awesome blogginlägg</h2>
<p>Vestibulum id ligula porta felis euismod semper.</p>
<p>Vestibulum id ligula porta felis euismod semper.</p>

<h3>En underavdelning av det här inlägget</h3>
<p>Vestibulum id ligula porta felis euismod semper.</p>

<h4>Ett underavsnitt i underavsnitt</h4>
<p>Vestibulum id ligula porta felis euismod semper.</p>
</article>
</main>

Med detta prov kan användaren navigera till start av “Min awesome blogg inlägg” och har då möjligheten att hoppa till sub-avsnitt och kapslade underavdelningar enkelt. De kan också gå tillbaka upp. Det är bara ett trevligt sätt att hjälpa dem att konsumera det innehåll som du har producerat så lätt som möjligt.

Det kan rekommenderas att en sida har en <h1> – elementet, även om W3C HTML5-specifikationen säger att du kan ha många. Personligen håller jag med hjälp av en enda <h1>, men du kan ha många, så länge du följer en bra struktur och en hierarki. Det är nyckeln här.

Få Din Färg Kontrast Till Höger

Att WCAG 2.0 AA-kompatibel, måste du ha en kontrast-förhållande på 4:5:1 för normal text. Detta är din punkterna, knappar, navigering etc. Du måste gå till en ratio på 3:1 för att visa större text, exempelvis rubriker. Jag skulle säga att detta bör vara ditt minimum som det är otroligt möjligt med verktyg som Tota11y, Kontrast och WebAim kontrast checker. Du kan fortfarande få massor av färg balans och variation i din design också.

Anledningen till att kontrasten är så viktigt är för att det finns så mycket variation i miljö som du förmodligen inte ens tänka på, till exempel starkt solljus och dålig kvalitet visas. Lägg till detta att en synnedsättning eller, säg, en migrän och du kan orsaka problem för dina användare.

Att få kontrast till höger kommer att ha en enorm, positiv effekt över ett brett spektrum av användare.

Ansvarig Textetiketter

Vi har alla byggt ut en lista över objekt med en icke-beskrivande, men visuellt tilltalande “Mer” – knappen, eller hur? Mer om vad? Vi måste vara mer ansvariga med detta och ge lite bakgrund.

Ett sätt att uppnå detta är genom att visuellt gömmer sig en beskrivande text med CSS och gömmer sig den icke-beskrivande text från skärmen läsare. Det är frestande att använda display: none;, men skärmläsare kan ignorera delar med att ställa in, så vi måste bli mer kreativa. Jag använder något som denna lilla hjälpreda:

.visuellt-dolda {
display: block;
höjd: 0px;
width: 0px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
visibility: hidden;
}

Med denna CSS på plats, kan vi göra något liknande detta:

<a href=”/länk-till-din-sida”>
<!– Detta är gömda från en skärmläsare, men syns visuellt –>
<span aria-hidden=”true”></span>

<!– Detta är synlig för en skärmläsare, men visuellt dolda –>
<span class=”visuellt-hidden”>Fortsätt läsa: “Ditt inlägg avdelning här”</span>
</a>

En seende användare kommer bara att se “Mer” och en skärmläsare användaren kommer att höra “Fortsätt läsa:” Dina inlägg titel här.'” Båda användarna är nöjda.

Du kan också uppnå ovanstående med hjälp av en aria-etiketten på <a> – taggen. Detta kommer att åsidosätta texten inom en skärmläsare:

<a href=”/länk-till-din-sida” aria-label=”Continue reading:” Dina inlägg rubrik här””>
Mer
</a>

Små Typografi Tweaks Med en Stor Effekt

Det är alltid värt att komma ihåg att personer med en synnedsättning eller inlärningssvårigheter kan vara att försöka läsa ditt innehåll, så några små tweaks för att din typografi kan gå en lång väg.

En kropp av innehållet, till exempel en artikel bör ha en sådan storlek på 16px (eller motsvarande enhet) på ett minimum. Det är också värt att öka din linje-höjd på cirka 1,5 också. Utrymmet mellan raderna kan hjälpa läsare med dyslexi för att förstå innehållet bättre. Kombinationen av storlek och utrymme är också bra för äldre människor och/eller kort-of-sight människor. Även små sammanfattningar och bortsett innehåll bör vara minst 12px (eller motsvarande enhet). Något mindre än detta kommer att stöta bort användare som har svårt att läsa.

Ett annat knep är att markera viktiga ord och fraser om ditt innehåll är ganska komplex. Detta inte bara fördelar för användare som är något långsammare vid behandling av innehållet, men det hjälper också människor som gillar att skanna över en artikel, som jag brukar göra.

Till sist på denna punkt, och jag skulle råda dig att vara försiktig med din font val. Teckensnitt med komplexa ligaturer och dekorativa element kan vara riktigt störande, så kanske begränsa användningen av dessa till viktiga, stora rubriker. Det är också informerats om att sans-serif-teckensnitt är bättre för läsare med dyslexi. Kolla in den här artikeln för mer om detta och annan textformatering tips.

Öka Keyboard Support

Det finns några små tweaks du kan göra för att hjälpa användare som främst använder sitt tangentbord för att navigera på din webbplats.

Säga att du har en liten knapp som visar en dialog när du klickar på den. Du bör bifoga en händelse att escape-tangenten som döljer det. Här är ett exempel på utdrag:

dokumentet.addEventListener(‘keyup’, (evt) => {
om(evt.keyCode === 27) {
// Kör oavsett kod döljer din dialog
}
});

Se Pennan Escape-tangenten demo av Andy Bell (@hankchizljaw) på CodePen.

En annan tweak kan du göra för våra tangentbord-navigera kompisar är inte dölja fokus från dem. Webbläsare ge oss fokusera staterna gratis med kontur. Jag vet att det kan se ful, men hot-fan det är användbart för användare tangentbord. Om du vill bli av med det blå skenet, får jag det—bara du använda :fokus pseudo-väljare att lägga till en självklar staten byta till det istället. Här är ett urval:

.din-element {
background: red;
}

.din-element:focus {
utkast: none; /* Återställ standard */
box-shadow: 0 0 0 3px black; /* Ett mycket påtagligt tillstånd förändras */
}

Lita inte på Färgen Ensam att Kommunicera Förändringar Staten

Låt oss slutet på en riktigt viktig. Färgen bör inte åberopas enbart för att meddela tillstånd ändras. Ta detta scenario som ett exempel:

Du har en knapp som postar formuläret. Du skrev några snygga JavaScript som gör att det går grey samtidigt som den skickar data. Det som då antingen blir grön eller röd, beroende på vad status är.

För en färgblind användare, detta är en mardröm. Till dem, kanske knappen har knappt förändrats nog för dem att lägga märke till, så att de kan bara hålla att klicka och klicka och samtidigt få riktigt frustrerad. Detta är inte idealiskt.

Så, istället för att förlita sig på färg, låt oss bygga vidare på denna med ett statusmeddelande som stöder knappen staten på svar.

Se Pennan Ökat statligt ändra meddelande demo av Andy Bell (@hankchizljaw) på CodePen.

Detta prov är ett bra sätt att snabbt kommunicera till användaren om att något har förändrats och användning av färg, text och ikonografi tydligt kommunicerar att ändra. Inaktivera knappen medan svar behandlas är också en stor hjälp för användaren.

Att Linda Upp

Dessa små tips ska göra en stor skillnad för användarna, och jag hoppas du dyker in i ditt projekt och genomföra några av dem.

Du bör också lära mer om tillgänglighet. Jag rekommenderar följande personer som Heydon Pickering, Scott O ‘ Hara, Laura Kalbag, och Rob Dobson på . Jag rekommenderar att du kolla in resurser såsom Inclusive Komponenter och A11y Projektet.

Ju större kunskap får, desto bättre är dina webbplatser och produkter kommer att vara för en mycket bredare publik. Det kan bara vara en bra sak, eller hur?