Beginnen Sie mit ARIA: Verbesserung der Barrierefreiheit von Websites

Wenn moderne Webanwendungen nur Standard-HTML verwenden, können Benutzer mit Barrierefreiheitsanforderungen möglicherweise ausgeschlossen werden.

HTML ist die dominierende Online-Auszeichnungssprache und wird von fast 83 % der bestehenden Websites verwendet. Während es in den 25 Jahren seit seiner Einführung einige Änderungen gab, lassen selbst neuere Iterationen wie HTML5 und AMP viele Wünsche offen, insbesondere wenn es um die Barrierefreiheit geht. Hier kommt ARIA ins Spiel. In diesem Tutorial bespreche ich, was ARIA ist, warum es für Ihre Website nützlich ist und einige Möglichkeiten, es Ihrer Website hinzuzufügen.

p>

Was ist ARIA?

ARIA, auch bekannt als WAI-ARIA, steht für Accessible Rich Internet Applications der Web Accessibility Initiative. Das vollständige Spezifikationsdokument finden Sie hier. Beachten Sie, dass das vollständige Spezifikationsdokument recht umfangreich ist. Daher empfiehlt es sich, zuerst diesen Artikel zu lesen und sich einige der anderen unten verlinkten Ressourcen anzusehen.

Der Hauptzweck von ARIA besteht darin, semantische Strukturen auf hoher Ebene in HTML als Gegenstück zur syntaxlastigen Natur von HTML zu ermöglichen. Mit anderen Worten: HTML teilt dem Browser mit, wie die Dinge laufen, und ARIA teilt dem Browser mit, wie sie interagieren.

Wer ist für ARIA verantwortlich?

ARIA ist ein vom W3C (World Wide Web Consortium) gesponsertes Projekt. Dieses Projekt folgt den gleichen Aktualisierungs- und Redaktionsstandards wie andere Programme. Sie stellen außerdem ein GitHub-Repository mit mehreren Tests bereit, die Sie ausführen können, um sicherzustellen, dass Ihre Seite ordnungsgemäß funktioniert.

Was stimmt mit meinem aktuellen Website-Markup nicht?

Die meisten Websites mit strukturiertem, durchdachtem Design passen sich gut an reaktionsfähige Technologien (z. B. Bildschirmleseprogramme) an. Allerdings sind es verschiedene Dinge, den Benutzern zu ermöglichen, herauszufinden, wie sie Ihre Website nutzen können, und sie einfach zu nutzen. Für sehbehinderte Benutzer, die fast 2 % der Bevölkerung ausmachen, kann dieser Unterschied bedeuten, dass sie bei der Ausführung grundlegender Online-Aufgaben viel Zeit und Detektivarbeit sparen. Es kann den Unterschied ausmachen, ob man den Besuchern ein spektakuläres Erlebnis bietet oder ihnen ein Labyrinth zum Navigieren bietet.

Über die traditionelle Barrierefreiheit hinaus sucht ARIA nach einer Technologie, die eine neue Perspektive auf Standardinteraktionen bietet. Immer mehr Sprachsysteme, aggregiertes Browsing (z. B. eingebettete Automobilcomputer) und andere Innovationen nutzen ARIA, um von seinen erweiterten semantischen Fähigkeiten zu profitieren.

Okay, aber was macht es?

Insgesamt verbindet ARIA Elemente auf semantisch sinnvolle Weise miteinander. Es bietet Benutzern zusätzliche Bedeutung für die Interaktion. Hier einige praktische Anwendungsbeispiele:

<li>Assoziative, nicht verschachtelte Elemente: Bei reinem HTML kann der Browser des Benutzers nur Beziehungen sehen, die auf Eltern-/Kind-Beziehungen basieren. In einigen Fällen benötigen wir jedoch möglicherweise eine Reihe von Schaltflächen parallel zum Inhalt in der HTML-Hierarchie. Mit ARIA können wir den Controller-Typ für jede Schaltfläche definieren und festlegen, welches Element sie an anderer Stelle im Dokument steuert. <li>Interaktive Elemente deklarieren: Während HTML einige Elemente für die Interaktion bereitstellt, definiert ARIA viel mehr Elemente, was eine detailliertere Beschreibung der Funktionalität jedes Elements der Seite ermöglicht. Darüber hinaus können diese HTML-Tags zugewiesen werden, die normalerweise nicht für solche Zwecke verwendet werden, in Ihrem speziellen Fall jedoch sinnvoll sein können. Beispielsweise können Sie das <li>-Tag für eine Reihe von Kontrollkästchen verwenden, die nicht aus Formularelementen bestehen sollen. <li>Live-Zonenaktualisierungsbenachrichtigungen: Eine weitere von ARIA bereitgestellte Funktion ist die Definition von „Live“-Inhaltszonen. Wenn ein Inhaltsbereich auf diese Weise definiert wird, benachrichtigt ARIA den Benutzer, wenn sich der Inhalt innerhalb dieses Elements ändert. Dies ist nützlich, um sicherzustellen, dass Benutzer mit Sehbehinderung wissen, dass sich auf Ihrer Seite etwas geändert hat.

Fügen Sie ARIA zu Ihren Webseiten hinzu

Wir haben die Fähigkeiten von ARIA besprochen. Schauen wir uns nun einige der häufigsten Beispiele an. Wir beginnen jeden Abschnitt mit einer kurzen Beschreibung dessen, was wir erreichen möchten, gefolgt von einem Codebeispiel, wie wir dieses Ziel erreichen können.

Erstellen Sie Alt-Tags mit ARIA

Apropos alternative Tags: Die meisten Entwickler sind mit dem alt 属性，该属性常用于 <img>-Tag vertraut. Dieses Tag dient einem wichtigen Zweck: der Beschreibung des Bildes, an das es angehängt ist, um die Zugänglichkeit zu verbessern (oder als gängige SEO-Taktik, je nach Ihrer Sichtweise).

ARIA bietet ein ähnliches Attribut namens aria-label, das an jedes HTML-Element angehängt werden kann und so die Zugänglichkeit nicht nur von Bildern, sondern auch von Website-Abschnitten, Formularsteuerelementen usw. verbessert. Hier ein Beispiel:

<!-- 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>

Definieren Sie ARIA-spezifische UI-Elemente

HTML bietet bereits viele Elemente zum Erstellen von Webseiten, deren Hauptaugenmerk jedoch meist auf der allgemeinen Definition eines Bereichs und der Darstellung der Struktur der Website für den Benutzer liegt. ARIA bietet Dutzende zusätzlicher Elemente, die sich mehr auf die Verwendung des Elements konzentrieren, wie zum Beispiel Timer, Tooltips oder Fortschrittsbalken.

此处使用的示例是您可能会在表单上找到的工具提示。创建模式的方法有很多种，从触发一些 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>测试工具示例报告

Das obige ist der detaillierte Inhalt vonBeginnen Sie mit ARIA: Verbesserung der Barrierefreiheit von Websites. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!