Beeworks Thoughtful design

Webアクセシビリティ推進への取り組み。ガイドライン理解からクライアントワークの活用まで

ビーワークスがWebアクセシビリティにおいて提供できる価値と、そのためにどのような取り組みを社内で行ったかをご紹介します。
Webデザインのパートナーを探している企業の担当者の方はもちろん、社内のWebアクセシビリティ意識を向上したいと考えている方の参考になれば幸いです。

プロジェクトの背景

昨今、Webアクセシビリティの対応を急ぐ企業が増えています。背景として、デジタル技術の向上や、Webサイトが公共的に使われるようになってきたこと、2024年4月1日の「改正障害者差別解消法」の施行などが後押しになっていると考えられます。
わたしたちビーワークスも、Webアクセシビリティの対応力向上は急務と考え、社内の研究活動を通して知見を深めてきました。

ビーワークスでできること

わたしたちが目指したのは、制作のポイントを理解しているだけでなく、プロジェクトに最適な対応方針を提案し、クライアントをリードできるパートナーとなることです。
すでにWebアクセシビリティ向上を目的とした実績も複数ございます。
ここからは、わたしたちがクライアントワークで提供できる価値や、課題解決のアプローチをご紹介します。

プロジェクトにあわせた対応方針の検討

どのようなサイトであれWebアクセシビリティに配慮することが望ましいものの、一度にすべてを解決することは難しいという状況もあるかと思います。大切なのは、できるところから対応を進め、長期的に改善を続けていくことだとわたしたちは考えます。

わたしたちは制作経験豊富なデザインパートナーとして、実現に向けたスケジュールやコスト感もふまえ、解決策を検討します。一度にすべてを解決できない場合は、優先度の高い項目の検討や、長期的な進め方の提案も可能です。

実際に、予算・納期が決まっているなかで、Webアクセシビリティに最大限対応するにはどうすればよいかというご相談をいただいたことがあります。
わたしたちは現状のサイトを調査した上で、考えられるアクセシビリティ対応を洗い出し、それぞれの対応の重要度、必要な期間・工数も検討してご報告しました。
そのリストをもとに担当者の方とすりあわせを行い、予算・期間のなかでどの対応を優先的に進めるかを決めていきました。

推進チームH
推進チームHまずは「一部準拠」から進める企業や、一部ファイルを対象外としてできるところから「準拠」する企業もいらっしゃいます。

適合レベルをどうするか、準拠するか一部準拠とするか(※)といった対応方針の決め方に悩まれている方や、そもそも何から検討を始めれば良いかわからないという方も、ぜひご相談ください。

適合レベルとは、Webアクセシビリティの一般的なガイドライン「WCAG」が勧告している達成レベルです。準拠・一部準拠とは、ウェブアクセシビリティ基盤委員会が定義している対応度合いの表記です。(後述)

独自ガイドラインの読み解きと対応方針の提案

企業によっては、Webアクセシビリティの対応ガイドラインを独自に定められている場合もあるかと思います。また、Webアクセシビリティとは別にデザインガイドラインも定められており、その両立を目指さなければならない方もいるかもしれません。

ある企業の担当者の方からは、全社のWebアクセシビリティガイドラインが定められ、自部署のWebサイトでも対応を求められているが、知見が少なく内容を理解することも難しい、というご相談をいただきました。

わたしたちはまず企業独自のWebアクセシビリティガイドラインを読み解き、どのような対応が必要なのかを整理。その後、デザインのガイドラインや現状のWebサイトと照らしあわせ、具体的な対応方針を提案しました。
また、全社のWebアクセシビリティの管理者に対して、担当者の方が対応状況を説明するためのドキュメント作成も支援いたしました。

推進チームM
推進チームMビーワークスはコーポレートサイトの制作実績も多く、ガイドラインの読み込みに慣れたメンバーも在籍しています!

既存サイトの調査・改修

