[ウェブアクセシビリティ導入ガイド]　ウェブアクセシビリティの基礎　の要約

QAエンジニアのMa5am1nです。
社内で[ウェブアクセシビリティ導入ガイド](https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/08ed88e1-d622-43cb-900b-84957ab87826/f02c1534/20230224_introduction_to_weba11y.pdf)の輪読会があります。
輪読会に参加するのは今回が初めてなので、楽しみです。

今回は、事前課題の内容をメモ的にブログに残します。
初めてウェブアクセシビリティについて学ぶ方の参考になると幸いです。

# 事前課題

- 担当する章を読む
- 内容の共有を目的に、数スライドくらいで要約する

自分の担当は、以下の2章です。
1. ガイドブックの目的
1. ウェブアクセシビリティの基礎

# 要約
## 初心者に立ちはだかる3つの壁

1. アクセシビリティの**意味**や、取り組む**メリット**がわからない
1. 規格が複雑で、**実際に何をすればいいのか**わからない
1. 理解の有無に関わらず、**求められるレベルが高い**


## ガイドブックのゴール

十分に知識のない人がウェブアクセシビリティに取り組み、一緒に取り組む人たちと適切なコミュニケーションを取れるようにすること

- 情報システム開発プロジェクトの行政担当者
- 行政の広報担当者
- 開発するPM、デザイナー、エンジニア等（受託事業者や民間事業者）


## 1分でわかるウェブアクセシビリティ
1. アクセシビリティの**意味**や、取り組む**メリット**がわからない　
![スクリーンショット 2023-03-11 10.25.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/2f3f5eb2-3b21-d77c-6edb-3b052e1b24ac.png)
![スクリーンショット 2023-03-11 10.46.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/6c7b1f58-942c-f5cf-2eeb-eabe527b0fbb.png)
    - 厚生労働省の調査では、平成28年の時点で身体障害者手帳の所持者が428.7万人。人数は年々増加
    - アクセシビリティは万人のためのもの
    - デジタル庁のミッション　「誰一人取り残されない、人に優しいデジタル化を。」
    - 様々な人（視覚に障害がある人、怪我をして一時的に手が使えなくなった人など）がウェブサイトや情報システムを利用できる状態にしないと、どんなに良いハードウェア、ソフトウェアを作っても価値を提供しきれていないことになる
1. 規格が複雑で、**実際に何をすればいいのか**わからない
    1. 対応する度合いを決める
         ![スクリーンショット 2023-03-11 10.57.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/4089361f-dbbc-07fe-4980-ddf56dad322d.png)

    1. ウェブアクセシビリティ方針を決める
        - 対象範囲を決める（ドメイン名/サブドメイン名）
        - 目標とする適合レベルを決める
            - 「A、AA、AAA」のうち、原則AA
    1. 試験を行う
        - サイトの全ページかサンプリングした数十ページに対して行う
        - 100点が「準拠」、1点から 99点が「一部準拠」
1. 理解の有無に関わらず、**求められるレベルが高い**
    - 100点は目指さない
        -  正式な試験には時間がかかる
        -  チェックツールで確認できるのは達成基準の2割〜3割程度
        -  対象とした範囲すべてで「準拠」の結果を得ることは難しい
![スクリーンショット 2023-03-11 10.39.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/24db9536-25be-f9c4-6326-7b731cbf67b2.png)


# (参考)要約の前に、雑に箇条書きしたメモ
## 1.ガイドブックの目的

- 本ガイドブックは、ウェブアクセシビリティに初めて取り組もうとしている行政官の方や事業者向けに、ウェブアクセシビリティの考え方や概要、取り組み方のポイントを解説するための資料

### 1.1 背景・課題
- そもそもアクセシビリティの意味や、取り組むメリットがわからない
- 規格が複雑で、実際に何をすればいいのかわからない
- 理解の有無に関わらず、求められるレベルが高い
- 本ガイドブックでは、ウェブアクセシビリティの改善に、広報・サービス開発等の業務として取り組む必要のある職員が、十分な知識がないところからウェブアクセシビリティに取り組み、調達・受託事業者との適切なコミュニケーションができるようになることを目指しています。

### 1.2 ガイドブックで達成したいこと
- デジタル庁のミッション　「誰一人取り残されない、人に優しいデジタル化を。」
    - 視覚に障害がある人、怪我をして一時的に手が使えなくなった人など、様々な状況にいる利用者が、音声読み上げや点字ディスプレイなどの多様な使い方を通じて、デジタル庁のウェブサイトや情報システムを利用できる状態にしたい
    - OSやハードウェアが使いやすくなっても、そこで実行されるアプリ、コンテンツやサービスが「様々な人にとって使いやすい」状態で提供されていなければ、せっかくの技術を活かすことができません。

