前書き
スマートフォンのブラウザを使っていて、なにかの応募フォームに情報を入力していたとしよう。メールアドレスの入力欄にフォーカスが当たるとそれっぽいキーボードが表示され、電話番号の入力欄だとやはりそれっぽいダイヤルパッドが表示されるのを目にした方も多いだろう。どんなすごい技術を使っているのかと思いきや、HTMLソース内に適切な指定がされているだけだった、という話なのだ。
さて、この適切な指定がアクセシビリティにどのような影響を与える可能性があるかについて考えてみたい。
ターゲット層
誰に対してのアクセシビリティ7日をちょっとはっきりさせておこう。私が主に語れるのは、スクリーンリーダーというソフトウェアを使ってコンピュータを使っている、見えない・見えにくい人たちのことだ。それ以外の人たちにも影響を与えるかもしれないが、今回は考慮しないことにする。
ちょっとおさらい
HTMLの要素を確認してみよう。
<innput type="text" maxlength="20" />
みたいな感じだ。これで20文字入力できるフィール度が作られるはずだ。ここまではほとんどの環境で同じだろう。
type属性をいろいろと変えてみる
要素のtype属性にはいろんなものが指定できる。
- text: 文字入力
- button: ボタンを作る
- checkbox: チェックボックスを作る
- radio: ラジオボタンを作る
- ほかにもたくさん
文字を入力するものだけでももっとたくさんある。
- text
- number
- tel
- date
- datetime
- month
- week
- url
- range
入力させたいデータに応じてこれらをちゃんと使い分けたらブラウザはどのようにふるまうだろうか。
期待してること
スクリーンリーダーユーザーとしては、入力操作はいろいろと難儀なことも多いのだ。主な失敗は、
- メールアドレスを全角で入力して受け付けてもらえない
- 電話番号が全角で受け付けてもらえない
- ひらがなとかカタカナを指定されていてそれに従ってないので受け付けてもらえない
- 必須入力に気が付いてなくて受け付けてもらえない
などなどである。この問題の一部を上記type属性を適切に指定してやることで解決できないかなと思うわけだ。例えば
- 電話番号とかメールアドレスとかＵＲＬとかはそもそも全角にならないようにする（あいやあ、全角のＵＲＬってのもあるんだよねえ）
- 日付を入れるところは、日付っぽいものしか入らなくなる
- 郵便番号も半角で固定される
もっとあるかもしれない。
ということで、テストページを作ってみた。
Input type attribute test
ブラウザの振る舞いに関する考察
環境
私の環境は、
- Chrome 127.0.6485.0
- Windows 11 24H2 (OS ビルド 26120.670)
- JAWS 2023, NVDA 2024.1jp
でテストしている。他のブラウザ・スクリーンリーダーだと挙動が違うかもしれない。以下上記の環境での動きを見ながら考察する
はじめに感想
どうやらちゃんとtype属性は設定したほうが良い。ブラウザはある程度それっぽいUIを提供するように設計されている。デザイン上許容できるのであれば、このUIに従うのがアクセシビリティ的には最も気を使わなくても良いはずである。日付入力をカスタムで作ろうとした場合、多くのアクセシビリティテストを通過させなければならないだろう。
E-Mail 電話番号の入力
E-Mailの入力では、hoge@hiyoの形式になっていないと「無効なエントリー」とJAWSが警告する。また、Chromeに住所などを設定していると上下矢印キーを使ってアドレスが選択できる。
電話番号入力では、どんな文字列でも入力できてしまう。「ほげほげ」でも受け付けられる。なので、全角で入力しちゃって受け付けてもらえない問題は解決しない。
日付と時刻関連
UIはよくできていると思う。2月31日が入力できちゃったりするけれど、選択ツールもちゃんとJAWSでは読み上げている。積極的に使って良いと思う。
範囲・数値
範囲は、上下矢印キーで値を買えられる。もちろん直接入力しても良い。数値は、数字以外を入力するとそもそも入力フィールドに値が入っていない。が、「入らなかった」という事実がユーザに伝えられずに、混乱するかもしれないなとは思う（これはうぇぶせいさくしゃの責任にするのは辛い…）。
面白いのは、数値に全角を入れると、ちゃんと半角の数字に変換してくれってるっぽいこと。これもよくある失敗なので訂正してくれてありがたい。こちらも積極的に使えばよいと思う。
その他
URLの入力は"hoge:hiyo"の形式になっていないと無効だと警告される。"www.example.com"では無効らしい。
感想
アクセシビリティ的には、type属性を妥当なものに設定することは意味があるようだ。それよりも、ある程度それっぽいUIと値のチェックをブラウザがやってくれることに意味があるのではないかと思う。少しばかりデザイン的にそぐわなかったとしても、このUIをアクセシビリティも含めてちゃんと実装するのは案外骨の折れる作業なのではないだろうか。ということで、多くの人に恩恵のあるちょっとした設定は、ぜひ積極的に活用されてはいかがだろうか。