WAI-ARIA

WAI-ARIAとは、Web Accessibility – Accessible Rich Internet Applicationsの頭文字。HTMLやSVGで利用できるアクセシビリティ確保のための属性。

これにより、コンテンツを読み取る機会は、webサイト、アプリケーションの文脈を理解できる。

HTMLリファレンス/WAI-ARIA

role属性

role属性とは、コンテンツの役割を示す。HTMLよりもさらに多くの役割が用意されている。SVGを含むあらゆる要素に付与可能。

role=”navigation”ナビゲーションであることを明示
role=”alert”今のタイミングで重要な情報であることを明示
role=”menubar”メニューバーで有ることを明示
role=”menu”メニューバー内の詳細メニューであることを明示
role=”menuitem”メニューバーの項目であることを明示
role=”listitem”menubarであるul要素内にli要素が存在している場合、li要素には、暗黙でrole=”listitem”が適用されます。
role=”presentation”暗黙で適用されるrole属性を打ち消す

aria属性

aria属性は、コンテンツの状態や性質を示す。

状態明示と性質明示の2種類がある。

状態明示は、多くの場合ture/falesを指定。

性質明示は、属性値に参照先のIDや数値、真偽値を指定。

状態明示

aria-busy更新中である状態
aria-expandedコンテンツの展開/格納状態を示す
aria-selected選択状態を示す
aria-multiselectable複数選択可能かを示す
aria-diableddisabled属性が指定されたのと同じ状態であること伝えるためのWAI-ARIAの属性
aria-hidden該当の要素(とその子孫要素)が、非表示または認識不可能である状態を示す。加えて、読み上げなどの支援技術を利用しやすくするために、重複する内容に対しても利用してよい

性質明示

aria-labelコンテンツのラベルテキストを明示(HTMLのtitle属性と似た意味、ただし、ツールチップはない。title属性では、スクリーンリーダーでの読み上げはあまり期待できない。)
aria-current(WAI-ARIA1.1)パンくずなどで現在位置を表示するためのWAI-ARIA属性
aria-controles指定した要素が値に指定した要素を制御することを示すWAI-ARIAの属性