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

Updated

2022.10.15

Published

2015.10.26

正直アクセシビリティについて学んだことがなく、絶好の勉強機会だと思って張り切って参加しました。
【名古屋】アクセシビリティからはじめる、WebサイトのUXデザイン - connpass

以下書籍の本の刊行記念イベントということです。

著者であるBA(株式会社ビジネス・アーキテクツ)の太田さんと、ファシリテーターとしてGaji-Laboの山岸さんによる講演。こんな流れでした。

  • グループ内での自己紹介、アイスブレイク

  • セッション1:マークアップからの取り組み

  • セッション2:デザインからの取り組み

  • セッション3:戦略・要件定義からの取り組み

  • 質疑応答

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

学んだこと

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

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

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

アクセシビリティは「0」か「100」ではありません。「絶対」にすべての人がすべての情報にアクセスできるようにする、ということではありません。

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

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

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

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

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

カルーセル問題

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

  • 読み終わる前に消えるうえ、誤操作しやすい

  • 不意に動く要素、また動き続ける要素に気をとられてしまいそのページのコンテンツを読めなくなってしまうユーザーもいる

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

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

  • 運用において、実装したりスライド画像デザインしたりするのが手間

  • 狭い(限られた)領域でたくさんのコンテンツを表示できるのはメリット

  • クライアントがCMSで運用するときに要望でカルーセル実装しても、自分たちでやるには手間で結局更新が手付かずになるケースがよくない

  • 政治的な問題が起こるのはそもそも戦略、軸ができてないからな気がする

  • PCかスマホかによっても良し悪しの評価が変わりそう

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

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

ウェブアクセシビリティ方針 - 企業情報 - ヤフー株式会社

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

Webアクセシビリティの重要性が加速する!「アクセシビリティやるぞ!祭り」詳細レポート | HTML5Experts.jp

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

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

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

まとめ

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

ろくデブログ

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

written by

Genta