Commencez avec ARIA : Améliorer l'accessibilité des sites Web

En utilisant uniquement du HTML standard, les applications Web modernes peuvent exclure les utilisateurs ayant des besoins d'accessibilité.

HTML est le langage de balisage en ligne dominant, utilisé par près de 83 % des sites Web existants. Bien qu'il y ait eu quelques changements au cours des 25 années qui se sont écoulées depuis sa création, des itérations encore plus récentes comme HTML5 et AMP laissent beaucoup à désirer, notamment en matière d'accessibilité. C'est là qu'ARIA entre en jeu. Dans ce didacticiel, je vais expliquer ce qu'est ARIA, pourquoi il est utile pour votre site Web et quelques façons de l'ajouter à votre site Web.

p>

Qu'est-ce qu'ARIA ?

ARIA, également connu sous le nom de WAI-ARIA, signifie Accessible Rich Internet Applications de la Web Accessibility Initiative. Le document de spécification complet peut être trouvé ici. Notez que le document de spécification complet est assez dense, c'est donc une bonne idée de lire d'abord cet article et de consulter certaines des autres ressources liées ci-dessous.

L'objectif principal d'ARIA est de permettre des structures sémantiques de haut niveau en HTML en contrepartie de la nature syntaxique lourde du HTML. En d’autres termes, HTML indique au navigateur comment les choses se déroulent et ARIA indique au navigateur comment elles interagissent.

Qui est responsable d’ARIA ?

ARIA est un projet sponsorisé par le W3C (World Wide Web Consortium). Ce projet suit les mêmes normes de mise à jour et de rédaction que les autres programmes. Ils fournissent également un référentiel GitHub avec plusieurs tests que vous pouvez exécuter pour garantir le bon fonctionnement de votre page.

Quel est le problème avec le balisage actuel de mon site Web ?

La plupart des sites Web dotés d'une conception structurée et réfléchie s'adaptent assez bien à la technologie réactive (c'est-à-dire les lecteurs d'écran). Cependant, permettre aux utilisateurs de comprendre comment utiliser votre site et le rendre facile à utiliser sont des choses différentes. Pour les utilisateurs malvoyants, qui représentent près de 2 % de la population, cette différence peut signifier un gain de temps considérable et un gain de travail de détective lorsqu'ils tentent d'effectuer des tâches de base en ligne. Cela peut faire la différence entre offrir aux visiteurs une expérience spectaculaire et leur offrir un labyrinthe dans lequel naviguer.

Au-delà de l'accessibilité traditionnelle, ARIA recherche une technologie qui offre une nouvelle perspective sur les interactions standards. Un nombre croissant de systèmes vocaux, de navigation agrégée (comme les ordinateurs embarqués dans l'automobile) et d'autres innovations exploitent ARIA pour tirer parti de ses capacités sémantiques améliorées.

D'accord, mais ça fait quoi ?

Dans l'ensemble, ARIA connecte les éléments entre eux d'une manière sémantiquement significative. Il fournit aux utilisateurs une signification supplémentaire sur l’interaction. Voici quelques exemples pratiques d'utilisation :

<li>Éléments associatifs non imbriqués : avec du HTML pur, le navigateur de l'utilisateur ne peut voir que les relations basées sur les relations parent/enfant. Cependant, dans certains cas, nous pouvons avoir besoin d'une série de boutons parallèles au contenu dans la hiérarchie HTML. Avec ARIA, nous pouvons définir le type de contrôleur pour chaque bouton et quel élément il contrôle ailleurs dans le document. <li>Déclarer les éléments interactifs : alors que HTML fournit quelques éléments d'interaction, ARIA définit beaucoup plus d'éléments, permettant une description plus granulaire de la fonctionnalité de chaque élément de la page. De plus, ceux-ci peuvent être attribués à des balises HTML qui ne sont généralement pas utilisées à de telles fins mais qui peuvent avoir un sens dans votre cas particulier. Par exemple, vous pouvez utiliser la balise <li> pour une série de cases à cocher dont vous ne souhaitez pas qu'elles soient constituées d'éléments de formulaire. <li>Notifications de mise à jour des zones en direct : Une autre fonctionnalité fournie par ARIA est la définition de zones de contenu "en direct". Lorsqu'une zone de contenu est définie de cette manière, ARIA informe l'utilisateur chaque fois que le contenu de cet élément change. Ceci est utile pour garantir que les utilisateurs malvoyants savent que quelque chose a changé sur votre page.

Ajoutez ARIA à vos pages Web

