web-dev-qa-db-ja.com

なぜBootstrapタブにrole = "presentation"があるのですか？

Bootstrapフレームワークから拡張している設計システムに取り組んでいます。主要な目標の1つはアクセシビリティです。Bootstrapタブを実装すると、 role="presentation"をナビゲーションリストのリスト項目に追加します。

そこで、BootstrapテンプレートからテストHTMLの小さなチャンクをまとめました。

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

ARIAの仕様では、プレゼンテーションは次の役割を担っています。

意図されている用途は、要素を使用してページの外観を変更するが、要素タイプによって暗示される機能的、インタラクティブ、または構造的な関連性をすべて持たない場合です。

<li>要素は、存在するタブの数を示すため、アクセシビリティデバイスを使用しているユーザーと構造的に関連しています。たとえば、3番目のタブが興味のある情報を保持していることを発見した場合、リストに移動し、3つのタブがあることを知っていると、よりすばやく目的の情報にアクセスできます。

また、ChromeVoxでそのテストHTMLにアクセスすると、リストは同じように発表されます。したがって、roleには実用的な効果はないようです。

私はこの質問をグーグルで調べましたが、それについての議論は見つかりませんでした。だから、これがBootstrapフレームワークの一部である理由を誰もが知っていますか？

twitter-bootstrapaccessibilitywai-aria
22
theJBRU

https://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/ のMarcoによるアクセス可能なタブについての記事をご覧ください。

彼の実装にはrole="presentation"は、「スクリーンリーダーがリスト項目自体を無視する必要がある」ことを示し、「ロールを目的のスクリーンリーダーの認識可能な要素タイプにマッピングする」リンクに「タブ」ロールを追加します。

bootstrapアクセシビリティプロジェクト（ https://github.com/Paypal/bootstrap-accessibility-plugin/issues/59 ）の問題で作成された1つのポイント（正しいか間違っている）タブはナビゲーションとして非常に一般的に使用されるため、ロールのタブリストとタブを常に含めるのは不適切です。Marcoの記事にあるように、「タブが適切なセマンティクスでない多くの状況があります」

ところで、スクリーンリーダーとブラウザの個々の組み合わせが同じ方法でこれをサポートしていないという事実によって、私たちの仕事は容易になりません。 （それについての記事については、この記事を参照してください： http://john.foliot.ca/aria-hidden/ ）

7
peater

主にアクセシビリティを目的としています。 http://john.foliot.ca/aria-hidden/ 。 「ロール」を削除または変更できます

2
user2557504