何人かの人の作品に役割属性が見られます。私も使っていますが、効果はわかりません。
例えば：
<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>
このロール属性は必要ですか?
この属性はセマンティクスに適していますか?
それはSEOを改善しますか？
役割のリストはここにありますが、自分で構成している人もいます。それは許可されていますか、それともロール属性の正しい使用ですか?
これについて何か考えはありますか？
ご覧になっているロールのほとんどは、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-itis および div-itis を回避できます。
[role="button"] {
/* style these as buttons w/o relying on a .button class */
}
[7 年後の更新: 一部のコメンターを満足させるために * セレクターを削除しました。これは、2020 年には属性セレクターでユニバーサル セレクターを必要とする古いブラウザーの癖が不要になったためです。]
理由その2。ARIA ロールを実装しているが、ネイティブ要素のロールをまだ実装していないブラウザーをサポートするために、ネイティブ要素のロールをバックアップします。
たとえば、「メイン」ロールはブラウザで長年サポートされていますが、HTML5 に追加されたのは比較的最近であるため、多くのブラウザはまだ のセマンティックをサポートしていません<main>。
<main role="main">…</main>
これは技術的に冗長ですが、一部のユーザーには役立ち、害はありません。数年後には、この手法はメインでは不要になる可能性があります。
理由その3。 7 年後 (2020 年) の更新: 少なくとも 1 人のコメンターが指摘したように、これはカスタム要素にとって非常に便利であり、Web コンポーネントのデフォルトのアクセシビリティ ロールを定義するための仕様作業が進行中です。その API が標準化されたとしても、コンポーネントのデフォルトの役割をオーバーライドする必要がある場合があります。
メモ/返信
あなたも書いた：
自作する人も見かけます。それは許可されていますか、それともロール属性の正しい使用ですか?
実際の役割が含まれていない限り、これは属性の許可された使用法です。ブラウザは、トークン リストで最初に認識されたロールを適用します。
<span role="foo link note bar">...</a>
リストのうち、 と のみlinkがnote有効なロールであるため、link ロールが最初に来るため、プラットフォームのアクセシビリティ API に適用されます。カスタム ロールを使用する場合は、ARIA または使用しているホスト言語 (HTML、SVG、MathML など) で定義されているロールと競合しないことを確認してください。
私が理解しているように、役割は当初 XHTML によって定義されていましたが、廃止されました。ただし、現在は HTML 5 で定義されています。こちらを参照してください: https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header
role 属性の目的は、Web アプリケーションの一部としての要素 (およびその子要素) の正確な機能を解析ソフトウェアに対して識別することです。これは主にスクリーン リーダーのアクセシビリティに関するものですが、組み込みブラウザーやスクリーン スクレイパーにも役立つと考えています。通常とは異なる HTML クライアントで使用できるようにするには、リンクした仕様のいずれかのロールに属性を設定する必要があります。独自に作成した場合、この「将来の」機能は機能しません。コメントを付けたほうがよいでしょう。
ここでの実践: http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/
このロール属性は必要ですか?
答え:はい。
以下を提供します。
これは古い質問だと思いますが、正確な要件に応じて考えられる別の考慮事項は、https://validator.w3.org/で検証すると次のような警告が生成されることです。
警告: form ロールは要素 form には不要です。