アクセシビリティとは障害の有無だけではなく、年齢や使用している状況や機器の違いなど、状況の影響を少なくして誰でも同じ様に使えること
紙の媒体にはないウェブの特性です（読み上げの機能や、）
ただし、人それぞれ状況は異なるし、新たな技術が登場して実装がめちゃくちゃ難しい
- 目次
団体、ガイドライン、 WAI-ARIA
WCAG（ガイドライン）
W3C(ウェブ技術の標準化を行う非営利団体)がWAI(ウェブクセシビリティを向上することを目的としている団体)の中でWCAG（ガイドライン）を作った
ガイドラインに従うことで、ガイドラインに定義されている状態に対してコンテンツはアクセシブルだと判断できる（A 、AA、AAA がある)
2021年5月現在、W3C勧告となっているもののなかではWCAG 2.1が最新の仕様
ウィキペディア（Wikipedia）
ガイドラインにはWCAG 1.0とWCAG 2.0、そしてWCAG2.1がある
WAIC（ウェブアクセシビリティ基盤委員会）
ウェブアクセシビリティ基盤委員会（WAIC）は、日本におけるウェブアクセシビリティの公的規格であるJIS X 8341-3の普及活動を行っている団体だそうです
Wの連発で、言葉の理解も大変です
WAI-ARIA
もう1つのW WAI-ARIA
WAI-ARIA は複雑な実装で、意味を成さない要素(divなど)で見た目を整えた場合には音声読み上げソフトに役割を伝えられない。その場合にHTML要素に意味を持たせることができる属性
これがまためちゃくちゃ複雑でなんでもかんでもこのARIA属性をつけたらダメ
音声読み上げソフトを利用しているユーザーをサイトで迷子にしてしまう可能性があるので、間違えた使用方法をするくらいならつけないほうが良かったりする
主に次の3つの機能があることは認識しておこうと思います
- ロール（何か） 例えば
role="search" - プロパティ（性質 ） 例えば、
aria-label="close button" - ステート（現在の状態） 例えば、
aria-hidden="true"
何をどうしたらいいのやら？？
ここまでで、かなり気力を消耗しました
ガイドラインとかではなく
自分のできることを考えてみようと思います
総務省の障害者の方のウェブページ利用方法の紹介ビデオで実際の操作を確認
今すぐできる注意したいこと
色彩
背景色と文字とのコントラストは最低4.5:1を意識する
Colour Contrast Analyserをダウンロードしてチェック
画像のalt属性の指定
画像と同じ意味を伝えられるようにする
画像が単なる飾りの場合はbackground–imageを使う（imgを使う場合はalt属性は空にする）
適切なマークアップ
音声読み上げソフトを利用しているユーザーの役に立つ
役割にふさわしい要素を使うこと（div要素だけでレイアウトはしない）
<header></header>
<nav></nav>
<main>
<article>
</article>
<aside>
</aside>
</main>
<footer></footer>ちなみにSEO対策にもなる
音声読み上げソフト注意点
音声読み上げソフトに読ませたくない場合
そもそもCSSでvisibility: hiddenやdisplay:noneは音声読み上げソフトでも読まれない
アイコンに意味がない場合など、aria-hidden="true"をつけると読み上げない
音声読み上げソフトに読み上げてほしい場合
Font Awesomeの例が理解しやすかったので抜き出してみた（Font Awesomeを使うとアイコンにはaria-hidden="true"がついている）
アイコンが意味のある場合で対話型要素ではない時はtitle属性
<i class="fa 砂時計のアイコン" aria-hidden="true" title="残り30秒"></i>
<span>残り30秒</span>フォーカス可能な対話型要素（aやbutton)を表す場合は対話型要素にaria-label属性をつける（aとbuttonにはaria-labelをつけて大丈夫なはず）
<a href="#top" aria-label="ページトップへ">
<i class="fa 上向矢印" aria-hidden="true"></i>
</a>画面上は非表示にしたいが読み上げてほしい場合、WordPressでも使われているscreen-reader-textクラスを使って非表示にしたい要素にclass="screen-reader-text"をつける
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: #eee;
clip: auto !important;
clip-path: none;
color: #444;
display: block;
font-size: 1em;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}フォーム
フォーム部品にid属性を指定し、label要素のfor属性にそのid名を記述して紐ずけることで、音声読み上げソフトにどれが紐付いているのかを伝える
<label for="name">名前</label>
<input type="text" value="name" id="name"/>キーボードナビゲーション
そもそもキーボードナビゲーションとは
キーボード操作の基本は、Tabキーで次の項目に進みShift + Tabキーで戻る操作
マウスが使えない状況のユーザーの役に立ちます
スマートフォンなどタッチデバイスの場合は外部キーボードを使って操作することもあります
ボタン・リンク・フォームはブラウザがデフォルトでキーボードで操作できるようにしている
コードを書くときに注意すること
１ <a> <button> <input>にCSSでoutline:noneを設定しない
理由はキーボードでの操作には現在のフォーカス位置が必要、outlineがないとキーボード操作ができないから
２ トグルボタンまたはメニューボタンの実装にはbutton 要素以外は使用しない方が良い
(注意)ボタンがサーバーにデータを送信するためのものでない場合は、type="button" をつける
理由は<div>要素などにrole="button"で役割をつけても、フォーカスを当てるにはtabindex属性（tabindex 属性は０以上の数値を設定すると、移動する順番とDOMの並び順番が異なるので０以上は使わない）が必要、またキーボードのエンターは発火しないのでキーボードイベント実装も必要になる
<a>タグの場合はhref属性があればフォーカスが当たりキーボード操作もできる。デフォルトはリンクなのでその役割で使い、特段の理由なくあえてrole=”button”にしてボタンの役割をもたす必要はない
ヘッダーをスキップする
どのページでも共通のヘッダーはキーボードで操作する時にスキップできると親切だと思います
<header>
<a href="#main" class="skip-link">
メニューをスキップする
</a>
//省略
</header>
<main id="main">
//省略 メインのコンテンツ
</main>//通常は隠しておく
.skip-link {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
//フォーカスが当たった時だけ表示される
.skip-link:focus {
position:absolute;
left: 20px;
top: 20px
background: #ffffff;
padding: 10px 15px;
width:auto;
height:auto;
}
}role属性の注意点
<nav> //これを使うべき
</nav>
//role="navigation"は蛇足
<nav role="navigation">
</nav>
//role="navigation"がないよりはある方が絶対いい
＜div role="navigation">
</div>まとめ
- マークアップは要素の意味を理解して適切に使う。
- 色のコントラスト比は最低4.5:1 を意識する。
- 意味のある画像にはalt属性を適切につける。
- ブラウザのネイティブ機能を壊さない。ネイティブ機能を利用する。
- aria属性はちゃんと理解して使う。
悩んだ時は・・・・・