![スクリーンショット 2023-03-11 10.17.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/fa655dd1-ee55-4583-e3d6-3301a67c8e1c.png)

### 1.3 記述範囲と構成
![スクリーンショット 2023-03-11 10.18.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/7b608af5-caec-d930-dafe-3450c4187e03.png)

- 基礎を理解するためのわかりやすさを重視しています。そのため、記載の厳密な正確性や網羅性を担保していません。
- 今後、本ガイドブックとは別に、JIS﻿X﻿8341-3:2016の達成基準をわかりやすく一言で説明した表をMicrosoft﻿ Excel形式で提供する予定

### 1.4　対象読者
- 本ガイドブックは、情報システム（特にインタラクティブ・システム）の開発と、ウェブを通じた情報発信のふたつの領域で、ウェブアクセシビリティの向上に取り組む初心者の方が最初に読むことを想定して作成
    - 行政手続・申請等のデジタル化、情報システム開発プロジェクトの行政担当者
    - 外部に向けた情報発信、キャンペーン等を担当する行政の広報担当者
    - 上記のプロジェクトを受託する事業者の方（PM、デザイナー、エンジニア等）
    - ウェブアクセシビリティに取り組みたい民間事業者

※1.5 利用と配布　については省略

## 2.ウェブアクセシビリティの基礎
### 2.1 ウェブアクセシビリティとは

- アクセシビリティは万人のためのもの
    - 老眼で文字が読みにくくなることもアクセシビリティの問題ですし、地方の人にとって東京にある府省庁が発行する情報にアクセスしづらいことも、アクセシビリティの問題

![スクリーンショット 2023-03-11 10.25.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/2f3f5eb2-3b21-d77c-6edb-3b052e1b24ac.png)

- ウェブアクセシビリティは、利用者の障害の有無やその程度、年齢や利用環境にかかわらず、ウェブで提供されている情報やサービスを利用できること、またはその到達度を意味しています
- 様々な利用者が、いろいろなデバイスや環境からウェブにアクセスすることが当たり前になっている今、ウェブの利用方法の多様化に応えるアプローチのひとつがウェブアクセシビリティともいえます
- 一般的に「ウェブアクセシビリティが確保できている」状態
    - 目が見えなくても情報が伝わる・操作できること
    - キーボードだけで操作できること
    - 一部の色が区別できなくても情報が欠けないこと
    - 音声コンテンツや動画コンテンツでは、音声が聞こえなくても何を話しているかわかること
- 　ウェブはアクセシビリティを担保しやすいメディア
    - 　ウェブは最終的なアウトプットの形を変えることができるから
    - 　映像や紙のメディアと違って、利用者が情報を閲覧する方法を選択することができます
        - 　提供者の想定通りの見た目で閲覧したり、
        - 　文字や色を変えて閲覧したり、
        - 　合成音声で読み上げたり

HTTP、HTML、CSSなどウェブの根幹となる技術を開発したティム・バーナーズ・リー
![スクリーンショット 2023-03-11 10.29.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/de66bb25-ce21-1199-5d10-fa447c82f1ae.png)

- 厚生労働省の調査では、平成28年の時点で身体障害者手帳の所持者が428.7万人（参考文献 3）となっており、この人数は年々増加
    - 視覚障害のある人
        - 　全盲の方はスクリーンリーダー（画面読み上げソフト）、点字ディスプレイなどを使用
        - 　弱視・ロービジョンの方（人数としてはこちらのほうが多い）は、文字拡大、画面拡大、色反転などの機能を使用
    - 　聴覚障害のある人
        - 　手話、字幕といった視覚的な提示によって情報を得ています
        - 　近年では音声の文字起こしソフトを補助的に使っている人もいます
    - 　視覚と聴覚の両方に障害のある人（盲ろう）
    - 　上肢障害のある人
    - 　発達障害や学習障害のある人、知的障害がある人
    - 　色覚特性がある人
    - 　高齢の人
    - 　一時的に障害がある状態の人
        - 　電車内で動画を見たいのにイヤホンを忘れた
        - 　眼鏡を忘れてきたので目が疲れやすい
        - 　利き手を怪我してマウスが使えない
- 　よくある誤解
    - 　チェックツールで見つけられる問題は、ウェブアクセシビリティの問題の 2割から 3割程度
    - 　ウェブアクセシビリティは基本的に「人がチェックする必要がある」
![スクリーンショット 2023-03-11 10.39.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/24db9536-25be-f9c4-6326-7b731cbf67b2.png)

