何人かの方の作品でロール属性を見続けています。私も使っていますが、その効果についてはよくわかりません。
例えば、以下のようなものです。
<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対策になりますか?
ロールのリストはこちらにありますが、自分で作っている人もいるようですね。これは、role属性の正しい使い方なのでしょうか?
何か意見はありますか?
皆さんが目にする役割のほとんどは、ARIA 1.0の一部として定義され、その後、HTML5に組み込まれました。HTML5 の新しい要素(dialog、main など)の中には、オリジナルの ARIA の役割をベースにしたものもあります。
http://www.w3.org/TR/wai-aria/
ネイティブのセマンティック要素に加えてロールを使用する主な理由は2つあります。
理由その1. ホスト言語の要素が適切でない場合や、さまざまな理由であまり意味的に適切でない要素が使用された場合に、ロールを上書きすること。
この例では、結果的に機能がナビゲーションリンクよりもボタンに近いものになるにもかかわらず、リンクが使用されています。
<a href="#" role="button" aria-label="Delete item 1">Delete</a>
スクリーンリーダーはこれを(リンクではなく)ボタンと認識し、CSSの属性セレクタを使ってclass-itisやdiv-itisを避けることができます。
*[role="button"] {
/* style these a buttons w/o relying on a .button class */
}
**ARIAの役割を実装したが、ネイティブ要素の役割をまだ実装していないブラウザをサポートするために、ネイティブ要素の役割をバックアップします。
例えば、"main "ロールは何年も前からブラウザでサポートされていますが、HTML5では比較的最近追加されたものなので、多くのブラウザはまだ<main>
のセマンティックをサポートしていません。
<main role="main">…</main>
これは技術的には冗長ですが、一部のユーザーには役立ち、他のユーザーには害がありません。数年後にはこの手法は不要になるでしょう。
とも書かれていますね。
自分で作っている人もいるようですね。それは許されることなのでしょうか、それともrole属性の正しい使い方なのでしょうか?
実際のロールが含まれていない限り、それは属性の有効な使用法です。ブラウザは、トークンのリストで最初に認識されたロールを適用します。
<span role="foo link note bar">...</a>
このリストのうち、有効なロールは link
と note
だけであり、最初に認識されたロールである link が適用されます。カスタムロールを使用する場合は、ARIAや使用しているホスト言語(HTML、SVG、MathMLなど)で定義されているロールと競合しないようにしてください。
私の理解では、ロールは当初XHTMLで定義されていましたが、廃止されました。しかし、現在ではHTML 5で定義されています。こちらをご覧ください: https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header
role属性の目的は、ウェブアプリケーションの一部としての要素(およびその子)の正確な機能を解析ソフトウェアに識別させることです。これは主にスクリーンリーダーのアクセシビリティのためのものですが、埋め込みブラウザやスクリーンスクレーパーにとっても便利なものです。普通ではないHTMLクライアントにとって有用であるためには、この属性は、私がリンクした仕様にある役割の1つに設定される必要があります。自分で作ってしまうと、この「未来」の機能が使えなくなってしまいます - コメントがあればなお良し。
実際のところはこちら: http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/
このロール属性は必要ですか?
答えは以下の通りです。はい。
それは次のようなものです。