Nous avons discuté des capacités d'ARIA, examinons maintenant quelques-uns des exemples les plus courants. Nous commencerons chaque section par une brève description de ce que nous espérons réaliser, suivie d'un exemple de code expliquant comment atteindre cet objectif.

Créez des balises alt en utilisant ARIA

En parlant de balises alternatives, la plupart des développeurs connaissent la balise alt 属性，该属性常用于 <img>. Cette balise a un objectif important : décrire l'image à laquelle elle est attachée pour améliorer l'accessibilité (ou comme tactique de référencement courante, selon votre point de vue).

ARIA fournit un attribut similaire appelé aria-label qui peut être attaché à n'importe quel élément HTML, améliorant l'accessibilité non seulement des images mais également des sections du site Web, des contrôles de formulaire, etc. Voici un exemple :

<!-- adding alternative labeling to an image (with non-visible text) -->

<img aria-label="Descriptive image text" src="#" />


<!-- adding alternative labeling to an image (with visible text) -->

<img aria-labelledby="image-text-desc" src="#" />

<div id="image-text-desc">A text description of the image, visible on the screen</div>

Définir les éléments d'interface utilisateur spécifiques à ARIA

HTML fournit déjà de nombreux éléments pour créer des pages Web, mais leur objectif principal est généralement de définir généralement une zone et de présenter la structure du site Web à l'utilisateur. ARIA propose des dizaines d'éléments supplémentaires qui se concentrent davantage sur la façon dont l'élément est utilisé, tels que des minuteries, des info-bulles ou des barres de progression.

此处使用的示例是您可能会在表单上找到的工具提示。创建模式的方法有很多种，从触发一些 JavaScript 的链接到悬停在上面时创建模式的元素。这里缺少的一点是，尽管它可能对视力正常的用户有效，但弱视用户可能甚至不知道工具提示的存在。

您可以使用 ARIA 定义工具提示，如下所示：

<!-- Defining a question mark image as a tooltip UI element -->

<img src=”questionmark.png” role=”tooltip” />

可用的 ARIA 定义

为了扩展这些 UI 元素，这里简要列出了一些可以定义的最有趣的“角色”。完整的列表可在参考的规范文档中找到。

<li>搜索 <li>banner <li>演示 <li>工具栏 <li>status <li>menuitem <li>log <li>dialog <li>link

在父/子结构之外建立关系

现在让我们扩展一下我们之前讨论过的一点：HTML 的强制结构。虽然父母/孩子的关系有利于决定事情应该如何排序，但当需要更有意义的联系时，它就显得不足了。兄弟元素就是一个例子。一些库添加了遍历兄弟元素或其他形式的元素关系的功能，但这通常发生在 JavaScript 或标记之外的其他语言中。

ARIA 使我们能够在标记中直接定义这些关系，从而更轻松地对菜单项进行分组、创建非标准导航以及将控件附加到通常难以完成的元素区域。

让我们看一下如何使用它来将一些控件连接到内容区域：

<img src=”nextbutton.jpg” role=”button” aria-controls=”tutorial” />

<div id=”tutorial”>
    Your tutorial's content
</div>

此代码段表示 nextbutton.jpg 图像是一个按钮，它是下面教程 div 的控件。

在 ARIA 中创建“实时”元素

我们将在此处介绍的 ARIA 的最后一个功能是 aria-live 属性。虽然 ARIA 的大多数其他功能都处理语义连接，但这一功能直接涉及向用户提供内容或元素更改通知的想法。

对于许多视力不佳的人来说，可能无法立即清楚他们与您网站的交互是否导致了页面其他位置的变化。对于细微的变化尤其如此，例如可能会发生变化但保持相对相同长度的小文本摘要。通过使用此属性，每次定义元素内的内容发生更改时，您的用户都会收到通知。

我们可以将此属性添加到元素中，如下所示：

<div aria-live=”true”>
    Content that updates, ie. guided directions
</div>

让网络成为所有用户更美好的地方

略多于 2% 的美国人口带有某种形式的低视力标签，提高网站的可访问性可以显着提高网站的覆盖范围。对于那些网站覆盖多个国家的公司来说，这个数字会更大。除了可访问性之外，ARIA 还为非浏览器界面提供了一种利用您的网站的方法，许多基于语音的设备已经提供了支持。

实施 ARIA 可以帮助您的用户，也可以帮助您的流量，所以开始吧！

我是否遗漏了任何细节，或者您还有其他问题吗？请在下面发表评论！

如果您想深入了解完整的 ARIA 文档或尝试官方测试工具，请查看以下链接：

<li>ARIA 创作实践 <li>完整的 ARIA 规范文档 <li>测试工具示例报告

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!