誰もが使いやすいウェブサイトにするために 運用で意識したいアクセシビリティの視点

  • Facebookでシェアする
  • Xでシェアする
  • インクルーシブデザイン
  • 澤野 愛ウェブディレクター

私はマークアップエンジニアとしてこの業界に入り、現在はウェブディレクターとして、主に運用業務を担当しています。ウェブアクセシビリティ対応を重視しているウェブサイトを任されて5年が経ちますが、最初は「専門的で難しそう」という印象があり、何をどうすればいいのか分からず、先輩に教わりながら一つひとつ覚えていきました。

その中で気付いたのは、「アクセシビリティはウェブサイトの構築フェーズだけでなく、運用フェーズでこそ継続的に意識し続ける必要がある」ということです。

本記事では、主に運用フェーズにおいてアクセシビリティをどのように担保していくか、現場での取り組みや工夫を交えながらご紹介します。

※ウェブアクセシビリティの概念については、下記の記事で詳しく紹介しています。
ひらくデザイン「企業サイトのウェブアクセシビリティの今とこれから」

メインビジュアル。PC、タブレット、スマホそれぞれでの表示や文字サイズなど、様々なアクセシビリティの観点が並ぶイラスト

1. 構築フェーズで必要な取り組み

運用フェーズの話の前に、前提となる新規サイト構築時やリニューアル時に必要なアクセシビリティ対応の取り組みについて解説します。

ウェブアクセシビリティ達成基準の明示

  • ウェブアクセシビリティの方針が適用されるウェブサイトの範囲を明確にする
  • アクセシビリティ方針を定めて文書化し、ウェブサイト上で公開する

この2点を行うことで、取り組みを明確に示し、企業がアクセシビリティに真剣に対応している姿勢を示すことができます。

アクセシブルなウェブデザインとコンポーネント設計

  • 読みやすいフォント、適切なコントラスト比、キーボード操作のサポートなどのアクセシビリティ基準を満たすコンポーネントライブラリを基にウェブサイトを設計する

デザインとレイアウトを統一したコンポーネントを用意することで、運用を開始した後も誰が対応してもアクセシビリティを確保することができます。こちらについてはデジタル庁が発行している「ウェブアクセシビリティ導入ガイドブック」に具体的な説明が載っているので、参考にしてください。

参考(デジタル庁発行「ウェブアクセシビリティ導入ガイドブック」)

ウェブアクセシビリティ方針に沿った試験の実施と結果の公開

  • ウェブサイトを公開する前に、ウェブアクセシビリティ方針通りの対応ができているか試験を実施する
  • 試験結果をウェブサイト上で公開する

アクセシビリティ対応に関する正確で包括的な評価を受けるためには、アクセシビリティの専門知識を持つ会社や専門家に試験を依頼することが一般的です。

試験結果をウェブサイト上で公開することで、ユーザーに対する情報の透明性を確保し、試験結果に対するフィードバックを受け入れながら継続的な改善を行います。それにより、常に最新のアクセシビリティ基準を満たすウェブサイトを維持することができます。

2. 公開直前に必要な取り組み

次に、アクセシビリティを担保したウェブサイト運用を始めるために必要な取り組みを解説します。

目指すウェブアクセシビリティ達成基準の確認

ウェブサイト運用に関わるメンバーでウェブアクセシビリティ方針を読み合わせ、目指す達成基準を確認します。また、以下のような一般的なアクセシビリティに関する重要ポイントも確認し、共通認識を持つことも大切です。

  • 文章構造の適切さ
    見出しや段落が論理的に構成されているか
  • リンクテキストの明確さ
    リンクテキストがリンク先ページの内容を明確に示しているか
  • 代替テキストの適切さ
    画像に対して適切な代替テキスト(altテキスト)が設定されているか
  • カラーコントラストの確保
    テキストと背景のコントラスト比が十分であるか
  • 動画のアクセシビリティ
    動画に字幕や手話が提供されているか

上記を認識することで、運用が始まったときにどのような観点で原稿を作成するのか、コンテンツがアクセシビリティを担保できているかを確認することができます。

原稿ガイドライン・フォーマットの用意

運用開始前に、コンテンツの原稿ガイドラインやフォーマットを用意しておくことで、アクセシビリティの知見のない人が原稿を作成する場合でもアクセシビリティを維持することができ、運用の効率をアップすることができます。ガイドラインやフォーマットの作成は、専門家が担当するケースが多いです。

3. 運用フェーズで必要な取り組み

ウェブサイトが公開され、運用フェーズに入った後は、下記のポイントに気をつけて日々のコンテンツ更新を行います。

原稿作成

文章構造

見出しや段落を適切に使用し、内容を論理的に整理します。重要なポイントや手順はリスト形式で表現するなど、情報を整理して見やすくします。複雑な表現や専門用語を避け、誰にでも理解しやすい言葉を使いながら、極力シンプルな構造にすることで、読み手に内容が伝わりやすくなります。

リンクテキスト

リンクテキストは内容を具体的に示し、ユーザーがリンク先を予測できるようにします。

テキストリンクの悪い例と良い例を示した画像。悪い例では「詳しくはこちらからご覧ください」と書かれたものが、良い例では「詳しくは下記よりご覧ください。(改行)株式会社コンセント 公式サイト」と書かれている。

「こちら」などの指示語ではなく、「◯◯のサイト」「◯◯のページ」などの具体的な表現にする。

