Share
Generelt sett er dette prinsippet om at nettstedet ditt må kunne være trygt navigerte for alle brukere. Dette inkluderer retningslinjene at hele nettstedet ditt skal være tilgjengelig ved hjelp av tastaturet alene. Videre må måten nettsiden din responderer på brukerinngang (ved tastatur eller på annen måte) være forutsigbar, klar og sikker.
Dette siste punktet refererer hovedsakelig til at eventuelle potensielle anfallspåvirkende funksjoner på nettstedet ditt er deaktivert som standard, og brukere advarte før de ble aktivert. Dette prinsippet gir også retningslinjer for å gi "nok tid" for brukerne å fullføre oppgaver, men vi dekker ikke det her.
Å kunne navigere og bruke nettstedet ditt med bare et tastatur er et av de viktigste aspektene av tilgjengelighet. Blindbrukere vil stole på tastaturer nesten utelukkende, og de med funksjonshemminger kan ha problemer med å kontrollere en mus, og så også stole på tastaturtilgang. Noen individer kan ha liten eller ingen bruk av hendene, og stole på større tastaturer, munnstenger, hodestenger, enkeltbryter eller Sip 'n' Puff.
Du finner beskrivelser av disse enhetene på WebAIM-nettstedet, men de er alle i hovedsak kanalbrukerinngang til tastaturstreker. Hvis nettstedet ditt ikke er tilgjengelig med tastaturer, vil alle brukere som stoler på disse enhetene, ikke kunne bruke nettstedet ditt.
Heldigvis er det ganske enkelt å lage tema eller plugin-tastatur tilgjengelig. Her er noen viktige punkter:
Mange temaer stole på å svinge over et menyelement for å vise noen undermenyer. Dette er greit, men generelt vil undermenyen ikke vises hvis hovedmenyelementet har fokus (i stedet for svever). Hvis du dupliserer eventuelle relevante regler for :sveve og søk dem til :fokus Også dette vil få deg halvveis der: undermenyelementene vises som brukeren faner over menyen. Men når brukeren fester ned til undermenyen, mister hovedmenyen fokus og undermenyen forsvinner. Dette kan korrigeres ved hjelp av JavaScript. Detaljer om dette og hvordan du gir en tilbakebetaling av ikke-JavaScript, vil bli dekket i neste artikkel i denne serien.
Du trenger ikke å gjøre noe for å lage "innfødte" skjemainnganger (velg, input, radio, etc.) tastatur tilgjengelig. Men bør et hvilket som helst aspekt av siden din (inkludert skjemafeltene) få fokus, det må være i stand til å bevege seg bort fra det ved hjelp av bare et tastatur, ellers brukeren er effektivt fanget. Dette er normalt standardadferd, så du bør bare unngå å overstyre den.
Denne retningslinjen har to typer anbefalinger: gjør det mulig å finne hvor brukeren er i øyeblikket er åpenbart, og få komme til hvor de vil gå lettere.
En del av å følge anbefalingene ved å gjøre dette innebærer at mange av temaene allerede gjør det: Ha en konsekvent navigasjonsmeny på tvers av sider, markere den nåværende siden, og la brukerne raskt finne ut hvor de er på nettstedet (for eksempel med brødsmuler).
En viktig del av å kunne bruke et tastatur til å navigere rundt en nettside, er å kunne se nøyaktig hva som for øyeblikket har fokus. Elementet som for øyeblikket har fokus bør være synlig forskjellig og skiller seg fra resten av siden. Av denne grunn bør du unngå skissere: none; med mindre du skal gi alternativ styling:
a: fokus disposisjon: ingen; bakgrunn: # ee7b00; farge: #fff;
En annen viktig del av tastaturtilgjengelighet er at tabbing oppfører seg forutsigbart og på en naturlig måte. For eksempel, hvis fokuset for tiden er et skjemafelt, forventer jeg at den neste kategorien skal ta meg til neste felt i det skjemaet. Hvis tabbing får fokuset til å hoppe opp og ned på siden, erratisk, vil dette frustrere og desorientere brukeren.
Unngå å bruke tabindex: Tabindex-attributtet gjør at du kan endre rekkefølgen der elementer nås ved å tabbing. Men hvis du fulgte rådene i artikkel 2 i denne serien angående DOM-strukturen, bør kategorien rekkefølge gjenspeile den "naturlige" rekkefølgen på siden. Mens tabindex har sine bruksområder, er disse sjeldne, og bruken av å "lappe" dårlig nettstedstruktur kan skape videre problemer. Den beste metoden er å unngå å bruke tabindex, og i stedet har temaet ditt en logisk DOM-struktur, med CSS som brukes til å endre visuell presentasjon.
Brukerne av skjermlesere vil ofte hoppe mellom koblinger, hoppe over teksten mellom, og på hver lenke vil skjermleseren lese ut "link [link text]". Som sådan er det utrolig uhensiktsmessig for slike brukere hvis de gjentatte ganger hører "link read more", "link click here" eller "link continue reading". Å legge til sammenheng til lenken i dette tilfellet innebærer bare å gi postens tittel. Så i stedet for "Fortsett å lese", har vi "Fortsett å lese [posttittel]".
For å gjøre dette i et WordPress-tema, trenger vi ganske enkelt å hekte på excerpt_more filtrer og legg til linken vår "fortsett lesing":
// legger til "fortsett å lese X" -koblingsfunksjonen mytheme_continue_reading_link () return ''. sprintf (__ ('Fortsett å lese% s', 'mytheme'), esc_url (get_permalink ()), esc_html (get_the_title ())). '
'; // Erstatter "[...]" (vedlagt automatisk genererte utdrag) med en ellipsis og mytheme_continue_reading_link (). funksjon mytheme_auto_excerpt_more ($ mer) return ' …'. mytheme_continue_reading_link (); add_filter ('utdrag_more', 'mytheme_auto_excerpt_more');
Dette gir "les mer" lenken riktig kontekst. Det er imidlertid et par forbedringer som kan gjøres.
For det første vil tilføyelsen av artikkeltittelen vanligvis ødelegge temaets estetikk, og for synete brukere vil det være overflødig, da posisjonen til "read more" -linken i forhold til artikkelens tittel og utdrag vil gjøre sammenhengen åpenbar. For å komme seg rundt disse problemene, kan vi "skjule" artikkeltittelen, men på en måte vil skjermleserne fortsatt lese dem.
Dette betyr vi kan ikke brukedisplay: none eller synlighet: skjult; som skjermlesere forstår disse egenskapene og vil ignorere innholdet. I stedet kan vi plassere teksten på skjermen eller bruke klemme eiendom:
.skjermleser posisjon: absolutt! viktig; bredde: 1px; høyde: 1px; polstring: 0; margin: -1px; overløp: skjult; klips: rekt (0,0,0,0); grense: 0;
Det er mange forskjellige eksempler på "skjermleser klasser"; denne er tatt fra Bootstrap 3. Deretter legger du til riktig klasse for artikkeltittelen, og spesifikt erstatter linje 5 ovenfor med:
Accentsconagua
__( 'Fortsett å lese % s',' mytheme '), For det andre, mens dette ville gi brukerne en indikasjon på hvor den linken pekte, ville de fortsatt måtte lytte gjennom "koblingen fortsette å lese ..." før de nådde posttittelen. Ideelt sett bør du sette overflødig informasjon på slutten av lenketeksten, eller slippe den fra ankermerket helt, for å redusere tiden det tar å identifisere en lenke.
En annen fordel for skjermleserbrukere av ikke forhåndskoblet tekst med overflødig informasjon er at skjermleserne ofte vil generere en liste over lenker på en side. Hvis mange koblinger begynner med samme tekst, kan dette gjøre det vanskeligere å finne en ønsket kobling, spesielt hvis lenken for din kontaktside er under "H" fordi den leser "Hvordan kontakte oss".
</code> Merk riktig</h3><p>De <code><title></code> tag skal brukes til å identifisere brukerens nåværende sted. Dette leses ut av skjermlesere, og vises i søkeresultatene og på skjermvinduet og nettleserfliken. For å gjøre det enkelt for brukerne å identifisere hvor de er (eller hva søket har funnet), bør denne titteltaggen inneholde sidens tittel og nettstedets navn. Ideelt sett bør nettsidens navn komme sist, slik at folk som bruker skjermlesere ikke trenger å lytte til navnet på nettstedet ditt på hver side lastes før de hører sidetittelen.</p><p>Titteletiketten kan legges til et tema med:</p><pre><title><?php wp_title(); ?> For å legge til nettstedtittelen:
/ ** * Legg til nettstedets tittel på siden tittel * / funksjon mytheme_wp_title ($ title, $ sep, $ seplocation) return $ title. '| '. get_bloginfo ( 'navn'); add_filter ('wp_title', 'mytheme_wp_title', 10, 3);Hopp til innhold
Vanligvis vil nettsteder ha en felles topp- og navigasjonsmeny som, med unntak av å markere brukerens nåværende posisjon, forblir nøyaktig den samme. Å måtte bla gjennom alle disse koblingene, eller lytte til en skjermleser gjenta dem på hver sidelast, er kjedelig og frustrerende. De av oss med god (nok) syn og motoriske ferdigheter kan umiddelbart hoppe ned til innholdet - og vi kan gjøre dette like enkelt for de som ikke gjør det.
Hvis du er i WordPress admin, og trykk Tab etter at siden laster, vil du legge merke til en lenke som sier Gå til hovedinnhold vises øverst til venstre (Hvis du trykker på tasten igjen, a Gå til verktøylinjen lenken vil vises). Denne koblingen sitter helt opp på siden, slik at den er den første lenken som mottar fokus når tabbing, og den første linken til nettstedet leses ut av en skjermleser. Etter denne linken hopper brukeren rett til hovedinnholdet, hopper over alle unødvendige koblinger og nettstedlogoer i mellom.
Å lage et skip til innhold er en fin måte å gjøre nettstedet ditt enklere å navigere, og det er utrolig enkelt, og krever bare en mindre bit av HTML og noen CSS.
Først HTML. Koblingen bør gå helt opp på siden din, umiddelbart under header.php fil:
// Resten av siden innhold
De eneste tingene å merke seg her er:
- Href-verdien, i dette tilfellet "main". Dette må samsvare med IDen til elementet som inneholder sidens innhold.
- Klassen av lenken, som vi skal bruke til styling.
Når det gjelder (1), vil sløyfen din se ut som:
// Loop // Ingen innlegg funnet ... vise søk
og sideskjermene dine kan se ut som:
>
Nå er alt som gjenstår å legge til noen styling til lenken.
Først vil vi ha linken skjult, men ikke skjult for skjermlesere, så vi vil plassere koblingen på skjermen i stedet for å bruke display: none (i så fall vil skjermlesere ignorere det).
For det andre, når det blir fokus, vil vi gjøre koblingen åpenbar, så det er klart at en tidligere skjult lenke nå er synlig og har fokus.
.hopp-link posisjon: absolutt; venstre: 6px; top: -100px; / * posisjon offscreen slik at den ikke er synlig, men kan motta fokus * / z-indeks: 100000; / * Plasser over WordPress 'verktøylinje * / font-size: 1em; font-weight: bold; skjerm: blokk; bakgrunn: # ee7b00; farge: hvit; / * Stil lenken slik at den er klar * / høyde: auto; bredde: auto; linjehøyde: normal; polstring: 15px 25px; tekst-dekorasjon: ingen; -webkit-overgang: topp 1-utløp; overgang: topp 1-utløp; .skip-link: fokus top: 5px; / * Flytt på skjermen * / -webkit-overgang: høyre 0s; overgang: høyre 0s; / * Animere, for å gjøre utseendet klart * /
Gjør navigering på nettstedet ditt trygt (2.3)
Til slutt, vær oppmerksom på at noen mennesker er utsatt for lysfølsomme epileptiske anfall. Dette kan skyldes flimrende eller blinkende effekter. I desember fjernet Jeff Chandler en "snø" -effekt fra WP Tavern etter at en besøkende advarte ham om at det kunne utløse et anfall.
Dette er ikke begrenset til anfall - det kan utløse migrene eller panikkanfall hos enkelte individer. Det er heller ikke begrenset til snøeffekter. En video-, karusell- eller lydfilautoplaying kan også utløse disse.
Selv om dette i stor grad er en redaktørs beslutning, og som utviklere er det ikke vår jobb å forhindre auto-play, kan vi i det minste fraråde det, ved å deaktivere det som standard. Jeff nevner i sin artikkel at han ikke kunne finne et plugin som gir "snø" -effekten som besøkende selv kunne spille.
