FINDING
村田 真純, 長野 彩乃 2025.01.30

Loftwork.com ウェブアクセシビリティレポートVol.2
私たちのサイトの課題はどこにある? 具体と対応を学ぶ講習会

ロフトワークは、Webクリエイティブのプロフェッショナルとして、さまざまな企業や大学、自治体の課題に寄り添いながら、Webサイト制作に携わっています。そんな弊社では、誰でも同じように情報が取得できるよう、アクセシビリティの確保へ自ら実践していくべく、自社のコーポレートサイトであるLoftwork.comのアクセシビリティ対応を開始しました。

この連載では、その実施内容やプロセスについて、私たち自身の悩みや気づきも含めながらレポートしていきます。Vol.1の記事で紹介した、サニーバンクによる、障害当事者の方々に参加いただいたオンライン合同レビュー会は、私たちにとっても大きな気づきの機会となり、参加者のアクセシビリティに対する意識を揃えることができ、改善の「最初の一歩」となりました。

では、その気づきをどう実践に移していけばよいのか。オンライン合同レビューのあと、引き続きサニーバンク協力のもと行われたのが、「ウェブアクセシビリティ講習会」です。

この講習会では、前半にサニーバンクのアドバイザーを務める、カクテルズ代表の伊敷 政英さんによる、ウェブアクセシビリティに関する基本的な知識をまとめた講習を実施。後半では今回実施した2つのレビュー(オンライン合同レビューとレポートレビュー)の結果をまとめたレポートを踏まえて、ロフトワークのWebサイトで改善が望まれる項目を具体的に解説していただきました。

本記事では、後半に実施された、Webサイトで改善が望まれる項目解説の内容をお伝えします。

※本ページでは、今回ご協力いただいたサニーバンクさんの表記に準じて「障害者」と表記しています。

サニーバンク(運営:株式会社メジャメンツ)

サニーバンクは、障害者専門のクラウドソーシング サービス。
障害者ができる仕事、障害者だからこそできる仕事、それらを法人・個人問わずに仕事として発注して頂き、その仕事を遂行できる人(障害者)が受注するシステムを提供。
「ウェブサイトアクセシビリティ診断」の需要も急増している中、機械的に検出したり健常者がマニュアル的に診断するよりも「実際に使えるアクセシビリティ」として、障害当事者がWebサイトの診断のサービスを提供している。

サニーバンクのWebアクセシビリティサービス詳細を見る

伊敷政英

アドバイザー伊敷政英(アクセシビリティコンサルタント)

Cocktailz代表、アクセシビリティコンサルタント、視覚障害当事者 1977年東京都生まれ。先天性の視覚障害があり、2020年からはほぼ全盲の状態が続いている。2001年頃よりウェブアクセシビリティに関心を持ち、2003年よりコンサルタントとして企業や自治体・省庁などのウェブサイトにおけるアクセシビリティ改善業務に従事。2010年に個人事業としてCocktailzでの活動をスタート。障害者専門のクラウドソーシングサービス サニーバンクでアドバイザーも務めている。

Loftwork.com ウェブアクセシビリティレポートVol.1
組織の意識を揃える、障害当事者による合同レビュー会

記事を読む

ポジティブな意見も大切に。メンバーのモチベーションへと繋げよう

前回のオンラインレビューでは、課題にフォーカスする時間が多く取られましたが、今回のレポート報告では、現在のLoftwork.comで評価できる「ポジティブな意見」から報告されました。

具体的には、以下のようなことを評価してもらっています。

  • ハンバーガーメニューやフッターの文字サイズや、色のコントラストがわかりやすい
  • 画面幅がコンパクトにまとまっていて読みやすいデザインである
  • コンテンツ内の見出しが適切で、全体が理解しやすい
  • リンクテキストが適切に付与されている箇所が多い

特に、スクリーンリーダーの方からの「見出しやリンクテキストが適切に付与されている箇所が多い」という意見には、社内メンバーも大きな手応えを感じていました。「サイト更新側でも工夫している部分を評価してもらえるのは、純粋に嬉しいですね…!」といった声が挙がり、モチベーション向上につながっています。

アクセシビリティの対策は、特に小人数で取り組んでいるほど「この対応に意味はあるのか」「本当に効果が出るのか」と悩んでしまうことも少なくありません。伊敷さんは、「そういった時には、やはり褒められると嬉しくモチベーションも上がるもの。だからこそ、良かったポイントも積極的にレポートに載せたり伝えるようにしている」と補足してくれました。

人の特性ごとのたくさんの「使いづらさ」
専門家から優先すべき課題のフィードバック

改善が必要な項目については、事前に「報告書」として共有され、さまざまな特性の方にとっての「使いづらさ」がまとめられていました。レビュー対象は「トップページ」と「イベント詳細ページ」の2箇所のみでしたが、レポートは50ページ近い、膨大な内容です。講習会では、その中から特に優先度の高い4つの課題について、伊敷さんに解説をしてもらいました。

