Accentsconagua
Share
I en tidligere artikkel snakket vi om hvorfor tilgjengelighet er viktig, når det gjelder forretninger, SEO, brukervennlighet og til og med loven. I denne artikkelen vil jeg forklare hvordan du lager tilgjengelige WordPress-temaer, selv om de samme ideene gjelder for hvilken som helst plattform.
Det er ingen måte vi kan dekke alle mulige beste praksis i denne artikkelen, men det grunnleggende forblir sant for hver nettside. Jeg bruker noen ressurser som bakbenet i denne artikkelen:
Vi vil dekke følgende tips:
Jeg kan ikke understreke nok betydningen av semantisk HTML: det er grunnlaget for din tilgjengelige nettside. Léonie Watson forklarer perfekt hva semantikk betyr i sin artikkel forståelse semantikk:
"HTML-semantikk er derfor viktig på to måter: Vi får en konsekvent forståelse av innholdsstruktur og innfødt atferd, og vi får en felles forståelse av innholdets mening og formål. Det beste av alt er at vi får disse tingene gratis når vi bruker HTML som beregnet. "
Når vi skriver HTML-elementer, bør vi ikke bare tenke på hvordan de er utformet, eller hvordan de ser ut. Vi bør også tenke på hvordan de jobber ...
Et svært vanlig eksempel er bruken av Bruk Merk: bak kulissene gir tilgjengelighets API informasjon til assistentteknologi om hvert elements navn, rolle og tilstand. Her er et eksempel link, Bygg en inklusiv web: Hvorfor tilgjengelighetsforhold, med hvordan en tilgjengelighetsviser ser det: I praksis betyr dette at skjermlesere og andre AT gjenkjenner ankeret og kan kunngjøre elementets rolle og navn. For eksempel: "Link, Bygg en inklusiv web: Hvorfor tilgjengelighetsforhold". De kan også navigere på siden ved hjelp av bare koblingene: Bruk For å oppsummere den Tips: I Chrome 64 er det en tilgjengelighet ruten som viser et valgt elements posisjon i tilgjengelighets-treet, samt dets ARIA-attributter og beregnede egenskaper. Bruk Les mer om Links, Buttons, Submits og Divs av Adrian Roselli. I neste avsnitt ser vi HTML5-snittelementer og hvilken semantisk markering ser ut. Mange HTML5-elementer definerer som standard ARIA-landemerkeroller. Disse identifiserer deler av en side og hjelper AT brukere navigerer til hver enkelt. Av denne grunn bør alt innhold være innenfor semantisk meningsfulle elementer slik at det ikke blir savnet av brukeren. Dette er de vanligste landemerkeelementene: Merk: Eldre nettlesere og AT-kombinasjoner gjenkjenner ikke nødvendigvis HTML5-elementer og kartlegger dem til de riktige landemerkroller. I disse tilfellene kan du legge til roller manuelt slik: For mer informasjon, sjekk eksempeloppslag på WordPress-håndboksiden om ARIA landemerker og ARIA landemerkeeksemplarsiden. Har du lest en veldig lang artikkel uten overskrifter? Fikk du det vanskelig å lese? Jeg har sikkert. Overskrifter hjelper brukere raskt å skanne og forstå sidens innhold. På samme tid gir overskrifter AT-brukere en måte å navigere på innholdet og definere sidestruktur. Tilnærminger varierer, men min anbefaling er den samme som den som er skissert i overskriftsstruktur i temautvikling: Merk: Brukerne kan bryte overskriftshierarkiet når de går inn i eget innhold ved å bruke H1 eller hoppe over overskriftsnivåer. Rådgir dem ved å peke dem til vår dokumentasjon om hvordan du bruker overskrifter i innholdet. Jeg bruker disse verktøyene for å sjekke overskrifter struktur: Så langt har vi nevnt flere måter å navigere på siden: ved hjelp av koblinger, overskrifter eller landemerker. Og det samme gjelder for andre semantiske HTML-elementer som lister, tabeller eller bilder. Hjelpende teknologibrukere kan også navigere ved hjelp av disse elementene. Her er en kort video som viser bruk av Voiceover-skjermleser, noe du bør definitivt teste temaet med: Les mer om bruk av Voiceover eller sjekk ut denne lignende artikkelen ved hjelp av NVDA. Regel nummer ett: Ikke fjern skissestiler ved å bruke Det er mange brukere som er tastaturavhengige og ikke kan bruke en mus. For tastaturbrukere er det avgjørende å ha visuelle fokusstiler på alle interaktive elementer: lenker, skjemafelt, knapper og så videre. Med andre ord, må brukerne kunne se hvilket interaktivt element har det nåværende tastaturfokuset når du navigerer gjennom siden. De vanligste tastaturkontrollene for navigering er Tab, Skift + Tab, Tast inn, Rom, og piltastene. Merk: standardblokkfokusstil er ikke alltid den mest tilgjengelige løsningen-tilpassede disposisjonsstiler er noen ganger bedre. Merk også: Noen ganger er kontraststiler ikke den beste designtilnærmingen, fordi konturen ikke respekterer et elements grenseradius. En løsning er å bruke Her er fint triks som bruker et gjennomsiktig omriss for Windows High Contrast-modus. Du kan lese mer info om dette fra Gutenberg PR 5138 og Trac billett 41286. På den annen side er tastaturnavigering ikke bare om fokusstiler. Alle handlinger må også være mulig med tastaturet. Et vanlig eksempel er når en bruker ikke kan navigere til undermenyelementer ved hjelp av enten tasten eller ved hjelp av piltastene. Underscores startetemaer har JavaScript-løsning for dette: Hver gang en menykobling er fokusert eller sløret, setter de eller fjerner Et annet eksempel er når navigasjon fungerer på samme måte som en modal dialog, som en fullskjermnavigasjon. I disse tilfellene er det viktig å sette fokus riktig. Jeg ser fortsatt mange design med lav fargekontrast. Dette kan gjøre det umulig for fargeblind brukere, brukere med dårlig syn eller brukere som bruker lavkvalitetsmonitorer til å lese innholdet. Kontrast mellom bakgrunn og forgrunnsfarger skal ha kontrastforhold på Det er mange verktøy for å sjekke fargekontrast, som kontrastforholdskontroll. Du finner mer informasjon i artikler som denne om bruk av farger og fargekontrast som krav til tilgjengelighetsklare temaer. En "hopp til innhold" -link gjør det mulig å hoppe forbi alle ekstraelementene før hovedinnholdet, og gå rett til innholdet. Du lurer kanskje på hvorfor landemerke I alle fall bruker AT-brukere fortsatt hoppelink i henhold til denne skjermleserundersøkelsen: Les mer om hvordan du bruker hoppelink i håndboken. Prøv å unngå gjentatte koblingstekster som "Les mer" eller "Lær mer". For brukerne av skjermlesere som navigerer ved hjelp av koblinger, kan resultatet se slik ut: Det tjue sytten temaet har gode eksempler på hvordan du legger til tittelen i utsnittet: % 2 $ s For skjermlesere vil linkteksten da lese ut som "Fortsett å lese innleggets tittel". Her er et lignende eksempel på innholdet: Klasse Vi har bare rørt overflaten av tilgjengelighet i WordPress-temaer, men forhåpentligvis vil dette komme deg i gang. Semantisk HTML og klok bruk av CSS går langt. Husk å sjekke alle tilgjengelighetsretningslinjer for temaer og lese flere tips i tilgjengelighetshåndboken., , og . Vi bruker disse for å illustrere poenget mitt.Når skal du bruke
(et ankermerke) når du lager en lenke til en annen side, fil, e-post eller et anker på samme side.
Mozilla Tilbake til toppen.Meny. Dette burde være .
Accessibility Viewer viser lenke navn, rolle, stat og annen informasjon
Liste over sidelinker i VoiceoverNår skal du bruke
når du må utløse en handling, som å åpne en meny. Denne videoen fra Rob Dodson forklarer hvorfor denne situasjonen krever i stedet for . elementet har alle følgende fordeler innebygd allerede:
knapp, som hjelper AT-brukere forstår at det er et interaktivt element.funksjonshemmet Tilordne, for når knappen ikke skal være interaktiv lenger.
Tilgangspanel i Chrome som viser knappelementinformasjonNår skal du bruke
når du trenger et element for styling formål. Naturligvis må du først sjekke om det finnes noen innfødte HTML-elementer som ville være bedre. For eksempel , , , , , eller
2. Struktur med HTML5-delingselementer
HTML5-element Standard landemerke rolle banner navigasjon hoved- utfyllende contentinfo 3. Gjør overskriftens hierarki klart
4. Naviger siden ved hjelp av hjelpeteknologi
Tilgang: Hva er din Markup som sier til deg?
I dag skal vi se på tilgjengelighet og semantikk. La oss starte med et spørsmål: Har du noen gang brukt en skjermleser? Hvis svaret er nei, bør du prøve ... 5. Vurder tavle navigasjon og fokus stiler
: fokus disposisjon: ingen; !box-shadow i stedet, men ... fokusstiler skal fungere i alle scenarier, som i Windows High Contrast-modus som fjerner bokseskyggestiler.: fokus box-shadow: input 0 0 0 1px # 6c7781; / * Bare synlig i Windows High Contrast-modus * / disposisjon: 2px solid gjennomsiktig;
.fokus klasse på meny lenken. Se toggleFocus-funksjonen.
WordPress Theme Creation Med Underscores
Underscores starter tema, av beslutningstakere av WordPress seg, er utformet for å gi deg en "1000 timers start" på WordPress tema opprettelse. Dette kurset… 6. Kontroller for fargekontrast
Tilgjengelighet Grunnleggende: Design for visuell funksjonsnedsettelse
Med 4,5% av den globale befolkningen som opplever fargeblindhet, 4% lider av nedsatt syn, og en annen 0,6% er blind, visuelle vanskeligheter med å bruke ... 7. Husk å hoppe over lenker
er ikke nok siden AT-brukere kan navigere til hovedinnhold ved hjelp av landemerker? Faktisk er Skip Link-hovedmålgruppen tastaturbrukere, som sannsynligvis ikke bruker noen AT-enheter. Så de har ikke snarveier til eller andre landemerkeområder."Det er viktig å merke seg at mens bruken har gått ned blant brukerne av skjermlesere, gir" hopp "-koblinger fortsatt bemerkelsesverdig fordel for andre tastaturbrukere."
8. Unngå repeterende lenketekst
Liste over les flere koblinger hjelper ikke med å navigere/ ** * Erstatter "[...]" (vedlagt automatisk genererte utdrag) med ... og * en "Fortsett lesing" -linken. * * @since Twenty Seventeen 1.0 * * @param string $ link Link til enkelt innlegg / side. * @return string 'Fortsett å lese' linken prepended med en ellipsis. * / funksjon twentyseventeen_excerpt_more ($ link) if (is_admin ()) return $ link; $ link = sprintf ('/ * oversettere:% s: Navn på nåværende innlegg * / the_content (sprintf (__ ('Fortsett å lese "% S"',' twentyseventeen '), get_the_title ())); skjerm-leser-tekst skjuler posttittelen visuelt, men brukerne av skjermleseren kan fortsatt få tilgang til teksten. Sjekk det siste kodeeksemplet for skjermleserteksten i håndboken.Konklusjon
