Share
În această serie ne-am uitat la câteva moduri simple de dezvoltare a temelor, care pot ajuta tema lor să fie accesibilă. Dacă urmați toate recomandările din această serie, veți depăși mai mult decât cerințele minime pentru eticheta disponibilă pentru accesibilitate în depozitul tematic WordPress.
Cu toate acestea, eticheta este accesibilitate gata Decat accesibil, deoarece nici o temă nu poate asigura accesul unui site web - prea mult se bazează pe modul în care este utilizată tema și pe natura conținutului adăugat la site.
În acest tutorial final ne uităm la câteva tehnici simple pe care noi, ca dezvoltatori de temă le-am putea folosi, pentru a ajuta utilizatorii finali ai produsului nostru să o folosească într-o manieră accesibilă. Există, de asemenea, o mulțime de posibilități pentru dezvoltatorii de plugin-uri să facă același lucru (un exemplu evident fiind un plugin care permite încărcarea unui fișier audio și atașarea la un tip de post personalizat ar permite, de asemenea, încărcarea unui fișier de transcriere și conectarea la acel fișier).
La începutul acestei serii am discutat despre asigurarea că tema are o structură rezonabilă a antetului, și anume titlurile corespunzătoare pentru titlul site-ului și titlul postului. După cum sa menționat, această structură ar trebui să reflecte în mod semnificativ structura paginii și etichetele trebuie să fie imbricate în Etichete, tag-uri în si asa mai departe.
Dar, pe o anumită pagină, dacă am folosit-o (si poate ) etichetă in afara conținutul paginii sau postului, ar fi o idee bună să descurajați utilizarea acestora interior conținutul, pentru a împiedica ruperea structurii paginii respective. TinyMCE are un dropdown "blockformat", care permite utilizatorilor să adauge rapid paragrafe și titluri și așa mai departe. Putem elimina etichetele antetului pe care nu le dorim utilizate în conținutul postului:
Accentsconagua
function mytheme_tinymce_init ($ init) // Setați elementele formatului de bloc pe care doriți să le afișați în meniul derulant. Implicit este p, h1, h2, h3, h4, h5, h6 $ init ['tema_advanced_blockformats'] = 'p, h2, h3, h4, h5, h6'; returnați $ init; add_filter ('tiny_mce_before_init', 'mytheme_tinymce_init');Desigur, acest lucru nu este rezistent și va fi ineficient față de utilizatorii care nu folosesc editorul TinyMCE. În plus, nu (și nu putem) garanta că anteturile utilizate în conținut reflectă în mod semnificativ structura acelui conținut. Cu toate acestea, descurajează utilizarea abuzivă a rezervelor rezervate (și ) Etichete.
O idee puțin mai implicată, dacă permite utilizatorilor să-și aleagă culorile proprii în temă, este să le avertizeze atunci când selectează culori cu un contrast scăzut (de exemplu, culori de fundal și texte). Exact ce culori ar trebui să comparăți va depinde de alegerile pe care le-ați pus la dispoziția utilizatorului. Mai jos am simplificat această idee prin asumarea unei fonturi fixe de culoare # 444444, și compararea acestora cu culoarea de fundal furnizată de utilizator.
Voi lăsa detaliile despre modul de setare a câmpurilor în personalizatorul și de a permite previzualizări live în codul. Aici am doar un exemplu de fișier JavaScript care alertează utilizatorul atunci când culoarea de fundal aleasă este prea mică.
Mai întâi creați un fișier numit -a11y.js personalizare în tema dvs., cu următorul cod:
(functie ($) // Update culoare fundal site ... wp.customize ('background_color', functie (valoare) value.bind (function (newval) // Obtine valoare pentru a compara culoarea de fundal cu. var textcolor = # 444444 '; // Calculați raportul de contrast - vă oferim mai târziu var ratio = mytheme.checkContrast (textcolor, newval); // În funcție de dimensiunea fontului, ați putea să ajustați punctul de întrerupere a raportului. ) // Raport foarte bun de contrast, ascundeți avertismentul raportului $ ('# contrast-warning-bgcolor') hide (); else if (ratio> = 4.5) // Contrastul este bun, (= 3) // Contrast este slab $ ('# contrast'). -convert-bgcolor ') css (' background ',' # FFA634 ') .show (); altceva // Contrast este foarte slab $ (' '# E31837') .show (); // Mesajul de avertizare este stocat în mytheme.warningMsg - vom adăuga mai târziu var text = mytheme.warningMsg.replace ('% f' , raport); $ ('# contrast-warning-bgcolor') text (text); ); ); ) (jQuery);Apoi trebuie să creați o funcție care, datând oricare format de două culori (în hex), returnează raportul de contrast dintre ele. Detalii privind calculul acestui raport pot fi găsite pe site-ul W3C, dar se face prin calcularea mai întâi a "luminanței relative" (aproximativ o măsură a "luminozității".) Raportul de contrast este apoi raportul dintre valorile "luminanței relative" cu o "penalizare" adăugată pentru culorile luminoase.
Următoarele ar trebui să trăiască în partea de jos a fișierului JavaScript creat.
mytheme = / ** * Calculați luminanța relativă a două culori * @ Parametrul culorii paranteze culoarea primului (textul) * @param stringul bgcolor sau culoarea de fundal * @returns float Luminanța relativă a culorilor * / checkContrast = , bgcolor) var L1 = această.getaritate (culoare); var L2 = acest.getarget (bgcolor); raportul de întoarcere Math.round ((Math.max (L1, L2) + 0,05) / (Math.min (L1, L2) + 0,05) * 10) / 10; / ** * Calculați luminanța unei culori * Colorarea paragrafelor @param în format Hex * @ Returnează luminanța plutitoare a culorii * / _getLuminance = Funcția (culoare) var R, G, B; // Eliminați eticheta hash dacă este prezentă color = color.replace (nou RegExp ("^ [#] +"), ""); dacă (color.length == 3) R = this._getRGBScore (color.substring (0,1) + color.substring (0,1)); G = this._getRGBScore (culoare.substring (1,2) + color.substring (1,2)); B = this._getRGBScore (culoare.substring (2,3) + color.substring (2,3)); altceva R = this._getRGBScore (color.substring (0,2)); G = this._getRGBScore (color.substring (2,4)); B = this._getRGBScore (culoare.substring (4,6)); întoarcere (0,2126 * R + 0,7152 * G + 0,0722 * B); / ** * Calculați scorul RGB conform http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G18 * @param color * @returns float * / _getRGBScore = funcție (culoare) try color = parseInt (culoare, 16); / / Hex to zecimal captură (err) color = false; dacă (culoare! == false) color = color / 255; culoare = (culoare <= 0.03928) ? color/12.92 : Math.pow(((color + 0.055)/1.055), 2.4); return color; În cele din urmă, încărcați JavaScript și tipăriți marcajul pentru avertizarea de contrast.
funcția mytheme_customizer_live_preview () echo '„; echo "„; wp_enqueue_script ('customizer-a11y', get_template_directory_uri ()) / customizer-a11y.js ', array (' jquery ',' customize-preview '); // Efectuați mesajul de avertizare disponibil în fișierul nostru JavaScript. wp_localize_script ('customizer-a11y', 'mytheme', array ('warningMsg' => esc_html __ ('Avertisment contrast de culoare:% f', 'mytheme'),)); add_action ('customize_preview_init', 'mytheme_customizer_live_preview');Am prezentat aici doar câteva sugestii, dar lista ar putea continua. Există, de asemenea, o mulțime de posibilități pentru dezvoltatorii de plugin-uri să facă același lucru:
"Descurajați" aici nu înseamnă eliminarea completă a opțiunii. Cu toate acestea, alertarea utilizatorului asupra ramificațiilor în ceea ce privește accesibilitatea site-ului poate duce la educarea utilizatorului și, în ultimă instanță, la îmbunătățirea accesibilității web.
Finalizăm această serie cu o privire de ansamblu asupra resurselor și instrumentelor utile pentru a vă ajuta să aflați mai multe despre accesibilitatea conținutului web și, mai important, pentru a vă ajuta să vă asigurați că următorul plugin sau temă este disponibil pentru toți utilizatorii.
(Alte discuții pot fi găsite la http://wordpress.tv/tag/accessibility/)
