【ウェブアクセシビリティ座談会 No.6 <後編>】のべ60人以上のワーカーが参加！THEATRE for ALL 立ち上げの舞台裏

2021年7月26日

ウェブアクセシビリティってなに？うん、うん？うん！と聞いているだけでウェブアクセシビリティがわかる座談会　第6回後編

今回は特別企画！

2021年2月にオープンした「THEATRE for ALL」。日本初、バリアフリーと多言語で鑑賞できるオンライン型劇場として、演劇・ダンス・映画・メディア芸術を対象に、日本語字幕、音声ガイド、手話通訳などがついた作品を配信しています。

この「THEATRE for ALL」の立ち上げに、サニーバンクはウェブサイトのアクセシビリティ監修として参加させていただきました。

サイト立ち上げまで3ヶ月の間に、ロゴやキーカラーのチェック、ティザーサイトやテストサイトのアクセシビリティレビュー、チラシのレビューなどに、のべ60人を超えるワーカーが関わりました。サイト制作初期、サービス構想の段階から、ウェブアクセシビリティについて考え、これだけ多くの障害当事者を巻き込んで作り上げていくという取り組みは、日本国内ではあまりないのではないでしょうか。サニーバンクワーカーを代表する5名と、precogスタッフの篠田さん、座談会メンバーで、この取り組みについて振り返りました。

前編では「THEATRE for ALL」の立ち上げの経緯やコンセプト、「THEATRE for ALL」が考えるアクセシビリティについてprecog篠田さんとのお話を、後編では「THEATRE for ALL」のウェブサイト立ち上げまでをワーカーさんたちと振り返ります。

（この座談会は2021年3月に行いました。）

プロジェクトに参加したワーカーさんの声

よっこ: では、ここからの時間は、各ワーカーさんに今回「THEATRE for ALL」のウェブサイトアクセシビリティ診断の仕事をされた中で、嬉しかったことや大変だったことをお話いただきたいと思います。

弱視の鈴木さん

伊敷: じゃあ、まずは鈴木さん。

鈴木さんのプロフィール

鈴木さん	先天性の視覚障害があり、弱視机の前にじっとしている事は苦手で、趣味は海外旅行

鈴木: 鈴木と申します。私は弱視のユーザーとして診断に参加しました。まずはじめに「THEATRE for ALL」というバリアフリーの動画配信サービスがはじまるということを聞いて嬉しく思いました。コロナの関係で動画の配信がすごく増えていて、クッキングとか体操とかいろいろあって、家で過ごすのが楽しくなりそうだなと期待していたのですが、実際に見てみると、動画に音声での説明がなくて、音は音楽が流れているだけで画面に文字が流れているだけというようなものがたくさんありました。これだと弱視の私には内容がわからなかったりするので、ちょっとイラッとしてしまうようなこともあったんです。音声による解説があるものが少ないと感じていた時に「THEATRE for ALL」のサービスが始まると知って、音声ガイドや字幕のある動画がたくさん配信されるといいなと期待しました。しかも公開直前の出来上がったウェブサイトではなく、サイト制作の初期の段階から障害のある人にチェックをさせていただけるのは素晴らしい取り組みだなと思いました。

iPad mini の横持ちと縦持ちを切り替えながら診断

