• ▷ Qu'est-ce que le balisage WAI ARIA? Accessibilité pour les débutants

<>

La accesibilidad es un tema importante en el mundo online de hoy. Hoy en día, tener un sitio la toile que mucha gente lucha por navegar es considerado inaceptable.

El marcado de ARIA es un paso en la dirección correcta. Es una respuesta a la pregunta de cómo puede hacer que su sitio web être más usable para las gens con discapacidades.

¿Qué es ARIA? Un conjunto de atributos de código que amplían las capacidades de HTML y facilitan la optimización de su sitio para los lectores de pantalla. Para ello, hace que partes de su sitio web sean visibles para la tecnología de asistencia, con la que, de lo contrario, estos dispositivos no podrían interactuar en absoluto.

Prêt à inclure ARIA sur votre site Web? Ou simplement curieux d'en savoir plus sur le sujet? Dans cet article, nous vous expliquerons ce qu'est ARIA, comment rendre votre site accessible et vous donnerons les ressources pour en savoir plus sur cette technologie inestimable.

Pourquoi rendre votre site accessible?

Certaines personnes pourraient se demander: pourquoi se soucier de l'accessibilité du Web? Est-il vraiment important de souligner l'utilisation des ressources pour apprendre des spécifications comme ARIA? La création d'un site Web accessible a-t-elle vraiment un impact important?

Le handicap n'est pas rare

En fait, oui. Le handicap n'est pas si rare. 18.7% des Américains ont une forme de handicap. Bien que tous ces facteurs n'affectent pas votre capacité à interagir avec le Web, il s'agit toujours d'un nombre impressionnant et ne comprend que les personnes originaires des États-Unis.

3.Le 3% des Américains a en même temps un trouble de la vision. Cela signifie qu'ils peuvent avoir des difficultés à consulter les sites Web et peuvent s'appuyer sur des outils tels que des lecteurs d'écran. Cela représente en même temps un pourcentage important de votre base d'utilisateurs potentiels et comprend les personnes âgées et les personnes handicapées temporaires.

Les personnes handicapées ont autant besoin d'Internet que n'importe qui d'autre. Beaucoup l'utilisent pour magasiner, socialiser et trouver des informations. Parfois, c'est votre principale, voire votre seule façon de le faire.

Les 54% des personnes handicapées sont en ligne, et bien que ce nombre soit inférieur à celui de la population générale, il n'en reste pas moins une part importante.

A la vez, es 2019. En estos tiempos, debemos esforzarnos por incluir a todos los grupos de usuarios lo mejor que podamos. Dar a las personas con discapacidad acceso ilimitado para navegar por la web debería ser un objectif importante para cualquier desarrollador web.

En même temps, il comporte même des avantages personnels.

La accesibilidad se superpone con un buen Web Design y SEO

Un site qui respecte les normes d'accessibilité est souvent un site qui utilise de bons principes de conception Web, fonctionne le mieux sur les appareils mobiles et se classe en haut du référencement.

Par exemple, l'une des normes WCAG n'inclut pas la lecture automatique de longs clips audio sans moyen d'arrêter le son. C'est déjà un grand non-non pour les concepteurs de sites Web. Une autre norme consiste à fournir un contraste de couleur suffisant entre les éléments. Les couleurs mélangées sur un site Web indiquent souvent une mauvaise palette.

En conséquence, le respect des directives d'accessibilité conduit à un site plus esthétique et plus facile à utiliser. Quelqu'un peut-il dire «gagnant-gagnant»?

La accesibilidad es al mismo tiempo una parte importante del SEO. Evitarlo puede llevar a penalizaciones de ranking de Google y otros moteurs de recherche. Pero agregar texto alternativo a sus imágenes, incluyendo controles de teclado en items interactivos, y usar en-têtes ayuda a los visitantes discapacitados y le da un impulso de SEO.

Comme vous pouvez le voir, rendre votre site accessible est une bonne idée, car cela affecte tous les groupes d'utilisateurs. Si votre objectif est de concevoir un site Web qui offre à chacun une bonne expérience, vous devez faire tout votre possible pour éviter d'exclure les personnes handicapées.

Une chose que vous pouvez faire est d'implémenter ARIA dans votre conception, afin que les personnes avec des lecteurs d'écran puissent mieux se frayer un chemin sur votre site.

Que sont les lecteurs d'écran?

Un lector de pantalla es un programa que lee el Contenu de una página o documento en voz alta mientras le posibilita navegar por él utilizando el teclado. Cualquiera puede descargar uno a su computadora, y hay una gama de programas disponibles gratuitos o de pago.

Certains d'entre eux aident en même temps à naviguer sur le bureau et d'autres programmes, ainsi que sur les sites Web. Ils peuvent agrandir le texte et les images pour les malvoyants, et certains peuvent produire un affichage braille qui peut être rafraîchi. Ce guide explique le fonctionnement des lecteurs d'écran.

