Små Endringer Kan Gjøre en Stor Innvirkning på Ditt Nettsted er Tilgjengelighet

0
75

For en nybegynner, tilgjengelighet kan være skremmende. Med alle de beste intensjoner i verden, læringskurven for å utvikle kompatibel, fullt tilgjengelig nettsteder og apper er stort. Det er også vanskelig å finne de riktige råd, fordi det er en stadig skiftende og stadig mer overfylt landskapet.

Jeg har skrevet dette innlegget for å gi deg noen tips om små ting som kan gjøre en stor forskjell, mens forhåpentligvis ikke påvirke utviklingsprosessen for mye.

La oss dykke ned i!

Dokumentet Struktur og Semantikk

Det sannsynligvis ikke komme så mye av en overraskelse at strukturere din HTML-kode i en organisert, semantisk måte vil gjøre en stor forskjell. Skjermlesere kan du stole på en godt strukturert dokument for å følge en sammenhengende fortelling, så pass på at du bruker de elementene som HTML5-spesifikasjonen gir responsively og effektivt.

Hvis du er usikker på hvordan du markup din fungerer som den skal, sjekk ut ressurser som for eksempel HTML5 Lege, Kode Academy og selvfølgelig, CSS-Triks. Du kan også sjekke ut artikler som “å Skrive HTML-med tanke på tilgjengelighet” og “Semantisk Struktur” for å få deg til å gå i riktig retning.

La oss se på tre konkrete ting som kan bidra til å sikre et godt strukturert og semantisk dokumentet.

Bruk et Enkelt <main> – Element

Et godt eksempel på å bygge en ansvarlig, semantisk dokumentstruktur er bare ved hjelp av ett <main> – element. Dette bør tjene som en veiviser for det viktigste innholdet på siden for din bruker.

Legge til en ID til den, og tilbyr et skip link i dine viktigste <header> som så:

<header rolle=”banner”>
<h1>hovedsiden tittel</h1>
<a href=”#main-content”>Hopp til hoved innhold</a>
</header>

<!– Lenger ned i dokumentet –>
<viktigste id=”main-content”>
<!– Sette hoveddelen av innholdet i her og annen veldig viktig ting –>
</main>

Dette lille trikset burde hjelpe din skjermleser brukere ut i en stor måte, fordi de kan gå videre og hoppe fancy biter og hoppe rett inn i din viktig innhold. Det er også stor for tastatur brukere av samme grunn.

En annen fin touch er å legge til en :fokus stil til koblingen hoppe som gjør det synlig. Prøv å trykke tab-tasten på dette innlegget. Ganske kult, ikke sant?

Bruke Elementer På Riktig Måte

Så, < – knappen> – elementer er en smerte i baken til å stil? Det betyr ikke at du burde feste dine JavaScript hendelser til et <div> – eller <a href=”#”> om. Du ser, når du bruker en < – knappen>, kan du få tastaturet hendelser for gratis. Du er også med skjermleser brukere ut fordi det vil kunngjøre element på riktig måte. Sjekk ut dette eksempelet:

dokumentet.getElementsByTagName(‘knappen’)[0].addEventListener(‘click’, evt => {
alert(‘Oh, hey det!’);
});

Hvis en bruker fokusert på denne knappen, og trykk på enter-tasten, at hendelsen ville brann. Som gjør både deg og brukeres liv litt lettere. Vel verdt det, rett?

Se Pen-Knappen klikk for eksempel av Andy Bell (@hankchizljaw) på CodePen.

Få Din Vei Hierarki Låst

Det er veldig vanlig for skjermleser brukerne å navigere på en side ved hjelp av overskriften struktur. Det betyr at vi bør hjelpe dem ut og skape en fin hierarki for dem. La oss ta en titt på en standard blogginnlegg:

<viktigste id=”main-content”>
<artikkel>
<!– Tittelen på siden er opp i main <header> i dette tilfellet –>
<h2>My awesome blogg innlegget</h2>
<p>Vestibulum id ligula porta felis euismod semper.</p>
<p>Vestibulum id ligula porta felis euismod semper.</p>

