デジタル庁ウェブアクセシビリティ導入ガイドブック
「誰一人取り残されない、人に優しいデジタル化を。」の実現をめざすデジタル庁は、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。Takramは、デジタル庁の対外的な施策の一つとして、初めてウェブアクセシビリティに取り組む行政官や事業者、そして一般の方々に向けて、その考え方や取り組み方のポイントをまとめた「ウェブアクセシビリティ導入ガイドブック」の制作をサポートしました。
![デジタル庁が2022年12月12日に発行された「ウェブアクセシビリティ導入ガイドブック」の表紙。](/_next/image?url=https%3A%2F%2Fimages.prismic.io%2Ftakram%2F65e0d79127237c2bb829ac47_project_introduction-to-webaccessibility_mainvisual.png%3Fauto%3Dformat%252Ccompress%26rect%3D0%252C1%252C2200%252C1238%26w%3D2880%26h%3D1620&w=3840&q=75)
「誰一人取り残されない、人に優しいデジタル化を。」のための一歩
デジタル技術の進展により、これまでできなかったことができるようになり、障がい者や高齢者、外国人といった人たちを取り巻く情報環境や支援技術は劇的に変化しています。公的機関のウェブサイトはもちろん、あらゆるウェブサービスにおけるウェブアクセシビリティの重要性は高まり続けています。
「ウェブアクセシビリティ」とは、年齢や、視覚・聴覚・身体・認知など利用者の障害の有無やその程度、さらにはデバイス、通信環境にかかわらず、誰もが支障なく利用できること、またはその到達度を表します。特に行政手続きや災害時の避難情報などの社会生活に影響のある情報を扱う公的機関のウェブサイトの運用には、欠かせない観点です。「誰一人取り残されない、人に優しいデジタル化を。」をミッションとするデジタル庁は、行政のウェブサイトや情報システムを多様なユーザーが利用しやすい状態があるべき姿だと考えています。
![W3C(World Wide Web Consortium)が定めた国際規格のガイドラインや、それをベースとした日本語版のウェブアクセシビリティ規格の変遷についての図表。WCAG(W3Cの勧告)、ISO(国際規格)、JIS(国内規格)の改訂の変遷について図式化している。](/_next/image?url=https%3A%2F%2Fimages.prismic.io%2Ftakram%2F65e0d80327237c2bb829ac4a_project_introduction-to-webaccessibility_01.png%3Fauto%3Dformat%252Ccompress%26rect%3D0%252C0%252C1753%252C1089%26w%3D2880%26h%3D1789&w=3840&q=75)
![デジタル庁のミッション「誰一人取り残されない、人に優しいデジタル化を。」から、今回のガイドブックの編集方針策定までのプロセスの図版。デジタル庁のミッションから、ウェブのあるべき状態、そしてガイドブックで達成したいことに至るまでの思考のプロセスを明文化している。](/_next/image?url=https%3A%2F%2Fimages.prismic.io%2Ftakram%2F65e0d84527237c2bb829ac4b_project_introduction-to-webaccessibility_02.png%3Fauto%3Dformat%252Ccompress%26rect%3D0%252C0%252C1753%252C600%26w%3D2880%26h%3D986&w=3840&q=75)
![「ウェブアクセシビリティ導入ガイドブック」のページサンプル。ガイドブック内の「ウェブアクセシビリティの基礎」から2ページを抜粋し、視覚障害のある人、聴覚障害のある人などといった具体的な対象を挙げながらウェブアクセシビリティの恩恵を受ける人について、それぞれイラストとともに説明するほか、ウェブアクセシビリティについてよくある誤解の解説をしている。](/_next/image?url=https%3A%2F%2Fimages.prismic.io%2Ftakram%2F65e0d87b27237c2bb829ac4d_project_introduction-to-webaccessibility_03.png%3Fauto%3Dformat%252Ccompress%26rect%3D0%252C0%252C2399%252C1552%26w%3D2880%26h%3D1863&w=3840&q=75)
ウェブアクセシビリティをわかりやすく翻訳する
![「ウェブアクセシビリティ導入ガイドブック」のページサンプル。ガイドブック内の「ウェブアクセシビリティで達成すべきこと」の1ページを抜粋し、ページ内に「読み上げはひとつまで。自動再生はさせない」「袋小路に陥らせない」の2項目が載っている。字幕がついた動画のイラストとともに自動再生の際の音声読み上げ機能の注意点や、ダイアログに「閉じるボタン」を付けたイラストを例に、袋小路に陥らせないためのポイントについて、2〜3行で簡潔に説明している。](/_next/image?url=https%3A%2F%2Fimages.prismic.io%2Ftakram%2F65e0d8d727237c2bb829ac50_project_introduction-to-webaccessibility_04.png%3Fauto%3Dformat%252Ccompress%26rect%3D0%252C0%252C1168%252C1361%26w%3D2880%26h%3D3356&w=3840&q=75)
ウェブアクセシビリティ導入ガイドブックは、ガイドブック自体のアクセシビリティ ── 特に視覚や聴覚の認知特性に対して ── に高い水準で対応したものになっています。
例えば、全盲の人も同じように情報を得られるスクリーンリーダー対応、具体的には「全盲の人でもすべての画像が理解できるよう代替テキストの埋め込み」をはじめ、「込み入ったレイアウトでも理解しやすい順序で読み上げ」「読みたい箇所に素早くジャンプできるように、見出しにタグ付け」など、本来伝えたいフォーマットが正しく伝わるようにデザインしています。結果として、デジタル庁に勤める全盲のスタッフからもここまで丁寧に作られたドキュメントは初めてというフィードバックをいただく内容に仕上がりました。
ウェブアクセシビリティは、デジタル庁に限らず、今後さまざまな局面で求められるようになっていきます。Takramとしても、ここがゴールではなくスタートとして、よりわかりやすい情報設計を通して、ウェブアクセシビリティが社会に浸透していくための取り組みを続けていきたいと考えています。
![スクリーンリーダーに最適化し、音声読み上げでも同等の情報を得られるよう配慮したガイドブックのPDFの作り方を伝えるAdobe InDesignのスクリーンショット。ガイドブック内の「ガイドブックの目的」の1ページを例に、タイトル、リード文、本文などそれぞれの情報に音声データを付け、テキストデータと同等の情報が得られることを説明している。](/_next/image?url=https%3A%2F%2Fimages.prismic.io%2Ftakram%2F65e0d91927237c2bb829ac51_project_introduction-to-webaccessibility_05.png%3Fauto%3Dformat%252Ccompress%26rect%3D0%252C0%252C2399%252C1552%26w%3D2880%26h%3D1863&w=3840&q=75)
![全ての図表に代替テキストを設定し、推奨するアクセシビリティ対応をガイドブック自体が実践していることを説明するAdobe InDesignのスクリーンショット。坂本貴史氏がUX(ユーザーエクスペリエンス)を構成する要素を評価軸ごとにピラミッド状に再構成した図を例にして、InDesignの代替テキスト入力ダイアログを見せている。](/_next/image?url=https%3A%2F%2Fimages.prismic.io%2Ftakram%2F65e0d94927237c2bb829ac55_project_introduction-to-webaccessibility_06.png%3Fauto%3Dformat%252Ccompress%26rect%3D0%252C0%252C2399%252C1552%26w%3D2880%26h%3D1863&w=3840&q=75)
Project Information
- Client: デジタル庁
- Year: 2023
Project Team
- Project Direction: Minoru Ito
- Communication Design: Minoru ItoKeisuke Kambara
- Editorial Direction: Minoru ItoKeisuke Kambara
- Art Direction: Yosuke Nakanishi (STUDIO PT.)
- Graphic Design: Yosuke Nakanishi (STUDIO PT.), Koharu Nezu (STUDIO PT.)
- Web Accessibility Advisery: Rei Yamamoto (freee)
![Thumbnail](/_next/image?url=https%3A%2F%2Fimages.prismic.io%2Ftakram%2FZmcS05m069VX1mtp_person_minoru-ito.jpg%3Fauto%3Dformat%252Ccompress%26rect%3D0%252C0%252C912%252C912%26w%3D912%26h%3D912&w=1920&q=75)
![Thumbnail](/_next/image?url=https%3A%2F%2Fimages.prismic.io%2Ftakram%2FZmcMf5m069VX1mpI_person_keisuke-kambara.jpg%3Fauto%3Dformat%252Ccompress%26rect%3D0%252C0%252C912%252C912%26w%3D912%26h%3D912&w=1920&q=75)