role属性を使いこなしてユーザー補助技術に優しいウェブページを作ろう

2024-04-02

HTMLのrole属性の目的

この属性の主な目的は、以下の2つです:

要素の役割を明確にする:
- 見た目だけでは分かりにくい要素の役割を、ユーザー補助技術に伝えることができます。
文書構造を明確にする:
- ランドマークと呼ばれる重要な領域 (ヘッダー、メインコンテンツ、フッターなど) をユーザー補助技術に伝えることができます。
- 例えば、header要素にrole="banner"を設定することで、ユーザー補助技術はそれがページのヘッダーであることを認識し、ユーザーにヘッダーに移動できることを伝えます。

role属性の使い例:

<button role="button">クリックする</button>

<div role="search">
  <input type="text" placeholder="検索">
</div>

<header role="banner">
  <h1>サイト名</h1>
</header>

<main role="main">
  <p>メインコンテンツ</p>
</main>

<footer role="contentinfo">
  <p>© 2023 Copyright</p>
</footer>

role属性には、WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) で定義された様々な値を設定できます。

代表的な値は以下の通りです:

button: ボタン
checkbox: チェックボックス
combobox: コンボボックス
heading: 見出し
link: リンク
menu: メニュー
radio: ラジオボタン
search: 検索ボックス
textbox: テキストボックス

その他、ランドマークを表す値もあります:

banner: ヘッダー
complementary: 補助的な情報
contentinfo: フッター
main: メインコンテンツ
navigation: ナビゲーション

補足:

role属性は、HTML5で導入されました。
role属性は、ユーザー補助技術だけでなく、CSSやJavaScriptでも使用できます。
role属性の値は、ユーザー補助技術のバージョンによって認識できるものが異なる場合があります。

ボタン

<button role="button">クリックする</button>

このコードは、button要素にrole="button"を設定することで、ユーザー補助技術にそれがボタンであることを伝えます。

検索ボックス

<div role="search">
  <input type="text" placeholder="検索">
</div>

ヘッダー

<header role="banner">
  <h1>サイト名</h1>
</header>

メインコンテンツ

<main role="main">
  <p>メインコンテンツ</p>
</main>

フッター

<footer role="contentinfo">
  <p>© 2023 Copyright</p>
</footer>

これらのサンプルコードを参考に、role属性を活用して、ユーザー補助技術に分かりやすいウェブページを作ってみましょう。

HTMLのrole属性の代替方法

代替方法の例:

ARIA属性:
- aria-label属性: 要素のラベルをユーザー補助技術に伝える
- aria-labelledby属性: 要素のラベルを別の要素のIDで指定する
HTML要素の本来の役割:
- 適切なHTML要素を使用することで、ユーザー補助技術に要素の役割を伝えることができます。
- 例えば、button要素はボタンとして、link要素はリンクとして使用します。
JavaScript:
- 例えば、aria-label属性やaria-labelledby属性を動的に設定することができます。