Share
Ce principe stipule que tout le contenu doit être dans un format (ou disponible à la demande dans un format) qui soit facilement perceptible par l'utilisateur. Autrement dit, vos sites Web devraient être conçus de manière à ce que tout le monde puisse "lire" le contenu, quel que soit son handicap. De nombreux utilisateurs handicapés utiliseront les technologies d'assistance. par exemple, les malvoyants peuvent utiliser un lecteur d'écran, qui lit ce qui apparaît à l'écran, ou un convertisseur de texte en braille. Le but est alors de faciliter ces technologies d'assistance.
S'il vous plaît rappelez-vous que les lignes directrices ici sont ne pas exhaustif, il est donc recommandé de toujours consulter les consignes d’accessibilité au contenu Web.
C’est peut-être le conseil le plus courant pour améliorer l’accessibilité. Si votre site contient tout les images sont ignorées par les lecteurs d'écran sauf si vous utilisez le alt étiquette.
Notez que la description alt peut ne pas être nécessairement une description de l’image, mais plutôt de ce que l’image essaie de faire. transmettre. La balise alt dit en mots ce que vous essayez de dire avec l'image.
Bien que ce conseil s'adresse principalement aux éditeurs, je le soulève ici car les développeurs de thèmes fournissent souvent un logo au lieu d'un texte pour indiquer le nom du site Web ou de la société. Dans ce cas, il vaut probablement mieux utiliser le nom du site (get_bloginfo ('nom')) comme description alternative:
écho '';
'. get_bloginfo ('nom'). '
Les balises Alt doivent ne pas être utilisé pour des images purement décoratives, sinon vous forcez essentiellement l'utilisateur à passer au crible des informations excessives et inutiles.
Si votre plugin crée un formulaire, vous aurez peut-être besoin d'une confirmation indiquant que l'accès est fait par une personne plutôt que par un ordinateur. Si vous décidez de fournir à l'utilisateur une image ou un clip audio, qu'il doit ensuite interpréter, vous devez l'expliquer, sous forme de texte, et fournir une autre forme de CAPTCHA pour prendre en charge différents handicaps..
Cette directive s’appliquera largement aux développeurs de plug-ins, mais peut également s’appliquer à des thèmes. Si la couleur, la forme ou la position sont utilisées pour transmettre une signification qui ne se distingue pas du texte, cette signification est perdue pour les utilisateurs daltoniens ou aveugles..
Par exemple, un exemple typique pourrait être les boutons de formulaire de contact reposant uniquement sur une icône de la police de police populaire Font Awesome:
Le but de ces boutons est évident pour un utilisateur voyant, mais pour ceux qui utilisent des lecteurs d’écran, rien n’indique ce que font les boutons. Si, pour des raisons de conception, vous souhaitez éviter d’utiliser du texte, vous devez spécifier l’étiquette à l’aide de la touche aria-label attribut.
Ceci n'est qu'un exemple du protocole ARIA, que nous verrons plus en détail dans le prochain article..
C'est une exigence presque évidente. Même pour une personne bien voyante, un site Web avec un faible contraste entre le texte et l'arrière-plan est difficile à lire et peut causer une fatigue oculaire. Pour les malvoyants, un contraste encore plus important est nécessaire, raison pour laquelle le WCAG stipule que le contraste et la couleur du texte doivent avoir un rapport de contraste de 4,5: 1..
La signification et la signification de ce rapport ne sont pas immédiatement évidentes, mais de nombreux outils vous aident à vérifier le rapport:
Le texte plus volumineux a une exigence inférieure de 3: 1, et les logos, le texte qui est purement décoratif ou non visible, et le texte / boutons "désactivés" ne nécessitent pas de contraste.
Bien que la plupart des thèmes offrent à leurs utilisateurs la possibilité d'ajuster les couleurs utilisées sur le site Web, il est judicieux de s'assurer qu'au moins les couleurs par défaut (ou les «palettes» disponibles) respectent l'exigence de contraste minimale. Plus tard dans cette série, nous examinerons l’intégration d’une fonctionnalité dans votre thème qui avertit l’utilisateur s’il sélectionne des couleurs avec un contraste insuffisant..
La British Dyslexia Association recommande d’éviter les fonds sur fond blanc pour le texte et d’utiliser plutôt une couleur blanc cassé, crème ou pastel. Le raisonnement derrière cela est que la luminosité d'une page blanche peut "éblouir" le lecteur.
Pour ceux qui souffrent du syndrome de sensibilité Scotopic (ou syndrome d'Irlen), un contraste trop élevé entre l'arrière-plan et le texte peut exacerber des symptômes tels que:
Ces symptômes rendent la lecture difficile et inconfortable et peuvent causer de la fatigue oculaire, de la fatigue oculaire, de la somnolence et des maux de tête..
Au vu de la section précédente, le meilleur conseil est d’assurer un bon contraste, mais pas trop contraste. Comme les préférences varient d'un individu à l'autre, ce qui constitue "trop" sera dû à un jugement personnel.
Une mise en page structurée, avec une utilisation appropriée des en-têtes, permet aux utilisateurs de comprendre plus facilement les informations qui leur sont présentées. Les utilisateurs de lecteurs d'écran s'appuient quelque peu sur une structure «sensible» pour les aider à se repérer dans une page..
Un moyen rapide de tester cela consiste à afficher votre thème avec CSS et JavaScript désactivés. UNE meilleur manière est d’utiliser Lynx qui est un navigateur textuel. Si la structure de votre site entraîne une désorganisation du contenu, il sera difficile pour les utilisateurs de Lynx ou d'autres technologies d'assistance de lire votre site Web. Les utilisateurs de ces technologies ne bénéficiant pas des avantages que CSS et JavaScript apportent à l'orientation de la page et du flux de contenu, il est important que la séquence de lecture correcte soit évidente sans eux..
C'est assez simple à réaliser: assurez-vous que le balisage HTML reflète l'ordre visuel prévu. Ceci est tout à fait naturel, et si vous constatez que votre site Web ne lit pas bien sans CSS, vous l'avez probablement volontairement dévié. En règle générale, votre site Web devrait suivre le modèle:
Celui-ci est assez facile à obtenir. Les règles sont simples:
Accentsconagua
Une question qui est souvent posée est: Le titre de mon site doit-il figurer dans un étiquette? Les recommandations du W3C indiquent que même si, dans certains cas, il serait judicieux de le faire, dans le contexte des thèmes WordPress, il est probablement préférable de ne pas utiliser balises pour le titre du site. Il y a plusieurs raisons:
</code> étiquette. Bien que cela soit souvent négligé et un peu moche pour les utilisateurs visuels, c'est la première chose que lisent les lecteurs d'écran. Par conséquent, envelopper le titre du site dans <code><h1></code> donne une visibilité redondante aux utilisateurs de lecteurs d'écran, tout en rendant le titre plus évident pour les utilisateurs voyants peut être obtenu sans utiliser la balise d'en-tête.</li> <li>Les balises d'en-tête sont utilisées pour organiser les informations. Le titre de votre site n'est pas particulièrement utile à cette fin..</li> </ol><p>Indépendamment de ce que vous décidez, les en-têtes suivants sur votre page doivent apparaître en dessous. Ainsi, les articles de "The Loop" ou les titres de vos pages doivent avoir <code><h2></code> balises si vous avez utilisé le <code><h1></code> balise pour le titre de votre site, et <code><h1></code> balises autrement.</p><p>Après le contenu de l'article, la plupart des thèmes affichent les commentaires de l'article. Il est naturel que l'en-tête "Commentaires" corresponde à une logique, mais comme il est lié au contenu de l'article, le niveau de l'en-tête doit en tenir compte. La chose la plus logique à faire est de placer l'en-tête "Commentaires" à un niveau sous le titre de l'article..</p><p>Voici un extrait d'un <code>single.php</code>:</p><pre><div role="main"> <div <?php post_class(); ?>> <h1> <?php the_title(); ?> </h1> <div> <?php the_content(); ?> </div><!--.entry-content--> <?php comments_template(); ?> </div> </div></pre><p>Dans mon exemple, j'ai utilisé un <code><h1></code> balise pour le titre de l'article, donc le modèle de commentaires (<code>commentaires.php</code>) pourrait alors ressembler à quelque chose comme:</p><pre><div> <h2> <?php printf( _n( 'One Comment on %2$s', '%1$s Comments on %2$s', get_comments_number(), 'mytheme' ), number_format_i18n( get_comments_number() ), get_the_title() ); ?> </h2> //… </div></pre><h2>Assurez-vous que votre site réagit bien à l'augmentation de la taille du texte (1.4)</h2><p>Certains utilisateurs ayant une déficience visuelle légère peuvent compter sur l’agrandissement de la taille des polices plutôt que sur des technologies d’aide telles que les loupes d’écran. Dans cette optique, les directives WCAG spécifient que votre site ne doit pas "casser" lorsque le texte est agrandi jusqu'à 200%. "Pause" signifie ici que le texte disparaît, entre en collision, déborde de ses conteneurs ou, plus généralement, que la présentation du site est perturbée, ce qui rend sa lecture difficile ou déroutante..</p><h3>Utiliser des tailles de police relatives</h3><p>Étant donné que les navigateurs modernes maîtrisent mieux le texte, l'utilisation de tailles de police relatives n'est plus aussi importante qu'auparavant (bien que IE9 ne redimensionne pas les tailles de police définies en pixels). Quoi qu'il en soit, il est toujours recommandé d'utiliser des tailles de police relatives (pourcentages, ems ou rems). L'unité rem résout certains des problèmes liés à l'unité em. Bien que le système ait été introduit uniquement avec CSS3, vous pouvez l'utiliser de manière rétrocompatible avec les anciens navigateurs. Les détails sur la manière d'implémenter les polices relatives sont légèrement hors de portée, mais vous pouvez en savoir plus ici:</p><ul> <li>Prendre le "euh…" sur Ems</li> <li>Dimensionnement des polices avec REM</li> </ul><h3>Utiliser des schémas fluides</h3><p>Cependant, le redimensionnement du texte peut entraîner des problèmes de mise en page. Le texte peut être déplacé hors de l'écran, ce qui oblige l'utilisateur à faire défiler l'écran, ou le texte peut couler de son conteneur, éventuellement dans un autre texte, rendant ainsi des parties de la page Web illisibles. Ce où un <em>sensible</em> (ou fluide) mise en page peut aider. Les sites "réactifs" sont conçus pour s'adapter à tout appareil sur lequel ils sont visualisés; En tant que tels, ils utilisent rarement des pixels fixes pour la hauteur / largeur ou la taille de la police. Par conséquent, ces sites se comportent généralement bien lorsque la taille des polices est modifiée: leur mise en page ne se casse pas..</p><p>Les directives du WCAG recommandent non seulement que le texte puisse être agrandi de 200% maximum, mais également que le site Web puisse accueillir une taille de texte accrue. Une conception Web réactive peut aider cela parce que:</p><ul> <li>un écran agrandi s'adapte à la plus petite taille de la fenêtre</li> <li>les éléments sont déplacés pour éliminer le défilement horizontal</li> <li>les tailles non fixes empêchent le texte en chevauchement ou coupé</li> <li>les images sont redimensionnées pour s'adapter à l'espace disponible et ne se chevauchent pas avec le texte</li> </ul><p>Cependant, il est important de noter que conception réactive et accessibilité ne sont pas la même chose: bien qu'elles puissent se compléter, elles ont finalement des objectifs différents. Un site responsive n'est pas nécessairement accessible, et inversement.</p><h2>Utiliser le balisage correctement (1.3)</h2><h3>Utiliser uniquement des tables pour représenter des données</h3><p>L'utilisation de tableaux comme aides dans la mise en page est (espérons-le) une chose du passé. Il y a aussi des ramifications liées à l'accessibilité des tables de mauvaise utilisation. Les tableaux sont conçus pour représenter des données ou des informations, et en tant que telles lignes et colonnes ont une signification inhérente, et les lecteurs d’écran le supposent lors de la lecture de données.. </p><p>Un lecteur d’écran, par exemple, lira le numéro de la ligne et de la colonne avant de lire le contenu de la cellule. Étant donné que la position des cellules dans les tableaux utilisés à des fins purement de présentation est sans importance, ces informations peuvent être source de confusion ou être tout au moins irritantes..</p><h3>Utilisation correcte de la marge de la table</h3><p>La plupart des développeurs de thèmes n'auront pas besoin de produire de tableaux (et le calendrier des publications WordPress est déjà accessible). Cependant, les plugins peuvent afficher des tables via des codes courts ou des widgets. Il y a un certain nombre d'éléments à prendre en compte lors de la production de la majoration de table:</p><ul> <li>Si possible, gardez les tables simples. Bien que les lignes / colonnes fractionnées soient un balisage standard depuis de nombreuses années, elles ne sont pas universellement prises en charge par les lecteurs d'écran..</li> <li> <p>Le cas échéant, fournissez un <code><caption></code> élément en haut d'un tableau, décrivant ce que le tableau montre:</p> <pre><table> <caption>… </caption>… </table></pre> </li> <li>Utilisation <code><th></code> pour la table <em>en-têtes</em> et <code><td></code> pour <em>données de table</em>. <code><th></code> les cellules ne doivent jamais être vides.</li> <li>Fournir une portée pour <code><th></code> cellules, indiquant s'il s'agit d'un en-tête de ligne ou de colonne: <code><th scope="col"></code> ou <code><th scope="row"></code>. Bien que la portée soit souvent déterminée par le lecteur d'écran, le fait d'être explicite ne fait pas de mal.</li> <li>Vous pouvez utiliser <code><thead></code>, <code><tbody></code> et <code><tfoot></code>, mais ils n'offrent aucun avantage en termes d'accessibilité.</li> <li> <p>Utilisez le <code>Titre</code> attribut d'en-tête pour expliquer une abréviation utilisée dans la cellule:</p> <pre><table> <caption> Février 2014 </caption> <thead> <tr> <th title="Lundi" scope="col">M</th> <th title="Mardi" scope="col">T</th> <th title="Mercredi" scope="col">W</th> <th title="Jeudi" scope="col">T</th> <th title="Vendredi" scope="col">F</th> <th title="samedi" scope="col">S</th> <th title="dimanche" scope="col">S</th> </tr> </thead>… </table></pre> </li> </ul><h3>ARIA & Formulaires</h3><p><em>Applications Internet riches accessibles</em> Les attributs (ARIA) sont utiles pour identifier l'objectif d'une partie particulière de la page, toutes les propriétés (par exemple, l'étiquetage d'une entrée de formulaire requise comme telle) et l'état (par exemple, l'étiquetage d'un bouton comme étant désactivé). Leur utilisation peut aider les technologies d'assistance à mieux comprendre votre site Web et à présenter votre page plus clairement à l'utilisateur final. Nous examinerons ARIA dans le prochain article de cette série. Plus tard dans la série, nous examinerons également le bon marquage des formulaires et des commentaires accessibles..</p>
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-3810161443300697"
data-ad-slot="9434875811"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
<div class="h-alltags">
<a href="articles/code">Code</a>
</div>
</div>
</div>
</div>
</div>
<div class="next_posts clearfix">
<div class="n_post">
<div class="next_posts-h1 left_nh1"><a href="/articles/code/accessibility-part-3-aria.html">Accessibilité, partie 3 ARIA</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_11/accessibility-part-3-aria_2.png');"></div>
</div>
<div class="n_post">
<div class="next_posts-h1 right_nh1"><a href="/articles/code/accessibility-part-1-introduction.html">Accessibilité, Partie 1 Introduction</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_11/accessibility-part-1-introduction.png');"></div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-langs">
<ul class="site-langs-list">
<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>
<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
</ul>
</div>
<div class="h-block"><a href="/">fr.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informations intéressantes et conseils utiles sur la programmation. Développement de sites Web, conception de sites Web et développement Web. Tutoriels Photoshop. Création de jeux informatiques et d'applications mobiles. Devenez un programmeur professionnel à partir de zéro.
</div>
</div>
</footer>
<div class="search">
<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<input class="searchmain" type="text" id="search-input" placeholder="Chercher...">
<ul class="searchli" id="results-container"></ul>
</div>
</div>
<link rel="stylesheet" href="css/flags.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "classic",
"position": "bottom-right"
})});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/scripts.min.js"></script>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<script>
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".search");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
})
</script>
<script src="jquery.unveil2.min.js"></script>
<script>
$('img').unveil();
</script>
</body>
</html>