記号の使用

単語を強調するために記号を使用すると、スクリーンリーダーなどの音声読み上げで意図しない読み上げ方をされる可能性があります。コンテンツ内で意味を持たない記号を使用しないことで、スクリーンリーダーの読み上げがスムーズになります。

意味を持たない記号を使用した場合の、読み上げのイメージを示した画像。例として、「重要」という言葉を目立たせるために前後に「★」マークを入れたテキストが、スクリーンリーダーでは「ほし じゅうよう ほし」と読み上げられる様子を挙げている。

テキストを目立たせるために記号を使用するのは避けたいところ。CSSなどでの装飾が良い。

スペースの使用

文字間隔の調整にスペースを使用することで、スクリーンリーダーで正しく読み上げられないことがあるため、不要なスペースの使用を避け、文章を読みやすく保ちます。

不要なスペースを使用した場合の、読み上げのイメージを示した画像。例として「日時」の間にスペースを入れた場合、「ひ、とき」と読み上げられる様子が描かれている

スペースが入ることで、熟語がそれぞれ単なる1文字として認識されてしまう。

画像作成

表現の構成要素

グラフやチャートの画像を作成する際には、項目の違いを装飾や大きさなど単一の要素だけで表現していないか気をつける必要があります。例えば項目Aと項目Bの違いを「色」だけで表現していた場合、見えづらいユーザーはその情報を取得・判断することができません。

グラフの表現の悪い例と良い例を示した画像。

グラフの中の隣り合う要素については、色の違いだけでなく、異なるパターンを使うことで区別しやすくなります。

画像の代替テキスト(alt)、キャプション作成

全画像に対するaltの設定

意味を持つ全ての画像に対して、画像の内容や目的を説明する適切な代替テキスト(alt)を設定します。それにより、見えにくいユーザーもスクリーンリーダーという音声読み上げ機能を使って、画像の情報を理解することができます。また、代替テキストとは別に画像の説明をキャプションとして追加することで、画像の文脈や重要性をさらに明確にできます。

図表に記載された内容の表現

コンテンツで使用されている図表に掲載されている内容が本文で全て説明されていない場合は、図表に詳細な代替テキストを設定し、画像に含まれる情報が伝わるようにします。

図表の内容が本文で全て説明されていない場合の、altの記載例を示した画像。米の生産量を示した棒グラフを例に、altに「新潟県59万トン、北海道55万トン」など数値を入れないと、棒グラフの情報が伝わらない様子が示されている。

グラフで表現されている内容を、テキストだけでも理解できるように代替テキストを作成する。

本文やキャプションで図表の内容が説明されている場合の、altの記載例を示した画像。「米の生産量のグラフ画像」というように、画像を説明するalt記載の必要性を示している。

本文やキャプションで図表の内容が説明されている場合でも、どのような画像が使われているのか、ユーザーに文脈が伝わるように代替テキストを設定します。

画像に関する表現の統一

写真、イラスト、アイコン、ロゴなどの画像を表現する際の書き方は、代替テキストフォーマットを決めて統一します。このことによりスクリーンリーダーでの内容把握が格段にしやすくなります。

altのフォーマットを決めている時と決めていない時の例を示した画像。「写真:◯◯◯◯」や「◯◯◯◯という写真」という表記が混じっている様子が描かれている。

「写真:内容説明」のように、ウェブサイトの中で統一したルールを作成して運用する。

4. 継続するための体制・仕組みづくり

ここまでフェーズごとに必要なアクセシビリティ担保の取り組みを紹介しましたが、目指す達成基準を維持し続けるためには体制の工夫も必要です。

例えば、私が担当するプロジェクトでは、運用チームに対するアドバイザーとしてアクセシビリティに詳しいメンバーをアサインしています。運用チームだけでは判断に迷う場面や、専門的な知識が求められる場面でアドバイスを得ることにより、最新の基準や技術にもスムーズに対応できます。

また、これらの運用で発生するアクセシビリティに関する課題と対応は、チャットツールの特定のチャネルでやりとりしています。

チャットツール上でのやり取りの、イメージを示した画像。「画像内テキストのコントラスト比について」「テーブルの構造について」など、話題ごとにスレッドを立てて相談している様子が描かれている。

アクセシビリティ対応に関するケーススタディを蓄積することで、別のメンバーが同じような課題に直面した際にも、検索をかけて手引きとして活用できる。また、今後ウェブサイトを改修するためのヒントにもなる。

この記事はウェブサイトの運用にフォーカスする形で書きましたが、実際には運用担当者や制作担当者だけでなく、プロジェクトに関わる全てのステークホルダーがアクセシビリティの重要性を理解し、共通の目標を持つ必要があります。

アクセシビリティに関する現状や課題を共有する場を定期的に設けて、各ステークホルダーの役割を明確にし、それぞれの責任範囲でアクセシビリティに取り組むことで、より効果的な改善が期待できます。関係者全員で、どうしたらユーザーにとってより使いやすいウェブサイトになるかを考えながら、アクセシブルな運用に取り組んでいきましょう。

[ 執筆者 ]

  • Facebookでシェアする
  • Xでシェアする

コンセントは、企業と伴走し活動を支えるデザイン会社です。
事業開発やコーポレートコミュニケーション支援、クリエイティブ開発を、戦略から実行まで一貫してお手伝いします。

ページの先頭に戻る