プログラミング 毎日更新

10日目 アクセシビリティ

おはようございます。劇団四季を見て、「もっといろんな体験にお金を払っていきたいなー」という話を奥さんにしたら、「わかる。私も同じこと思ってた。2020年は体験の年にしよう!」という言葉が返ってきて、こいつ最高すぎるぜぇ…と、もはや笑ってしまいました。

さて、昨日は会社で外部講師を呼んで行う月一回の勉強会でした。

テーマは「ウェブアクセシビリティ」について。アクセシビリティって聞いたことあるような気がするけど、「なんかユーザーにとってイイカンジなコーディングってことでしょ??」というイメージしかなく、具体的にどうすればアクセシビリティを高めることができるか、サルでもワカるように1から教えていただきました。

まずアクセシビリティが良いサイトとは、様々な障害を抱えているような方にとっても利用しやすいようなサイト構成になっている、ということらしいです。

具体的に言うと、音声認識に適切に対応できているか、色の判別が苦手な方にとって見やすい色のコントラストになっているかなどです。そしてウェブアクセシビリティを意識したサイト構成は、そういった障害を持っている方だけでなく誰にとっても使いやすいサイト構成であるということです。

まだまだウェブ制作の現場でアクセシビリティ対応を求められることも少なく、また学習の仕方もよくわからないよねということで、本当に1から教えていただきました。

まず音声読み上げの件でいうと、前提として音声読み上げ機能を使う方はおそらく「目に障害を持たれている」可能性が高いですよね。そうすると、我々がマウス操作で好きな場所をクリックするということができないわけです。

ではどうするかというと、キーボードの「tab」キーを押しながら要素を移動していき、そこで読み上げられる音声を聞きながら、好きなサイトへ遷移していくというわけです。

ちなみに音声認識ソフトは、macユーザーなら「設定」→「アクセシビリティ」の中にある「VoiceOver」というツールを使えばウェブサイトだけでなく今使っているアプリの音声読み上げをしてくれます。

windowsの場合は内臓されていないので、無償ならNVDA、有償ならPC-Talkerというソフトがネット上にあるので、それを使うとよいとのことです。

話を戻すと、tabキーで要素を移動していくのですが、例えばボタンをdivタグで実装してしまうと見た目が完全にボタンっぽかったら人間にはボタンに見えますが、音声読み上げソフトはそうは認識してくれません。ただの文字としか認識されません。buttonタグで実装してあげると読み上げソフトにもボタンであることが伝わり、「ボタン 次へ進む」というように適切に読み上げてくれます。これはあくまで極端な例ですが、マークアップエンジニアが当たり前にやっている「適切なタグを使う」だけでもアクセシビリティは最低限確保できていたりします。

他にも、HTMLのaria-○○属性を使って、aria-hidden=“true”で読み上げ不要な箇所は読み上げをスルーしたり、aria-label=“ビールとすれば意味を持たないビールの絵文字に読み上げ機能を付与させることもできたりします。

  • この記事を書いた人

きわっち

元食品メーカー製造マンが未経験からwebエンジニアになりました。 エンジニアとして0から成長していく過程を発信していきたいと思っています。