よっこ: そうですよね、鈴木さんとはサービスそのものへの期待だったり、ご意見だったり、診断レポートのやりとり以外の話もしましたよね。実際に診断してみてどうでしたか？
鈴木: 弱視って本当に見え方が多様で、「弱視としての意見をまとめて」と言われてもまとめるのが困難なくらいに一人ひとり見え方が違うんです。なので今回弱視については自分の感想だけということになってしまうのではないかと心配でした。あと、アクセシビリティ診断をやっているみなさんはPCを使っていらっしゃる方が多いと思うのですが、私はiPad miniユーザーなのでiPad miniでチェックしました。iPad miniは縦持ちと横持ちで全然見え方が違うんですね。サイトが見にくい場合はiPadをくるくる回しながら縦横を切り替えて見やすくできるという素晴らしい点もあるんですが、レポート書くときにうまく伝わるように、説明するのがちょっと大変でした。
よっこ: PCだけではなく、スマホやタブレットでチェックする方もいらっしゃいますよ。サニーバンクのアクセシビリティ基礎診断では、基本的にはワーカーさんがいつも使っている環境での診断をお願いしています。クライアント様からの指定があるなど、必要な場合はスマホユーザーやタブレットユーザーにお仕事をお願いすることもあるんですよ。
私はいろんな環境でチェックしたくて、PCもWindowsとMac、ChromebookやAndroid、iPhoneなど持っているのですが、鈴木さんと同じiPad miniを持っているので、鈴木さんのレポートを参考に縦横動かしながら「あ、これのこと言ってるんだな」みたいな感じで確かめていきました。
伊敷: そうですね。僕もiPad miniを持っていて、視力が落ちる前には結構使ってたんですが、横向きにするとレイアウトが崩れるサイトが結構ありましたね。iPad miniの特に横持ちは、なかなか想定されていないことが多い感じがしますね。今のウェブサイトはレスポンシブデザインと言って、ユーザーが見ている画面の大きさや解像度によってレイアウトを調整するという手法が多く使われています。表示についてはユーザー数の多いiPhoneやAndroidスマホのポピュラーな機種での見やすさが優先されて、iPad miniの横持ちに対応しているサイトはなかなかないのではないでしょうか。そういう意味では、今回鈴木さんから縦に持ったときはちゃんと見えるけど、横に持つと横いっぱいに広がって読みづらいみたいなコメントをいただいて、参考にさせていただきました。
鈴木: 横持ちだとキーボード入力する際のキーが大きくなって入力しやすいので、 iPad mini では横持ちにすることが多いんです。

JISを満たしていてもみづらい色の組み合わせがある

よっこ: 他に何かありますか？
鈴木: 残念だったのは、キーカラーが組み合わせによってコントラストをつけにくい色だなという印象だったことです。
伊敷: 色のコントラストに関しては、今回かなり大変だったところのひとつです。キーカラーについては、鈴木さんは、たとえばサーモンピンクのような背景に黒の文字を乗せた時のコントラストについておっしゃっていると思うのですが、あの色の組み合わせも、実はJISの観点でいうと、コントラストの達成基準を充分に満たしているんです。ですが、ユーザーによってはこれだとコントラストが低くて見づらいという意見が、鈴木さんの他にも出ていて、JISの基準を満たしても見えづらいと感じることがあるんだということが実際にわかりました。ここで僕たちは「JISの達成基準を満たしているからOKでしょ」というスタンスではなく、ワーカーからの意見を採用して、これをどのように調整して落とし所を見つけるか、という姿勢で検討を進めました。

初めてだったらどう感じるか意識してチェック

鈴木: 他にも困ったこととしては、私は最初から最後まで関わったので、操作に慣れていってどんどん新鮮じゃなくなっちゃうんですよね。何度も細かく見ていくうちにだんだんサイトの作りがわかってくると、フレッシュに初めて戸惑うというところが経験できなくなってくるんです。実際にウェブサイトを利用する場面でも、慣れていくと使えるようになるんですけど、一番最初に出会った時に「あぁこれは見にくい」って思ったら、よほど興味のある分野でない限り、そのサイトは閉じてしまいます。診断の間も、慣れて使えるようになっているのではないか、初めてだったらどう感じるか、というのを意識してチェックしていました。
伊敷: アクセシビリティのチェックを何度もやっていくうちに、操作に慣れてしまうというのは、アクセシビリティでもそうだし、ユーザビリティの世界でもよく言われることなんですよね。
よっこ: 実際鈴木さんは、診断のステージが進んでも毎回「初めてこのサイトに出会ったらときどう感じるか」を意識しながら診断してくださったとのことですし、診断自体も、ティザーサイト、テストサイトと進むに従って新しい診断者が増えていくという形になっていましたので、慣れのせいで正しい診断ができていないことはないということを、この場を借りてクライアント様、篠田さんにはお伝えできたらと思います（笑）
しかし、今後もこの点は注意して、チェックしていかないといけませんね。

発達障害の土永さん

伊敷: では次に土永さんお願いします。

土永さんのプロフィール

土永さん	発達障害（PDD） 30代で広島県在住、趣味はアクアリウム

違和感の言語化にスクリーンショットを活用

