Takram is a design innovation firm.
Explore new possibilities. Crystallize them into reality.
デジタル庁

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

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

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

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

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

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

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

その一方で、W3C(World 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

Project Team

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

Related Projects

View all projects
Thumbnail

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

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

Serendie Design System

デザインシステムを起点にしたオープンな組織文化づくり
Thumbnail

㊙展

日本のデザインの豊かさに触れる展示のディレクション