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

ロフトワークは、Webクリエイティブのプロフェッショナルとして、さまざまな企業、大学、自治体のWebサイト制作に携わっています。

その中で、近年は「アクセシビリティ AA準拠」などの要件が含まれるご相談が増えてきました。ロフトワークではこれまでアクセシビリティの指標でもある、「JIS X 8341-3」や「WCAG」の規格に基づいた試験の実施経験もあり、Web構築・リニューアルにおけるノウハウを徐々に蓄積してきています。

その一方で、自社のコーポレートサイト（Loftwork.com）には、アクセシビリティに関する課題が依然として多く存在しており、長らく改善に着手できていませんでした。

2024年4月に施行された改正障害者差別解消法では、事業者に対して社会的障壁を除去するための「環境の整備」を努力義務として求めており、ウェブサイトにおいてはアクセシビリティの確保がこの「環境の整備」にあたるといえます。

「すべての人のうちにある創造性を信じる。」という理念を掲げるロフトワークにとって、誰もが同じように情報が取得できるよう、アクセシビリティの確保へと実践を進めることは不可欠です。こうした認識のもと、Loftwork.comのアクセシビリティ対応を開始しました。

とはいえ、事業者がウェブアクセシビリティを確保するには、多くの障壁が伴うもの。一筋縄ではいかないなか、私たちも試行錯誤を繰り返しながら対応を進めています。

この連載では、そうしたリアルな実態も含め、私たちが取り組むプロセスや実施内容、その経過についてレポートしていきます。初回では、「最初の一歩」として実施した障害当事者によるレビュー会の様子と、そこから得た気づきをお届けします。

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

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

「アクセシビリティ対応って、何から始めればいいんだろう？」

Loftwork.comでもアクセシビリティ対応を目指して運用メンバーで動き出しましたが、改善に取り組もうとしても、具体的にどこから進めればいいのかわからない、という最初の壁に直面しました。

たとえば、申し込みフォームに[必須]の文言を追加したり、運用メンバーに「altを設定しましょう」と呼びかけたりと、少しずつ取り組みを始めていましたが、なかなか軌道に乗らない状況が続いていました。

デジタル庁が公開している「ウェブアクセシビリティ導入ガイドブック」を参考に、方針を策定し、試験し、修正する……というプロセスも検討しましたが、やるべきことの多さに圧倒され、最初の一歩を踏み出す段階で迷ってしまったのです。

さらに、運用しながら改善を進めるには多大なリソースが必要となり、かえって「試験をすること」自体が目的化してしまうのではないか、という懸念も生じていました。

そうして煮詰まっていた私たちが出会ったのが、サニーバンクさんが提供する障害当事者によるウェブアクセシビリティ診断です。

サニーバンクのウェブアクセシビリティ診断は、複数の特性を持つ障害当事者の方々に直接レビューしてもらえるサービス。社内での議論や機械的なチェックだけでは見えてこない、実直な意見を知ることができます。

私たちがこのサービスを依頼しようと判断したのは、以下の3つの理由を踏まえてでした。

「障害」と言われると、「視覚障害」や「聴覚障害」といった「わかりやすい」障害にのみ注目しがちですが、実際には色覚特性や弱視、発達障害などの認知特性、上肢障害をはじめとした操作系の特性など、ユーザーの特性は多種多様、程度も色々です。今回の合同レビューは、多角的な特性・利用手段の視点からWebサイトを評価するという点が特徴的でした。

レビューを通じてJISやWCAGの試験とは異なる「重みづけ」が得られるという点も、今回レビュー会参加を決めた理由の一つです。

これらの試験では、適合レベルによって各要件に重要度・優先度の重みづけがされていますが、実際には、ユーザーにとってより切実な課題とそうでないものがあるはず。当事者が実際に「つらい」と感じている問題を優先的に把握し、対応できることは大きなメリットだと考えました。

ウェブアクセシビリティの改善には、組織全体での取り組みが欠かせません。一方で、トップダウンで指示されただけではメンバーの意識はなかなか変わらないもの。そこで、Webサイトの更新に関わるメンバーが、自分とは異なる視点を持った人の「生の声」を聞くことで、より良い想像力と工夫が働くきっかけになるのではないか、と考えました。

