【旧】 ウェブアクセシビリティ 再入門 − スライド原稿版

[＞＞ 【注意】 本稿を記事として再編し、新しく投稿し直しましたので、そちらのご利用をおすすめします](https://qiita.com/sekiyaeiji/items/2a7d6a8379a7e124eb1f)


# ウェブアクセシビリティ 再入門



## アクセシビリティ

* accessibility
* ヌメロニム ： a11y
* 意味 ： 接近できること、**近づきやすさ**、動かされやすいこと、影響を受けやすいこと


## ウェブアクセシビリティとは

* 高齢者、障害者を含むあらゆるユーザーを意識してユニバーサルで高品質なウェブUXを提供すること













## 障害の種別

* 身体障害
* 知的障害
* 精神障害
* 難病

※ 参考 ： [「障害者」の定義って？障害者手帳や障害年金などのサービス、障害者雇用の対象、支援の根拠となる障害者総合支援法について説明します。 − LITALICO仕事ナビ](https://snabi.jp/article/164#cficm)


### 障害種別ごとの定義

* 身体障害
    * [身体障害者福祉法 第四条](https://www.mhlw.go.jp/web/t_doc?dataId=83006000&dataType=0&pageNo=1)
* 知的障害
    * [知的障害者福祉法](https://elaws.e-gov.go.jp/search/elawsSearch/elaws_search/lsg0500/detail?lawId=335AC0000000037)
* 精神障害
    * [精神保健及び精神障害者福祉に関する法律 第五条](https://elaws.e-gov.go.jp/search/elawsSearch/elaws_search/lsg0500/detail?lawId=325AC1000000123)


### トピック ： 「障害」か「障がい」か、「障碍」も．．．

* 国 ： 「障害」
    * 文部科学省で審議中
* 地方自治体の一部 ： 「障がい」
    * 「害」の文字に、マイナスなイメージがある
* メディア ： 「障害」
    * 常用漢字表記に基づき漢字表記
    * 単に表記を変えれば解決するものではなく慎重な機論が求められる
* 障害者 ： 賛否あり
    * 障害の「害＝ハンディ」は障害者自身ではなく社会の側にあり、敢えて「害」を隠してほしくない
* 「障碍」の「碍」は常用漢字外のためあまり採用されない
* **本稿では「障害」を利用します**














## 障害者のネット利用状況

### 障害者総数

* [2014〜2016年統計（pdf）](https://www.mhlw.go.jp/toukei/list/dl/seikatsu_chousa_b_h28_01.pdf)
* 936万人


### トピック ： 障害者の外食行動

【参考】 [もっと楽しみたい！～視覚障がい者にとっての外食～（pdf）](http://www.kanshokyo.jp/web/kouza/kenpatu/49/pdf/49_4.pdf)

* 興味深い項目
    * 単独で外出する
    * 月1回以上外食する
    * ネットの活用、事前にメニューを知りたい


### ネット利用率

* [2012年統計](http://barrierfree.nict.go.jp/relate/statistics/hc_internet.html)
* 障害者全体 ： 53.0%
    * 視覚障害者 ： 91.7%
    * 聴覚障害者 ： 93.4%
    * 肢体不自由者 ： 82.7%
* 増加傾向、アップトレンド


#### 日本人全体

* [2017年統計](https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h30/html/nd252120.html)
* 80.9％


### ネット利用障害者数

* **496万人**
    * 人口比 3.9%
    * 増加傾向、アップトレンド


### ネット利用目的

* 趣味、娯楽
* 調べる
* 情報発信
* 勉強、仕事
* 交流、コミュニケーション
* 障害ハンディキャップの補完
    * 文字情報、テロップの充実
    * 文字メディアの音声化
    * 意思伝達の文字化・音声化ツール
    * 肢体不自由の補完


### トピック ： 障害者に便利なアプリ

* [iPhone、iPad用・障害のある人に便利なアプリ一覧](https://www.tokyo-itcenter.com/700link/sm-iphon4.html#iphone-10-00120)


### インターネット利用に際して困ること

* コンピューターウイルスや不正アクセス
* 障害に配慮したホームページの少なさ
* 障害を補う機器、ソフトが少ない
* 障害者向きの情報不足
* 画面がごちゃごちゃして見にくい
* 欲しい情報を見つけるのが困難
* 通信費用が高い
* わからないときに相談する人がいない
* 利用者同士のトラブルが怖い

以上のような感情を与える状態 ＝ 「アクセシビリティが悪い」状態  
極端に粗悪なサイトでは健常者も感じることがある内容のため想像しやすい














## 障害に関する統計

### 人数

#### 障害者総数

* [2014〜2016年統計（pdf）](https://www.mhlw.go.jp/toukei/list/dl/seikatsu_chousa_b_h28_01.pdf)
* 936万人
    * 人口比 7.4%
    * 身体障害者
        * 436万人
    * 精神障害者
        * 361万人


#### 身体障害者数内訳

* [2006年統計](https://www8.cao.go.jp/shougai/whitepaper/h25hakusho/zenbun/furoku_08.html)
* 視覚障害
    * 31万人
* 聴覚・言語障害
    * 64万人
* 肢体不自由
    * 181万人


### インターネット利用率

* [2012年統計（pdf）](https://www.soumu.go.jp/main_content/000479175.pdf)
* 視覚障害
    * 91.7%
* 聴覚・言語障害
    * 93.4%
* 肢体不自由
    * 82.7%
* 精神障害
    * 46.8%


### 合計

* 視覚障害
    * 28万人
* 聴覚障害
    * 59万人
* 肢体不自由
    * 149万人
* 精神障害者
    * 168万人
* 合計
    * 404万人
        * 人口比 3.2%
        * （あえてビジネス観点で言うとこれがマーケット規模）





















## モダンウェブアクセシビリティ

### 「Dos and don'ts on designing for accessibility」

* [英国内務省 (UK Home Office)  Accessibility](https://hodigital.blog.gov.uk/category/accessibility/)
* [Dos and don'ts on designing for accessibility](https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/)
* [Dos and don'ts on designing for accessibility（pdf）](https://github.com/UKHomeOffice/posters/blob/master/accessibility/dos-donts/posters_en-UK/accessibility-posters-set.pdf)
* <https://accessible-usable.net/2018/11/entry_181119.html>
* [ウェブアクセシビリティの「べき/べからず」ポスター (UK Home Office) 日本語版](https://accessible-usable.net/2019/07/entry_190720.html)


### 対象分類

* **自閉症スペクトラム**
    * コミュニケーションや言語に関する困難
* スクリーンリーダー
    * 視覚障害
    * 見えない、見えにくい
* ロービジョン
    * 視覚障害
    * 矯正できない視機能の弱さ
    * 低視力、見えにくい
* **ディスレクシア**
    * 文字の読み書きに限定した困難
    * 発達性読み書き障害
* 身体障害・運動障害
* 聴覚障害・難聴
* **不安状態**
    * 不安障害
    * 不安神経症、強迫性障害


### 詳細

#### 自閉症スペクトラム

|すること|しないこと|
|:--|:--|
|単純な色を使う|鮮やかでまぶしい色を使う|
|**優しい言葉で書く**|比喩表現や慣用句を使う|
|**簡単な文章と箇条書きを使う**|区切りのない長文で文字の壁をつくる|
|**説明的なボタンにする**|曖昧で予測不能なボタンにする|
|簡潔で一貫したレイアウトを構築する|複雑でごちゃごちゃしたレイアウトを構築する|


#### スクリーンリーダー

|すること|しないこと|
|:--|:--|
|画面の説明、動画の書き起こしを提供する|画像や動画だけで情報を表示する|
|順序立てた論理的なレイアウトにする|ページ全体にコンテンツをバラバラに配置する|
|HTML5を使ってコンテンツを構造化する|文字サイズや配置に頼って構造化する|
|**キーボードだけで使えるように構築する**|マウスや画面の使用を強制する|
|**リンクや見出しは説明的に書く**|**リンクや見出しを役立たずにする**|


#### ロービジョン

|すること|しないこと|
|:--|:--|
|良いコントラストと読みやすい文字サイズを使う|低いコントラストと小さい文字サイズを使う|
|すべての情報をウェブページ（HTML）で公開する|ダウンロードの中に情報を埋没させる|
|色、形、文字の組み合わせで意味を伝える|色だけで意味を伝える|
|順序立てた論理的なレイアウトにする<br>（拡大表示したとき文章は折り返して表示される）|ページ全体にコンテンツを広げる<br>（**拡大表示したとき横スクロールが必要**(※)）|
|ボタンと通知は文脈にそって配置する|文脈と分離した操作をさせる|


#### ディスレクシア

|すること|しないこと|
|:--|:--|
|**理解を助けるために画像や図を使う**|長い文章で大きな文字のブロックをつくる|
|文字揃えは左揃えで一貫したレイアウトを保つ|**下線を引く、斜体を使う、大文字で書く**|
|他のフォーマットでの情報提供を検討する<br>（例：音声や動画）|前のページを覚えておく必要がある<br>（リマインドやヒントを出しましょう）|
|コンテンツを短く、明確に、簡潔にする|正確なことばで入力する必要がある<br>（予測入力や自動補正の機能を使いましょう）|
|**背景と文字のコントラストを利用者が変更できる**(※)|ひとつの場所に情報をつめこむ|


#### 身体障害・運動障害

|すること|しないこと|
|:--|:--|
|クリック可能な範囲を大きくする|精密さを要求する|
|操作対象のあいだを空ける|操作対象を近づけすぎる|
|キーボードや音声だけで使えるように設計する|マウスをたくさん動かす必要がある|
|**携帯電話やタッチスクリーンを想定して設計する**(※)|短い時間制限をもうける|
|ショートカットを提供する|タイピングやスクロールで利用者を疲れさせる|


#### 聴覚障害・難聴

|すること|しないこと|
|:--|:--|
|**やさしい言葉で書く**|難しい言葉や比喩表現を使う|
|字幕を使うか。動画の書き起こし文を提供する|音声や動画のみで情報提供する|
|順序立てた論理的なレイアウトにする|複雑なレイアウトやメニューをつくる|
|小見出し、画像、動画でコンテンツを分割する|長いかたまりのコンテンツを読ませる|
|予約や手続きの際に利用者が希望するコミュニケーション支援を利用できる|電話を唯一の連絡手段にする|


#### 不安状態

|すること|しないこと|
|:--|:--|
|操作を終えるのに十分な時間がある|ユーザーを急がせたり、必要のない時間制限を設ける|
|**これから何が起こるかを説明する**|次にすることや時間制限で利用者を混乱させる|
|重要な情報は明確に|操作の結果がはっきりわからない|
|操作を完了するために必要なサポートを提供する|サポートやヘルプにアクセスしづらい|
|ユーザーが送信前に入力内容を確認できる|質問に回答したユーザーを放置しない|



### 詳細補足

#### 拡大表示したとき横スクロールが必要

* レスポンシブレイアウトで解決できる


#### 背景と文字のコントラストを利用者が変更できる

* 現在では多くのOSにおいて設定が対応している
    * OSの設定、操作を妨げない対応が重要


#### 携帯電話やタッチスクリーンを想定して設計する

* レスポンシブレイアウトが重要





















## 実際に利用している様子がわかる動画から学ぶ

### [障害者のウェブページ利用方法の紹介ビデオ](https://www.soumu.go.jp/menu_news/s-news/2005/051215_1_wmv.html)

#### [視覚障害者（全盲）のウェブページ利用方法 （YouTube再生）](https://youtu.be/RLIKacI05fE?t=132)

* スクリーンリーダーを利用
* 点字ディスプレイも併用
* FireFoxを利用
* 適切なマークアップ、**見出し構造（h要素）**が重要
* 画像の**代替テキスト（alt属性）**が必要
    * alt属性が存在しないとファイル名や「画像」が読み上げられる
* **表組み（table要素）**の適切なマークアップが重要
* 画像認証の代替手段を用意する
* 各ページを識別できるタイトル要素をつける
* 入力系にラベル要素やタイトルを付与する
* スマホ、タブレットへのa11y配慮
* [**JISX8341-3**](https://waic.jp/docs/jis2016/understanding/201604/) （[JIS X 8341-3:2016 達成基準 早見表（レベルA & AA）](https://waic.jp/files/cheatsheet/waic_jis-x-8341-3_cheatsheet_201812.pdf)） を意識する
    * [JIS X 8341-3: 2016の適合レベルA、AA、AAA 全リスト](https://waic.jp/docs/jis2016/test-guidelines/201604/gcl_example.html)
        * 難易度は A ＜ AA ＜ AAA
    * 満たせない場合は、情報への代替アクセス手段を提供する

##### まとめ

* まずは [**JIS X 8341-3:2016 達成基準 早見表（レベルA & AA）**](https://waic.jp/files/cheatsheet/waic_jis-x-8341-3_cheatsheet_201812.pdf) の**適合レベル A** から実装してみる


#### [視覚障害者（弱視）のウェブページ利用方法 （YouTube再生）](https://youtu.be/p80PJXMPIDY?t=95)

* 弱視
* 先天的、右：0.02（矯正）、左：光を感じる
* グラフィック利用
* Win拡大鏡による画面拡大
* 支援技術なしでテキストを200%までサイズ変更できるようにする
* 白背景がまぶしいため**明暗反転**する
    * JIS達成基準のコントラスト比は 4.5:1 以上
* 自動再生されるカルーセル等画像スライドは**一時停止機能**が必要
* スマホ、タブレットも反転表示利用

##### まとめ

* OSやブラウザの設定、操作を**妨げない**対応、確認が重要


#### [肢体不自由者のウェブページ利用方法 （WMVダウンロード）](https://www.soumu.go.jp/menu_news/s-news/2005/051215_1_wmv.html)

* **手指に力がなく書籍のページをめくるのも困難**
    * 活字メディアが利用できない
* **トラックボールを腕全体の動きで操作**
* オンスクリーンキーボードを利用
* IE利用
* 文字が小さく読みづらい
* **横スクロールは発生してほしくない**
* **情報発信に挑戦中**

##### まとめ

* むしろデジタル機器やウェブコンテンツは**より必要とされている**





















## 今日からできること

* Lighthouse Accessibility スコアアップ


### Lighthouse 頻出メッセージと対策例

#### Background and foreground colors do not have a sufficient contrast ratio

* 背景色と前景色は十分なコントラスト比を持っていません。

##### 対策例

* UIデザイナーと相談する
* [Color Contrast Analyzer](https://dequeuniversity.com/rules/axe/3.2/color-contrast)
    * レベルAA、レベルAAA への対応色（コントラスト値）を導き出せる


#### Heading elements are not in a sequentially-descending order

* 見出し要素は順番に降順ではありません

##### 対策例

* 見出しの階層構造を適正化する

###### before

        　　　　h3
        h1
        　　　　　　h4
        　　　　　　　　　　h6
        　　h2
        　　　　　　　　h5


###### after

        h1
        　　h2
        　　　　h3
        　　　　　　h4
        　　h2
        　　　　h3


#### Image elements do not have [alt] attributes

* img要素 には alt属性 がありません

##### 対策例

###### 推奨

* alt属性値に写真画像の内容を表現するテキストを設定
* alt属性値にテキスト入り画像のテキストを設定
    * 文字情報はテキスト文字列でマークアップする

###### ミニマム対応

* 空値のalt属性を設定
    * 読み上げ対象から外れる

#### Form elements do not have associated labels

* フォーム要素 に ラベル要素 が関連付けられていません

##### 対策例

* 入力系に label要素 を設定するか、title属性 を設置する

###### before

        <input type="checkbox"> メールニュースを希望する

        <select> 〜 </select>

###### after

        
        <input type="checkbox" for="form-mailnews">
        <label id="form-mailnews"> メールニュースを希望する</label>

        <select title="都道府県"> 〜 </select>


#### Links do not have a discernible name

* リンクには識別可能な名前がありません

##### 対策例

* a要素 内にアンカーテキストを付与するか、alt属性、title属性、aria-label属性 などのいずれかにテキストを設定する

###### before

        <a href="hoge"></a>

###### after

        <a href="hoge">記事ページへ</a>

        <a href="hoge"><img alt="記事ページへ"></a>

        <a href="hoge"><span title="記事ページへ"></span></a>

        <a href="hoge" aria-label="記事ページへ"></a>


#### frame or iframe elements do not have a title

* frame要素 または iframe要素 にタイトルがありません

##### 対策例

* frame要素、iframe要素 に title属性 を設定する

###### before

        <iframe>></iframe>

###### after

        <iframe title="YouTube動画"></iframe>





#### ARIA IDs are not unique

* ARIAIDは一意ではありません

##### 対策例

* id属性値 を1ドキュメント内で重複させない
















## さらに深堀りする

### レベルAA、レベルAAA 実装を目指す

[【参考】JIS X 8341-3: 2016の適合レベルA、AA、AAA 全リスト](https://waic.jp/docs/jis2016/test-guidelines/201604/gcl_example.html)


### WAI-ARIA を利用する

* role属性
* aria属性

[【参考】WAI-ARIAを活用したフロントエンド実装 | CodeGrid](https://app.codegrid.net/series/2016-wai-aria)

















## ウェブアクセシビリティについてまとめ

* ユニバーサルで高品質なウェブUX
* 国内ユーザー約500万人
* ウェブは必要とされている
* 容易なことから着手しよう
* BE、FEが協力して調査、改修しよう


















## 最後に

* So long as you can sweeten another’s pain, life is not in vain.
* 人の苦しみをやわらげてあげられる限り、生きている意味はある
* ヘレン・ケラー
* Helen Adams Keller
* 1880年 - 1968年
* 世界で最も有名な障害者