ja
デジタル庁

誰もがアクセスできるウェブを設計・運用するための初心者向けガイドブック制作

誰一人取り残されない人に優しいデジタル化をの実現をめざすデジタル庁は継続的にウェブアクセシビリティの向上に取り組んでいますTakramデジタル庁の対外的な施策の一つとして初めてウェブアクセシビリティに取り組む行政官や事業者そして一般の方々に向けてその考え方や取り組み方のポイントをまとめたウェブアクセシビリティ導入ガイドブックの制作をサポートしました

ウェブアクセシビリティ導入ガイドブック

デジタル庁が2022年12月12日に発行された「ウェブアクセシビリティ導入ガイドブック」の表紙。

誰一人取り残されない人に優しいデジタル化をのための一歩

デジタル技術の進展によりこれまでできなかったことができるようになり障がい者や高齢者外国人といった人たちを取り巻く情報環境や支援技術は劇的に変化しています公的機関のウェブサイトはもちろんあらゆるウェブサービスにおけるウェブアクセシビリティの重要性は高まり続けています

ウェブアクセシビリティとは年齢や視覚・聴覚・身体・認知など利用者の障害の有無やその程度さらにはデバイス通信環境にかかわらず誰もが支障なく利用できることまたはその到達度を表します特に行政手続きや災害時の避難情報などの社会生活に影響のある情報を扱う公的機関のウェブサイトの運用には欠かせない観点です誰一人取り残されない人に優しいデジタル化ををミッションとするデジタル庁は行政のウェブサイトや情報システムを多様なユーザーが利用しやすい状態があるべき姿だと考えています

その一方でW3CWorld Wide Web Consortiumが定めた国際規格のガイドラインやそれをベースとした日本語版のウェブアクセシビリティ規格があるものの初心者にとってはハードルが高くウェブアクセシビリティは難解と思われている現実もあります
W3C(World Wide Web Consortium)が定めた国際規格のガイドラインや、それをベースとした日本語版のウェブアクセシビリティ規格の変遷についての図表。WCAG(W3Cの勧告)、ISO(国際規格)、JIS(国内規格)の改訂の変遷について図式化している。
今回Takramが制作をサポートしたウェブアクセシビリティ導入ガイドブック読者のターゲットを行政の情報システムを開発する担当者や情報発信に関わる広報担当者受託先となる事業者を対象としまずは初心者が入りやすくするための門をつくることに注力しましたそのため既存のガイドラインや実践プロセスの全てを説明することはせず最低限知ってもらいたいコアに絞り込んだ内容になっています
デジタル庁のミッション「誰一人取り残されない、人に優しいデジタル化を。」から、今回のガイドブックの編集方針策定までのプロセスの図版。デジタル庁のミッションから、ウェブのあるべき状態、そしてガイドブックで達成したいことに至るまでの思考のプロセスを明文化している。
「ウェブアクセシビリティ導入ガイドブック」のページサンプル。ガイドブック内の「ウェブアクセシビリティの基礎」から2ページを抜粋し、視覚障害のある人、聴覚障害のある人などといった具体的な対象を挙げながらウェブアクセシビリティの恩恵を受ける人について、それぞれイラストとともに説明するほか、ウェブアクセシビリティについてよくある誤解の解説をしている。

ウェブアクセシビリティをわかりやすく翻訳する

ウェブアクセシビリティ導入ガイドブックデジタル庁のウェブアクセシビリティチームが内部向けに作成した内容をベースにTakramが目次の作成からテキストの編集ダイアグラムや具体例のビジュアル検討装幀やグラフィックデザインなどのデザインディレクションを行い外部向けに再編集しました
「ウェブアクセシビリティ導入ガイドブック」のページサンプル。ガイドブック内の「ウェブアクセシビリティで達成すべきこと」の1ページを抜粋し、ページ内に「読み上げはひとつまで。自動再生はさせない」「袋小路に陥らせない」の2項目が載っている。字幕がついた動画のイラストとともに自動再生の際の音声読み上げ機能の注意点や、ダイアログに「閉じるボタン」を付けたイラストを例に、袋小路に陥らせないためのポイントについて、2〜3行で簡潔に説明している。

ウェブアクセシビリティ導入ガイドブックはガイドブック自体のアクセシビリティ ── 特に視覚や聴覚の認知特性に対して ── に高い水準で対応したものになっています

例えば全盲の人も同じように情報を得られるスクリーンリーダー対応具体的には全盲の人でもすべての画像が理解できるよう代替テキストの埋め込みをはじめ込み入ったレイアウトでも理解しやすい順序で読み上げ読みたい箇所に素早くジャンプできるように見出しにタグ付けなど本来伝えたいフォーマットが正しく伝わるようにデザインしています結果としてデジタル庁に勤める全盲のスタッフからもここまで丁寧に作られたドキュメントは初めてというフィードバックをいただく内容に仕上がりました

ウェブアクセシビリティはデジタル庁に限らず今後さまざまな局面で求められるようになっていきますTakramとしてもここがゴールではなくスタートとしてよりわかりやすい情報設計を通してウェブアクセシビリティが社会に浸透していくための取り組みを続けていきたいと考えています

スクリーンリーダーに最適化し、音声読み上げでも同等の情報を得られるよう配慮したガイドブックのPDFの作り方を伝えるAdobe InDesignのスクリーンショット。ガイドブック内の「ガイドブックの目的」の1ページを例に、タイトル、リード文、本文などそれぞれの情報に音声データを付け、テキストデータと同等の情報が得られることを説明している。
ガイドブックのPDFはスクリーンリーダーに最適化し音声読み上げでも同等の情報を得られるよう配慮した
全ての図表に代替テキストを設定し、推奨するアクセシビリティ対応をガイドブック自体が実践していることを説明するAdobe InDesignのスクリーンショット。坂本貴史氏がUX(ユーザーエクスペリエンス)を構成する要素を評価軸ごとにピラミッド状に再構成した図を例にして、InDesignの代替テキスト入力ダイアログを見せている。
全ての図表に代替テキストを設定推奨するアクセシビリティ対応をガイドブック自体が実践している

Project Information

  • Client: デジタル庁
  • Expertise: Digital
  • Year: 2023

Project Team

Thumbnail
Minoru Ito
Design Engineer, Project Director
Thumbnail
Keisuke Kambara
Design Engineer, Project Director

Related Projects

View all projects
Thumbnail

デジタル庁重点計画紹介資料

デジタル社会の実現に向けた国の重点計画を紹介するプレゼンテーション
Thumbnail

Mercari Sans

日本発テックスタートアップのコーポレート書体
Thumbnail

SKINCARE LOUNGE BY ORBIS

ビューティーブランドの体験特化型施設の包括的なデザイン