そして、「外部パートナーとの共創」「ユーザー目線のUI/UX設計」を大切にする私たちロフトワークにとっては、アクセシビリティを考える上で、当事者の声を聞くことは重要なプロセスといえます。

今回は、オンラインレビューで特に印象的だったフィードバックを共有します。
なお、レビュー内容には障害特性と直接結びつかない場合や、そのまま改善を行うと逆にアクセシビリティを損なう可能性があるものも含まれます。それを前提としても、まずは当事者の「率直な声」を聞くことが大切だと考えました。

「Works」の一覧ページなどで表示される、ページ全幅に広がるリンクエリア。マウスオンすると、背景色が黄色に変わります。この演出について、以下のような意見があがりました。

• 全幅なのでスクロールするとマウスが必ず通過するが、その通過のときにhover（マウスオン）の演出でチラつくのが気になる
• 文字のサイズに対して背景の面積が大きいので、hoverして黄色になると見づらくなる

これらは、マウスオンによって大きな面積の輝度が高くなり、スクロール時にチラつきや疲れを感じる、という意見です。一方で、普段ブラウザを拡大して使用するユーザーからは「黄色い帯があることでリンクの存在に気づける」というポジティブな声もありました。

テキストの文字サイズにメリハリがあってわかりやすいという意見がある一方で、以下のような可読性・視認性に関する指摘もありました。

• 小さいテキストが“小さすぎて”読みにくく、見落としてしまう
• コントラスト比が低い装飾やテキストがあり、読みづらい

小さなサイズのテキストは、補足的な情報だからと、意図的に小さくしていました。しかし、「そこに何かがある」と気づくとユーザーは読もうとしてしまい、かえって負担になってしまいます。この指摘には、当日参加したロフトワークメンバーからも納得の声が上がりました。

リニューアル案件でも意見が分かれがちなスライダー表示。Loftwork.comのトップページ上のスライダーについても、多くの意見が寄せられました。

• スクリーンリーダーで非表示のコンテンツまで読み上げられている
• スライダーの動きを止めるUI（停止ボタンなど）がない
• 動きが速すぎて目が疲れる
• 画像上のタイトルテキストが長すぎてタブレットでは表示が崩れる
• 背景画像に重なるテキストが読みづらい

スライダーは、複数のコンテンツを省スペースで表示できる便利な機能です。しかし、アクセシビリティの観点で見ると、スライダーを採用すること自体が読みづらさや使い勝手の悪さにつながる場合もあります。

レビューを受けている中で、運用者側からも多くの意見が出ており、閲覧側だけでなく、Webサイト運用側にとっても普段から悩みや葛藤の多いエリアであることが窺えました。

レビュー会を終えて、参加したメンバーからは、以下のような前向きな感想が寄せられました。

• 普段見落としてしまっていた箇所を言及してもらえた
• 自分にない視点からのレビューをもらえて、貴重な体験だった

閲覧ユーザーの困りごとの声を直接聞くことで、これまで想像できていなかった「“困っている人”が何に困っていて、それがなぜ生じているのか」を知ることができました。これにより、関係者全員でウェブアクセシビリティ改善の必要性をより強く自覚できました。

また、オンラインレビューを通じて改めて感じたのは、ウェブアクセシビリティ対応は「0か100か」ではないということ。重要なのは、「0から1」を積み上げていくプロセスと、その継続です。誰かが困っているポイントを把握し、一つずつ解消していくことで、Webサイト全体の使いやすさを理想へと近づけられると再認識しました。

もし「何をどう始めれば良いかわからない」と感じている方がいれば、ぜひサニーバンクの「ウェブアクセシビリティ診断」も検討してみてください。

私たちも、今回のレビューを通じて得た気づきや意見をもとに、これから具体的な改善に向けて動き出していきます。

次回は、今回実施したオンラインレビューを踏まえて、より実践的な改善点を考えるために開催された、サニーバンクによる講習会の様子についてお伝えする予定です。引き続き、この連載では私たちのウェブアクセシビリティへの取り組みを少しずつお届けしていきます。