- アクセシビリティとユーザビリティ
    - 「ユーザビリティ」
        - 「特定のユーザが特定の利用状況において、システム、製品又はサービスを利用する際に、効果、効率及び満足を伴って特定の目標を達成する度合い」
            - ISO﻿9241-11
        - 「どんなシーンで、誰が、何を目的として、どのように使うのか想定しなければ使いやすいシステムは実現しない」と言っている
    - アクセシビリティ
        - 一般的に広く使われている共通の説明はなく
        - 障害者・高齢者を含む利用者のアクセスしやすさ
        - JIS﻿X﻿8341-1において「様々な能力を持つ最も幅広い層の人々に対する製品、サービス、環境又は施設（のインタラクティブシステム）のユーザビリティ」と定義
    - アクセシビリティとユーザビリティは明確に区分できるものではありません

![スクリーンショット 2023-03-11 10.46.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/e89fcc0e-25cd-a242-bc4f-c7d640a0c3b8.png)

![スクリーンショット 2023-03-11 10.46.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/6c7b1f58-942c-f5cf-2eeb-eabe527b0fbb.png)

### 2.2 ウェブアクセシビリティのガイドラインと規格

- 通信インフラ、ソフトウェア、ハードウェアそれぞれの技術の更新が非常に早いのが特徴
- WCAG
    - Web﻿Content﻿Accessibility﻿Guidelines
    - WCAG 2.0 (2008)
        - 「知覚可能」「操作可能」「理解可能」「堅牢（robust）」の 4つの原則
        - ウェブアクセシビリティを向上させるための目標にあたる 12のガイドライン
        - ガイドラインを細分化した61の達成基準
    - WCAG 2.1 (2018)
        - モバイル端末（タッチデバイス）への対応、弱視への対応、認知・学習障害への対応
    - WCAG 2.2 (2023の予定)
        - フォーカス枠、認証方法、ヘルプリンクなど、現在の情報システムで使われているナビゲーションに対応した達成基準が追加される予定
- JIS X 8341-3
    - 「高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第 3部：ウェブコンテンツ
    - WCAG﻿2.0とISO/IEC﻿40500:2012と JIS﻿X﻿8341-3:2016は同じ内容
    - JIS X 8341-3:2016
        - 2022年 11月現在で最新のウェブアクセシビリティに関する JIS規格

![スクリーンショット 2023-03-11 10.54.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/0a3f3de9-6534-31ad-ade2-0e8ddb6a3836.png)

- 他によく参照される基準等の考え方
    - みんなの公共サイト運用ガイドライン
    - 情報アクセシビリティ自己評価様式


### 2.3 JIS 規格に対応したウェブサイトを作る

- 調達するサービスで対応する度合いを決める

![スクリーンショット 2023-03-11 10.57.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/4089361f-dbbc-07fe-4980-ddf56dad322d.png)

- ウェブアクセシビリティ方針を決める
    - 対象となる範囲を決める
        - ドメイン名かサブドメイン名を単位とするのが一般的
    - 目標とする適合レベルを決める
        - 「A、AA、AAA」のどのレベルに適合するかを選択
        - 原則 AAに適合させることを目標
    - WAICが公開しているウェブアクセシビリティ方針策定ガイドラインに多くのサンプルが掲載されています
- ウェブアクセシビリティの試験を行う
    - WAICが公開しているJIS X 8341-3:2016 試験実施ガイドラインからダウンロードできるExcelファイル「実装チェックリスト」を使って確認すると効率的に作業を進められます
    - この作業を、サイトの全ページかサンプリングした数十ページに対して行う
    - パソコン、スマートフォンなどデバイスごとに異なる UIを提供している場合はそれぞれのデバイスで確認する必要があります

![スクリーンショット 2023-03-11 11.01.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1636570/636affe4-5116-df26-0338-f4722b629ff5.png)

- 注意点
    - 正式な試験には時間がかかる
        - 100ページ程度のサイトで正式な試験を行うと 1ヶ月弱（改修対応まで含めると 2ヶ月から 3ヶ月）はかかります
        - 試験を外部試験機関に委託した場合、その費用は 50万円程度から 100万円程度
    - チェックツールに頼り切らない
        - 総務省から提供されているmiCheckerやDeque﻿Systemsがオープンソースで公開している axe-coreなどウェブアクセシビリティのチェックツールがあります
        - 確認できるのは達成基準の 2割から 3割程度
        - 詳細な試験の進め方は、WAICが公開しているJIS X 8341-3:2016 試験実施ガイドラインをご参照ください
    - 公開2週間前にテストでは遅いので開発マイルストーンに段階的試験を組み込む
        - 例えば、「情報設計時」「デザインテンプレート完成時」「結合テスト時」など、開発フェーズの途中で複数回の段階的試験を行うと良いでしょう
- ウェブアクセシビリティの試験結果を公開する
    - 100点が「準拠」、1点から 99点が「一部準拠」
    - 対象とした範囲すべてで「準拠」の結果を得ることは難しいため、目指すべきではありますが必ず達成させることを目的にしないほうがよい