「アクセシビリティからはじめる、WebサイトのUXデザイン」に参加してきました。

名古屋のトライデント コンピュータ専門学校で開催されたアクセシビリティの勉強会「【名古屋】アクセシビリティからはじめる、WebサイトのUXデザイン」に参加してきました。
株式会社ビジネス・アーキテクツの太田良典さんの講演、そして、株式会社Gaji-Laboの山岸ひとみさんのワークショップという二本立てのイベントでした。
アクセシビリティと言えば、個人的に視覚に障害のある人たちのための対策というイメージが強かったのですが、考慮する点は他にもいろいろあるなと今回のイベントで気づかされました。
以下に今回のセミナーを聞いて考慮しないといけないなと考えさせられた点をいくつかピックアップします。

  1. 印刷時の事
  2. スクリーンリーダーの事
  3. Windowsのハイコントラストモード
  4. 位置に依存した説明を入れない
  5. 読者の注意を散漫にさせるものをおかない

1. 印刷時の事

印刷時にそのページが伝えたい内容が印刷されないことがないようにしないといけないなと感じました。例えば商品一覧をdivなどの背景画像に指定していたら印刷時には全く表示されない事があります。
なので、見せたいコンテンツはなるべくimage要素で指定しておくことが大事ですね。
ついつい便利なので背景画像をつかってしまうのですが。

2. スクリーンリーダーの事


例えば、左の図のように画像のaltタグに"堀 悟大"と書かれていて、その下にテキストでまた"堀 悟大"と書かれていたらスクリーンリーダー上では同じ名前が二回読まれることになってしまいます。
だから意図的にalt属性を空にする事も手なのだそうです。


組織図など複雑で重要な情報が画像で表現されている場合


また、上のような組織図がイメージ要素で、altに「組織図」としかかかれていなければ、スクリーンリーダー上で読み上げたとき「組織図」としか読まれないので、どのような組織図なのかが判断できません。なので、alt属性にしっかり構成図の詳細を記述することも時には必要かもしれません。普段の業務でもこれは意識したいです。

3. Windowsのハイコントラストモード

表示されているものを見やすく表示するためにWindowsではハイコントラストモードというものが用意されています。背景が黒く表示され、文字が白く表示されます。この設定にしておくと意図しない場所がハイコントラストモードで全く表示されない事があります。例えば背景画像を設定している要素等は要注意だそうです。意識的にWindowsのハイコントラストモードでどう表示されるかという事も確認するようにしたほうがいいかもしれませんね。

4. 位置に依存した説明を入れない

少しタイトルからだと何を言っているのか分かりにくいのですね。例えば、「右上のボタンをクリックしてください。」と書いてあったとします。そのサイトを閲覧している状況によっては本当にそのボタンが右上にあるとは限りません。例えばスクリーンリーダーでそのサイトを見ていた場合、上にそのボタンがあるかもしれませんし、下にそのボタンがあるかもしれません。ですのでどうしても説明を入れたい場合は、「ページ下部の『送信する』ボタンを押してください。」などボタンの情報を具体的に記載することが大事と話されていました。位置関係に依存せずにユーザに分かってもらえるサイト作りを心がけたいです。

5. 読者の注意を散漫にさせるものをおかない

例えばカルーセル等がとても速いスパンでぐるぐる回転しているようなサイトだと、そこにだけ意識が集中して記事の内容をおえなくなってしまう人もいらっしゃるそうです。
なので記事の内容をしっかり読んで欲しいページではカルーセル等は使わない方が良いかもしれませんね。

講義のスタイルについて

このイベントはただ、講師の話を聞くスタイルではなく、グループを作ってアクセシビリティについて話し合う機会がありました。その中で聞いた事を自分なりに整理して意見をだせたので、アウトップットした分、今日聞いた内容がしっかり頭に残っています。
インプットだけでなく聞いた内容をアウトップットできる講義スタイルはいいですね。

アクセシビリティの向上は手段であり目的ではない

アクセシビリティ自体が目的になっているサイトも結構あるということを仰っていました。結局誰に読んで欲しいか、そして読んでもらうためにはどういった配慮が必要かという、当たり前のことが大事になってくるんですね。
また、アクセシビリティを追求しすぎるといくら時間があっても足りないですし、運営が大変になってしまうことがあります。なのでそのサイトに応じて、考慮できる点からアクセシビリティの対策をしていきたいと思います。


堀 悟大

アップルップル フロントエンドエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

Home
Next entry →