BtoBマーケティングコラム 【プロジェクト事例】Webサイトのアクセシビリティ対応を進めるにあたって重要なポイントを振り返る

2024年9月4日

今年2024年4月1日の「障害者差別解消法」改正施行に伴い、2024年6月から民間の事業者も「合理的配慮」が義務化されました。これに伴い、努力義務である「環境の整備」に含まれるウェブアクセシビリティについても、今後対応を検討されている企業さまもいらっしゃるのではないでしょうか。イントリックスでもアクセシビリティ対応についてご相談をいただく機会が増えています。

今回は、過去にイントリックスが手がけたアクセシビリティ対応を含むあるプロジェクトについて、制作を担当した社員3名が「設計」「デザイン」「実装」それぞれの工程を振り返りながら、「Webサイトのアクセシビリティ対応を進めるにあたって重要なポイント」について話していきます。

吉川 奈美

2013年3月にイントリックスに入社。大手BtoB企業の戦略、リニューアル案件に情報設計／ディレクションを主軸として携わる。国内サイトだけでなく、グローバル、海外サイトも含めたサイト群のUX設計、情報設計を数多く手掛けている。

森 大樹

多摩美術大学を卒業後、番組制作やMV制作に携わったのちにWebデザイナーとなる。その後、アートディレクターとして2019年にイントリックス株式会社に入社。大規模なサイトリニューアルプロジェクトにおいて、デザインルール策定から個々のページデザインまで通してアートディレクションを行っている。

嶌田 千裕

Web制作会社のマークアップエンジニア、企業のWeb担当者を経て、2014年にイントリックス入社。運用保守・静的サイト構築（数十～百ページ規模）・CMSテンプレート設計（数千ページ規模）など幅広く業務を経験。可搬性、保守性に優れた設計・実装を得意とする。

プロジェクトの背景

―――はじめに、プロジェクトの背景について聞かせてください。

吉川：今回のプロジェクトでは、お客さまは大きく3つの目的をお持ちでした。それは、「サイト構造の整理」「ブランドの再定義/デザイン刷新」そして「アクセシビリティの対応規格とレベルの変更」です。

「サイト構造の整理」「ブランドの再定義/デザイン刷新」については、前回Webサイトリニューアル時からお客さまの事業構成に大きな変化があり、その実態にWebサイトを合わせること、またこれまでのブランドイメージを刷新することを希望されていました。

「アクセシビリティの対応規格とレベルの変更」については、グローバルでのアクセシビリティ法整備の流れを鑑みて、対応レベルを引き上げる必要性を感じていらっしゃいました。そこで、元々「WCAG 2.0 A相当」で制作されていたものを「WCAG 2.1 AA相当」に変更することに決めました。

* 【WCAGとは】 Web Content Accessibility Guidelinesの省略表記。ウェブコンテンツのアクセシビリティに関するガイドラインのこと

* グローバルでのアクセシビリティに関連する法整備については、 ぜひこちらの記事もご覧ください。

• 参考リンク
  日本を含むグローバルにおける「ウェブアクセシビリティ」関連規制の動き

アクセシビリティ対応、各工程を振り返って

要件定義を振り返って

お客さまと対応項目を整理することが重要

―――要件定義では、どのようなことを行いましたか？

吉川：サイトの大半のページで、掲載するコンテンツや使用するUIパーツは据え置くことになっていたため、まずは、現状のWebサイトと変更後の対応レベルで求められる姿とのギャップを洗い出し、それを元に、予算・スケジュールを勘案しつつ「実際にプロジェクトでやること・やらないこと」を決めていきました。

森：ギャップを可視化するにあたって、嶌田さんが WCAG の達成基準をまとめたシートを作成していましたよね。

嶌田：はい。お客さまのWebサイトを調査し、ギャップの存在するコンテンツやUIパーツを達成基準毎にシートにまとめました。それをもとに、「この部分については、前回は事情があって対象外としていましたが今回は対応したいです。」「動画については、過去に遡って対応するのは膨大な作業となるため、まずは新たに作成するもののみ対象としましょう」といったすり合わせを細かく行っていきました。

