アクセシビリティに特化したフォームを考える。

※RABIMAX管理人にしては真面目な記事であり、非常に膨大な量を書いてますので、
お時間のある方、興味のある方のみ読んでください。
なお、ここにある情報すべてが正しいとは限りません。ご理解ください。

Webサイトにフォームは必ずといっていいほど存在します。
そんな中で、今回はアクセシビリティに特化したフォームというものを考えてみたいと思います。

先ず、アクセシビリティなフォームを考える上で知っておかなければいけないことは、
WAI-ARIAです。
第一回の記事では、WAI-ARIAについて学ぼうと思います。

WAI-ARIAと聞いてもぱっとなんのことだか思い浮かぶ人は少ないかもしれません。
WAI-ARIA とは、W3Cの中のアクセシビリティに関する仕様を検討する会が策定した、
アクセシブルなリッチインターネットアプリケーションに関する仕様のことを指します。
要はよりよいサイトをつくるために新しいことを決めたで。ということです。

アクセシブルなフォームをつくるために、
WAI-ARIAの仕様について知り、正しく使用しましょう。

WAI-ARIAの仕様
WAI-ARIAの種類

WAI-ARIAの仕様

WAI-ARIAでは、classやidのような形、つまり属性の形で各要素に付与をすることができます。
HTMLという時点で意味的な構造である(セマンティック)と言えるのですが、
JQueryなどで動きが伴う場合、その意味的な構造を保持しきれないことが起こり得ます。

特に現在(2017年)のWebサイトでは、アクセシビリティな構造を保持しながら、
見た目(デザイン)にもこだわる傾向がみられます。
そのため、セマンティックな構造から少し離れたフォームが出来上がることも多々あることでしょう。

WAI-ARIAを使用することにより、
動きによって乱れた意味的な構造の変化を支援技術に正確に伝えることはできます。

ここでいう支援技術とは、
例えば全盲の人であればスクリーン・リーダー(音声読み上げソフト)、
マウスの操作が困難な人にはトラックボールマウス、というような機器を指します。

WAI-ARIAの種類

WAI-ARIAでは、role=”xxxxx”といった形で属性を付与し、役割を表します。
roleで表すことができる役割は下記になります。
Landmark Rolesが8個、
Document Structure Roles(構造的ロール)が18個、
Widget Rolesの単独が25個、複合が9個存在しています。
合計60種類もあります。

Landmark Roles

このroleの役割は、ランドマーク(目印)となります。
下記の目印として使用することができます。

application
banner
complementary
contentinfo
form
main
navigation
search

例えば、navigationであればこれはナビゲーションであることが支援技術に伝えられ、
bannerであれば、それがバナーであることを伝えます。
アクセシブルなフォームをつくるということを意識するのであれば、
role=”form”を使うことは必然となります。
これはフォームである、ということを支援技術に正確に伝達するためです。

Document Structure Roles

このroleの役割は、上記のLandmark Rolesよりも小さく、
見出しやなど、構造的ロールであることを示します。

article
columnheader
definition
directory
document
group
heading
img
list
listitem
math
note
presentation
region
row
rowheader
separator
toolbar

全てを説明するとかなり長くなってしまうので抜粋しますが、
例えばdirectoryは、静的な目次を表し、
definitionは、用語や概念の定義を表します。
regionは、ページの要約や、目次に含めるような重要なことを指しますし、
headingはそれが見出しであることを伝えます。

presentationは少し特殊で、視覚的な意味であることを示し、
もともとの意味的な構造であるHTML要素が持つ構造を支援技術に伝達させないといった役割があります。