アクセシビリティの基本のキを学んだ
WCAN 2018年6月 「Webアクセシビリティの学校 2018 in 名古屋」に参加しました！しかし、メモを紛失したため、私の覚えていること（ある意味印象に残って忘れられなかったこと）を今のうちにブログに起こしておきます。
アクセシビリティ確保のキホン
0. HTMLコーディング
- 開始タグと終了タグがある
- 入れ子は内側から閉じる
- 要素内で同じ属性を重複させない
- id属性値をユニークな値にする
1. ページの内容が分かるページタイトルを記述する
例）［ページタイトル］＋［Webサイト名］
ページタイトルを前に出すと◎
2. ⾒出しやリストなどの⽂書構造をマークアップする
<h2>などは、⾒た⽬の⼤きさではなく、⽂書構造や意味から適切なレベルを選びます。- リスト
<ul>や、番号付きリスト<ol>はリストの種類に応じてマークアップします。
3. リンクテキストはリンク先が分かる⽂⾔にする
× ここをクリック
◎ hostsファイルで設定したURLに Android でアクセスする方法（for macOS）| RachiCom
4. 情報を伝えている画像に代替テキストを入れる
- 写真である場合は、
alt=“写真: 〇〇の風景”などの説明を入れます。 - 画像がデコレーション（装飾）の場合は、
alt=“”のように空のalt属性を入れます。 - 画像とテキストは1つのリンクにまとめます。代替テキストが同⼀のリンク内にあるテキストと同じ⽂⾔になる場合、代替テキストは書かない。
例）<a href="http://***"><img alt="" src=“***.jpg"><span>***</span></a>
5. ⽂字⾊と背景⾊のコントラスト比は 4.5 : 1 以上確保する
コントラスト比がわからない場合は、カラーコントラストアナライザーなどでコントラスト比をチェックする
6. ユーザーがコンテンツを拡⼤表⽰できるようにする
- ブラウザのズーム機能で200％まで拡⼤してもコンテンツの閲覧や操作に⽀障がないようにする。
- タッチ操作でも画⾯の拡⼤ができる。
7. キーボードだけでも操作できるようにする
- フォーカスインジケータが常に表示されるようにします
{outline: none;}をつけるとフォーカスインジゲータが消えるので設定しない- モーダルウィンドウがある場合、オープン時はモーダル内のみがフォーカスされるようにし、クローズ時はフォーカスが元の位置に戻るようにする
8. データテーブルの構造をマークアップする
テーブルの見出しに<th>をつける。複雑なテーブルの場合（田んぼ型でないテーブル）は、scope属性の設定も必要。
9. フォーム・コントロールのラベルを提供する
- ラベルの場合は
<label>要素を使い、for属性をつける ( labelで囲う場合もfor属性はつけておく) - ラベルのテキストがないときはtitle属性をつける
- 補⾜説明のテキストにはaria-describedby属性を使う
10. エラーメッセージではエラー箇所を明⽰する
- 該当箇所の項⽬名
- エラー内容の説明
- エラーの修正⽅法の説明
アクセシビリティを確保するための考え方
今回の講義を聞いて、アクセシビリティを確保するための考え方を自分なりにまとめました。
- スクリーンリーダーを使った時、このサイトは使いやすいか？
- 目が見にくい人、色が判別しにくい人でも使いやすいサイトか？
- 耳が聞こえなくても理解できるか？
- マシンリーダブルか？
まとめてみて、やや障害者の方に寄り添った内容になったかと思います。ただ、今回講義内で植木さんがお話した内容は「Webアクセシビリティは時代や社会からの要請であり、障害者や高齢者対応だけに留まらない」という内容でした。
なので、まずはアクセシビリティ確保の10の基本を実践していき、利用者にとって使いやすいサイトとは何かを考え続けていきたいですね。
講義外で聞いた話
webアクセシビリティとインクルーシブデザイン
webアクセシビリティとは
障害者でも使えるサイトを作る事で、ほどんどの利用者にとっても使いやすいサイトになる という考え方を示します。
Web Content Accessibility Guidelines (WCAG) 2.0 は、ウェブコンテンツをよりアクセシブルにするための広範囲に及ぶ推奨事項を網羅している。 このガイドラインに従うことで、全盲又はロービジョン、ろう又は難聴、学習障害、認知障害、運動制限、発話困難、光過敏性発作及びこれらの組合せ等を含んだ、様々な障害のある人に対して、コンテンツをアクセシブルにすることができる。又、このガイドラインに従うと、多くの場合、ほとんどの利用者にとってウェブコンテンツがより使いやすくなる。
引用元：https://waic.jp/docs/WCAG20/Overview.html
インクルーシブデザインとは
障害者に限らず、利用者全てが使いやすいデザインの事を示します。
この「インクルーシブデザインの原則」は、利用者を最優先に考えることです。永続的な障害がある利用者、一時的または状況的な困難に直面している利用者、あるいは能力が変化してゆく利用者 (つまり、私たちみんな) のニーズに合わせてデザインすることです。
引用元：https://inclusivedesignprinciples.org/ja/
webアクセシビリティとインクルーシブデザインの違い
2つの違いとして、アクセシビリティが障害者、インクルーシブデザインは全ての利用者に視点をおいた考え方になります。しかし、この2つが目指すのは、利用者が「使いやすい」デザイン であるか？であり、根本的なところは同じです。では、なぜ違いが生まれたのか？
初めに誕生したのが「アクセシビリティ」だそうです。今では（海外では）法律にも組み込まれ世界中でアクセシビリティについて考えられるようになりました。しかし、法律による義務化でただのチェック項目としてしか扱われなくなりました。法律はあくまでも「利用しやすさ」を確保する最低限のルールであり、本来なら法律を守った上で、それぞれのサイトで「利用しやすさ」をさらに考えていかなければなりません。
そこで生まれた言葉が「インクルーシブデザイン」です。アクセシビリティという言葉はすでにチェック項目として浸透しつつあるため、その本来の目的を達成するべく生まれたのが「インクルージブデザイン」だそうです。
ユニバーサルデザインとインクルーシブデザイン
- インクルーシブデザインはイギリス発祥
- ユニバーサルデザインはアメリカ発祥
意味の違いは（ほぼ）ない。
