メニュー

ぶっちーベース

フリーランス・仕事のこと

そういえば音声ブラウザ対応をちゃんとやってこなかった

2019.06.07

  • (1)東京出稼ぎをしている仕事でアクセシビリティの課題対応をした。
  • (2)20年ほどウェブ制作をしているが、ここまで力を入れて取り組んだのは初。
  • (3)jsやcssなどの技術発展の裏でアクセシビリティが犠牲になってるのではないかと思った。

いま、東京に出稼ぎしている仕事で音声ブラウザ対応がなかなかおもしろい。

ウェブ制作歴20年近くになるわけだが、「アクセシビリティ」が語られ始めた頃から音声ブラウザの存在は知っていた。
が、お恥ずかしいことにこれまでまともに検証したことはない。。

ナビゲーションスキップできるようにとか、画像にalt属性を必ず入れるとか、当たり前のことを普通にやってはいたが、実際に音声ブラウザ(スクリーンリーダー)を使って操作してみたことはなかった。

今回もらっている仕事のウェブサイトはそれなりの規模であり、金融機関でもあるわけで音声ブラウザの対応は必須条件と言っていい。

だけど、このあたりは後回しになってしまうのが現場の実情。。
いろいろあった課題も落ち着いてきて、やっと着手し始めた。

内情の詳しいことは書けないけど、主にこの3点かな。ユーザのアクションに関わる重要な部分。
ほかもあったように気がするから思い出したら追記する。

  • jsのonClickを実装する場合、aタグを使った方がいい。やむを得ずdivタグなどを使用する場合はtabindex=”0″を必ず入れる。
  • ユーザが入力・選択したデータを送信する場合は必ずフォームのタグを使う。例えば、selectの代わりにCSSやjsを駆使して独自にプルダウンメニューっぽいUIをつくっても音声ブラウザはフォームと理解してくれないため、選択できることに気づけない。
  • クリックなどで画面を変化させる場合、クリックした要素より前の要素を変化させると変化に気づくのが難しい。要素順を変えられない場合は変化した要素にfocusを当てるなどの工夫が必要。

jsやcssの技術発展により画面でいろんな動きがつけられるようになってきた。が、その裏でアクセシビリティが犠牲になっているのではないかと思う。ガラケーサイトのようにシンプルに上から順に要素を並べるのが最強なんじゃないかと思った今日この頃。( ̄_ ̄; )

この対応以降、ウェブ以外の駅とかの公共の場所のアクセシビリティが妙に気になるようになった。

いい経験をした!(・∀・)

アクセシビリティ対応のウェブサイト制作をご検討中の方はぶっちーの仕事用サイトからお問い合わせください!(・∀・)
↑このページのフォーム、音声ブラウザ対応できてないダメな例。( ̄^ ̄;)