フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

WAI-ARIAのrole属性一覧

皆さん、WAI-ARIAってきいたことありますか?
聞いたことはあるけど、なんの事かはあんまり知らない、そんな人はいませんか?
実際私がそうだったので、今回はWAI-ARIAについて調べてみました。
(タグ付けしながら、WAI-ARIAタグの記事の少なさに驚愕しました)

WAI-ARIAって何?

まず、WAI-ARIAについての話です。
WAI-ARIAとは、簡単に言うと、ウェブアクセシビリティを良くするためにHTMLに付与する言語です。

HTML自体にすでにどんな要素かを表す意味がついていますが、
WAI-ARIAではそれだけでは説明ができない要素や構造の説明をすることができます。
基本的にはHTMLのタグにはどれも意味が与えられているため、セマンティクに書く必要があるのですが、ものによってはそれが難しい場合もあります。

例えば、ボタンなのにdivで書かなくてはいけないときがでたとします。
そのようなとき、表示されているWebページを見るのではなく、音声読み上げなどを利用したときそのボタンはきちんとボタンとして認識されるでしょうか?
divにスタイルをあてていくら見た目をボタンにしたからと言って、HTML側ではそれをボタン要素だと認識することはできません。

例えば、あるコンテンツの出し分けにタブを利用したとします。
1つ目のコンテンツはタブがアクティブになっているときしか表示されず、ほかのタブをクリックすると別のコンテンツの内容が表示され、最初に表示されていたコンテンツは隠れます。
そのような状態を、HTML側で認識することはできるでしょうか?
CSSやJavaScriptを利用してそれを実装しているとしたら、HTMLでは表示しているコンテンツと表示されていないコンテンツのマークアップは同じなはずです。

これらをHTML側で認識できるようにし、音声読み上げソフトなどにも対応することができる言語を、WAI-ARIAといいます。

そして、WAI-ARIAには2つの属性があります。
それがrole属性ARIA属性です。

今回はrole属性に焦点をあててまとめてみました。

role属性

role属性は、付与したタグに「役割や意味」を与えます。
たとえば、<nav>というナビゲーションを表す要素があります。
これと同じ意味をrole=‘navigation’によって付与することができます。

ただここでしっかり認識しておかないといけないことがありますが、
あくまでもHTMLの要素を正しく使うことが前提です。HTMLのタグを正しく使えば良い場合はもちろんそちらが優先です。

では、role属性は一体どんなものがあるのか、一覧にしたいと思います。

こちらの日本語訳ページを参考に自分なりに砕きながら書きました。
Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳

ランドマークロール

ページ全体のレイアウトに関連するロール。
一番良く見かけるので覚えておくと役に立つ!

名前 意味
banner ヘッダー。1回だけ使用ができる。
complementary 補足のコンテンツ。HTMLの要素だと<aside>と対応してる。1回のみの使用が望ましい。
contentinfo コンテンツ情報。ページやWebサイトについての情報(著作権や連絡先など)1回だけ使用できる。
form フォーム。<form>に関する属性。
main メインコンテンツ。1回だけ使用できる。
navigation ナビゲーション。<nav>のようにサイト内の別のページへのリンクを含む要素。あんまり複数回使うのは望ましくない。
search 検索。サイトコンテンツの検索などで利用する。複数回使ってもOK。

ちなみに、<nav>にはrole=‘navigation’という属性がすでについているので、つけなくても良いですよという暗黙の了解があります。
ほかには<header>にはrole=‘banner’>とか、<main>にはrole=‘mainとかですね。
その他もHTMLタグと対応しているものは、同じようにrole属性をつけなくても意味を含んでいるのでOKです。

文書構造ロール

ランドマークよりは小さい構造を表すロール。
このあたりから細かくなってきてむずかしい。

名前 意味
application アプリケーションとしてのコンテンツ(bodyにつけることが多い)
article 文書、ページ
cell テーブルのセル
columnheader テーブルやグリッドの列のヘッダー情報をもつセル。テーブルの列の見出しとして使用もできる。
definition 用語などの定義
directory 目次のようなグループのリスト
document コンテンツを含むもの(bodyにつけることが多い。application以外は大体これ)
feed スクロール可能な記事リスト
figure 参照の図や画像など
group UI要素やオブジェクトをグループ化したもの
heading 見出し
img 画像
list listitemを含むリスト
listitem リストの項目
math 数式を表すコンテンツ
none 意味を持たないことを示す要素
note 補足
presentation 意味を持たないことを示す要素。類義語はnone
row テーブルにおけるセルの行
rowgroup 1つ以上の行を含む構造
rowheader 行のセルを含むヘッダー
separator セクションまたはメニューのグループを区切る仕切り
table テーブル
term 対応する定義をもつ単語
toolbar 機能を持つボタンやセレクタを含む。ツールバー。
tooltip 要素の説明をするポップアップ。ツールチップ。

ウィジェットロール

ユーザーインターフェースを表すことができる属性。
全体の構造よりも見た目で表していることに関係するものが多い印象。

スタンドアロン・ユーザーインターフェイスウィジェット(単独)

名前 意味
button ボタン。クリックやタップした時にユーザー誘発のアクションを可能にする入力
checkbox チェックボックス。 true、false、またはmixedを選択できるチェックボックス
gridcell gridまたはtreegrid内のセル。
link リンク。
menuitem menuまたはmenubarの中の選択肢。メニューの中のリストとか。
menuitemcheckbox チェックボックスをもつmenuitem。
menuitemradio ラジオボタンをもつmenuitem。
option selectで選択可能な項目。
progressbar 時間がかかるタスクの進捗状況を表示する要素。
radio ラジオボタン。
scrollbar 表示コンテンツ内のスクロールを制御する要素。
searchbox 検索テキストボックス。
separator(フォーカス可能な場合) コンテンツを区切る仕切り
slider <input type=‘range’>のようなつまみをスライドさせて数値を選択する要素
spinbutton <input type=‘number’>のようなinput内で数値を選択するフォーム
switch スイッチ。checkedとは別のon/offを表すチェックボックス
tab タブ
tabpanel tabに関連付けられたコンテナ
textbox 自由形式のテキストを入力する型
treeitem treeのオプション項目

複合ユーザーインターフェースウィジェット(複合)

名前 意味
combobox 入力するtextboxと他の要素を含む複合ウィジェット
grid 1つ以上のセルや行を持つ複合ウィジェット
listbox 選択肢のリストから1つ以上の項目を選択できるようにするウィジェット
menu 選択肢のリストを提供するウィジェット
menubar 水平に表示されるメニュー
radiogroup radioボタンのグループ
tablist tabのリスト
tree 折りたたみや展開されるようなネストしているリストを持つ
treegrid 行がtreeと同じように折りたたみや展開されるgrid

基本的なrole属性だけでもこんなにあります!
すべてを覚えるのは難しいですが、コーディングをしながら、HTMLだけではこの意味を伝えられないな、というときなど意識できるといいなと思っています。

参考

Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳
role属性を実装しよう

[紹介元] HTMLタグが付けられた新着投稿 – Qiita WAI-ARIAのrole属性一覧

コメント

記事に戻る

コメントを残す