Share
Dans cette série, nous avons examiné quelques moyens simples permettant aux développeurs de thèmes de rendre leur thème accessible. Si vous suivez toutes les recommandations de cette série, vous dépasserez de loin la configuration minimale requise pour la balise d'accessibilité dans le référentiel de thèmes WordPress..
Cependant, la balise est prêt pour l'accessibilité plutôt que accessible, comme aucun thème ne peut garantir qu'un site Web est accessible, trop repose sur la façon dont le thème est utilisé et sur la nature du contenu ajouté au site..
Dans ce dernier didacticiel, nous examinons quelques techniques simples que nous pourrions utiliser comme développeurs de thèmes pour aider les utilisateurs finaux de notre produit à l’utiliser de manière accessible et conviviale. Les développeurs de plug-ins ont également beaucoup à faire (un exemple évident étant un plug-in qui permet de charger un fichier audio et de le joindre à un type de message personnalisé pourrait également permettre de télécharger une transcription et de la lier à ce fichier)..
Plus tôt dans cette série, nous avions envisagé de veiller à ce que le thème ait une structure d'en-tête raisonnable, à savoir les titres appropriés pour le titre du site et le titre de l'article. Comme mentionné, cette structure doit refléter de manière significative la structure de la page, et la les balises doivent être imbriquées Mots clés, balises dans etc.
Mais, sur une page donnée, si nous avons utilisé le (et peut-être ) tag à l'extérieur le contenu de la page ou du message, ce serait une bonne idée de décourager leur utilisation à l'intérieur le contenu, afin d'éviter de casser cette structure de page. TinyMCE a une liste déroulante 'format de bloc' qui permet aux utilisateurs d'ajouter rapidement des paragraphes et des en-têtes, etc. Nous pouvons supprimer les balises d'en-tête que nous ne souhaitons pas utiliser dans le contenu du message:
Accentsconagua
function mytheme_tinymce_init ($ init) // Définit les éléments de format de bloc que vous souhaitez afficher dans la liste déroulante. La valeur par défaut est p, h1, h2, h3, h4, h5, h6 $ init ['theme_advanced_blockformats'] = 'p, h2, h3, h4, h5, h6'; return $ init; add_filter ('tiny_mce_before_init', 'mytheme_tinymce_init');Bien sûr, cela n’est pas infaillible et sera inefficace contre les utilisateurs qui n’utilisent pas l’éditeur TinyMCE. De plus, cela ne garantit pas (et nous ne pouvons pas) que les en-têtes utilisés dans le contenu reflètent de manière significative la structure de ce contenu. Il décourage toutefois l’utilisation abusive des ressources réservées. (et ) Mots clés.
Une idée légèrement plus complexe, si elle permet aux utilisateurs de sélectionner leurs propres couleurs dans le thème, est de les alerter lorsqu'ils sélectionnent des couleurs avec un contraste faible (par exemple, les couleurs d'arrière-plan et de texte). Le choix des couleurs à comparer dépendra des choix que vous avez proposés à l'utilisateur. Ci-dessous, j'ai simplifié cette idée en supposant une couleur de police fixe de # 444444, et en comparant cela avec la couleur de fond fournie par l'utilisateur.
Je laisserai les détails sur la manière de configurer les champs dans le personnaliseur et d'activer les prévisualisations en direct sur le codex. Ici, je viens de fournir un exemple de fichier JavaScript qui alerte l'utilisateur lorsque la couleur d'arrière-plan choisie est trop basse..
Commencez par créer un fichier appelé customizer-a11y.js dans votre thème, avec le code suivant:
(function ($) // Mise à jour de la couleur d'arrière-plan du site… wp.customize ('background_color', fonction (valeur) value.bind (function (newval) // Récupère une valeur pour comparer la couleur d'arrière-plan avec. var textcolor = ' # 444444 '; // Calculez le rapport de contraste - nous fournissons ce dernier rapport var = mytheme.checkContrast (textcolor, newval); // En fonction de la taille de la police, vous pouvez ajuster les points de rupture du rapport. If (ratio> = 5 ) // Très bon rapport de contraste, cache le rapport d'avertissement $ ('# contraste-warning-bgcolor'). Hide (); sinon if (ratio> = 4.5) // Le contraste est bon, mais en se rapprochant, affiche le rapport $ ('# contraste-warning-bgcolor'). css ('arrière-plan', '# 3AC469') .show (); else if (ratio> = 3) // Le contraste est faible $ ('# contraste -warning-bgcolor '). css (' background ',' # FFA634 ') .show (); else // Le contraste est très médiocre $ (' # contraste-warning-bgcolor '). css (' background ', '# E31837') .show (); // Le message d'avertissement est stocké dans mytheme.warningMsg - nous l'ajouterons plus tard var text = mytheme.warningMsg.replace ('% f' , ratio); $ ('# contraste-warning-bgcolor'). text (text); ); ); ) (jQuery);Ensuite, nous devons créer une fonction qui, avec deux couleurs (au format hexadécimal), renvoie le rapport de contraste entre elles. Vous trouverez des détails sur le calcul de ce rapport sur le site Web du W3C, mais vous devez d'abord calculer la "luminance relative" (en gros, une mesure de la "luminosité". Le rapport de contraste est alors le rapport entre ces valeurs de "luminance relative", avec une 'pénalité' ajoutée pour les couleurs vives.
Les éléments suivants doivent apparaître au bas du fichier JavaScript que vous venez de créer..
mytheme = / ** * Calculez la luminance relative de deux couleurs * @param string color la couleur de premier plan (texte) * @param string bgcolor la couleur de fond * @returns float La luminance relative des couleurs * / checkContrast = function (color , bgcolor) var L1 = this._getLuminance (color); var L2 = this._getLuminance (bgcolor); rapport de retour Math.round ((Math.max (L1, L2) + 0,05) / (Math.min (L1, L2) + 0,05) * 10) / 10; / ** * Calculer la luminance d'une couleur * @param couleur de chaîne au format Hex * @return renvoie la luminance flottante de la couleur * / _getLuminance = fonction (couleur) var R, G, B; // Supprime la balise de hachage si présente color = color.replace (new RegExp ("^ [#] +"), ""); if (color.length == 3) R = this._getRGBScore (color.substring (0,1) + color.substring (0,1)); G = this._getRGBScore (colorstr (1,2) + colorstr (1,2)); B = this._getRGBScore (colorstr (2,3) + colorstr (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); / ** * Calculez le score RVB selon http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G18 * @param color * @returns float * / _getRGBScore = function (color) try color = parseInt (color, 16); // Hex en décimal catch (err) color = false; if (color! == false) color = color / 255; couleur = (couleur <= 0.03928) ? color/12.92 : Math.pow(((color + 0.055)/1.055), 2.4); return color; Enfin, nous chargeons le code JavaScript et imprimons la majoration de la mise en garde concernant le contraste..
fonction mytheme_customizer_live_preview () echo ''; écho ''; wp_enqueue_script ('customizer-a11y', get_template_directory_uri (). '/ customizer-a11y.js', array ('jquery', 'personnaliser-preview'), '1.0', true); // Rendre le message d'avertissement disponible dans notre fichier JavaScript. wp_localize_script ('customizer-a11y', 'mytheme', array ('warningMsg' => esc_html __ ('avertissement de contraste de couleur. Ratio:% f', 'mytheme'),)); add_action ('personnaliser_preview_init', 'mytheme_customizer_live_preview');Nous n’avons abordé ici que quelques suggestions en détail, mais la liste pourrait continuer. Les développeurs de plugins ont également beaucoup à faire:
"Décourager" ne signifie pas supprimer complètement l'option. Toutefois, alerter l'utilisateur des conséquences de l'accessibilité du site Web peut grandement contribuer à l'éduquer et, en définitive, à améliorer l'accessibilité du Web..
Nous terminons cette série avec un aperçu des ressources et outils utiles pour vous aider à en apprendre davantage sur l'accessibilité du contenu Web et, plus important encore, pour vous aider à faire en sorte que votre prochain plugin ou thème soit disponible pour tous les utilisateurs..
(D'autres exposés peuvent être trouvés sur http://wordpress.tv/tag/accessibility/)