土永: 土永です。発達障害（PDD）で私も鈴木さんとほぼ同じ期間作業させていただきました。先ほど、鈴木さんがおっしゃっていたように診断サイトにだんだん慣れてきてしまうっていうのは感じましたね。ウェブサイトをチェックしていてわかりづらかったり気になったりした点をレポートに書くときに、なぜわかりづらいと思ったのか、またなぜ気になったのかを説明するのは意外と難しいものでした。
伊敷: 違和感を言語化するのが難しいというのは多くのワーカーさんがおっしゃっていました。でも、土永さんのレポートはスクリーンショットを使って、問題箇所や状況を丁寧に説明してくれていて、とても助かりました。
よっこ: そこに苦労されているところもあるだろうなとは思うのですが、スクリーンショットをつけておいていただけると、診断後にページのデザインや内容が更新されても、診断時の状況を再度確認することができるのでとてもありがたいです。
土永: ありがとうございます。スクリーンショットを貼れるとテキストの補助情報になるので、説明しやすいです。

障害による真逆の意見もデザインで解決したい

伊敷: 他にありますか？
土永: あとは鈴木さんの話でも出たコントラストについてですが、サーモンピンクに黒とかの組み合わせは結構気にはなったんですけど、コントラスト自体は他の部分はあまり気にならなったので、そのあたりで感じ方が違うんだなと思いました。
伊敷: コントラストについては、先ほど鈴木さんのところでお話ししたようなJISの達成基準は満たしているけれども、見づらい色の組み合わせの問題に加えて、もうひとつ、悩ましいことがありました。弱視のワーカーさんからは「背景色と文字色のコントラストがはっきりしてみやすいです」という意見が出た一方で、土永さんをはじめ発達障害のあるワーカーさんから「背景色と文字色のコントラストが強すぎると目がチカチカしてつらいので少しコントラストを落としてほしい」という意見が出ました。これは弱視の人と発達障害の人とである意味逆の意見になっていて、障害の違いによってこういうずれというか、異なる意見が出るというのは発見でした。その中で、どういう色使いにするか、落としどころを見つけて色を決めていくというのは、大変でもあったのですがとてもクリエイティブだと思いました。

繊細で鋭敏な感性がさまざまな人にとっての快適さを生む

よっこ: 背景色と文字色のコントラストが強くて見づらいという点については、私自身はそれほど感じないと思っていたのですが、長時間サイトを眺めていると確かに目が疲れて見づらく感じました。また、土永さんは数ピクセルの微妙なズレにも気づいてレポートに書いてくれます。私は診断をやる中で、伊敷さんにどういう画像があるとかサイトの見え方について説明するのですが、伊敷さんに説明するためにしっかり見ているつもりでも、土永さんが気づいてくれた微妙なずれに、土永さんのレポートを読むまで全然気づいていないんです。気づいていなくても何となく違和感は感じていたりして、その違和感がサイトを使い続ける際にストレスになったりすることもあると思うんです。そういうところにも敏感に気づいてくれるところも、すごいなと思っているし、そういう意見をサイトに反映することで、普段あまり不便さを感じていない人にとっても、サイトが快適になったり、使いやすくなったりするんだろうなというのを改めて思いました。
伊敷: そうですよね。土永さんの繊細で鋭敏な感性はすごく信頼しています。

精神障害のかなさん

よっこ: では、次はかなさんですね。かなさんは精神障害のあるワーカーさんとして、テストサイトなどのレビューを担当していただきました。線維筋痛症で手に力が入りづらいというところもあって、そういう視点でもチェックしていただいています。

かなさんのプロフィール

かなさん	線維筋痛症（身体障害、上肢）慢性疲労症候群、化学物質過敏症、双極性障害（精神障害） 40代で東京都在住。趣味はDIY、芸術鑑賞

タップやクリックが痛い

