Share
In questa serie abbiamo esaminato alcuni semplici modi in cui gli sviluppatori di temi possono contribuire a rendere accessibile il tema. Se segui tutti i consigli di questa serie, supererai i requisiti minimi per il tag di accessibilità nel repository di temi WordPress.
Tuttavia, il tag è l'accessibilità-ready piuttosto che accessibile, poiché nessun tema può garantire che un sito web sia accessibile, troppo dipende dal modo in cui viene utilizzato il tema e dalla natura del contenuto aggiunto al sito.
In questo tutorial finale guardiamo alcune semplici tecniche che noi, come sviluppatori di temi, potremmo impiegare, per aiutare gli utenti finali del nostro prodotto a usarlo in modo accessibile. C'è anche un sacco di possibilità per gli sviluppatori di plug-in di fare altrettanto (un esempio ovvio è che un plugin che consente ad un file audio di essere caricato e collegato a un tipo di post personalizzato potrebbe anche consentire il caricamento e il collegamento di una trascrizione a quel file).
In precedenza in questa serie abbiamo discusso assicurando che il tema abbia una struttura di intestazione ragionevole, vale a dire titoli appropriati per il titolo del sito e il / i titolo / i del post. Come accennato, questa struttura dovrebbe riflettere in modo significativo la struttura della pagina e il i tag devono essere nidificati in tag, tag in e così via.
Ma, in qualsiasi pagina, se abbiamo usato il (e forse tag) al di fuori la pagina o il contenuto del post, sarebbe una buona idea scoraggiarne l'uso dentro il contenuto, in modo da evitare di rompere la struttura della pagina. TinyMCE ha un menu a discesa 'blockformat' che consente agli utenti di aggiungere rapidamente paragrafi e intestazioni e così via. Possiamo rimuovere i tag di intestazione che non vogliamo utilizzare nel contenuto del post:
Accentsconagua
function mytheme_tinymce_init ($ init) // Imposta gli elementi di formato del blocco che vuoi mostrare nel menu a discesa. Il valore predefinito è p, h1, h2, h3, h4, h5, h6 $ init ['theme_advanced_blockformats'] = 'p, h2, h3, h4, h5, h6'; restituire $ init; add_filter ('tiny_mce_before_init', 'mytheme_tinymce_init');Naturalmente, questo non è infallibile e sarà inefficace contro gli utenti che non usano l'editor TinyMCE. Inoltre, non (e non possiamo) garantire che le intestazioni utilizzate nel contenuto riflettano in modo significativo la struttura di quel contenuto. Tuttavia, scoraggia l'uso improprio del riservato (e tag.
Un'idea leggermente più coinvolgente, se consente agli utenti di selezionare i propri colori nel tema, è di avvisarli quando selezionano i colori con un basso punteggio di contrasto (ad esempio, colori di sfondo e del testo). Esattamente quali colori dovresti confrontare dipenderanno dalle scelte che hai reso disponibili all'utente. Di seguito ho semplificato questa idea assumendo un font-color fisso di # 444444, e confrontandolo con il colore di sfondo fornito dall'utente.
Lascerò i dettagli su come impostare i campi nel customiser e per abilitare le anteprime in tempo reale al codice. Qui fornisco solo un esempio di file JavaScript che avvisa l'utente quando il colore di sfondo scelto è troppo basso.
Prima crea un file chiamato customizer-a11y.js nel tuo tema, con il seguente codice:
(function ($) // Aggiorna colore di sfondo del sito ... wp.customize ('background_color', function (value) value.bind (function (newval) // Ottieni valore per confrontare il colore di sfondo con. var textcolor = ' # 444444 '; // Calcola il rapporto di contrasto - forniamo questo rapporto var = mytheme.checkContrast (textcolor, newval); // A seconda della dimensione del font, potresti voler regolare i punti di interruzione del rapporto. ) // Rapporto di contrasto molto buono, nascondi l'avviso di rapporto $ ('# contrast-warning-bgcolor'). Hide (); else if (ratio> = 4,5) // Contrast è buono, ma avvicinandosi, display il rapporto $ ('# contrast-warning-bgcolor'). css ('background', '# 3AC469') .show (); else if (ratio> = 3) // Contrast is poor $ ('# contrast -warning-bgcolor '). css (' background ',' # FFA634 ') .show (); else // Il contrasto è molto scarso $ (' # contrast-warning-bgcolor '). css (' background ', '# E31837') .show (); // Il messaggio di avviso è archiviato in mytheme.warningMsg - lo aggiungeremo in seguito var text = mytheme.warningMsg.replace ('% f' , rapporto); $ ('# contrast-warning-bgcolor'). text (testo); ); ); ) (jQuery);Quindi dobbiamo creare una funzione che, dato un qualsiasi formato di due colori (in esadecimale), restituisca il rapporto di contrasto tra di loro. Dettagli sul calcolo di questo rapporto possono essere trovati sul sito web del W3C, ma viene fatto calcolando innanzitutto la "luminanza relativa" (approssimativamente una misura di "luminosità" .Il rapporto di contrasto è quindi il rapporto tra questi valori di "luminanza relativa", con una "penalità" aggiunta per i colori vivaci.
Il seguente dovrebbe vivere nella parte inferiore del file JavaScript appena creato.
mytheme = / ** * Calcola la luminanza relativa di due colori * @param stringa colore il colore di primo piano (testo) * @param stringa bgcolor il colore di sfondo * @returns float La luminanza relativa dei colori * / checkContrast = funzione (colore , bgcolor) var L1 = this._getLuminance (colore); var L2 = this._getLuminance (bgcolor); rapporto di ritorno Math.round ((Math.max (L1, L2) + 0.05) / (Math.min (L1, L2) + 0.05) * 10) / 10; / ** * Calcola la luminanza di un colore * @param stringa colore in formato Hex * @returns float luminance del colore * / _getLuminance = function (color) var R, G, B; // Rimuovi il tag hash se presenta color = color.replace (new RegExp ("^ [#] +"), ""); if (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)); else R = this._getRGBScore (color.substring (0,2)); G = this._getRGBScore (color.substring (2,4)); B = this._getRGBScore (color.substring (4,6)); return (0,2126 * R + 0,7152 * G + 0,0722 * B); / ** * Calcola il punteggio RGB in base a http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G18 * @param color * @returns float * / _getRGBScore = function (color) try color = parseInt (colore, 16); // esadecimale decimale catch (err) color = false; if (color! == false) color = color / 255; color = (colore <= 0.03928) ? color/12.92 : Math.pow(((color + 0.055)/1.055), 2.4); return color; Infine, carichiamo il codice JavaScript e stamperemo il mark-up per l'avviso di avvertimento sul contrasto.
function mytheme_customizer_live_preview () echo ''; eco ''; wp_enqueue_script ('customizer-a11y', get_template_directory_uri (). '/ customizer-a11y.js', array ('jquery', 'customize-preview'), '1.0', vero); // Rendi disponibile il messaggio di avviso nel nostro file JavaScript. wp_localize_script ('customizer-a11y', 'mytheme', array ('warningMsg' => esc_html __ ('Avviso di contrasto del colore. Ratio:% f', 'mytheme'),)); add_action ('customize_preview_init', 'mytheme_customizer_live_preview');Qui abbiamo illustrato solo un paio di suggerimenti, ma l'elenco potrebbe continuare. C'è anche un sacco di possibilità per gli sviluppatori di plugin di fare allo stesso modo:
"Scoraggiare" qui non significa rimuovere completamente l'opzione. Tuttavia, avvisare l'utente delle ramificazioni dell'accessibilità del sito Web può fare molto per educare l'utente e, in definitiva, migliorare l'accessibilità al web.
Finiamo questa serie con una panoramica delle risorse e degli strumenti utili per aiutarti a saperne di più sull'accessibilità dei contenuti web e, soprattutto, per aiutarti a garantire che il tuo prossimo plugin o tema sia disponibile per tutti gli utenti.
(Altri discorsi possono essere trovati su http://wordpress.tv/tag/accessibility/)