<h3>En sub-delen av dette innlegget</h3>
<p>Vestibulum id ligula porta felis euismod semper.</p>

<h4>En underavdeling av sub-seksjonen</h4>
<p>Vestibulum id ligula porta felis euismod semper.</p>
</article>
</main>

Med som eksempel, kan brukeren navigere til start av “My awesome blogg” og deretter ha muligheten til å hoppe til sub-seksjoner og nestede sub-seksjoner lett. De kan også gå opp igjen. Det er bare en fin måte å hjelpe dem til å konsumere innhold du har laget så enkelt som mulig.

Det kan anbefales at en side har kun én <h1> – element, selv om W3C HTML5-spesifikasjonen sier at du kan ha mange. Jeg personlig er enig med bruk av én <h1>, men du kan ha mange, så lenge du følger en fin struktur og hierarki. Det er det som er nøkkelen her.

Få Din Farge Kontrast Til Høyre

Å være WCAG 2.0 AA-kompatibel, må du ha en kontrast ratio på 4:5:1 for normal tekst. Dette er din avsnitt, knapper, navigasjon, etc. Du trenger ikke å gå for et forhold på 3:1 for stor tekst, slik som overskrifter. Jeg vil si dette bør være minimum som det er utrolig oppnåelig med verktøy som Tota11y, Kontrast og WebAim kontrast checker. Du kan fortsatt få mye farge balanse og variasjon i design også.

Grunnen til at kontrasten er så viktig er fordi det er så mye variasjon i miljøet som du sannsynligvis ikke engang vurdere, som kraftig sollys og dårlig kvalitet viser. Legg dette til en synshemming eller, la oss si, migrene og du er potensielt forårsake problemer for brukerne.

Å få kontrast høyre vil ha en stor, positiv effekt på tvers av et bredt spekter av brukere.

Ansvarlig Tekst Etiketter

Vi har alle bygget ut en liste over poster med en ikke-beskrivende, men visuelt tiltalende “Mer” – knappen, høyre? Mer om hva? Vi trenger å bli mer ansvarlig med dette og gi noen sammenheng.

En måte å oppnå dette på er ved å visuelt skjule beskrivende tekst med CSS og gjemmer ikke-beskrivende tekst fra skjermen lesere. Det er fristende å bruke display: none;, men skjermlesere kan ignorere elementer med at sett, så vi må være mer kreative. Jeg bruker noe som dette lille hjelper:

.visuelt-skjult {
display: block;
høyde: 0px;
bredde: 0px;
overflow: hidden;
klipp: rect(1px, 1px, 1px, 1px);
visibility: hidden;
}

Med dette CSS på plass, kan vi gjøre noe som dette:

<a href=”/link-til-din-side”>
<!– Dette er skjult fra en skjermleser, men synlig visuelt –>
<span aria-skjult=”true”>Mer</span>

<!– Dette er synlig for en skjermleser, men visuelt skjulte –>
<span class=”visuelt-skjult”>Fortsett å lese: “Dine innlegg tittel her”</span>
</a>

En seende bruker bare vil se “Mer” og en skjermleser bruker vil høre “Fortsette å lese:” Dine innlegg tittel her.'” Begge settene av brukerne er fornøyd.

Du kan også oppnå ovenfor ved hjelp av en arie-etiketten på <a> – koden. Dette vil overstyre tekst i for en skjermleser:

<a href=”/link-til-din-side” aria-label=”Fortsette å lese: ” Dine innlegg tittel her'”>
Mer
</a>

Små Typografi Tweaks Med en Stor Innvirkning

Det er alltid verdt å huske på at mennesker med synshemming eller læring problemer kan være å prøve å lese innholdet, så noen små endringer i din typografi kan gå en lang vei.

