ウェブアクセシビリティ実践録 Vol.4
毎日更新の現場から始めた、コンテンツ運用の試行錯誤

Webサイト制作に携わるロフトワークは、自社コーポレートサイト「Loftwork.com」のアクセシビリティ対応を進めています。本連載では、そのプロセスや試行錯誤をレポートしていきます。

第1回と第2回では、障害当事者の方々に参加いただいたオンライン合同レビュー会と講習会を通じて、私たちが直面した課題と気づきについて紹介。続く第3回では、70件にのぼる指摘項目の中から優先課題を抽出し、実行に移すまでの流れをまとめました。

そして第4回となる今回は「サイト運用における工夫」がテーマです。

事例記事やニュース、コラム、イベント告知など――Loftwork.comには年間200件以上のコンテンツが公開され、日々多くのメンバーが更新作業に関わっています。こうした膨大なコンテンツを抱え、随時更新されるウェブサイトにおいて、運用段階でどのようにアクセシビリティ対応を進めていくのか。本記事では、その中でも特に「altテキストの入力」と「リンクテキストの示し方」の2点に注目し、私たちの試行錯誤を紹介します。

レビュー会で印象的だったのが、「altテキスト」に関するスクリーンリーダー（音声読み上げ機能）利用者の声です。「altテキストが入っていないと、そこに画像があることすら伝わらない」ーーこの指摘は、私たちにとって大きな気づきになりました。逆に言えば、最低限altテキストがあれば画像の存在が伝わり、詳細は人に尋ねたり、AIに説明してもらったりすることもできる、というのです。

正直に言うと、これまでLoftwork.comではaltテキスト入力を必須にしておらず、ほとんどの画像に設定されていませんでした。つまり、私たちのコンテンツは、スクリーンリーダーを利用するユーザーに「画像が存在すること」すら届けられていなかったのです。

Loftwork.comの多くの記事では、プロジェクトの図版や写真など、本文以上に重要な役割を果たす画像が使われています。「プロジェクト」という形のないものを紹介する際、全体像や雰囲気はテキストだけでは表現しきれません。各ビジュアルは本文を補足する以上の意味を持っています。

複数のステークホルダーが関わる運用において、ルール変更は合意形成に時間がかかり、実行までのフローも重くなりがちです。さらに、自分たちに最適化しようとして要件を複雑にすると、かえって現場に浸透しません。

そこで私たちは、ルールを徹底的にシンプルにしました。「すべての画像にaltテキストを必ず入れる」、これだけです。もちろん品質の議論は重要ですが、まずは「0を1にする（未設定をなくす）」ことを最優先に。品質基準の細部を詰めるよりも、altテキストの設定箇所を確実に増やすことに注力しました。無論、各メンバーがTipsを学び、品質に関してもその時の最善を尽くす、という姿勢をもつことが前提ではあります。

「altテキストを必ず入れる」というルールはシンプルですが、実際に運用してみると負担は想像以上でした。Loftwork.comの記事には1本あたり10点前後、多い場合は20点以上の画像が掲載されます。altテキストを考えて記入するまでに、1点あたり2〜3分かかると、1記事だけで30分〜1時間近い工数になる計算です。

ゆえに、AIの力を借りることにしています。ChatGPTなどの生成AIチャットツールに原稿と画像を共有し、altテキストの原案を作成してもらうのです。

さらには、ChatGPTの「プロジェクト」、Geminiの「Gem」のような、複数チャットを統合できる仕組みを活用し、記事本文と画像さえ共有すれば、精度の高いaltテキストが作成できるように工夫しています。ざっくりと、以下のような流れです。

段階的なフローを組まなくても、「画像を渡してaltテキストを作って」と依頼するだけでも十分なテキストが戻ってきます。しかし、前述したフローに従うと、記事の文脈に沿ったaltテキストを生成してくれることがメリットです。（*前提プロンプトの一例を、記事の最後におまけとして紹介しています）

ここで重要なのは、AIはあくまで原案を出す存在だという意識です。出力をそのまま使うのではなく、「この画像で何を伝えたいのか」を自分の頭で考え直し、修正や追加指示を行う。そのプロセスを通じて、記事全体で伝えたいメッセージを再確認できるのも大きなメリットです。コンテンツ制作者にとって、それは一種のフィードバックの機会にもなっています。

altテキスト設定の運用を始めてから半年ほどが経ちました。チーム内の意識は確実に高まりましたが、それでも抜け漏れはゼロにはなりません。「わかってはいても、公開作業に追われるとどうしても後回しになる」という声も聞かれます。

