Bedre Tilgjengelighet av 24 måter

0
59

Jeg har i det siste tenkt på arten av arbeidet mitt, og hvilke aspekter av det jeg liker mest. I en rolle som ofte skreve realms av utvikling og design, om redigere kopiere, evaluere utformingen av et grensesnitt eller refactoring code, jeg har kommet til å innse at mine interesser ligger i lov av gjennomgang og videreutvikling.

Mitt arbeid på 24 måter er en slik sak. Siden Trakk McLellan ba meg om å redesigne nettstedet i 2013, jeg har bodd på som en del av teamet, og hjelper til å skrive, redigere og formatere artikler. Men jeg har også vært i stand til å oppfylle ønsket jeg uttrykt ved utsetting redesign:

Jeg er en stor tilhenger i iterasjon og ikke behandling av et nettsted som aldri blir ferdig. Jeg håper det som har blitt utgitt dette året kan fungere som en stiftelse, og at design vil utvikle seg i årene som kommer.

I de mellomliggende årene, som verktøy har økt, og beste praksis har modnet, jeg har endret design og refactored koden, og utviklet en komponent bibliotek i prosessen.

24 måter hjemmesiden

Fokus på Tilgjengelighet

Dette året har jeg vært å lytte til folk som Laura Kalbag snakker om tilgjengelighet i form av universell utforming, og fulgte blogger som Heydon Pickering ‘ s Inclusive Komponenter, som dekker hvordan man skal utforme og gjennomføre en felles samhandling mønstre med en inkluderende tankegang. Alle av en plutselig, det vanskelige temaet tilgjengelighet har vært mer imøtekommende og mindre dogmatisk.

Med all denne kunnskapen er fordøyd, var jeg opptatt av å se hvordan 24 måter ville billettprisen når satt under lupen. I denne artikkelen, jeg vil dekke fem områder hvor jeg var i stand til å gjøre forbedringer:

  • Sidestruktur
  • Merking av elementer
  • Tastaturet for å navigere
  • Aural erfaring
  • Generell brukervennlighet

Før jeg begynner, merk av takk. Etter å ha gjort et første sett av endringer, spurte jeg min venn og tilgjengelighet ekspert Francis Storr til å skrive en anmeldelse mitt arbeid. Han avdekket en rekke andre problemer, blant annet et resultat av hans erfaring på dette området, men også fra å ha testet nettstedet med en rekke forskjellige hjelpemidler verktøy.

Gjennomtenkning Sidestruktur

Den opprinnelige utformingen hadde vedtatt en mobil-første tilnærming. Navigasjonen ble deprioritized og plassert mot bunnen av siden. For å sikre at det kan nås fra toppen av siden i ikke-JavaScript-scenarier, jeg har lagt til et hopp til navigasjon link. Hvis JavaScript ble tilgjengelig, og denne koblingen var co-valgt for å avsløre en navigasjon skuff, noe som ville skyve i fra toppen eller høyre, avhengig av bredden på vinduet. Dette resulterte i følgende side struktur:

<header class=”c-banner”>…</header>
<a class=”c-meny” href=”#menu”>Hopp til meny</a>
<main class=”c-main”>…</main>
<nav class=”c-navigasjon” id=”meny”>
<div class=”c-rail-nav”>…</div>
<div class=”c-navigasjon__skuffen”/>…</div>
</nav>
<footer class=”c-contentinfo”>…</footer>

I ettertid, var dette problematisk i en rekke måter:

  • På menu-knappen (.c-meny) var ikke tilstøtende element det kontrollert (c-navigasjon-skuff). Flytte fokus rundt den side som dette kan være forvirrende, spesielt hvis det ikke håndteres riktig.
  • All navigering på nettstedet ble gruppert sammen, selv om hvert sett av lenker tjent et annet formål.
  • Skuffen atferd lettelse opp på å ha en link oppføre seg som en knapp. Imidlertid, den første regelen av ARIA sier:

    Hvis du kan bruke en innfødt HTML-element eller attributt med semantikk og atferd du trenger allerede bygget i, i stedet for gjenbruk et element og legge til en ARIE rolle, statlige eller eiendom å gjøre det tilgjengelig, så gjør det

    Siste år, jeg har oppdatert JavaScript slik at denne koblingen vil bli erstattet med en knapp, men denne kompleksiteten var et hint om at min opprinnelige løsningen var sub-optimalt.