大がかりなリニューアルを検討する前に、現状のサイトのWebアクセシビリティがどこまでできているのかを確かめたい方もいるのではないでしょうか。
わたしたちは独自で作成したチェックリストを用いて、達成基準の適合状態を調査いたします。
調査のみご依頼いただくこともできますし、改修が必要な箇所があった場合は、別途要件定義フェーズを設け、現状の仕様の確認や改修方針の提案も可能です。

実際に、Webアクセシビリティの必要性は感じているものの、現状のWebサイトにどのような課題があるのかわからず不安というご相談をいただいたことがあります。
わたしたちは、まずは主要ページを対象とした、ミニマムな調査の実施をご提案しました。調査を実施することで担当者の方が現状の課題を把握でき、適切な予算と期間を確保した上で、改修フェーズへ進むことができました。

推進チームS
推進チームS現状を把握することで、できるところから少しずつ改善していくか、抜本的にリニューアルするかといった議論も進みやすくなります。

ビーワークスが大切にするWebアクセシビリティのポイント

ここからは、実案件や研究活動を通じて、わたしたちが大切だと考え、意識するようになったWebアクセシビリティのポイントをご紹介します。

迷ったらユーザー目線で考える

当たり前のことではありますが、Webアクセシビリティの本来の目的はWCAGの達成基準をクリアすることではなく、どのような方でも情報にアクセスしやすくすること。デザインや実装方法に迷ったときは、どうすればユーザーが情報にアクセスしやすいかを想像することに立ち返っています。

推進チームN
推進チームNWCAGには、各項目の最初に「なんのための達成基準か」といった目的が記載されています。細かい達成方法を読む前に、目的を確認するのがおすすめです。

制作のあらゆる工程で意識する

Webアクセシビリティは、コーディングの工夫だけで実現できるものではありません。見出しやラベルといったテキスト、配色を含めたデザイン、入力フォームの仕様設計など、さまざまな工程で配慮が求められます。
Webアクセシビリティ対応が求められる案件では、わたしたちは職種を問わずすべての制作工程で留意し、デザインするよう心がけています。

推進チームF
推進チームF別の言い方をすると、後から簡単に追加できる要件ではないのです…。プロジェクト初期からすりあわせておくことが大切ですね。

定期的なアップデートを心がける

日本で一般的に参照される国家規格である「JIS X 8341-3:2016」は、WCAG2.0を基としています。しかし2018年にはWCAG2.0の改訂版としてWCAG2.1が、2023年にはWCAG2.2が勧告されており、これらを基とする形で規格がアップデートされる可能性もあります。
多忙な日々のなかでは忘れがちになってしまいますが、現在の基準をゴールとせず改善を重ねることが大切であると、自戒もこめて考えています。

推進チームM
推進チームMスマートフォンの普及など、デバイスの変化に応じて求められる対応も変わります。5年後10年後は、またガラリと変わっているかもしれませんね。

ビーワークスの取り組み

ここからは、実際にわたしたちが行った研究活動の進め方をご紹介します。

まずは活動の中心となる8名の有志を推進チームとしてアサイン。Webアクセシビリティはさまざまな職種に関わる領域のため、ディレクター、デザイナー、エンジニアのなかから、バランスよくメンバーを募りました。

研究活動は、大きく分けて以下のプロセスで行いました。

  1. ガイドラインの読み込み・議論
  2. 達成基準を制作の難易度で分類
  3. 独自チェックリストの作成
  4. フレームワーク化と社内浸透

それぞれ詳しく紹介します。

1. ガイドラインの読み込み・議論

まずは、Webアクセシビリティの一般的なガイドライン「WCAG(Web Content Accessibility Guidelines)」を読み込むところから始めました。毎週定例会を設けてひとつずつ丁寧に読みあわせをし、解釈が分かれた箇所についてはチーム全体の見解をまとめていきました。

ガイドラインには3つの達成レベルがありますが、ひとまずはレベルAとAAの理解を目標としました。
レベルA・AAには50個の「達成基準」があり、それぞれに複数の「達成方法」があります。ビーワークスとしてはどの達成方法を採用するか、といった議論もあわせて行いました。

推進チームN
推進チームN「こういうよくある実装はNGなのか」「どのようなケースで起こりがちか」など議論しましたね。ときには1つの項目に1時間近く費やすことも…(笑)。
共通のシートに各自の見解をコメントし、すりあわせをしました

2. 達成基準を制作の難易度で分類

達成基準のなかには、制作工数と期間をしっかり確保しなければ達成が難しいものもあります。一方で、普段通り丁寧に制作を行えば自然と達成できる項目もあります。そうした制作時のハードルを検討し、達成基準ごとの難易度を分類しました。

これは難易度が高い項目を排斥しようという意図ではなく、クライアントをリードし、要件定義をスムーズに進める判断材料とするためです。納期や予算、独自ガイドラインの遵守など、優先度の高い要件が他にもあるプロジェクトでWebアクセシビリティの相談をいただいた場合でも、「これは今回の予算でも配慮可能」「これは制作期間がかかるため順次対応とする」といった整理・提案を行い、議論を推進することができます。

推進チームT
推進チームTたとえば、動画も対応する場合はキャプション等が必要なため、そのぶんの制作工数がかかります。インタラクティブ性の高いコンテンツも、達成難易度が高くなりがちです。

また、難易度を見える化することで、スキルのステップアップの指標としても役立ちます。まずは簡単かつ重要な項目から取り組むことで社内の意識を高め、ビーワークスの「当たり前にできる範囲」を広げていきたいと考えています。

達成基準ごとの難易度を一覧化し、社内で共有しました

3. 独自チェックリストの作成

ウェブアクセシビリティ基盤委員会では「JIS X 8341-3:2016」の対応度合いを「準拠」「一部準拠」「配慮」の3つに定義しており、「準拠」もしくは「一部準拠」していることを発信する場合は、試験の実施が必要になります。

参考:ウェブコンテンツの JIS X 8341-3:2016 対応度表記ガイドライン(新しいウィンドウが開きます)

わたしたちは、制作から試験までを自社で一貫して対応できるよう、独自のチェックリストを作成しました。制作視点での確認しやすさも加味し、「画像」「テキスト」「リンク」といった対象物ごとにチェックを行うことで、各達成基準が適合しているかを検証できるようにしています(※)。

Webアクセシビリティ対応が要件に含まれる案件のみ、チェックを行います

推進チームF
推進チームFチェックの際はVoiceOver等の支援技術を用いて行います。
作成したチェックリストのイメージ

4. フレームワーク化と社内浸透

内容の理解を深めた後は、制作時のポイントや注意点への落とし込みを行いました。
社内では、ある程度の定石が存在するデザインパターンをフレームワーク化し、参照できるようにしています。これらをWebアクセシビリティの観点も盛り込みながらブラッシュアップすることで、より多くの案件で配慮の行き届いた制作が行えるようにしています。

また、推進チーム主催で社内ウェビナーも実施。達成基準の考え方や制作時のポイントを解説し、アーカイブ動画をいつでも閲覧できるようにして、社内に浸透するよう働きかけています。

推進チームK
推進チームK「フレームワーク班」と呼ばれる別のチームとも連携して活動しています。

Webアクセシビリティのお悩みは、ぜひご相談ください

Webアクセシビリティ対応は、機械的にガイドラインと照らしあわせるのではなく、内容を正しく理解して対応方針を定めるとともに、それを実現するクリエイティブ力も必要になる領域です。
わたしたちビーワークスは、方針策定のサポートや要件定義だけでなく、実際のサイト制作や試験まで一貫して対応いたします。デザインパートナーをお探しの方は、ぜひ一度ご相談ください。

公開日:2024/4/1

当ページに掲載の内容について、一切の転載を禁止いたします。

関連実績

Related works

関連ケーススタディ

Related case studies

ビーワークス

技術で高めていくデザイン力。チームで学びスキルを高め合うビーワークスの社内ゼミ活動
  • モーションデザイン
  • インタラクションデザイン
  • 3DCG
  • 研究活動
Web制作 / 広告・販促事業 制作事例 紹介資料

Web制作やブランディングを中心とした実績やプロジェクトの進め方のほか、サービスの特長や実際のお客さまの声をご紹介します。