2019年6月1日に東京で開催された CSS Nite LP62「Webアクセシビリティの学校」特別授業に参加してきました。
「Webアクセシビリティの学校」は、ウェブ制作者や担当者を対象に全国各地で開催されているセミナーです。高知でも2017年11月に開催していただきました。
今回はそのスペシャル版として、セミナーイベント CSS Nite とのコラボレーションによる「特別授業」が行われました。
CSS Nite ではこれまで、年末の Shift や Corder’s high シリーズの1セッションとしてアクセシビリティが取り上げられることはあったものの、セミナー全編アクセシビリティ特集は今回が初めて。200席ちかい会場いっぱいに集まった参加者からは、アクセシビリティへの関心と熱意の高まりを感じることができました。
全編リアルタイム字幕＆手話通訳つきセミナー
このイベントではセミナー自体のアクセシビリティも高めるため、セッションだけでなく質疑応答や幕間のトークも含めた全編でリアルタイム字幕と手話通訳が提供されました。
UDトークでアクセシビリティを体感
リアルタイム字幕に使用されたのは、コミュニケーション支援・会話の見える化アプリ「UDトーク」。ステージ横に字幕用のスクリーンが用意され、登壇者や司会の方のお話がリアルタイムで字幕化されました。漢字にはルビ付き、機械翻訳による英訳も表示されるユニバーサルぶり。アプリをダウンロードすることで、手元でも自分のペースで字幕を見ることができました。
耳の聞こえる私も、聞き逃してしまった部分や話の前提を振り返りたいときに便利で、アクセシビリティが “しばしば利用者全般のユーザビリティを向上させる（ WCAG 2.0 イントロダクション ）” ことを体感できました。
セミナー本編の前に、UDトーク開発者の青木秀仁さんからお話がありました。
字幕が表示されるメガネ型ディスプレイをかけて登場した青木さん。「アクセシビリティは学ぶ知識よりも体験や想像力が大事」ということで、メガネを会場にまわしてくださいました。スライドや話者と字幕が同時に視界に入るので話に集中できるし、テクノロジーの力でひろがる未来を感じてわくわくしました。
「みんなでつくる字幕、みんなでつくる記録」がコンセプトのUDトーク。音声認識でうまく字幕化されなかった部分は、スタッフの方が随時修正してくださっていました。アプリを使えば参加者が字幕を修正することもできます。
はじめから100%の完璧を目指さずに、できることを考えながら伝わる人を増やしていくアプローチはアクセシビリティに通じる部分も多く、とても共感できるお話でした。
手話ってかっこいい！
5時間あまりのセミナーを通して、手話通訳の方が2人交代でステージに立って手話をしてくださいました。アクセシビリティやウェブ制作の専門用語（ときどきジョーク）が飛び交うセッションをリアルタイムで手話にしていくのは相当なスキルが必要だと思うのですが、全編を豊かな表情と手話で通訳してくださったお2人は本当にかっこよかったです。
英会話ができるとかギターが弾ける人に憧れるように、私も手話ができたらなと思いました。
基調講演「あなたの価値を高めるWebアクセシビリティ」
いよいよ本編、トップバッターは書籍『デザイニングWebアクセシビリティ』の著者のひとり伊原力也さんでした。アクセシビリティとは？という概論から、アクセシビリティによくある誤解へのアンサー、取り組むメリットや何から始めれば良いかへの指針を示してくださいました。
私のアクセシビリティ熱は、ちょうど2年前に福岡で開催された !important #04 というイベントで、伊原さんのセッションを聴いて一気に高まりました（ あなたの価値を高めるWebアクセシビリティ〈!importantバージョン〉 ）。
そしてまた今回、「ウェブに載るだけで圧倒的にアクセシブル」「この場にいる全員がアクセシビリティに取り組んでいる」のキラーメッセージが多くの参加者に刺さっている様子にドキドキしました。
私は分業で受託制作をしているデザイナーなので、「マシンリーダブル」にはほとんど関与できないと思っていました。今回伊原さんのお話を聞く中で、最も伝わる可能性が高いUIはテキストであり、設計・デザインの段階からアクセシブルなテキストを意識すれば、マシンと人の架け橋になれることが分かり嬉しくなりました。
日々の制作の中で弱気になることもありましたが、アクセシビリティはコンテンツの価値を最大化し、利益につながる攻めの一手であるというお話に勇気付けられました。「ウェブを作っているのは私たちだ」の自覚を胸に、今後も自信を持って取り組み続けようと思える心強い基調講演でした。
Session 2「誰もが隣にいる人と一緒に楽しむために」
続いては、“聞こえる世界と聞こえない世界をつなぐユニバーサルデザインアドバイザー” 松森果林さんの登壇でした。ウェブアクセシビリティについて学ぶ中で、聴覚障害当事者のお話を聞けたのは今回が初めてでした。
セッションの冒頭で、とあるCMを字幕＆音声なし／ありの2パターンで見せていただきました。登場人物の台詞だけでなく、効果音やBGM、音の大小や緩急、環境音など、耳から得ている情報が想像以上に多いことに驚きました。
松森さんは17歳の頃から両耳が聞こえないそうです。「字幕がついたとき、初めて人として認めてもらえた気がした」という松森さんの言葉は、これまで当たり前に情報を得ていた自分にはとてもショッキングでした。
耳は聞こえないけれど、それ以外の行動に制限はなく、みんなが楽しんでいることを一緒に楽しみたい、と話す松森さん。お子さんと手話や文字でコミュニケーションされているエピソードはどれも印象的で、「バリアってなんだ？」の問いが強く心に響きました。
アクセシビリティというと、自治体や公共性の高い場所が対応するもの（自分たちには関係ない）というイメージがあるかもしれません。今回、松森さんが大好きな趣味をどんな風に楽しんでいるかをお聞きして、私たちが普段接しているあらゆるものに、もっとアクセシビリティの視点が加わると良いなと思いました。
ワンポイント手話講座
セッションの最後に、自己紹介と挨拶の手話を教えていただきました。松森さんのお手本の後、隣の席の方と交互に「こんにちは、私の名前は〇〇です。よろしくお願いします」と手話で挨拶しました。
懇親会では手話通訳の方に漢字を表す手話も教えていただき、その表現の面白さに興味をひかれました。「筋が良い！」とお誉めいただき嬉しかったので、また機会をみつけて挑戦してみたいです。
Session 3「辻ちゃん・ウエちゃんのアクセシブル GO GO!! 〜スクリーンリーダーで『Backlog』を使ってみるの巻〜」
続いては「Webアクセシビリティの学校」校長の植木真さんと、辻勝利さんコンビのセッションでした。以前から辻さんのツイートのファンで、今回お話が聞けるのをとても楽しみにしていました。
まずは導入として、全盲の辻さんが普段使っているスクリーンリーダーでウェブページがどんな風に読み上げられるかのデモがありました。マークアップによって読み上げが変わり、伝わりやすさや拾い読みのしやすさも変わることが分かり、きちんとマークアップすることの大切さが実感できました。
次に、辻さんのツイートがきっかけとなってアクセシビリティの改善が行われた プロジェクト管理ツール「Backlog」 について、改善点の Before／After をひとつひとつ解説いただきました。
- ボタンのマークアップを
divやaからbuttonにする - フォームの入力欄には
label要素でラベルを付ける - フォームの見た目再現のために
display: none;を使わない - ボタンのアイコンにも代替テキストをつける
- リアクションボタンにラベルと状態を表すテキストを入れる
どれも現場でうっかり起こりがちな例ばかりで、「こんな風に困るから→こう改善しよう！」を知れて勉強になりました。また、こうして辻さんの声を拾って改善に取り組み、Before／After を公開してくださる Backlog さんに好感を持ちました。
辻さんの「アクセシビリティは対応でなく高めるもの」という言葉は、伊原さんの「ウェブに載るだけで圧倒的にアクセシブル」とセットで今後も拠り所にしたいフレーズになりました。
Session 4「代替テキスト決定ツリーの使い方」
続いての登壇は、岡山で「より多くの人へ Web コンテンツを届ける」ための方法を考える勉強会 “リーダブルな夜”」を主宰されている澤田望さん。私がアクセシビリティに興味を持ったのは澤田さんがきっかけなので、東京の CSS Nite でお話が聴けて、なんだか感慨深かったです。
セッションのはじめに、配布された2つの画像について直感で代替テキストを書いてみるワークがありました。Twitter にハッシュタグをつけて回答している参加者も多く、いろんな書き方を見ることができました。
代替テキストの6つの基本を確認した後、画像に alt 属性がない場合、空（alt=“”）の場合、テキストと重複している場合にスクリーンリーダーでどのように聞こえるかのデモがありました。alt 属性自体がない時に画像のURLが読み上げられる様子は悲劇的で、適切な値を入れることの大切さが分かりました。
しかしいざ「適切な」代替テキストを書こうとすると、なかなか悩ましいもの。そんな時、YES／NOに答えていくと適切な値が分かるスグレモノが「代替テキスト決定ツリー」です。このガイドの使い方を順を追って解説いただきました。
たかが alt されど alt。セッションの傍ら Twitter のタイムラインでも様々な議論が起こっていて、代替テキスト、ひいてはコンテンツを伝えることの奥深さを垣間見ることができました。代替テキストはマークアップする人だけに押し付けるのではなく、コンテンツの文脈や意図を最もよく理解している人（サイトオーナーやディレクター、原稿作成者）が関わることで、より適切に伝わるものになるのだと感じました。
Session 5「サイボウズの組織的な取り組みとビジュアルデザイン」
続いては、サイボウズの小林大輔さん・樋田勇也さんのお2人によるセッションでした。
前半では、アクセシビリティエキスパートとして活躍されている小林さんから、アクセシビリティに取り組むチームのマインドとプロセスについてお話いただきました。
アクセシビリティやるぞと思っても、一人でできることは僅かです。チームを巻き込み、全員で取り組む体制づくりのためにどんなことをされたのか、具体的に教えていただきました。自社のミッションとアクセシビリティに取り組む意義を重ねて言語化し、取り組みがチームの自分ごととして根付いていく様子が鮮やかでした。
チームのガイドラインについて、ガイドそのものよりも一緒に議論しながらつくることが大切、というお話が印象に残りました。
セッション後半では、業務改善プラットフォーム「kintone」モバイル版のリニューアルで取り組んだことを樋田さんからお話いただきました。情報設計、ビジュアルデザイン、UIデザインの課題を実際のプロダクト画面を見ながら解説いただき、分かりやすく勉強になりました。
リニューアルにあたって「アクセシビリティ対応」という特別な対応はしておらず、「すべての人にとって分かりやすく使いやすいデザインを目指した結果、アクセシブルになっている」「アクセシビリティは普段のデザインの延長線上にあるもの」とのお話は非常に共感できるもので、デザイナーとして理想的だと感じました。
サイボウズさんのセッションがあまりにも素晴らしかったので、これまで受託制作一辺倒だった私も、デジタルプロダクトやサービスデザインにチームで関わることに興味がわきました。
クロージング・トーク「インクルーシブネスを超えて」
最後のセッションは “元祖・アクセシビリティおじさん” 木達一仁さんの登壇でした。
障害当事者の多様性を知る大切さに触れた上で、障害の医学モデルと社会モデルという2つの考え方について教えていただきました。医学的な障害はテクノロジーの進化で今後どんどん取り除かれていくでしょう。では社会的な障害はどのように取り除いていけるでしょうか。情報が電気や水に並ぶライフラインのような存在になった今、アクセシビリティはウェブコンテンツに必須の品質であり、社会の要請であると強調されました。
アクセシビリティの向上に取り組むことでウェブの可能性はさらに広がり、社会をもっと良くすることにもつながるというお話が印象的でした。
また、アクセシビリティへの着手も大事ですが、続けることはもっと大事ともお話いただきました。業界の第一線を牽引し続けてきた木達さんからの「いきなり WCAG を読んだり WAI-ARIA を使いこなさなくても良い。まずは『基本のキ』に取り組んだり、代替テキストをつけたり、できることから小さく始める。ただし、途中でやめないこと」とのお言葉が優しく心に響くクロージング・トークでした。
また会う日まで
今回の CSS Nite では、Twitter などでつながっていた方と初めてたくさんお話することができました。同志と会えたことが嬉しく、懇親会でも2次会でも話が尽きませんでした（夢の中でも懇親会をしていたほどです）。
私は地方の小さな案件で地道に取り組んでいくことしかできませんが、続けることでより多くの人にコンテンツが伝わり、素敵な皆さんにまた会えると願って頑張っていきたいと思います。
登壇者の皆さま、スタッフの皆さま、お会いできた皆さま、素晴らしいイベントをありがとうございました。