その1)ハンバーガーメニューのボタンに適切なラベルが付与されていない

まずは、サイトの隅に表示される三本線のナビゲーションメニュー、いわゆる「ハンバーガーメニュー」のボタンについて。色や文字サイズについてはポジティブな評価がありましたが、スクリーンリーダーでこのボタンを読み上げる時、「ボタン・ナビゲーション・ランドマーク」と読み上げはされるものの、具体的に何のボタンかが伝わらないという問題が明らかに。また、メニューの開閉状態がスクリーンリーダーに伝わらない点についても指摘がありました。

ボタンに適切なラベルを付与し、かつクリック/タップで開閉する際に、同時に「今の状態」を伝える仕組みを改修で追加することで、スクリーンリーダーのユーザーに対する使いやすさが改善されます。

画像:Webサイト上の3本線のアイコンをクリックするとメニューが開く
ハンバーガーメニューはその存在自体はスクリーンリーダーで読み上げられる。しかし、視覚情報以外では、これがなんのボタンかわからず、開閉状態もわからない

その2)スライダーに停止のためのUIがない

トップページに配置された2種類のスライダーには、どちらにも動きを停止する機能がありません。これは、実はかなり大きな課題です。

JIS/WCAGの達成基準2.2.2では、自動で再生されて、かつ5秒以上動き続けるコンテンツには、一時停止や再開、あるいは非表示にする機能を実装する必要があると定められています。この基準は、利用者がウェブページの他の部分へアクセスすることを妨げない、「非干渉」の達成基準のひとつであり、重要度が非常に高いもの。

停止できないスライダーや動き続けるオブジェクトは、発達障害など認知に特性のある人にとって閲覧時に気が散る要因になりやすく、閲覧を継続できなくなってしまう恐れがあります。さらに、実装の仕方によっては、同ページ内のスクリーンリーダーの読み上げを阻害してしまうものもあるそうです。(幸い、ロフトワークのトップページではそういったことはありませんでした)

画像:TOPページにあるスライダーの画面を示したもの
次に送るためのボタンや、表示中のものが何枚目であるかは表示されるが、「一時停止」や「再開」をするためのボタンがない

スライダーに「一時停止」や「再開」ボタンを設置することで、利用者がコンテンツ表示を自由に操作できる環境を提供することが必要でしょう。Webサイト制作でもよく使用されるスライダーですが、実装方法によってはユーザーの閲覧体験を著しく下げてしまう可能性があることは、今後も気をつけたい視点です。

その3)画像の代替テキストが空である、重複している

画像:TOPページに掲載される詳細ページのデザイン。画像と見出しが縦に並んでいる
記事のサムネイルの代替テキストとして、タイトルと同じ文言がデフォルトで設定されている。そのため、スクリーンリーダーでは、画像の箇所とテキストの箇所、その両方で記事タイトルも読み上げられることになってしまう。

3つ目は、画像の代替テキストに関する課題。

Loftwork.comでは、トップのスライダーやプロジェクト一覧ページなどで、サムネイル画像とリンク付きの記事タイトルが並ぶことがあります。この時、画像の代替テキストにタイトルと同じ内容が入っており、二重の読み上げになってしまうことがわかりました。あるいは、サムネイル画像やコンテンツ内の画像の代替テキストが空になっている箇所もある、という点にも指摘が入っています。

さらに、スクリーンリーダーを使っている方からは「代替テキストから、イベントなどのワクワク感がいまいち伝わってこない」というフィードバックが。これは私たちにとっても意外な気づきでした。

というのも、サムネイル画像や写真などの視覚表現のクオリティにはこだわっていましたが、代替テキストではそっけない情報の羅列になってしまい、十分に工夫できていなかったのです。

イベントを数多く開催するロフトワークにとって、「ワクワク感」を伝えることは大事にしたい要素。サイトの運用メンバーからもこれは今後の大事な課題だという反応が多く出ました。

その4)コントラストが低く視認性が低い箇所がある

4つ目は、文字色と背景色のコントラストに関する課題です。ヘッダーとフッターでは概ねポジティブな意見をもらいましたが、コンテンツ本文上ではコントラストが低く読みづらい箇所が複数指摘されました。

また、画像の上に重なる形で表示されるパンくずリストではコントラストの低さに加えて文字サイズも小さく、読みづらい、そもそも見つけにくいという指摘もあり改善が必要です。

画像:記事詳細ページのメインビジュアルに黄色いテキストが重なっているものを示すWebサイト内のキャプチャ

現場担当者からの悩みは?質問タイムででた意見

講習会の最後には、社内メンバーが普段アクセシビリティ対応に抱いている疑問について自由に質問する時間が取られました。いくつか抜粋してご紹介します。

代替テキストってどういれるのが正解?キャプションとの違いをどうつけるべき?

「代替テキストでは、つい『〜の様子』と、淡白な内容で書きがちだが、どんな工夫ができるか」という質問に対して、「最低限、alt属性が空欄になっている状態を避けることが重要」というアドバイスをいただきました。

