こんにちは！
スペースマーケットでフロントエンドエンジニアをしているk___0122です。
ある実装をやっていたらレビューでaria-roleのつけ忘れの指摘をいただきました。
そもそもaria-roleってなんで指定する必要があるんだろうなと思い、WAI-ARIAとは何かや使い方について調べてみることにしました。
WAI-ARIAとは
WAI-ARIA とは、W3C (World Wide Web Consortium) の WAI (Web Accessibility Initiative) という組織が策定した、HTMLやSVGで利用できるアクセシビリティ確保のための属性の仕様です。
WAI-ARIAにはコンテンツの役割を示すロール属性、コンテンツの状態・性質を示すaria属性が定義されています。
なぜ必要なのか？
HTMLで表現できない意味を属性で補完することができます。
スクリーンリーダー（Voice Overなど）を通じて、障がいなどがある方にも適切に情報を伝えるために必要となります。
セマンティックに書くメリット
HTML要素にどのような目的や役割があるのかを機械に正しく理解してもらうためです。
セマンティックに書くと以下のようなメリットがあります。
- SEO向上のため
- アクセシビリティの向上のため
WAI-ARIAの要素
ロール
要素に役割を表すものです。
例えばdiv要素に対してナビゲーションとしての振る舞わせたい場合以下のように指定できます。
<div role="navigation">...</div>
またロールの中には、tabロールやsearchロールなどHTMLの要素が存在しないものもあります。
ステート
要素の現在の状態を表すものです。
「aria-xxx="(属性値)"」という記述をします。
またJavaScriptによって変更します
<input type="search" value="name" id="name" aria-required="true"/>
プロパティ
要素の特性を表すものです。
ステート同様「aria-xxx="(属性値)"」という記述をします。
<button aria-label="閉じる" />
またロールによってプロパティやステートは設定できないものがあるので注意。
注意点
ロールの上書き
以下のように暗黙のロールを上書きすることができます。
<a href='/register' role='button'>今すぐ登録</a>
ただし上書きされるのは、セマンティクスだけで機能は変更されません。
なのでこの場合、スペースキーでボタンを押せるようにはなりません。
またどんなタグもroleの上書きができるわけではないです。
既存のタグを使うべき
要素に対応するロールがある場合は、ロールを使用するべきではないです。
<!-- Bad --->
<div role='button'>ボタン</div>
<!-- Good --->
<button>ボタン</button>
冗長なロールの指定を避けるべき
暗黙のロールをあえて指定する必要はないです。
<!-- Bad --->
<button role="button">...</button>
抽象ロールは指定できない
継承元、大元のロールは指定できません。
この場合inputは抽象ロールになるので指定できません。
<!-- Bad -->
<div role='input'></input>
まとめ
今回はWAI-ARIAとは何かその使い方について調べてみました。
WAI-ARIAはHTMLを適切な仕様で実装できない場合に補う手段として存在しており、基本的にはHTMLで適切なタグを使ってあげるのがいいのかなと思いました。
また忘れがちですが、体の不自由など色んな人達がネットを利用してることを意識しながらコーディングしていきたいなと思いました。
最後に
スペースマーケットでは、一緒にサービスを成長させていく仲間を探しています。
とりあえずどんなことをしているのか聞いてみたいという方も大歓迎です！
ご興味ありましたら是非ご覧ください！
スペースを簡単に貸し借りできるサービス「スペースマーケット」のエンジニアによる公式ブログです。 弊社採用技術スタックはこちら -> whatweuse.dev/company/spacemarket
Discussion