ARIA から始める: Web サイトのアクセシビリティを強化する

標準の HTML のみを使用する最新の Web アプリケーションでは、アクセシビリティを必要とするユーザーが排除される可能性があります。

HTML は主要なオンライン マークアップ言語であり、既存の Web サイトのほぼ 83% で使用されています。創設以来 25 年間でいくつかの変化はありましたが、HTML5 や AMP などの新しいバージョンでも、特にアクセシビリティに関してはまだ改善すべき点が多くあります。ここでARIAの登場です。このチュートリアルでは、ARIA とは何か、これが Web サイトに役立つ理由、および ARIA を Web サイトに追加するいくつかの方法について説明します。

p>

ARIAとは何ですか?

ARIA (WAI-ARIA としても知られる) は、Web Accessibility Initiative の Accessible Rich Internet Applications の略です。完全な仕様ドキュメントはここにあります。完全な仕様ドキュメントは非常に分厚いので、最初にこの記事を読んでから、以下にリンクされている他のリソースのいくつかを確認することをお勧めします。

ARIA の主な目的は、HTML の構文重視の性質に対抗するものとして、HTML で高レベルのセマンティック構造を可能にすることです。言い換えれば、HTML はブラウザーに物事がどのように進むかを伝え、ARIA はブラウザーにそれらがどのように相互作用するかを伝えます。

ARIA の責任者は誰ですか?

ARIA は、W3C (World Wide Web Consortium) が後援するプロジェクトです。このプロジェクトは、他のプログラムと同じ更新および編集基準に従います。また、ページが適切に機能していることを確認するために実行できる複数のテストを備えた GitHub リポジトリも提供します。

現在のサイトのマークアップには何が問題があるのでしょうか?

構造化された思慮深いデザインを備えたほとんどの Web サイトは、テクノロジー (スクリーン リーダーなど) にうまく適応しています。ただし、ユーザーがサイトの使い方を理解できるようにすることと、サイトを使いやすくすることは別のことです。人口の約 2% を占めるロービジョン ユーザーにとって、この違いは、基本的なオンライン タスクを実行する際に多くの時間と探偵作業を節約できることを意味します。それは、訪問者に素晴らしい体験を提供するか、迷路をナビゲートすることを提供するかの違いになる可能性があります。

従来のアクセシビリティに加えて、ARIA は標準的なインタラクションに新しい視点を提供するテクノロジーを探しています。 ARIA を利用して強化されたセマンティック機能を利用する音声システム、集中ブラウジング (自動車組み込みコンピューターなど) の数が増加しています。

分かった、でもそれは何をするの?

全体として、ARIA は意味的に意味のある方法で要素を結合します。これにより、ユーザーはインタラクションに関する追加の意味を得ることができます。これを使用する具体的な例をいくつか示します:

1. 連想的でネストされていない要素: 純粋な HTML では、ユーザーのブラウザは親子関係に基づいた関係のみを確認できます。ただし、場合によっては、HTML 階層内のコンテンツと並行して一連のボタンが必要になる場合があります。 ARIA を使用すると、各ボタンのコントローラー タイプと、それがドキュメント内の他の場所で制御する要素を定義できます。
2. インタラクティブ要素の宣言: HTML ではインタラクション用の要素がいくつか提供されていますが、ARIA ではさらに多くの要素が定義されており、ページの各要素の機能をより詳細に説明できます。さらに、これらは、通常はそのような目的には使用されないが、特定のケースでは意味がある HTML タグに割り当てることができます。たとえば、フォーム要素で構成したくない一連のチェックボックスに 25edfb22a4f469ecb59f1190150159c6 タグを使用できます。
3. ライブ ゾーン更新通知: ARIA によって提供されるもう 1 つの機能は、「ライブ」コンテンツ ゾーンの定義です。コンテンツ領域がこのように定義されている場合、ARIA はその要素内のコンテンツが変更されるたびにユーザーに通知します。これは、弱視のユーザーにページ上で何かが変更されたことを確実に知らせる場合に役立ちます。

ARIA をページに追加します

ARIA の機能について説明しました。次に、最も一般的な例をいくつか見てみましょう。各セクションは、達成したいことの簡単な説明から始まり、その後、その目標を達成する方法のコード例が続きます。

ARIA を使用して代替タグを作成する

alt タグと言えば、ほとんどの開発者は、<img alt="ARIA から始める: Web サイトのアクセシビリティを強化する" > タグとともによく使用される alt 属性に精通しています。このタグは重要な目的を果たします。それは、アクセシビリティを向上させるために (または、見方によっては一般的な SEO 戦術として) 添付されている画像を説明することです。

ARIA は、aria-label と呼ばれる同様の属性を提供します。これは任意の HTML 要素に添付でき、画像のアクセシビリティを向上させるだけでなく、Web サイトのセクション、フォーム コントロールなどのアクセシビリティも向上します。アクセシビリティ。以下に例を示します:

リーリー

ARIA 固有の UI 要素を定義する

HTML は Web ページを作成するための多くの要素をすでに提供していますが、その主な焦点は通常、領域を一般的に定義し、Web サイトの構造をユーザーに提示することにあります。 ARIA は、タイマー、ツールチップ、プログレス バーなど、要素の使用方法に重点を置いた多数の追加要素を提供します。

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

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

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

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

可用的 ARIA 定义

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

• 搜索
• banner
• 演示
• 工具栏
• status
• menuitem
• log
• dialog
• 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 文档或尝试官方测试工具，请查看以下链接：

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

以上がARIA から始める: Web サイトのアクセシビリティを強化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。