Share
I denne serien har vi sett på noen enkle måter temautviklere kan bidra til å gjøre temaet deres tilgjengelig. Hvis du følger alle anbefalingene i denne serien, vil du mer enn overstige minimumskravene for tilgjengelighets-klar-taggen i WordPress-temaarkivet.
Men taggen er tilgjengelighet-klar heller enn tilgjengelig, Siden det ikke er noe tema som kan sikre at et nettsted er tilgjengelig, er for mye avhengig av hvordan temaet brukes, og innholdet av innholdet legges til nettstedet.
I denne siste opplæringen ser vi på noen enkle teknikker som vi som temautviklere kan benytte, for å hjelpe sluttbrukerne av produktet vårt, bruk det på en tilgjengelig, vennlig måte. Det er også mye mulighet for pluginutviklere å gjøre på samme måte (et opplagt eksempel som et plugin som gjør at en lydfil kan lastes opp og knyttet til en egendefinert innleggstype, kan også tillate at et transkripsjon lastes opp og kobles til den filen).
Tidligere i denne serien diskuterte vi at temaet har en rimelig headerstruktur, nemlig passende overskrifter for nettstedets tittel og posttittel (e). Som nevnt, bør denne strukturen gjenspeile sidestrukturen, og Etiketter skal være nestet inn tags, tagger inn og så videre.
Men på en gitt side, hvis vi har brukt (og kanskje ) stikkord utenfor siden eller innleggets innhold, vil det være en god ide å fraråde bruk av dem innsiden innholdet, for å unngå å bryte sidestrukturen. TinyMCE har en "blockformat" dropdown som tillater brukere å raskt legge til avsnitt og overskrifter og så videre. Vi kan fjerne topptekstene som vi ikke vil bruke i innleggets innhold:
Accentsconagua
funksjon mytheme_tinymce_init ($ init) // Still inn blokkformatelementene du vil vise i rullegardinmenyen. Standard er p, h1, h2, h3, h4, h5, h6 $ init ['theme_advanced_blockformats'] = 'p, h2, h3, h4, h5, h6'; returner $ init; add_filter ('tiny_mce_before_init', 'mytheme_tinymce_init');Dette er selvfølgelig ikke idiotsikker, og vil være ineffektivt mot brukere som ikke bruker TinyMCE-editoren. I tillegg gjør det ikke (og vi kan ikke) sikre at overskriftene som brukes i innholdet, reflekterer innholdet strukturelt. Det motvirker imidlertid misbruk av reservert (og ) tagger.
En litt mer involvert ide, hvis du lar brukerne velge sine egne farger i temaet, er å varsle dem når de velger farger med lav kontrast vurdering (for eksempel bakgrunns- og tekstfarger). Nøyaktig hvilke farger du bør sammenligne, avhenger av hvilke valg du har gjort tilgjengelig for brukeren. Nedenfor har jeg forenklet denne ideen ved å forutse en fast skriftfarge på # 444444, og sammenligne dette med den brukerdefinerte bakgrunnsfargen.
Jeg legger detaljene om hvordan du setter opp felt i tilpasseren, og for å aktivere live forhåndsvisninger til kodeksen. Her gir jeg bare et eksempel på en JavaScript-fil som varsler brukeren når den valgte bakgrunnsfargen er for lav.
Først opprett en fil som heter tilpasning-a11y.js i ditt tema, med følgende kode:
(funksjon ($) // Oppdater bakgrunnsfarge for bakgrunn ... wp.customize ('background_color', funksjon (verdi) value.bind (function (newval) // Få verdi for å sammenligne bakgrunnsfargen med. var textcolor = ' # 444444 '; // Beregn kontrastforholdet - vi gir dette senere varforholdet = mytheme.checkContrast (textcolor, newval); // Avhengig av skriftstørrelsen kan du ønske å justere forholdet breakpoints. ) // Veldig bra kontrastforhold, skjul forholdsvarsel $ ('# contrast-warning-bgcolor'). Skjul (); else if (ratio> = 4.5) // Kontrast er bra, men nærmer seg, vises forholdet $ ('# kontrast-advarsel-bgcolor'). css ('bakgrunn', '# 3AC469') .show (); else if (ratio> = 3) // Kontrast er dårlig $ -warning-bgcolor '). css (' bakgrunn ',' # FFA634 ') .show (); else // Kontrast er svært dårlig $ (' # contrast-warning-bgcolor '). css (' bakgrunn ' '# E31837') .show (); // // Advarselsmeldingen er lagret i mytheme.warningMsg - vi legger til dette senere vartekst = mytheme.warningMsg.replace ('% f' , forhold ); $ ('# contrast-warning-bgcolor'). tekst (tekst); ); ); ) (jQuery);Deretter må vi opprette en funksjon som returnerer kontrastforholdet mellom dem, gitt i to farger (i heks) format. Detaljer for beregning av dette forholdet finnes på W3C-nettsiden, men det gjøres ved først å beregne "relativ luminans" (omtrent et mål på "lysstyrke". Kontrastforholdet er da forholdet mellom de "relative luminans" -verdiene, med en ekstra "straff" for lyse farger.
Følgende skal leve nederst i JavaScript-filen som nettopp er opprettet.
mytheme = / ** * Beregn relativ luminans av to farger * @param streng farge forgrunnen (tekst) farge * @param streng bgcolor bakgrunnsfarge * @returns float Fargenes relative luminans * / checkContrast = funksjon (farge , bgcolor) var L1 = this._getLuminance (farge); var L2 = this._getLuminance (bgcolor); returforhold Math.round ((Math.max (L1, L2) + 0,05) / (Math.min (L1, L2) + 0,05) * 10) / 10; / ** * Beregn luminans av en farge * @param strengfarge i Hex-format * @returns float luminans av fargen * / _getLuminance = funksjon (farge) var R, G, B; // Fjern hash-tag hvis det finnes farge = color.replace (ny RegExp ("^ [#] +"), ""); hvis (color.length == 3) R = this._getRGBScore (color.substring (0,1) + color.substring (0,1)); G = this._getRGBScore (color.substring (1,2) + color.substring (1,2)); B = this._getRGBScore (color.substring (2,3) + color.substring (2,3)); ellers R = this._getRGBScore (color.substring (0,2)); G = this._getRGBScore (color.substring (2,4)); B = this._getRGBScore (color.substring (4,6)); retur (0,2126 * R + 0,7152 * G + 0,0722 * B); / ** * Beregn RGB-poenget i henhold til http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G18 * @param color * @returns float * / _getRGBScore = funksjon (farge) prøv color = parseInt (farge, 16); // Heks til desimal fange (feil) color = false; hvis (color! == false) color = color / 255; farge = (farge <= 0.03928) ? color/12.92 : Math.pow(((color + 0.055)/1.055), 2.4); return color; Til slutt laster vi inn JavaScript og skriver ut merket for kontrastvarsel.
funksjon mytheme_customizer_live_preview () echo ''; ekko ''; wp_enqueue_script ('customizer-a11y', get_template_directory_uri (). '/ customizer-a11y.js', array ('jquery', 'tilpasse forhåndsvisning'), '1.0', sant); // Lag advarselsmeldingen tilgjengelig i vår JavaScript-fil. wp_localize_script ('customizer-a11y', 'mytheme', array ('warningMsg' => esc_html __ ('Fargekontrastvarsel. Forhold:% f', 'mytheme'),)); add_action ('customize_preview_init', 'mytheme_customizer_live_preview');Vi har dekket bare et par forslag i detalj her, men listen kan fortsette. Det er også mye mulighet for pluginutviklere å gjøre på samme måte:
"Motløs" her betyr ikke at du fjerner alternativet helt. Imidlertid kan det være langt å utdanne brukeren å varsle brukeren om forgreningene til tilgjengeligheten av nettstedet, og til slutt forbedre web tilgjengelighet.
Vi avslutter denne serien med en oversikt over nyttige ressurser og verktøy for å hjelpe deg med å lære mer om tilgjengelighet til webinnhold, og enda viktigere for å hjelpe deg med å sikre at neste plugin eller tema er tilgjengelig for alle brukere.
(Andre samtaler finnes på http://wordpress.tv/tag/accessibility/)