代替テキストが空欄だと、スクリーンリーダーではその画像の存在自体が認識されません。しかし、altに最低限の情報を入力するだけで、ユーザーは画像が存在することを把握でき、詳細を補うために誰かに画像の内容を聞いたり、画像認識・解析ツールを活用したりするなど、次のアクションを取ることができます。だからこそ、「そこに画像がある」とわかることがまず重要だといいます。

さらに、代替テキストの内容についてはスクリーンリーダーユーザーの間でも好みが分かれるようで、「簡潔なものがいい」という人もいれば「細かく説明してほしい」という人もいて、当事者でも「これが正解」といえるものはないようです。とはいえ、実践的なコツとして、最初に画像上で提示されるものが何であるかを端的に示し、その後に必要であれば詳細な説明を入れるのが良い、という助言ももらいました。

また、キャプションと代替テキストの棲み分けについても質問がありました。これについては、スクリーンリーダーユーザーによれば、両者それぞれ異なる役割があるといいます。代替テキストの方には「目で見ないとわからない情報」を、キャプションには撮影者や日時などの「目で見てもわからない補足情報」を入れると良い、というアドバイスももらいました。

改善の大切さはわかったけど、日々の業務のなかで何ができるのか

あるメンバーから、「前回の勉強会から時間があったけれど、業務に追われるなかで、アクセシビリティについて改めて考えることができなかった。自分の中での意識変容がまだできていない」という率直な声も上がりました。特性のある人への配慮を意識しているつもりでも、1回の講習会で想像力を身につけるのは難しいとの意見も。

こうした意見に対して伊敷さんは、「講習会や勉強会で『アクセシビリティは重要です』といくら話しても、実感としての理解は難しい。自分の隣に当事者がいて、すぐイメージできる状況がないと、行動につながりにくい」と説明。「そもそも学校や職場で、障害のある人とない人が一緒に学ぶ・働くという場面が少なく、一緒に過ごす時間が圧倒的に足りていないとずっと感じている。これは構造的な問題だと思う」と語ってくれました。

こうした構造的な分断のなかでは、アクセシビリティの恩恵や実際の困り具合を腹落ちして理解することは難しいでしょう。まずは、一緒に時間を過ごす取り組みが必要だと感じました。

サニーバンクさんでは、逆に障害のない人がマイノリティで、それが当たり前になっているそうです。一緒の時間を過ごし、その人が「普通に生活している」ところが見えることでアクセシビリティに関する理解がより深まるとのことで、今後、サニーバンクのワーカーさんと交流するイベントも実施したいと思いました。

アクセシビリティはマラソン。息を長く、ゆっくり続ける。

さまざまな学びがあった今回の講習会。その最後に、伊敷さんからこのようなメッセージをいただきました。

「不十分でも構わないので続けてほしい。最初から100点や90点を目指そうとすると息切れしてしまう。アクセシビリティはマラソンなので、息を長く、ゆっくりでいいので続けてほしいです。」

頭ではわかってはいるものの、初めてのことや挑戦も多いがゆえに、視野が狭くなり、理想形を目指してしまっていたと、ハッと気付きを得ました。こうした気づきが得られたのは、当事者のレビューを受けられたこと、そして質疑応答を通じた伊敷さんとの対話の機会があったからこそだと思います。

最後に、講習会を担当していただいた伊敷さんから、今回のLoftwork.comのレビュー&講習会のご感想とウェブアクセシビリティに取り組む方へメッセージをいただきましたので、ご紹介します。

 

今回のオンライン合同レビューと講習会にはたくさんの社員の方々にご参加いただきました。
合同レビュー中にはオンラインミーティングツールのチャットを利用して、
「この色の組み合わせは確かに見えにくいね」
「ここにリンクがあることに気づいていなかった」
など、ご参加いただいたみなさんの間で気づきの共有や議論が自然に生まれていたのが印象的でした。

ウェブアクセシビリティに取り組み始めたばかりだと、どこから手を付けたらいいかわからなかったりしますね。また JIS や WCAG を参照しながら取り組んでいても、本当にユーザーの役に立っているのか不安になったりします。
そんな時こそ、僕たち障害のある人の声を聴いてみてください。
僕たちは遠く離れた場所ではなく、あなたと同じ世界に暮らしています。
声を一度にすべてかなえる必要はありません。ひとつでも改善できたらもうばっちりです!
声を聴いて改善するという小さなサイクルを回し続けることがとても重要であり、創造的で楽しいのです。

だからさ、アクセシビリティみんなでやろうぜ!

 

今後、この記事シリーズでは、レポートや講習会で指摘があった各ポイントを実際に改善を進めていくにあたり、どれをどの優先順で対応するかの検討についてご報告する予定です。

執筆:村田 真純,長野 彩乃/ロフトワーク
編集:後閑 裕太朗/Loftwork.com 編集部

Keywords

Next Contents

無関心から日常へ。災害へ備える意識を次世代に渡す
デザインで変わるこれからの地域防災