かな: テストサイトのトップページにアクセスするとポップアップが出てきて、音声ありで動画を再生するかなど聞かれていたのですが、あれがなくなったのが一番嬉しかったことです。テストサイトでは診断を始めた頃は、他のページを見ていて、トップページに戻るとまた同じポップアップが出てくるようになっていたんです。もちろん、ポップアップを閉じればいいんですが、それが面倒とかいうのではなく、線維筋痛症で手に痛みがあるのでスマホだとタップ、PCだとクリックがつらいんです。
よっこ: 現在のサイトでは表示されないように仕様が変更されていますが、開発当時はトップページにアクセスした時に、その後に再生される動画を、訪れる方のニーズに合わせて、音声ありで再生するのか音声なしで再生するのか、もしくは再生しないのかを選んでもらうポップアップが表示されていました。当時はトップページにアクセスするたびにこのポップアップが表示されていましたが、テストサイトの診断が進むにつれて、2回目3回目の訪問時には表示されないようになりました。あれがつらかったんですね。
かな: 音声のありなしはどちらでも構わないけど、手が痛いから毎回タップしたりクリックしたりするのがつらい！という気持ちでした。
伊敷: でも、この話はすごく大事で、単にポップアップが面倒というのではなくて、線維筋痛症で手が痛いので、できるだけタップやクリックの数を減らしたいというのは確かなニーズなんですよね。

精神障害者として何を求められいるのか悩んだ

かな: あと、精神障害者としてはウェブサイトを見ることに関して特に困ることはないと感じているので、どういう役割が求められているんだろう、というところにすごく悩みました。
伊敷: THEATRE for ALL のサイトで動画を掲載するページでは動画を見やすくするために背景色が黒になっているのですが、精神障害のあるワーカーさんから「この背景の黒は気分が沈むかもしれない」という意見が出ていました。精神障害がある場合、その気分の落ち込みによって、動画を見たりウェブサイトを利用したりすることが難しくなるほど影響があるかもしれません。先ほど土永さんのところでお話ししたコントラストが強すぎるので「真っ黒や真っ白は避けて欲しい」という意見と合わせて、ページの背景色に真っ黒や真っ白を使用しないようにご提案しました。

肢体不自由のゆいさん

よっこ: では、次にゆいさん、よろしくお願いします。ゆいさんは脊髄性筋萎縮症で肢体不自由のワーカーさんとして参加していただいています。

ゆいさんのプロフィール

ゆいさん	脊髄性筋萎縮性 20代で福岡在住。趣味は絵を描いたり、音楽聴いたり、歌ったりすることなど

診断を通じてアクセシビリティへの意識がより強く

ゆい: アクセシビリティ診断は THEATRE for ALL のティザーサイトのレビューから参加させていただきました。ネットをするときも、診断を始める前は特に何かに着目してみたりしていたことはなかったので、診断をやる上で気づくことも多いです。以前、サニーバンクの講習会でもらった資料を毎回見返しながらレポートを書いています。自分だったらマウスで利用する際の使いやすさだったりをチェックするのですが、他の障害のある人も、例えば目の見えない方だったらこういうところが困るのかなとか、精神障害の人はこういうところが困るのかなとか、考えるようになりました。今回のサイトは、出来上がったものを診断するというのではなく、サイト制作の初めから関わらせてもらっていて、サイトを作るのって大変なんだなとか、バリアフリーにするためにはここも気になるなとか、公開するサイトにもここは残して欲しいとか、自分の思いも強くなりました。また、障害のある人も活躍するサイト、障害のある方にも利用できるサイトの構築に携われたことが嬉しかったです。
伊敷: ゆいさんのレポートを読む限り、しっかり不便さを言語化できているし、指摘の内容も的確でよいと思っていますよ。
よっこ: それに文章が柔らかいというか、優しくて、とても読みやすいし、なんというか、あぁそこは改善しなきゃと思えるんですよね（笑）

障害も困り感も違うけど解決策は同じ

