Webサイトを作るとき、アクセシビリティで最低限意識しようと思うこと

アクセシビリティとは障害の有無だけではなく、年齢や使用している状況や機器の違いなど、状況の影響を少なくして誰でも同じ様に使えること

紙の媒体にはないWebの特性です

ただし、人それぞれ状況は異なるし、新たな技術が登場して実装がめちゃくちゃ難しい

目次
  1. 団体、ガイドライン、WAI-ARIA 
    1. WCAG(ガイドライン)
    2. WAIC(ウェブアクセシビリティ基盤委員会)
    3. WAI-ARIA 
  2. 今すぐできる注意したいこと
    1. 色彩
    2. 画像のalt属性の指定
    3. 適切なマークアップ
      1. 音声読み上げソフトに読ませたくない場合
      2. 音声読み上げソフトに読み上げてほしい場合
    4. フォーム
    5. キーボードナビゲーション
    6. role属性の注意点

団体、ガイドライン、WAI-ARIA 

WCAG(ガイドライン)

W3C(Web技術の標準化を行う非営利団体)がWAI(Webアクセシビリティを向上することを目的としている団体)の中でWCAG(ガイドライン)を作った

ガイドラインに従うことで、ガイドラインに定義されている状態に対してコンテンツはアクセシブルだと判断できる(A 、AA、AAA がある)

2021年5月現在、W3C勧告となっているもののなかではWCAG 2.1が最新の仕様

ウィキペディア(Wikipedia)

ガイドラインにはWCAG 1.0とWCAG 2.0、そしてWCAG2.1がある

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属性の指定

画像と同じ意味を伝えられるように。

画像が単なる飾りの場合はbackgroundimageを使う。imgの場合はalt属性は空にする方が良い

適切なマークアップ

音声読み上げソフトを利用しているユーザーの役に立つ

役割にふさわしい要素を使うこと(div要素だけでレイアウトはしない)

<header></header>
<nav></nav>
<main>
  <article> 
  </article>
  <aside>
  </aside>
</main>
<footer></footer>

ちなみにSEO対策にもなる

音声読み上げソフトに読ませたくない場合

そもそもCSSでvisibility: hiddendisplay: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キーで戻る操作

マウスが使えない状況のユーザーの役に立つ

ボタン、リンク、フォームはブラウザがデフォルトでキーボードで操作できるようにしている 

なので

1 <a> <button> <input>にCSSでoutline:none設定しない

理由はキーボードでの操作には現在のフォーカス位置が必要、outlineがないとキーボード操作ができないから

2 トグルボタンまたはメニューボタンの実装にはbutton 要素以外は使用しない方が良い

 (注意)ボタンがサーバーにデータを送信するためのものでない場合は、type="button" をつける

理由は<div>要素などにrole="button"で役割をつけても、フォーカスを当てるにはtabindex属性(tabindex 属性は0以上の数値を設定すると、移動する順番とDOMの並び順番が異なるので0以上は使わない)が必要、またキーボードのエンターは発火しないのでキーボードイベント実装も必要になる

<a>タグの場合はhref属性があればフォーカスが当たりキーボード操作もできる。デフォルトはリンクなのでその役割で使い、特段の理由なくあえてrole=”button”にしてボタンの役割をもたす必要はない

role属性の注意点

<nav>  //これを使うべき
</nav>

//role="navigation"は蛇足
<nav role="navigation">  
</nav>

//role="navigation"がないよりはある方が絶対いい
<div role="navigation"> 
</div>

今できること

  • マークアップは要素の意味を理解して適切に使う。
  • 色のコントラスト比は最低4.5:1 を意識する。
  • 意味のある画像にはalt属性を適切につける。
  • ブラウザのネイティブ機能を壊さない。ネイティブ機能を利用する。
  • aria属性はちゃんと理解しから使う。