Sans lecteurs d'écran, les personnes malvoyantes auraient des difficultés à utiliser un ordinateur et Internet, ou ne pourraient pas du tout les utiliser.

El marcado de ARIA juega un papel importante en el funcionamiento de estas herramientas. Proporciona información adicional, dándoles más opciones y la capacidad de interactuar con partes de la interface utilisateur que de otro modo serían invisibles para ellos.

Mais qu'est-ce qu'ARIA exactement et comment pouvez-vous améliorer votre site Web en l'incluant? Donnons un bref résumé de cette spécification et de son fonctionnement.

Qu'est-ce que ARIA?

ARIA son las siglas de Accessible Rich Internet Applications. Es un conjunto de atributos que proporcionan un contexto adicional para la forma en que se presenta una página web y lo que hay dentro de ella. En otras palabras, proporcionan más información sobre partes de la interfaz de Nom d'utilisateur, como alertas emergentes, menús o incluso secciones completas de la página.

Si alguna vez ha visto un sitio web con las herramientas de desarrollo de navigateurs, es viable que lo haya visto antes.

Pour citer la documentation de Mozilla: "Le document de référence supplémentaire est utilisé pour désigner une section de support qui se rapporte au contenu principal, mais peut être indépendante une fois détachée." De cette manière, fondamentalement, cette partie du balisage permet aux lecteurs d'écran de savoir à quelle partie de la conception ils traitent.

En consecuencia, ARIA le posibilita crear interfaces y widgets accesibles sin tener que cambiar su aspecto ni su comportamiento en la parte frontal. La mayoría de las personas ni siquiera podrán darse cuenta de que el margen de beneficio está presente. Pero agregue un poco de código, y los lectores de pantalla podrán interactuar sin problemas con su interfaz.

Quand ARIA est-il vraiment nécessaire?

Por defecto, los lectores de pantalla pueden comprender la mayoría de los items HTML y HTML5. Si tiene un sitio muy simple y estático, es viable que no necesite llevar a la práctica ARIA en absoluto. Pero algunos items Javascript, dinámicos e interactivos no pueden ser vistos por los lectores de pantalla, y aquí es donde entra en juego el marcado.

En dehors de cela, vous ne devez pas utiliser ARIA lorsque ce que vous définissez est déjà accessible. À titre d'exemple, l'élément HTML il est reconnu par les lecteurs d'écran. Vous n'avez pas besoin de bouton ARIA. Vous ne devez inclure des fonctions que lorsque vous n'utilisez pas d'éléments HTML compatibles avec les appareils d'assistance.

Dans le même ordre d'idées, techniquement, je n'ai pas besoin d'ajouter le rôle complémentaire à un élément distinct, car ils décrivent tous les deux la même chose. Malgré tout, cette marge bénéficiaire se retrouve très souvent, comme dans le cas précédent.

Êtes-vous toujours confus? Parlons un peu plus du fonctionnement d'ARIA.

Comprendre ARIA

Les choses peuvent devenir très complexes avec ARIA, et il est facile de se sentir dépassé. Mais les bases sont assez faciles à décomposer. Une fois que vous les aurez compris, vous apprendrez des concepts plus avancés en un clin d'œil.

Le balisage ARIA est composé de trois attributs: rôles, états et propriétés.

Rôles ARIA

Les rôles définissent des éléments sur une page, tels que des boutons et des cases à cocher. Ils aident les lecteurs d'écran à déterminer ce que font les parties d'une page et ils comportent quatre sous-catégories différentes: points de repère, documents, widgets et fonctions abstraites.

• Principales caractéristiques - Séparez un site en différentes sections, telles que le contenu principal, la navigation et les zones supplémentaires. Cela peut aider vos visiteurs à trouver leurs repères et à trouver plus facilement ce qu'ils recherchent sur une page.
• Fonctions de document- Décrivez des sections spécifiques d'une page, telles que des articles, des documents, des listes et des lignes.
• Rôles des widgets - Déterminer les éléments et les interfaces. Les onglets, les zones de texte, les alertes et les boutons sont quelques-uns des éléments que ARIA peut décrire. Lorsque HTML ne définit pas ces éléments ou que vous utilisez un widget composé de nombreuses parties différentes, les rôles des widgets peuvent y contribuer.
• Rôles abstraits – Estos son utilizados por el le navigateur. No debes de preocuparte por ellos.

États et propriétés

Les états et les propriétés fonctionnent de manière équivalente les uns aux autres. Les propriétés une fois définies changent rarement, car elles ne décrivent que les relations avec d'autres éléments. Les états sont dynamiques et peuvent changer d'eux-mêmes ou avec l'interaction de l'utilisateur.

