web-dev-qa-db-ja.com

WAI-ARIAとHTML5-なぜ後者を支持する必要があるのですか?

Webページをよりアクセシブルにする方法についてもっと知りたいので、ここ数時間、WAI-ARIAについて読みました。それでも、全体のコンセプトは私にはあまり明確ではありません-HTML5はその混乱の一部です。

この質問が少し長くなる場合はお詫び申し上げますが、どこから来たのかについて少し説明が必要だと思います。

私がHTMLを学んだとき、それはHTML 4でした。ヘッダーは次のようになります。

<div id='nav'>
    <!-- HTML content -->
</div>

これは、「nav」が「parrot」または「raspberry-jam」の場合もあるのに対して、「nav」というIDで識別される一般的なdiv要素があることをブラウザに通知するだけなので、アクセシビリティには何もしないことを理解しています。したがって、「ナビゲーション」は人間にとっては意味があるように見えるかもしれませんが、マシンはそれを正しく処理できません。スクリーンリーダーは、ユーザーがアクセスしたいコンテンツがページナビゲーション内にあることをユーザーに通知できません。

それが、ARIAの役割が適切に機能する場所です。 role=navを使用すると、重要な情報が支援技術に渡されるためです(もちろん、IDはオプションです)。

<div id='nav' role='navigation'>
    <!-- HTML content -->
</div>

これにより、スクリーンリーダーは、要素がナビゲーションとして使用されていることをユーザーに通知できます。

HTML5が導入され、nav要素が導入されました。 HTML5を使用すると、例全体は次のようになります(idは再びオプションです)。

<nav id='nav'>
    <!-- HTML content -->
</nav>

HTML5の大きな利点の1つは、セマンティクスを改善するとされています。これは、スクリーンリーダー/支援技術がARIAの役割を必要としなくなったため、要素自体を解釈できるためです。これは本当ですか?また、古いバージョンも要素を解釈できるように<nav role="navigation">を使用する必要があることも読みました。

これは私に質問を導きます:新しいHTML5要素は結局のところセマンティクスに何をするのですか? <nav>または<nav role="navigation"><div role="navigation">を超えていますか?どうやらWAI-ARIA仕様は、アクセシビリティに関してHTML5仕様よりもはるかに完全です。ベストプラクティスガイドなどはありますか?

23
Sven

この記事では、WAI-ARIAとHTML5の概要と、それらを実際に使用する方法について説明します。

http://zufelt.ca/blog/are-you-confused-html5-and-wai-aria-yet

結論:

上記の例から何を結論付けることができますか。まず、WAI-ARIAの主な目的は、唯一ではないにしても、アクセシビリティAPIを介して、ドキュメント内の要素に関する情報を支援技術に提供することです。次に、WAI-ARIAを使用しないHTML5だけでは、ユーザーが完全にアクセス可能なエクスペリエンスを保証するには不十分です。最後に、HTML5とWAI-ARIAの間で線がぼやけている状況があります。属性の機能はほぼ同じですが、混乱して、ユーザーエージェントが2つのテクノロジーを実装する方法に影響を与えるほど十分に異なります。支援技術を含む。

8
stefan.s

それらは必ずしも相互に排他的ではありません。 HTML5がいくつかのセマンティックコンテナーを提供していることは正しいですが、これはARIAがカバーするスコープのほんの一部にすぎないため、ARIAを使用する習慣を身に付けたいと思っています。

理論的には、あなたは正しいです。つまり、最終的にnavコンテナはスクリーンリーダーによって認識されるべきであり、必ずしもそこにrole属性を必要としない/望まないでしょう。しかし、スクリーンリーダーは、他のブラウザーと同様に、標準よりも遅れる傾向があるため、ARIAを含め、すべてのツールを活用して、可能な限り多くの機能に対応する必要があります。

4
DA01

role=navigationは、ユーザーエージェントがを使用できることができるという重要な情報を提供することは事実ですが、通常は使用しません。現実的に言えば、ARIAの多くはまだ書き込み専用コードです。ただし、一部のプログラムはそれを使用するため、使用する必要があります。また、ARIAがより広く使用されるようになると、他のプログラムが使用する可能性があります。

同様の考慮事項がnav要素にも適用されます。これを「セマンティック」と呼ぶのは、内容ではなくその内容の構造的な役割を示すため、誤解を招く可能性があります。理論的には、role=navigationを省略できるため、コードがよりコンパクトになります。しかし、実際には、ドキュメント(WD) HTMLでのWAI-ARIAの使用 は、作成者がデフォルトのARIAの「セマンティクス」を宣言すること、つまりrole=navigationnavに使用することを推奨しています。その理由は簡単です。role属性を認識するが、navのHTML5定義を認識しないプログラムがあります。

navのような新しいHTML5構造要素の有用性については議論の余地があり、それらを支持する議論は、「セマンティック」マークアップに関する漠然としたスローガンから、コーディングの単なる簡潔さまでさまざまです。

2

仕事をする要素がある場合はHTML 5を使用し、必要な場合はWAI-ARIA要素を追加するのが適切な場合があります。これはW3Cが提案していることだと思います。しかし、現時点では、支援技術がどのようにHTML5要素をサポートするか(以下のリンクを参照)が不明なので、2倍にするとよいでしょう。

詳細については、次を参照してください: http://www.w3.org/TR/2013/WD-aria-in-html-20131003/

http://blog.paciellogroup.com/2010/04/html5-and-the-myth-of-wai-aria-redundance/

http://alastairc.ac/2010/04/accessibility-and-html5/

スクリーンリーダーとHTML 5のサポートについて: http://tink.co.uk/2013/02/screen-reader-support-for-html5-sections/

2
Sheff

Role = navigationをランドマークと考えてください。

要素の使用は非常に広いです。ページネーション、オフサイトリンク、ソーシャルボタン、ローカルのページスクロール、タブ、関連コンテンツ、タグリスト。のほぼすべての実装には、複数のナビゲーションセットが含まれています。

ナビゲーションの役割は異なります。 「ドキュメントまたは関連ドキュメントをナビゲートするためのナビゲーション要素(通常はリンク)のコレクション」。

基本的には、プライマリナビゲーションにナビゲーションロールを配置する必要があります。

このような:

..あなたの愚かなソーシャルネットワークへのリンク.. ..他のリンク..

セクション要素があり、画期的な役割があります。時には、それらの意味が一致する-ヘッダー(ロール=バナー)、フッター(ロール=コンテンツ情報)、nav#primary_nav(ロール= nav)。よく;ただし、これらは一致しません。

これは非常に簡単です。role= navigationを使用して主要なナビゲーションリンクをマークすると、要素の使用を自由に統治できます。

役割は支援技術用です。サイトがhtml5セクション要素とドキュメント構造を最大限に活用する場合、アクセシビリティのためにそれらを使用する必要があります。

デフォルトでロールを適用するだけではいけません。誤って適用するよりも、どのロールにも触れない方が良いでしょう。それは古代のブラウザとの後方互換性についてではありません-それらはARIAランドマークの役割は言うまでもなく、HTML5要素を解釈することができません。彼らにとって、それはすべてDIVの束にすぎません。ロールの目的はアクセシビリティです。これらは、支援技術および支援技術のみを対象としています。

0
user2774731

暗黙のARIAロールが既にあり、これらのロールがこれらのエレメントと組み合わせてない特定のHTML5エレメントがあるように見えます。 W3Cはそれらのリストをここに持っています: https://www.w3.org/TR/html-aria/#docconformance

もう1つの本当に役に立つ記事: https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/

0
SunshinyDoyle