読者です 読者をやめる 読者になる 読者になる

LOGzeudon

名古屋で働いているWebデザイナーのブログです

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

f:id:rokuzeudon:20151026163610p:plain

マスメディアンさんのセミナーに続いて、こちらのイベントにも参加してきました。

a11ybooks.connpass.com

正直なところ、アクセシビリティについてちゃんと学んだことがなく知識0だったので、かつてない絶好の勉強機会だと思って張り切って参加しました。

イベントについて

本の刊行記念イベントということでした。

著者であるBA(株式会社ビジネス・アーキテクツ)の太田さんと、ファシリテーターとしてGaji-Laboの山岸さんによる講演。
太田さんについては、BAさんの採用サイトにも紹介が載ってますね。

社員紹介:太田良典 | BA

こんな流れでした。

  • グループ内での自己紹介、アイスブレイク
  • セッション1:マークアップからの取り組み
  • セッション2:デザインからの取り組み
  • セッション3:戦略・要件定義からの取り組み
  • 質疑応答

近くの3人くらいで、セッションごとにグループワーク(ワークショップ)がありました。
お題に対する自分の考えをポストイットに書き、グループ内や会場全体で意見共有をしました。ポストイットがあることによって進行がスムーズだったのが良かったです。

学んだこと

学ぶことがたくさんありましたので、印象に残ったことをとりあえず書きます。
尚、今回の講演内容はだいたい著書に載っているそうです。自分はズレたことを書いているかもしれませんので、詳しくは本を買われると良いでしょう。

アクセシビリティの概念について

「アクセシビリティ」と聞くと、視覚など身体障害のある方が情報にアクセスできるようにすること、というイメージだったのですが、それは狭い考え方だとわかりました。
「アクセシビリティ」は、より多くの情報により多くの人がアクセスできるようにすることです。
また、アクセシビリティは「0」か「100」ではありません。「絶対」にすべての人がすべての情報にアクセスできるようにする、ということではないんです。

Webにアクセスする方法は、スクリーンリーダー(画面読み上げ)やマウスを使わないデバイス、スマートウォッチなど多様になっています。
今後新しいデバイスも現れ、それに合わせたコンテンツの表示も必要になるでしょう。
そうした環境に最適化するためには、まずコンテンツが「マシンリーダブル」である必要があります。

マシンリーダビリティ」とは、機械が解析できるようにコンテンツが正しくマークアップされること。
ただ、マークアップだけでなく、デザインの段階や、Webの戦略・要件定義の段階でもアクセシビリティ向上のためにできることがある、というお話でした。

画像代替テキストの扱いについて

画像代替テキストについて、自分は、画像検索でHITするようにSEO対策として記述する…という程度の認識しかありませんでした。
でもお話を聞いて、アクセシビリティの観点ではそれではまずく、スクリーンリーダーで読み上げることなどを考慮した内容にするべきだとわかりました。

どういうときにaltを空にするのか、組織図のような複雑な画像のときにはSVGと代替コンテンツという表現方法もある…など、具体例が多いのが良かったです。
また、デザイン側で解決できることがあるという話はそういう発想があまりなかったので新鮮でした。

カルーセル問題

まずは講演中、「カルーセル」はアクセシビリティ的にOKでしょうか?という太田さんからの投げかけ。横にスライドするアレですね。

カルーセルは、こんなアクセシビリティの問題を抱えがちです。

  • 読み終わる前に消えるうえ、誤操作しやすい
  • 不意に動く要素、また動き続ける要素に気をとられてしまいそのページのコンテンツを読めなくなってしまうユーザーもいる

一方、カルーセルにはメリットもあり、「複数のコンテンツを同列に扱える」ことによりコンテンツ発信側の政治的な問題(どのバナーをページの一番上にするのか、部署の対立など)が解決できるケースがあるとのこと。
ユーザーとコンテンツ発信者、どっちを優先するのか…というハザマにあるようです。

この後グループワークで、そもそもカルーセルは必要なのか?(なぜカルーセルを使うのか)という課題。各グループでいろいろな意見が出たようです。
自分のグループの中ではこんな意見でした。

  • 運用において、実装したりスライド画像デザインしたりするのが手間
  • 狭い(限られた)領域でたくさんのコンテンツを表示できるのはメリット
  • クライアントがCMSで運用するときに要望でカルーセル実装しても、自分たちでやるには手間で結局更新が手付かずになるケースがよくない
  • 政治的な問題が起こるのはそもそも戦略、軸ができてないからな気がする
  • PCかスマホかによっても良し悪しの評価が変わりそう

名古屋では、時間がなかったため各グループの意見の紹介まではされませんでした。
ハッシュタグ(#a11ybooks)を見てると、名古屋と大阪とで違う意見になっているそうで、あとでFacebookページなどに細かい内容をアップいただくのが楽しみです。

Yahooのアクセシビリティ方針のページがアツい

docs.yahoo.co.jp

省庁のWebサイトなどだと、方針を淡々と書き連ねているところが多いのですが、Yahooさんは違います。
企業理念も交えつつ、アクセシビリティへの思いがこもった方針になっていて、参考になります。
検索してみると、Yahooの中の方がアクセシビリティの分野において活躍されているようですね。

html5experts.jp

ポストイットを活用したワークショップのメリット

ポストイットを使ったグループワーク、いろいろなところで目にするものの、自分は参加経験したことがありませんでした。
会場の後ろ側で、たくさんのポストイットが大判紙の上で分類・整理されていくのがすごかったです。


会場内でどういう意見が出たのか、ぱっと見でも共有できますね。Gaji-Labo山岸さん凄い。
今度マインドマップの勉強会に参加する予定ですが、みんなでやるときにはポストイットのようなツールが効果的なんだと目の当たりにできました。

まとめ

充実した3時間で、アクセシビリティについての理解を得ることができたと思います。
アクセシビリティの知識があるのとないのとでは、Webの作り方も違うように思うので、本当に参加して良かったと思います。
まだまだWebについて知らないことがたくさんあるなあ…。

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ

 
コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション

コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション

  • 作者: ヘイドン・ピカリング,Heydon Pickering,伊原力也,太田良典,株式会社Bスプラウト
  • 出版社/メーカー: ボーンデジタル
  • 発売日: 2015/03/27
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る
 

関連記事

blog.rokuzeudon.com

blog.rokuzeudon.com

blog.rokuzeudon.com