Un exemple d'état est aria-busy, qui indique au lecteur d'écran que l'élément est en cours de mise à jour. Une autre est la presse aria, qui indique qu'un bouton a été enfoncé. Ce sont des éléments qui peuvent changer activement.

En dehors de cela, les propriétés incluent des attributs tels que aria-valuemax qui définit le nombre maximum dans un sélecteur de plage, ou aria-haspopup qui indique qu'un élément déclenchera une fenêtre contextuelle. Il est peu probable qu'ils soient mis à jour.

Et ce sont les bases d'ARIA. Beaucoup plus simple une fois qu'il tombe en panne, non? Mais vous seriez surpris de tout ce que vous pouvez en faire.

Pour plus d'informations, consultez la documentation officielle WAI-ARIA ou l'introduction de Google pour les développeurs pour les débutants.

Test d'accessibilité ARIA

Une fois que vous avez implémenté ARIA, vous voudrez peut-être vous assurer que tout fonctionne correctement. À quoi ressemble réellement votre site sur les appareils d'assistance?

Le moyen le plus évident est de télécharger un lecteur d'écran gratuit comme NVDA, de vous bander les yeux et de vous rendre en ville. Cela vous donnera une expérience complète.

Dans le même temps, vous pouvez ignorer le bandeau et survoler les éléments dont vous souhaitez vérifier les attributs ARIA, mais vous manquerez des informations clés telles que la difficulté à trouver ces éléments.

Même ce n'est pas une représentation parfaite de ce que c'est que d'utiliser un lecteur d'écran, car il faut beaucoup de pratique pour apprendre, il est donc préférable de demander à de vrais utilisateurs de tester votre site Web.

Dans le même temps, il existe de nombreux outils d'inspection tels que l'inspecteur d'accessibilité de Firefox qui vous permet d'afficher des informations sur les éléments sélectionnés. WAVE signale plusieurs bogues, y compris ceux avec ARIA.

Enfin, cette liste de contrôle des widgets ARIA est un excellent outil d'audit de conception.

Autres moyens de rendre votre site accessible

Les marques ARIA ne sont que le début en matière d'accessibilité Web. Il existe de nombreuses autres directives que vous devez suivre pour rendre votre site utilisable par des personnes ayant une déficience visuelle, auditive, à mobilité ou autre.

Voici quelques exemples d'une poignée de directives à suivre.

• Le contenu du site Web est réactif et fonctionne tout en se développant.
• Le site et ses éléments peuvent être utilisés avec un seul clavier.
• Le texte est dûment contrasté avec le fond.
• Tout le contenu non textuel a des alternatives textuelles, y compris des sous-titres / transcriptions audio et vidéo.
• Assurez-vous que la plupart des images ont un texte alternatif descriptif et que les images décoratives ont un texte alternatif vide.
• Aucune information n'est transmise uniquement par la vue, le son ou la couleur.
• Évitez la lecture automatique de l'audio sans avoir besoin d'un bouton de sourdine.
• Les éléments qui se déplacent automatiquement peuvent être mis en pause ou arrêtés.

Ce n'est qu'une poignée de ce que vous pouvez faire pour rendre votre site vraiment accessible. Si cela vous semble trop, essayez la simple liste de contrôle d'accessibilité. Utilisez-le comme base pour votre conception avant de passer aux directives WCAG plus détaillées.

Rendre votre site utilisable par tous

Éviter l'accessibilité peut avoir un impact négatif sur votre base d'utilisateurs et même sur votre réputation. Les personnes handicapées représentent un pourcentage élevé des utilisateurs du Web et il est important de veiller à ce que la majeure partie d'Internet ne leur soit pas fermée.

En mettant en pratique les normes d'accessibilité, y compris le balisage ARIA, les utilisateurs de lecteurs d'écran ont la possibilité de voir davantage le Web et de développer leur site Web autant que possible.

Une fois qu'il est important, il est important que vous sachiez comment inclure des spécifications comme ARIA, l'accessibilité semblera beaucoup moins déroutante. Rendre votre site Web plus facile à utiliser pour tout le monde signifie que plus de personnes seront disposées à rester, il n'y a donc aucune raison de ne pas utiliser ARIA si votre site Web en a besoin. De nombreux thèmes en même temps le proposent pour le moment prêt à l'emploi.

Ces normes aident non seulement les personnes handicapées, mais tout le monde. Les directives d'accessibilité chevauchent souvent les bonnes pratiques de conception Web et sont rapidement mises en œuvre une fois connues.

N'oubliez donc pas d'inclure ARIA lorsque vous développez un site Web. C'est mieux pour vous et pour tous vos utilisateurs.

Avez-vous déjà eu des difficultés à naviguer sur des sites Web? Que pourraient faire les concepteurs et développeurs Web pour améliorer la situation? Faites-nous part de vos expériences avec l'accessibilité en ligne (ou son absence) dans les commentaires.!

2ZuOwar