正直アクセシビリティについて学んだことがなく、絶好の勉強機会だと思って張り切って参加しました。【名古屋】アクセシビリティからはじめる、WebサイトのUXデザイン - connpass以下書籍の本の刊行記念イベントということです。デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチコーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション著者である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ポストイットを活用したワークショップポストイットを使ったグループワーク、いろいろなところで目にするものの、自分は参加経験したことがありませんでした。会場の後ろ側で、たくさんのポストイットが大判紙の上で分類・整理されていくのがすごかったです。%3Cblockquote%20class%3D%22twitter-tweet%22%3E%3Cp%20lang%3D%22ja%22%20dir%3D%22ltr%22%3E%E5%90%8D%E5%8F%A4%E5%B1%8B%E3%81%A7%E3%81%AE%E5%8F%82%E5%8A%A0%E8%80%85%E3%81%AE%E7%9A%86%E6%A7%98%E3%81%8C%E6%9B%B8%E3%81%8D%E5%87%BA%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%A3%E3%81%9F%E3%81%B5%E3%81%9B%E3%82%93%EF%BC%81%20%E3%81%84%E3%81%8D%E3%81%AA%E3%82%8A%E6%9B%B8%E3%81%91%E3%81%A8%E8%A8%80%E3%82%8F%E3%82%8C%E3%81%A6%E5%A4%A7%E5%A4%89%E3%81%A0%E3%81%A3%E3%81%9F%E3%81%A8%E6%80%9D%E3%81%84%E3%81%BE%E3%81%99%E3%81%8C%E3%80%81%E3%82%84%E3%81%AF%E3%82%8A%E3%81%BF%E3%81%AA%E3%81%95%E3%82%93%E3%81%9F%E3%81%8F%E3%81%95%E3%82%93%E6%80%9D%E3%81%84%E3%82%84%E8%AA%B2%E9%A1%8C%E3%82%92%E6%8C%81%E3%81%A3%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%81%AD%E3%80%9C%E3%80%82%E5%A4%A7%E9%98%AA%E3%81%A7%E3%81%AF%E3%81%BE%E3%81%9F%E3%81%A1%E3%82%87%E3%81%A3%E3%81%A8%E9%81%95%E3%81%A3%E3%81%9F%E5%BD%A2%E3%81%A7%E3%82%84%E3%82%8B%E4%BA%88%E5%AE%9A%E3%81%A7%E3%81%99%E3%80%82%E6%A5%BD%E3%81%97%E3%81%BF%EF%BC%81%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Fhashtag%2Fa11ybooks%3Fsrc%3Dhash%26amp%3Bref_src%3Dtwsrc%255Etfw%22%3E%23a11ybooks%3C%2Fa%3E%20%3Ca%20href%3D%22https%3A%2F%2Ft.co%2FVqN8aSKTPD%22%3Epic.twitter.com%2FVqN8aSKTPD%3C%2Fa%3E%3C%2Fp%3E%26mdash%3B%20gotta%E6%A5%AD%20(%40hitoyam)%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Fhitoyam%2Fstatus%2F657899791687417856%3Fref_src%3Dtwsrc%255Etfw%22%3EOctober%2024%2C%202015%3C%2Fa%3E%3C%2Fblockquote%3E%20%3Cscript%20async%20src%3D%22https%3A%2F%2Fplatform.twitter.com%2Fwidgets.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E会場内でどういう意見が出たのか、ぱっと見でも共有できますね。Gaji-Labo山岸さん凄い。今度マインドマップの勉強会に参加する予定ですが、みんなでやるときにはポストイットのようなツールが効果的なんだと目の当たりにできました。まとめ充実した3時間で、アクセシビリティについての理解を得ることができたと思います。アクセシビリティの知識があるのとないのとでは、Webの作り方も違うように思うので、本当に参加して良かったと思います。まだまだWebについて知らないことがたくさんあるなあ…。デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチコーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション