buttonタグのaria属性が気になったので調べてみた

私がこの属性を発見したのはハンバーガーメニューですが、FAQページでよく見かける開閉パネルにも実装されていることが多いそうです。

この属性を調べていくうちに「WAI-ARIA」(ウェイ・アリア)という単語が何度も出てきました。

「Web Accessibility Initiative – Accessible Rich Internet Applications」の略で、「ウェイ・アリア」と読みます。
WAI-ARIAをつかえば、HTMLだけでは不足しているセマンティクス(意味)を属性で補完することができ、支援技術(スクリーンリーダーなど)を通じて、障害をもつ人に対し適切な情報を伝えられるようになります。

参考サイトより引用:https://qiita.com/k__watanabe/items/70502233e25b3fa9e8c8より引用

ちなみに私が知りたかったaria属性は「UIコントロール」という、クリックやマウスオーバーで開閉するUI操作時に使用するようです。たくさんあるようですが、今回は気になった3つのaria属性をメモしておきます。

【aria-expanded】※開閉のトリガーになるボタンに設置
→開閉の状態をユーザーに伝える。開いているならtrue。閉じているならfalse。

【aria-contorols】※開閉のトリガーになるボタンに設置
→開閉させる要素のidを指定

【aria-hidden】※CSSやJavaScriptで操作

→表示状態をtrueかfalseで表す。これはCSSで「display:nonne;」と指定して使うこともできるし、JavaScriptで属性を取得して操作しても良い。

詳しくは参考サイトにいろいろ書いてあります。こういった技術も取り入れて、障害がある方にも親しんでもらえるサイトを作れたら素敵だと思います^^

また、JavaScriptで操作をするなら、こちらを取り入れると保守管理の面でもメリットがあるようです。通常のHTMLのセマンティクスで足りるなら多用はしない方が良いという意見もありました。

バランスよく取り入れたいです。

参考サイト

この記事を書いた人