森：シートに沿いながら「この施策はやる、やらない」という整理をしたので、お客さまも対応レベルの変更に伴いどんな変化があるのか具体的なイメージを持てたのではないでしょうか。「アクセシビリティ対応を進めたいけど何から手をつければよいかわからない」というお客さまは多いと思うので、対応項目を整理する工程はこれからも必要になると思っています。

設計を振り返って

「ユーザーがわかりやすいように設計する」という根底の部分は変わらない

―――設計工程について、吉川さんにお聞きしてもよろしいでしょうか？

吉川：設計に関しては、「アクセシビリティ対応なので特別にこの点を意識しました」ということは実はそこまでありませんでした。通常のプロジェクトと同じように、ユーザーがどのようなサイトを求めているかを考えながら設計を行っていきました。

たとえば、「ボタンにつける名前を「詳しくはこちら」のような曖昧な表記にせず、リンク先のコンテンツ名を書く」、「Webサイトの一番上にグローバルナビゲーション（主要ページのリンク）を設ける」など。「誰でも情報にわかりやすくアクセスできるようにする」という、普段から意識している基本的な規則を守って設計していきました。

アクセシビリティ対応であるかにかかわらず、「ユーザーがわかりやすいように設計する」という根底の部分は変わらないのかなと思います。

デザイン工程を振り返って

ブランドの再定義とアクセシビリティ対応を両立

―――次にデザイン工程について、森さんにお話しいただいてもよろしいですか？

森：デザインでは、「アクセシビリティのAAレベルに準拠しつつ、ブランドの再定義も行う」というミッションがありました。お客さまは新しいブランドイメージや先進的な印象を、ビジュアル面で表現することに重点を置いていらっしゃいました。ですので、アクセシビリティに準拠していても、キービジュアルがこじんまりと見えてしまうのはよくないわけです。「ヘッダーの部分までキービジュアルをしっかり見せたい」という要望をいただいていたので、その要望を叶えつつ、アクセシビリティにも配慮したデザインを考えていきました。 具体的には、文字色と背景色のコントラスト比を細かく調整しましたね。

デザイン制作におけるアクセシビリティ対応のひとつに、文字色と背景色のコントラスト比を一定以上に保つことがあります。たとえば、白の文字に対して薄グレーの背景だと読みにくいという方がいるので、一定のコントラスト比を保って表示しなければならないというものですね。 今回のお客さまのプロジェクトでは、文字色と背景色のコントラスト比を一定に保つだけでなく、背景色の背後にさらに画像を配置するパターンを採用していました。この場合、画面のサイズが変わると背景の画像の位置も変わってしまうので、コントラスト比がとれているかを測るのが難しかったです。 解決策として、まずは背後に画像を置かず、白を背景に置いた際のグレーを基準にしました。こればかりは、実物をお見せしないとわからない部分が多いかと思うのですが、白の背景に対するグレーの見え方を基準にすることで、コントラスト比の判断基準についてはクリアできました。

また、「数値上はコントラスト比が確保できているけれど、画像の種類によっては誰にとっても読みにくい」というケースがありました。そのようなケースでは、お客さまとやり取りをしながらいろいろな画像を配置してみて、テキストが読みやすくなる背景画像をセレクトすることで解決を図りました。

実装工程を振り返って

インタラクティブなUIのアクセシビリティ対応を実施

―――実装工程については、嶌田さんにおうかがいできればと思います。

嶌田：実装で、特徴的だったのは、アコーディオンやタブといったインタラクティブなUIのアクセシビリティ対応を行ったことですね。

例えばアコーディオンなら、WAI-ARIA（ウェイアリア）という技術仕様を追加することにより、「ここに開閉するコンテンツが存在する」「この項目は今開かれている／閉じられている」といった情報を機械可読な形で付加したり、キーボード操作を行いやすいようJSの処理を追加したりしました。これらは、ARIA Authoring Practices Guide や他社の事例を参考にしつつ、運用時に更新箇所が増えて手間になったり、更新し忘れてかえって悪影響が出たりしないような形を検討しながら進めました。

プロジェクト全体の工数

要件定義の内容によって工数は変動する

―――今回のプロジェクトでかかった工数に何か変化はありましたか？

吉川：私が担当した設計フェーズでは、工数はその他のプロジェクトとほとんど変わりませんでした。森さん（デザイン担当）と嶌田さん（実装担当）のフェーズではどうでしたか？

森：デザインでは、通常のプロジェクトに比べて約1.3倍の時間がかかりました。表現したいデザインとアクセシビリティ対応の両立が難しいケースがあり、最終的にどのポイントを押さえて落としどころを探っていくかの話し合いに時間がかかりました。また、すり合わせた方向性を実際のデザインに落とし込む作業にも時間を要しましたね。作ったデザインを都度お客さまにみていただきながら修正していきました。デザインの方向性を話し合うだけでなく、デザイン制作の段階でも細かい調整を行ったので、当初の予定よりも2か月ほど制作期間がかかりました。

嶌田：実装は、通常のプロジェクトに比べて約1.5倍の時間がかかりました。対応項目の整理や、インタラクティブなUIパーツの作りこみ、実装後に行った、「スクリーンリーダーで実際にテキストを読み上げさせてみて、きちんと意味が通じるかを確認する」といった作業が追加になったためです。ちなみに、すべてのアクセシビリティ対応のプロジェクトで同じ工数がかかるというわけではありません。要件定義の内容によって工数は変動します。

アクセシビリティ対応のWebサイト制作で重要なポイント

―――今後アクセシビリティ対応を考えている企業さまに向けて、皆さんが重要だと感じるポイントについて教えてください。

吉川：今回のプロジェクトを通して、企業さまのなかで「なぜアクセシビリティ対応をしたいのか」という意義を明確にしておくことが重要だと思いました。 それは、「ESG経営の一環としての企業価値向上」や、「より基準の厳しい海外での訴訟リスク回避」など、さまざまな目的があるかと思います。 その点が定まっていないと、アクセシビリティ対応とその他の要望が対立した際に、判断の軸がブレて中途半端なものが出来上がってしまう可能性があります。

森：僕も吉川さんの言葉がすべてだと感じますね。デザインではまさしくアクセシビリティ対応とビジュアル面でのご要望が対立する場面がありましたが、お客様がその点を明確にしてくださっていたからこそ途中で方向性がブレることなく、我々イントリックスと共に考え抜きながら納得のいくものがつくれたのではないかと思います。

嶌田：私は、「できる範囲から始めるのもあり」だとお伝えしたいです。 今回のプロジェクトに限らず、「〇〇については、今回は対象外とする」「〇〇については重要度が高いコンテンツのみ実施する」といった落としどころを設ける事は少なくありません。一気に片付けようとし過ぎて身動きが取れなくなるよりは、できる範囲から対応を進められることをおすすめします。

【まとめ】企業側、情報を受け取る側、どちらにとっても優しいWebサイトを作るお手伝いがしたい

―――最後に、「イントリックスが企業のアクセシビリティ対応をサポートする考え方」について、代表して吉川さんにお話しいただいてもよろしいでしょうか。

吉川：イントリックスの役割は、お客さまの立場に寄り添って、アクセシビリティ対応を一歩でも前に進めることにあるのではないかと考えています。 アクセシビリティ対応によって、コンテンツが検索エンジンにとっても情報を取得しやすくなったり、サイトを利用できる人が増えることにもつながったりと、企業にとってもメリットが増えます。

理想を言えば、すべての機能がそろった完璧なものを出したいということが企業さまの本音だと思います。 ただ、それができていない理由、例えば「予算」「スケジュール」「運用体制」といったものがあることもまた事実だと思うんですね。アクセシビリティ対応を100％達成する理想を目指しつつ、まずは現実的にその一歩を踏み出すお手伝いができることがイントリックスの役割だと考えています。