これはLoftwork.comに限らず、多くのWebサイト運用で起こり得ることだと思います。複数の記事を同時に扱い、締切に追われる中では、アクセシビリティ対応は後ろに押しやられがちです。

結局のところ重要なのは、公開前に「altテキスト作成のための10〜15分」を計画的に組み込めるかどうか。そして定期的に自分たちの対応状況をチェックし、改善を続けられるかどうかです。方針や仕組み、AIのサポートがあっても、最後に実行し続けるのは人間です。私たちがどんな情報を誰に届けたいのか、想像を働かせながら、altテキストを含めたコンテンツ作りを行なっていくことが大事だと実感しています。

テキストリンクは、多くのWebサイトで使われる要素ですが、アクセシビリティの観点でもっとも問題が出やすい部分のひとつです。Loftwork.comでも以前から「どんな表現がわかりやすいのか」「どう入れるのが正解なのか」と悩むことが多く、何度か調査や議論を重ねてきました。

今回のレビュー会で特に指摘は受けませんでしたが、むしろこれを機に「きちんとルールを決めて運用しよう」とチーム内で合意しました。

私たちが最初に設定したルールは以下の通りです。

このルールは、デジタル庁の「ウェブアクセシビリティ導入ガイドブック」に示されている方針を参考にしながら、Loftwork.comの運用に合わせてシンプルに落とし込んだものです。

もちろんこれだけで全てのケースに対応できるわけではありません。たとえば「ボタンリンクはどう扱うのか」「一斉配信メールではどうするのか」といった課題はまだ残っています。

ただし大切なのは、最初から全てを網羅しようとしないこと。まずはルールを決めて現場に浸透させ、改善を止めないことを優先しました。これまでの取り組みでも繰り返し強調してきたように、

「ウェブアクセシビリティはマラソン。まずはできるところから」

この言葉の通りです。0から100を一気に目指すのではなく、0を1にし、1を積み重ねる。その意識を持つことが何より重要だと考えています。

Loftwork.comには、アクセシビリティやユーザビリティの観点から、まだまだ改善すべき点が数多くあります。優先度についても意見は分かれるでしょう。

これは内省をこめて述べるのですが、企業という組織のなかで働く私たちにとって、アクセシビリティ対応は「つい後回しになりやすい」ものだと思います。「別の仕事で忙しいから」「周囲の理解が進まないから」「会社からは評価されないから」など、心理的なハードルを乗り越えなければなりません。

だからこそ、一歩を踏み出すためのシンプルなルール設計と、継続の仕組み作りが欠かせません。そして、その一歩を動かすには「きっかけ」が必要です。

今回はみんなでサニーバンクの「合同レビュー会・講習会」を受けたことで、チームメンバーの意識を揃えられたことが大きな「きっかけ」になりました。これは後日談ですが、予算承認をした上長から、以下のようなことを言われました。

「自分たちでも調べられるであろう、アクセシビリティのレビューにお金を出すのは、正直悩んだ。時代的な流れや、みんなの興味を考慮して承認したんだよね。でも、実際お願いして良かった。みんなの意識も変わったし、止まっていたものが動き出したなと思う。」

思えば、私たちロフトワークは、プロジェクトの中で常に「外部性」を大事にしてきました。自分たちだけでは辿り着けない発想や表現を、多様なクリエイター・実践者たちとともに形にしてきたのです。自社サイトの改善に関しても同様で、外部性、とりわけ当事者視点の意見を伺うことが必要だったんだな、と今では思います。

もし、ウェブアクセシビリティ対応について、動けずに悩んでいるという方がいれば、「当事者の話を聞く」という機会をぜひ設けてみてください。チーム全体で一歩を踏み出すための大事な機会になると思います。

本連載のレポートはひと区切りとなりますが、私たちのアクセシビリティ改善の取り組みはこれからも続きます。

繰り返し強調してきたように、ウェブアクセシビリティはマラソンです。大切なのは、一度決めたルールをどこまで継続できるか。そして、運用の現場で「さまざまなユーザーを思い描けるか」という意識を持ち続けられるかに尽きると思います。

この連載を通じて、私たちの試行錯誤が少しでもヒントやきっかけになれば幸いです。ここまで読んでいただき、ありがとうございました。

私たちがChatGPTにaltテキストを仮作成してもらう際に使用しているプロンプトを共有します。あくまで弊社の場合であり、アップデートの余地もたくさんあるので、あくまで参考程度としてご活用ください。（AIに自社サイトの前提を伝えた上で、一緒にプロンプトを考えてもらうのが最もおすすめです。）

執筆：長野 彩乃・後閑 裕太朗（株式会社ロフトワーク）
企画・編集協力：村田 真純（株式会社ロフトワーク）