Loftwork.com ウェブアクセシビリティレポートVol.3
70件のレビューから見出す優先課題。細分化し、まずは実行へ

Webサイト制作に携わるロフトワークは、自社コーポレートサイト「Loftwork.com」のアクセシビリティ対応を進めています。本連載では、そのプロセスや試行錯誤をレポートしていきます。
第1回と第2回では、サニーバンクによる障害当事者の方々に参加いただいたオンライン合同レビュー会と講習会の内容と、そこから得られた気づきについてまとめました。

3回目となる本記事では、これまでのレビューや講習会の内容を受けて、実際にどの改善を優先するかを決め、具体的なアクションに起こしたプロセスをお伝えします。

まずは報告書の内容から、指摘事項をスプレッドシートにまとめました。その数、約70件。ユーザーの特性の種類やその有無、あるいは環境の違いで解釈が分かれるものもありましたが、すべてをリストアップし整理しています。

一度にすべてを対応することはできないため、この中でどこから着手するべきか、優先順位をつけることが次の課題になりました。そこで一つの基準となったのが「非干渉」の視点です。

「非干渉」とは、サイト内の要素が、ユーザーがサイト内のあらゆる情報にアクセスすることを妨げない・干渉しないことを指します。これが達成できていない箇所があると、ユーザーがサイト内の他のコンテンツに移動できず、理解が不十分になってしまうリスクにつながってしまうため、デジタル庁の「ウェブアクセシビリティ導入ガイドブック」においても「非干渉」の基準は、ウェブアクセシビリティを担保するためには「必ず達成する必要がある」とされています。

Loftwork.comでは、トップページのスライダーが「非干渉」の達成基準を満たしていない箇所として指摘を受けました。スライダーの動きが制御できないと、ユーザーによっては注意が散漫になったり、集中が妨げられてしまい、他の情報へのアクセスを妨げる可能性があります。そのため、特に優先度が高い課題と判断されました。
（情報へのアクセスを妨げる例として、認知障害や注意障害があるユーザーの中には、スライダーなど自動で動き続けるものが視界に入るとそちらに意識が向いてしまい、他の要素を見たくても集中を続けることが困難になるケースがあります。こういったユーザーにとっては、自分の意思で一時停止や左右送りの動きを制御できない要素があると、他に掲載されている情報を理解することが難しくなってしまいます。）

一方で、実装にあたっての工数や難易度、という問題もあります。その点も含めて、普段からWebサイトの開発面の調整をお願いしているWebサイト開発者の方に実装における難易度を調査していただきました。

結果として、トップページのスライダーを改修する場合、デザインや実装の面で比較的大きなやり直しが必要になることがわかりました。

この検討をしていたのは昨年11月下旬だったのですが、この段階で社内の自社Webサイトに対する「予算執行の締切」が迫っていました。スケジュールに落とし込むと、スライダーの改修を期限までに対応することは現実的に難しいことが見えてきました。

本来であれば、影響の大きいところを最優先すべきですが、すぐに取り掛かるのは難しい。また、合同レビューや講習会を経て、社内の意識が高まっているこのタイミングを逃したくないという思いもありました。関係者の関心が高いタイミングだからこそ、合意形成がしやすく、今後のアクセシビリティ対応を社内に定着させるチャンスでもあったのです。

悩みどころでしたが、ここで伊敷さんからのコメントに立ち戻ります。

「ウェブアクセシビリティはマラソン。息切れしないよう、まずはできるところから」

悩んで一つも改善できないより、小さくてもまずは一つ改善することが重要。そこで、直近のマイルストーンとして「年内リリース」を目標に、すぐに取り掛かれる改善点から対応を進める方針としました。

実施したのは、前述した調査で「非干渉」に該当しないものの、「工数が小さい」と判断された箇所です。大規模な改修が難しくても、まず「0を1に」、そして「1を2に」していくことが、継続的な改善の第一歩になると考えました。

では、実際どこを修正したのか。この記事が公開された時点で、Loftwork.comのウェブサイトには以下の修正が反映されています。いずれも小さい改善ですが、約1ヶ月の限られた時間で着実に改善を進めることができました。

リンクやボタン、フォーム入力欄などの要素について、キーボード操作時に現在アクティブな箇所を視覚的に示す枠線やハイライトのことを「フォーカスインジケーター」といいます。Loftwork.comでは、これが見えないようになっていたため、修正しました。

特に、キーボード操作を必要とするユーザーにとっては、操作対象を明確に把握できるようになりました。

サイト内の一部のテキストリンクで、クリックできる範囲が狭く、マウスやトラックパッドを使用した“細かい操作”が難しい人にとってクリックしにくい箇所がありました。
さらに、モバイル環境では、タップに反応する領域が狭いと動作上のストレスにもなるため、テキストリンクの上下の余白もできるだけクリックに対応するように調整しました。

SNSアイコンなどの画像リンクに、alt要素が設定されていない箇所がありました。そこで、適切な代替テキストを追加して、スクリーンリーダーでも内容が認識できるよう改善しました。

また、コンテンツ運用チーム内でも、「代替テキストの挿入をどのように運用に組み込むか」 を議論し、改善に着手しています。講習会でも話題に上がった「altテキストに何を入れるのが適切か」「ついサムネイルにタイトルやリンクと同じ文言を入れがち」といった課題に対し、どのようにアプローチしたのか、次回の記事で詳しくご紹介します。

今回の修正は、数多くある改善事項のうちのほんの一部です。

そのうえ、多くの人にとっては、気づきにくい部分だと思います。

しかし、今回事前に「レビュー会」「講習会」を実施したことにより、私たちの視点だけでは見えなかった「改善の余地」が、具体的な課題として可視化されていました。
特に、当事者の方々のレビューを直接受けていたことは大きく、自分たちの調査だけでは、なかなか踏み切れなかった部分も、ユーザー視点のフィードバックを得ることで、対応するべき課題として明確になったのです。

「Webサイトの改善」と聞くと大きな予算や長いスケジュールが必要になるイメージですが、実際には細分化していくことで、小さな改善も数多く存在していることがわかりました。

次回は、予算をかけずに運営メンバーで取り組んでいる「コンテンツ内のaltやリンクの設定」など、内部運営の改善の話をご紹介します。

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