[解決済み] HTMLの "role "属性は何のためにあるのですか？

質問

ある人の作品にロールアトリビュートをよく見かけるのですが、これは何ですか？私も使っているのですが、効果がよくわかりません。

例えば

<header id="header" role="banner">
    Header stuff in here
</header>

または

<section id="facebook" role="contentinfo">
    Facebook stuff in here
</section>

または

<section id="main" role="main">
     Main content stuff in here
</section>

このrole属性は必要ですか？

この属性はセマンティックのために良いですか？

SEO対策になりますか？

役割の一覧はこちら こちら しかし、自分で作っている人もいるようですね。これは許されることなのでしょうか、それともrole属性の正しい使い方なのでしょうか？

この件に関して、何かご意見はありますか？

解決方法は？

あなたが目にする役割のほとんどは、ARIA 1.0の一部として定義され、その後、HTML-AAMなどのサポート仕様を通じてHTMLに組み込まれました。新しいHTML5要素（dialog、mainなど）のいくつかは、オリジナルのARIAの役割をベースにしています。

http://www.w3.org/TR/wai-aria/

ネイティブのセマンティック要素に加え、ロールを使用する主な理由はいくつかあります。

理由その1． ホスト言語要素が適切でない場合や、様々な理由で意味的に適切でない要素が使用された場合に、その役割を上書きする。

この例では、ナビゲーションリンクよりもボタンに近い機能であるにもかかわらず、リンクが使用されています。

<a href="#" role="button" aria-label="Delete item 1">Delete</a>
<!-- Note: href="#" is just a shorthand here, not a recommended technique. Use progressive enhancement when possible. -->

スクリーン・リーダーのユーザーは、これを（リンクではなく）ボタンとして聞きます。CSSの属性セレクタを使って、class-炎やdiv-炎を回避することができます。

[role="button"] {
  /* style these as buttons w/o relying on a .button class */
}

属性セレクタにユニバーサルセレクタを必要とする古いブラウザの癖は2020年には不要なので] [7年後の更新：一部のコメンターを喜ばせるために*セレクタを削除しました。

理由その2。 ネイティブ要素の役割をバックアップすることで、ARIAの役割を実装しているがネイティブ要素の役割をまだ実装していないブラウザに対応するため。

たとえば、"main" の役割は何年も前からブラウザでサポートされていますが、HTML5 には比較的最近追加されたため、多くのブラウザではまだ <main> .

<main role="main">…</main>

これは技術的には冗長ですが、一部のユーザーを助け、他のユーザーを害することはありません。数年後には、この技術はメインで不要になる可能性が高いです。

理由その3． 7年後(2020年)のアップデート。少なくとも1人のコメント提供者が指摘したように、これは現在カスタム要素に非常に有用であり、ウェブコンポーネントのデフォルトのアクセシビリティロールを定義するためのいくつかの仕様作業が進行中である。そのAPIが標準化されたとしても、コンポーネントのデフォルトの役割を上書きする必要があるかもしれません。

備考・返信

とも書いていますね。

自作自演する人もいるようですね。それは許されることなのか、それともrole属性の正しい使い方なのでしょうか？

本当のロールが含まれていない場合を除き、それは許される属性の使用法です。ブラウザは、トークン・リストで最初に認識されたロールを適用します。

<span role="foo link note bar">...</a>

リストのうち link と note は有効なロールなので、プラットフォームアクセシビリティAPIではリンクのロールが先に適用されます。カスタムロールを使用する場合は、ARIAや使用しているホスト言語（HTML、SVG、MathMLなど）で定義されているロールと競合しないことを確認してください。