伊敷: ゆいさんが指摘した中だと、たとえば「about」みたいに1ページが長くなりがちなページで、ページの一番下まで行けば「ページのトップへ戻る」のボタンがあるけれど、これが途中にも欲しいという意見があって、確かに手が不自由だと、ページの一番下からしか一番上にいけないというのは大変だなと思って、指摘としてすんなり理解できたんです.
でもこれ、とても面白くて発達障害のある人からも同じ指摘が上がってきたんです。発達障害の人は「飽きっぽいので途中でページの上部に戻って、他のページを見たくなることがあるのでページの途中にもページトップへ戻るボタンが欲しい」というのが理由でした。手の不自由なゆいさんと発達障害があるワーカーさんとの指摘が、理由は違うけれど重なっていたということは良い発見だと思いました。
よっこ: 「ページトップへ戻る」ボタンだと、最近はページのスクロールに追従して表示されるボタンがいいのでは？と思われる方もいると思うんですけど、あのボタンはスクリーンリーダーユーザーにとっては、ページの最後まで行かないと使えなかったり、そもそもフォーカスが当たらず、使えないし、存在にすら気づかないということもあるんです。）
伊敷: そうなんです。なので、ページの中見出し（h2）の直前に、ページトップへ戻るボタンやリンクを設置することをご提案しました。スマホ表示だと、スクロールはもっと長くなりますもんね。

全盲の小川さん

よっこ: では、次に小川さん、よろしくお願いいたします。

小川さんのプロフィール

小川さん	視覚障害の全盲 40代で群馬県在住、趣味は、パソコンなどの情報通信機器いじりと読書。

見やすいように工夫したはずがスクリーンリーダーでは会員登録できない状況に！

小川: 小川です。全盲でスクリーンリーダーを使っています。今回はTHEATRE for ALLのテストサイトを診断しました。指摘したところが目に見えて改善されているところが嬉しかったですね。
特に嬉しかったのが、でもこれは、裏を返せば最初に見たときはすごく残念だったということになるんですが（笑）。会員登録のところで、最初はチェックボックスやラジオボタンだと思われるところが、エンターキーを押してもスペースキーを押しても何も反応せず、それが何のボタンなのかも読み上げない状態で、これが疎外感があるというか、これではスクリーンリーダーユーザーは会員登録できないじゃないかということで、一番改善して欲しいところでした。公開サイトではチェックボックスやラジオボタンだということがわかるように改善してもらっていて、スクリーンリーダーでも会員登録できるようになっています。
よっこ: テストサイトでは会員登録の一番初めの段階の「メールアドレス登録」で、「利用規約に同意する」というチェックボックスがあったのですが、スクリーンリーダーではそこにチェックを入れることができなくて、仮登録すらできない状態だったんですよね。でもこれ、見た目ではチェックボックスやラジオボタンを大きく表示して見やすくしてくれていたんです。
伊敷: ブラウザデフォルトのチェックボックスやラジオボタンではなく、より見やすくするための実装をした影響で、スクリーンリーダーでは利用できない形になってしまっていたんですよね。チェックボックスやラジオボタンについてはここだけではなく、サイト全体的にそのような状態になっていたので、最優先で改善をお願いしました。
よっこ: 標準のものより見やすくして、使いやすくしようと思ってやったことで、別のユーザーが使えなくなってしまったという、ほんとうにもどかしい状況だったんですよね。こういうことがあるんだなと、ほんとに衝撃的でした。
小川: フォームについてはラベルとフォームコントロールを関連付けすることで、スクリーンリーダーでも使いやすくなります。私自身は、ここはフォームだなと気づいたら、上下矢印キーなどで前後を確認して、このフォームに何を入力するのか確認するのですが、慣れない人にはわからないと思います。公開サイトでもいくつか関連付けができていないところがあるようなので、ぜひ改善して欲しいです。
よっこ: 小川さんは他の視覚障害のある方にスクリーンリーダーの使い方を教えていらっしゃるので、スクリーンリーダーの初心者がつまずきやすいポイントをよくご存知なんですよね。自分は使えていても、操作に不慣れなユーザーのことも考慮した上で指摘してくれて助かっています。

聴覚障害のくらげさん

伊敷: では次はくらげさん、よろしくお願いします。

くらげさんのプロフィール

くらげさん	聴覚障害・ADHD 30代で東京在住、最近はドライブが趣味

動画の再生ボタンが怖い