En kropp av innhold, for eksempel en artikkel bør være dimensjonert på 16px (eller tilsvarende enhet) på et minimum. Det er også verdt å øke line-height til rundt 1,5 også. Avstand mellom linjene kan hjelpe leserne med dysleksi til å forstå innholdet bedre. Kombinasjonen av størrelse og plass er også stor for eldre mennesker og/eller kort-of-sight folk. Selv små sammendrag og bortsett innhold bør være minst 12px (eller tilsvarende enhet). Noe mindre enn det vil fremmedgjøre brukere som sliter med å lese.

Et annet triks er å uthev viktige ord og setninger hvis innholdet ditt er ganske komplisert. Dette er ikke bare fordeler brukere som er litt tregere på behandlingen innhold, men det hjelper også folk som liker å skanne over en artikkel som jeg gjør.

Til slutt på denne delen, vil jeg råde deg til å være forsiktig med skrift valg. Skrifter med komplekse ligaturer og dekorative elementer kan være veldig distraherende, så kanskje begrense bruken av de viktige, store overskrifter bare. Det er også blitt oppmerksom på at sans-serif fonter er bedre for lesere med dysleksi. Sjekk ut denne artikkelen for mer om det og andre tekst-formatering tips.

Forbedre Tastatur Støtte

Det er et par små justeringer du kan gjøre for å hjelpe brukere som først og fremst bruker sin tastaturet for å navigere ditt nettsted.

Si at du har en liten knapp som viser en dialog når du klikker på det. Du bør legge ved en hendelse til esc-tasten som skjuler den. Her er et eksempel på utdrag:

dokumentet.addEventListener(‘keyup’, (evt) => {
hvis(evt.keyCode === 27) {
// Kjør hva kode skjuler dialog
}
});

Se Penn Escape-tasten demo av Andy Bell (@hankchizljaw) på CodePen.

En annen tweak du kan gjøre for vår tastatur-navigere kamerater er ikke skjule fokus fra dem. Nettlesere gir oss fokusere stater for gratis med omriss. Jeg vet det kan se stygg, men hot-pokker-det er nyttig for tastatur brukere. Hvis du ønsker å bli kvitt den blå glød, jeg får det—bare bruk :fokus pseudo-velgeren for å legge til en åpenbar staten endres til det i stedet. Her er et eksempel:

.din-element {
bakgrunn: rød;
}

.din-element:fokus {
disposisjon: none; /* Tilbakestill standard */
box-shadow: 0 0 0 3px svart; /* En opplagt staten endres */
}

Du må ikke Stole på Fargen Alene for å Kommunisere Tilstanden Endringer

La oss slutten på en veldig viktig. Farge bør ikke være lettelse opp på alene for å kommunisere tilstanden endringer. Ta dette scenariet som et eksempel:

Du har en knapp som innlegg i en form. Du skrev noen pene JavaScript som gjør det gå grå, mens den sender data. Det må du enten grønt eller rødt, avhengig av hva status er.

For en colorblind bruker, dette er et mareritt. Til dem, at knappen har knapt endret seg nok for dem til å legge merke til, så kan de bare holde klikke og klikke og bli frustrert. Dette er ikke ideelt.

Så, i stedet for å stole på farge, la oss styrke som med en status-melding som støtter knappen er staten på svar.

Se Penn Forbedret tilstand endrer kommunikasjon demo av Andy Bell (@hankchizljaw) på CodePen.

Som eksempel er en god måte å raskt kommunisere til brukeren om at noe har endret seg og bruk av farger, tekst og bilder som tydelig kommuniserer at endring. Deaktivere knappen mens reaksjon blir behandlet er også en stor hjelp for brukeren.

Innpakning Opp

Disse små tipsene bør gjøre en stor forskjell for brukerne dine, og jeg håper du kaster deg inn i dine prosjekter og gjennomføre noen av dem.

Du bør også holde lære om tilgjengelighet. Jeg anbefaler følgende personer som Heydon Pickering, Scott O ‘ Hara, Laura Kalbag, og Rob Dobson på . Jeg anbefaler også at du sjekker ut ressurser som Inclusive Komponenter og A11y-Prosjektet.

Jo større kunnskap blir, jo bedre dine nettsteder og produkter vil være et mye bredere publikum. Det kan bare være en god ting, ikke sant?