Her er strukturen kom jeg på i dag:

<header class=”c-banner”>

<a class=”c-banner__skip” href=”#main”>Hopp til innhold</a>
</header>
<div class=”c-meny”>
<- knappen class=”c-menyen__ – knappen”>…</button>
<div class=”c-menyen__skuffen”>…</div>
</div>
<main class=”c-main” id=”main”>…</main>
<nav class=”c-rail-nav”>…</nav>
<footer class=”c-contentinfo”>…</footer>

Flytte navigering mot toppen av siden betydde knappen og skuffer var nå ved siden av hverandre. Menu-knappen er ikke lenger to møter; det er og vil alltid være, en knapp.

En ulempe til denne tilnærmingen er at navigeringen kan høres hver gang du besøker en ny side. Igjen, vi kan bruke et koblingen hoppe, men denne gangen er det en som peker til innhold blokk (#main). Snarere enn å skjule dette fokuserbart element fra bestemte brukere, det blir synlig i fokus.

Denne strukturen kan være mindre ideologisk ren, men det er langt mer pragmatisk. Dette ble et tilbakevendende tema. Faktisk, etter å ha gitt opp ethvert håp om HTML5 skissere algoritme noen gang blir støttet av nettlesere, jeg har sluttet å bruke h1 for kapittel-overskrifter og fulgte anbefalingen om at overskriften rekkene bør brukes til å formidle dokumentet struktur i stedet.

Forbedre Tastaturet For Å Navigere

Som den mest interaktive komponent på nettstedet, menyen var overraskende fokus i min anmeldelse. Design tilsier at navigeringen skuffen bør oppføre seg som en dialog, et grensesnitt mønster som bringer med seg en rekke forutsetninger. Disse er beskrevet i detalj i eBay SINN mønster, men i hovedsak en dialog trekker fokus bort fra andre elementer på siden og er modal, bare elementer innenfor den kan betjenes mens det er åpent.

Jeg hadde tidligere lappet sammen ulike biter av JavaScript til å håndtere fokusering (cobbling som på ulike punkter produsert merkelig bug som ikke klarte å trekke fokus til det første elementet i dialogboksen), men hadde unnlatt å vise menyen rolle. Etter å ha løst disse problemene (legge rolle=’dialog’ når menyen er åpen), Francis påpekt at skjermlesere kan fortsatt få tilgang til koblinger utenfor dialogen når den var åpen. I macOS VoiceOver for eksempel, ved å trykke CTRL + VELGE + CMD + L for å navigere lenker i menyen, ville faktisk kunngjøre hver lenke på siden.

Løsningen ble å merke alt utenfor dialogen som “inert”. Rob Dodson beskriver dette i mer detalj i sin video Tilgjengelig Sperrende Dialogbokser. Gjennomføringen av dette kan være litt klossete, men et forslag om å innføre et inert attributt ville gjøre dette enklere å administrere. I mellomtiden, forslaget gir en polyfill, slik at du kan bruke denne funksjonen i dag.

Jeg har funnet ut at ved å tenke på et grensesnitt i form av felles samhandling mønstre, og hvordan de bør fungere for å bli allment forstått, har hjulpet meg med å unngå kompleksiteten, og skrive mer robust kode. Faktisk, gikk inn i verden av tilgjengelighet har avdekket et vell av nyttige ressurser, og med godt skrevet JavaScript eksempler en masse. Gitt min vanskelige forhold med web programmering språk, disse har vist seg å være uvurderlig.

Riktig Merking Elementer

En god del av tilgjengelighet kommer ned til merking ting som er avhengige av visuelle utseende alene for å formidle mening. Mye som alt-attributtet gir oss mulighet til å beskrive bilder, aria-label (og dens forbindelser), gjelder dette evnen til andre elementer.

Navigasjon-komponent som lar brukerne til å flytte mellom artikler i en serie.

Her er markup-jeg var med i navigasjon-element som tillater brukere å bla gjennom forrige og neste artikkel i en serie:

<div class=”c-rail-nav”>
<a rel=”forrige” href=”/2016/vi-trenger-for-å-snakke-om-teknisk-gjeld/”
data-sekvens-title=”Vi Trenger å Snakke Om Teknisk Gjeld”>
<svg width=”20″ høyde=”20″ viewBox=”0 0 200 200″ role=”img”>
<bane d=”M50 100l85 85 7-7-78-78 78-78-7-7″/>
</svg>
<span class=”u-skjult”>Forrige artikkel</span>
</a>

<a rel=”neste” href=”/2016/hva-pokker-er-inclusive-design/”
data-sekvens-title=”Hva Pokker Er universell Utforming?”>
<span class=”u-skjult”>Neste artikkel</span>
<svg width=”20″ høyde=”20″ viewBox=”0 0 200 200″ role=”img”>
<bane d=”M150 100l-85 85-7-7 78-78-78-78 7-7″/>
</svg>
</a>
</div>

Mens jeg hadde gitt tekst innhold for disse koblingene, denne komponenten fortsatt hadde en rekke problemer:

  • Ingen indikasjon ble gitt med hensyn til den rolle disse linkene spille og deres forhold til hverandre.
  • Ved hjelp av rollen=’img’ på SVG-ikoner, men ikke å gi noen tilgjengelige navn, var beslektet med blant annet bilder uten alt-attributter.
  • Nyttig informasjon, i dette tilfellet tittelen på den forrige og neste artikkelen, var skjult i en data – attributtet. Denne egenskapen ble brukt i stilsettet til å legge til innhold som er vist i animert ‘flaps” som vises på hover:

.c-rail-nav en[rel=prev]:hover::etter {
innhold: “Forrige: ‘ attr(data-sekvens-tittel);
}

.c-rail-nav en[rel=neste]:hover::etter {
innhold: ‘Neste: ‘ attr(data-sekvens-tittel);
}

Meningsfylt innhold i CSS? Det burde ha vært et rødt flagg. Jeg har revidert denne komponenten som følger:

<nav class=”c-rail-nav” aria-label=”Artikler”>
<a rel=”forrige” href=”/2016/hva-pokker-er-inclusive-design/”
aria-label=”Forrige: Vi Trenger å Snakke Om Teknisk Gjeld”>
<svg width=”20″ høyde=”20″ viewBox=”0 0 200 200″ fokuserbart=”false” aria-skjult=”true”>
<bane d=”M50 100l85 85 7-7-78-78 78-78-7-7″/>
</svg>
</a>

<a rel=”neste” href=”/2016/hva-pokker-er-inclusive-design/”
aria-label=”Neste: Hva Pokker Er universell Utforming?”>
<svg width=”20″ høyde=”20″ viewBox=”0 0 200 200″ fokuserbart=”false” aria-skjult=”true”>
<bane d=”M150 100l-85 85-7-7 78-78-78-78 7-7″/>
</svg>
</a>
</nav>

Det første jeg gjorde var å gi dette sett av lenker til en etikett. Jeg opprinnelig velge Artikler navigasjon. Imidlertid, i testing VoiceOver ville si: navigasjon, Artikler navigasjon. Som nav element allerede beskriver rolle, vi må bare gi ytterligere informasjon om den type navigering dette er.

For det andre, på råd av Francis, jeg har lagt fokuserbart= “false” til alle inline SVG-markup. Dette er på grunn av en bug i IE11 hvor SVGs er tastaturet fokuserbart som standard.

Vedrørende merking av SVG-ikoner, jeg hadde to valg. Jeg kan enten flytte skjult tekst innhold til disse ikonene ved å bruke aria-merke eller fjerne dem fra tilgjengelighet treet helt med aria-skjult. I vurderingen av det andre alternativet, innså jeg at jeg kunne slå sammen skjult tekst med at i data – attributtet, og bruke denne kombinerte informasjonen innen en arie-etikett attributt. Alle av en plutselig, min CSS ble mye enklere:

.c-rail-nav a:hover::etter {
innhold: attr(aria-label);
}

Tilgjengelig markup er nyttig markup.

Vurderer Aural Erfaring

Navigere gjennom nettstedet ved å bruke en skjermleser føre til meg å gjøre noen andre små endringer. For eksempel, et par linker på nettstedet inkluderer er en pilen som peker mot høyre, en visuell blomstre opprettet ved hjelp av følgende CSS:

.c-fortsette::etter {
innhold: ‘203A’; /* Enkelt Høyre-Peker Vinkel Anførselstegn */
}

Imidlertid, tv-lesere vanligvis kunngjøre generert innhold. Når disse lenkene ble lest ut, vil du høre tull som dette:

link, flere artikler av drew enkelt høyre-peker vinkel anførselstegn.

Legge til tale: ingen hadde ingen effekt (CSS aural egenskaper har lite støtte). Men, jeg kunne lage en lignende pil ved hjelp av CSS grenser:

.c-fortsette::etter {
display: inline-block;
vertical-align: middle;
høyde: 0.375 em;
bredde: 0.375 em;
grensen: 0.1875 em solid;
border-color: currentColor currentColor transparent transparent;
forvandle: rotere(45deg);
innhold: “;
}

Fortsett lenker før og etter forbedringer. Mens de ser like ut, revidert design høres mye bedre.

Jeg har også gjort forbedringer til styling av forfatteren navn i artikkelsammendrag. Opprinnelig ble disse skiller seg fra resten av utdrag av styling dem som store tekst. Francis påpekt at noen skjermlesere vil stave ut store bokstaver (uavhengig av om de vises i HTML-eller har blitt endret av CSS) hvis de ikke stave et kjent ord. For eksempel VoiceOver-og NVDA har problemer med Chris Coyier etternavn, slik at hans navn ville bli lest høyt som Chris C-O-R-I-E-R. enkel løsning var å skille navn ved hjelp av modigere tekst i stedet.

Hvis jeg er ærlig, jeg har vært litt arrogant i det siste, og tenker at ved å bruke semantisk markup og progressive enhancement, jeg trenger ikke bekymre deg for mye om tilgjengelighet. Mens du bruker de riktige elementene, og vurderer et grensesnitt ikke bare i visuell form er viktig, dette er det absolutte minimum. En forståelse av ulike hjelpemidler teknologier, og villighet til test med dem, er like viktig.

Gjennomgang Av Generell Brukervennlighet

Tenker om tilgjengelighet førte til meg forbedre den generelle brukervennligheten, også.

For dette år sett av artikler, og vi ikke lenger link til forfatterens nettsteder fra artikkelen utdrag. Dette historiske etterlevning var dårlig løst tidligere; hvis du tilfeldigvis klikk på navnet til forfatter du ville bli tatt til deres nettsted, ikke den artikkelen som du ville forvente. Vi har også inkludert kommentar teller som var knyttet til kommentarfeltet på artikkelen side (som i seg selv er knyttet til en separat kommentarer side). Galskap!

Nå, hver artikkel har en link til artikkelen. En hjemme side som en gang involvert tabbe gjennom 24×3 koblinger, er nå mindre støyende og mye lettere å navigere for alle.

Andre forbedringer inkludert å sikre at nettstedet er lydhør i forhold til høyde, samt bredde, noe som sikrer navigeringsmenyen kan fjernes når du klikker på utsiden av det, og en gjennomgang av den totale ytelsen. Disse kan ikke betraktes tilgjengelighet forbedringer, men jeg er ikke så sikker på. Å foreslå at dette ville være å tenke tilgjengelighet er en helt egen bekymring. Faktisk, å gjøre endringer som er til fordel for ett sett av brukere vil typisk være til nytte for alle.

Å skape noe nytt vil alltid tiltrekke seg oppmerksomhet og beundring, men det er en under-feiret adelen i å forbedre det som allerede eksisterer. Selv om ikke alle endringer kan være visuelle, de kan ha like mye innflytelse. Jeg vet at vi hadde besluttet å omstrukturere området dette året, mange av disse forbedringene ikke ville ha blitt gjort. Forhåpentligvis er denne oversikt vil oppmuntre deg til å se på dine egne prosjekter og tenke på lignende endringer du kan gjøre.

Å ha en økende bevissthet om problemene, og utvide din kunnskap om verktøy tilgjengelig, er en vesentlig forutsetning for å jobbe på internett. Men ikke hold for at kunnskapen er lagret opp for fremtiden, hvis du kan, kan du gå tilbake og fikse eldre prosjekter også.