くらげ: 聴覚障害とADHDがあるくらげです。サイトを見るのに困るところってそれほど感じたことがなかったし、これまで何とかなってきたのですが、診断をやってみて、これは動画だなと気づいたら、近づかない、見ないと、敬遠していることに気づきました。今回は動画がまだほとんどアップされていない段階でのチェックだったので、あまり自分の出番はなかったのかなと思うのですが。。。
伊敷: くらげさんのコメントに、「聴覚障害のある人は動画の再生ボタンが怖い」っていうのがあったんですね。このコメントはインパクトも強かったし、再生ボタンを知らずにタップしてしまったら大きな音が出るかもしれない、と思うと確かに簡単には近づけないよなと思いました。
よっこ: 以前話をする中でも同じことをおっしゃっていて、確かに、大音量で音が鳴っていても聞こえないから気づけなかったりして困ることもあるよな、と思いました。
伊敷: THEATRE for ALL のサイトでは、動画コンテンツのあるページへのリンクのサムネイル画像に動画再生マークがあります。これをクリックしたからといってすぐに動画が再生されるというわけではないのですが、動画が再生されるかのように伝わってしまっていますね。ページにアクセスするだけで勝手に動画や音声が再生されて、音が鳴っていることに気づけないことがないというのと同時に、そのことを誤解なくユーザーに伝えることが大切ですね。
くらげ: 聴覚障害があると、自分が受け取っている情報が、提供されている全ての情報なのかわからないというところが障害なんですよね。そもそも音が鳴っているか鳴っていないかの判断基準がなくてわからないから怖い、というのがあります。
よっこ: 動画が自動的には再生されないことや、今再生されている動画で音は鳴っていないとか、そういうのを伝えられるようにできたら良さそうですね。

率直な意見がメッセージを届けられるサイトにしてくれた

伊敷: 今回、本当に様々な障害のあるワーカーさんに見てもらって、僕自身もすごく学びが多かったです。篠田さんから、今の話を聞いての感想などを頂ければ。
篠田: 最初は障害のある人とどう接したらいいんだろうと及び腰になっていたところもあって、「こんなことも聞いていいのかな？」という悩みも多かったんですが、サニーバンクのワーカーさんは率直に意見してくださってすごくありがたかったです。これまでと同じようにデザインをしていたら絶対に届かないところへもメッセージが届けられるサイトになったと思います。本当にありがとうございました。

THEATRE for ALL のこれから

篠田: これからのTHEATRE for ALLなんですけど、オープンして2ヶ月（座談会時）でいろいろわかってきたこともあって、ウェブサイトやサービスの面での大規模な改修を考えています。（＊）機能面での改善ももちろんなんですが、心理的な面でもサイトをみんなが使いやすくする工夫を続けていきたいと思っています。また、サニーバンクさんからこれまでご指摘いただいた中でも、まだ反映できていない部分もたくさんあるので、落ち着いてきた段階で見直して、サイトの改善に反映させたいと思っています。
伊敷: ウェブサイトは作って終わりではなくて、作った後の運用や情報の更新やコンテンツの追加を続けていく必要があるんですね。THEATRE for ALLに関していうと、サイトを公開したあとも当事者の意見を広く聞こうという姿勢を持ち続けていることは他にないものだと思うので、ぜひ、そこはブレずに続けていって欲しいなと思っています。
篠田: 今回ウェブサイトを作って、情報発信をスタートしたけれども、当事者にはまだ届いていないのではないかという感覚があります。TfAは障害当事者のためだけのサービスではないということはすでにお伝えしているとおりなのですが、ウェブサイトに来てもらうための宣伝だったり、サービスやウェブサイトのことを障害のある人に知ってもらうためには、障害特性に応じた告知や宣伝の方法を考えていかないといけないと思っています。自分たちが発信するだけでは不十分で、仲間づくりをしていくことで、本当に届けたい人に届くんだろうと思います。
よっこ: 今回、THEATRE for ALLのサイトの構築に初期の段階から関わることができたことは、サニーバンクとしてもとても学びも多かったですね。これからのサニーバンクの「可能性」みたいなものも感じることができました。本当にありがとうございました。これからも引き続きどうぞよろしくお願いします！
伊敷: これからも、いろんな当事者と一緒にTHEATRE for ALLが続いていくというのがすごく大事だなと思うし、期待しています。今回はありがとうございました！

（＊）補足：5月の改修で、支援会員（年間サブスクリプション）、クーポン機能が追加され、SNSログインが新たに実装されました。また7月には月額会員のサービスが始まりました。これらの新しいサービス公開へ向けても、サニーバンクとしてお手伝いさせていただいています。

これまでの座談会

サニーコラム一覧へ