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

2017-06-15

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

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

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

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

アクセシブルなフォームをつくるために、
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の役割は、ランドマーク(目印)となります。
下記の目印として使用することができます。

  1. application
  2. banner
  3. complementary
  4. contentinfo
  5. form
  6. main
  7. navigation
  8. search

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

Document Structure Roles

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

  1. article
  2. columnheader
  3. definition
  4. directory
  5. document
  6. group
  7. heading
  8. img
  9. list
  10. listitem
  11. math
  12. note
  13. presentation
  14. region
  15. row
  16. rowheader
  17. separator
  18. toolbar

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

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

Widget Roles

ウィジェットロールは各種ウィジェット類を指します。
例えば、tabであったりチェックボックスであったりと、
Document Structure Rolesよりさらに細分化されています。

さらにウィジェットロールには、
単独のものと複合のものが存在します。

単独(スタンドアロン)

  1. alert
  2. alertdialog
  3. button
  4. checkbox
  5. dialog
  6. gridcell
  7. link
  8. log
  9. marquee
  10. menuitem
  11. menuitemcheckbox
  12. menuitemradio
  13. option
  14. progressbar
  15. radio
  16. scrollbar
  17. slider
  18. spinbutton
  19. status
  20. tab
  21. tabpanel
  22. textbox
  23. timer
  24. tooltip
  25. treeitem

スタンドアロンのroleを確認してもらうと、
なぜアクセシビリティに特化したフォームを作成するのにWAI-ARIAが必要なのか、
理解していただけると思います。

フォームの中ではスタンドアロンで表せるroleが多々あります。
それは、checkboxであり、radioであり、option、textboxです。

アクセシビリティに特化したフォーム製作を考えた時点で、WAI-ARIAを省くことはできません

複合(コンパウンド)

  1. combobox
  2. grid
  3. listbox
  4. menu
  5. menubar
  6. radiogroup
  7. tablist
  8. tree
  9. treegrid

複合要のroleも用意されており、
tablistであればそれがtab群であることを伝えることができます。

ここまで書いてきましたが、
え?それってHTML5でもよくね?と思ったroleもあったかと思います。
例えばheaderであるとかnavigationなんかがそうですね。

roleを使うことの利点は、
支援技術のみが認識することができる要件を追加することができる点にあります。
例えば、labelなどでは、aria-label=””として追加してあげると、
支援技術のみに伝達するラベルを用意することができるというわけです。

つまり、HTMLとWAI-ARIAを適宜使用することにより、
よりアクセシビリティに特化したページになるというわけですね。

フォームを作成するときも正しいマークアップと、
正しいrole属性を駆使することで、
アクセシビリティに特化したフォームが完成することでしょう!