ウェブアクセシビリティ達成基準の覚書

はじめに

はじめまして。
オークファン開発部のWEBデザイナーの@af_etoです。

最近ウェブアクセシビリティ界隈の記事やツイートを目にする機会が多く、
様々な視点やアプローチの手法など大変興味深く拝読しております。
その多くは概念的でもあり、断片的な実例だったりするので、
実際に行われる検証基準に沿ってウェブアクセシビリティを覗いていきたいと思います。

JIS X 8341-3 2016

JIS X 8341-3 2016の正式名称は、
「高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第3部：ウェブコンテンツ」。
すべての利用者が、端末やブラウザや支援技術などに関係なく、
ウェブコンテンツを利用できることを目的としています。
8341は「やさしい」の語呂合わせです。

JIS X 8341-3 2016では61の達成基準と３つのレベルがあります。
レベル A：25の達成基準 アクセシビリティ確保に最低限必要なレベル
レベル AA：13の達成基準 諸外国でも公的機関に求められるレベル
レベル AAA：23の達成基準 レベルAAAを目標とすることは推奨しない

総務省「みんなの公共サイト運用ガイドライン（2016年版）」における
公的機関に対して推奨している「レベルAAに準拠」する達成基準をご紹介したいと思います。

今回は時間の都合上、達成基準の一部を省略して記載しております。
恐れ入りますがご理解のほどよろしくお願いいたします

非テキストコンテンツに関する達成基準

状況A： 短い説明によって、非テキストコンテンツと同じ目的を果たし、同じ情報を提示できる場合

img要素のalt属性を用いる

alt属性が記述されているか。

<img src="christmas_tree.png" alt="クリスマスツリー">

object要素のボディに代替テキストを記述する

object要素に代替画像や代替テキストが提供されているか。

<object type="application/pdf" data="request_list.pdf">
    <p>サンタさんお願いリスト</p>
</object>

イメージマップのarea要素に代替テキストを提供する

area要素に代替テキストが提供されているか。

<img src="scandinavia.png" usemap="#map" alt="北欧">
<map id="map" name="map">
    <area shape="rect" coords="300, 0, 450, 30" href="finland.html" alt="フィンランド">
    <area shape="rect" coords="150, 0, 300, 30" href="norway.html" alt="ノルウェー">
</map>

非テキストコンテンツに対して、それと同じ目的を果たし、同じ情報を提供する、簡潔な代替テキストを提供する

簡潔にわかりやすくaltが記述されているか。

検索フォームでsubmitボタンが画像（非テキストコンテンツ）の場合、
画像の代替テキストは「虫眼鏡」ではなく「検索」というように、
代替テキストが画像（非テキストコンテンツ）の目的を果たしているか。

隣り合った画像とテキストリンクを同じリンクの中に入れる

スクリーンリーダーでは二度読まれることになる。

<a href="/"><img src="santa.png" alt="サンタクロース"></a><a href="/">サンタクロース</a>

<!-- ひとつのリンクにする -->
<a href="/"><img src="santa.png" alt="">サンタクロース</a>

ASCII アート、絵文字、及びリート語に代替テキストを提供する

特殊な文字に代替テキストが提供されているか。
リート語とは「Chopper」を「Ch0pp3r」にしたり「for」を「4」、「to」を「2」にしたりするもの。

<abbr title="ごめんなさい">m(_ _)m</abbr>

画像のグループにある一つの画像に代替テキストを提供して、そのグループのすべての画像を説明する

複数の画像を組み合わせてひとつの意味になるような場合、支援技術が無視できるようにaltは空白にする。

<p>評価：
<img src="star_active" alt="5つ星のうちの2つ星">
<img src="star_active" alt="">
<img src="star_disabled" alt="">
<img src="star_disabled" alt="">
<img src="star_disabled" alt="">
</p>

状況B： 短い説明によって、非テキストコンテンツと同じ目的を果たし、同じ情報を提示できない場合

いずれかの方法を用いて、非テキストコンテンツの簡単な説明を提供する、簡潔な代替テキストを提供する

• a. 非テキストコンテンツに対して、それと同じ目的を果たし、同じ情報を提供する長い説明を提供する
• b. 短い説明の中で長い説明のある場所を示して、非テキストコンテンツの近くにあるテキストで長い説明を提供する
• c. 非テキストコンテンツのすぐ隣に別の場所へのリンクを置き、その別の場所で長い説明を提供する

複雑なグラフなどの付近に長い説明文、または説明ページのリンクが提供されているか。

状況C： 非テキストコンテンツがコントロールである、又は利用者の入力を受け入れる場合

送信/実行ボタンとして用いる画像のalt属性を使用する

送信/実行ボタンが画像の場合、代替テキストが記述されているか。

いずれかの方法を用いる

• a. label要素を用いて、テキストのラベルとフォーム・コントロールを関連付ける
• b. label要素を用いることができないとき、title属性を用いてフォーム・コントロールを特定する

視覚デザイン上、label要素を用いることができない場合はtitle属性を用いる。

<input type="radio" name="chimney" value="ある" id="yes"><label for="yes">ある</label>
<input type="radio" name="chimney" value="ない" id="no"><label for="no">ない</label>

<fieldset>電話番号
<input type="text" name="tel01" title="市外局番">
<input type="text" name="tel02" title="市内局番">
<input type="text" name="tel03" title="加入者番号">
</fieldset>

<input type="text" title="ここに検索語を入力">
<input type="submit" value="検索">

状況D： 非テキストコンテンツが時間の経過に伴って変化するメディアである場合

以下のいずれかの方式で、非テキストコンテンツの内容が分かるラベルを提供する

• a. コンテンツの内容が分かるラベルを提供し、ライブの音声しか含まないコンテンツ及びライブの映像しか含まないコンテンツの目的を説明する
• b. 非テキストコンテンツの一般に認められた名前又は内容が分かる名前を提供する

音声・映像ファイルが設置されている場合に、内容がわかりやすい名前や説明があるか。

状況E： 非テキストコンテンツが CAPTCHA である場合

代替テキストを提供して、CAPTCHAの目的を説明する

「CAPTCHA」画像にある文字を代替テキストとして記述すると、
ロボット（プログラム）が読みとることができ、本来の目的を果たせなくなってしまうので、
alt="画像に表示された文字列をタイプ入力してください。この後に音声版もあります。のように、
その目的と別形式の「CAPTCHA」の代替バージョンがあることが説明されているか。

同じ目的を果たす、異なる感覚モダリティを用いたもう一つのCAPTCHAがウェブページにあることを確認する

視覚に対応した画像版と聴覚に対応した音声版、複数のバージョンを提供しているか。

状況F： 非テキストコンテンツを支援技術が無視するようにしなければならない場合

支援技術が無視すべき画像のimg要素は、alt属性値を空にして、title属性を付与しない

装飾のためのimg要素にalt属性は空になっているか。title属性が付与されていないか。

<img src="hr.png" alt="">

CSSで指定する画像は、装飾的なものだけである

背景画像などに文字はないか。

収録済みの音声しか含まないコンテンツの場合

状況A： 収録済みの音声しか含まないコンテンツの場合

いずれかの方法を用いる

• a. 時間の経過に伴って変化するメディアの収録済みの音声しか含まないコンテンツに対して代替コンテンツ（書き起こしテキスト）を提供する
• b. 時間の経過に伴って変化するメディアの収録済みの音声コンテンツがテキストの代替メディアである場合は、代替メディアであることを明確にラベル付けする

状況B： 収録済みの映像しか含まないコンテンツの場合

いずれかの方法を用いる

• a. 時間の経過に伴って変化するメディアの映像しか含まないコンテンツに対して代替コンテンツ（書き起こしテキスト）を提供する
• b. 重要な映像コンテンツを説明する音声を提供する
• c. 時間の経過に伴って変化するメディアの収録済みの映像コンテンツがテキストの代替メディアである場合は、代替メディアであることを明確にラベル付けする

収録済み音声コンテンツのキャプションに関する達成基準

いずれかの方法を用いる

• a. オープン・キャプション（常に表示）を提供する
• b. クローズド・キャプションを提供する
• c. 時間の経過に伴って変化するメディアの収録済みの音声コンテンツがテキストの代替メディアである場合は、代替メディアであることを明確にラベル付けする

オープンキャプション：常時表示される字幕。
クローズドキャプション：表示/非表示を切り替えることができる字幕。

収録済みの映像コンテンツの代替コンテンツ又は音声ガイドに関する達成基準

いずれかの方法を用いる

• a. 時間の経過の伴い変化するメディアに対して代替コンテンツを提供する
• b. 音声ガイドを含んだ、利用者が選択可能な副音声トラックを提供する
• c. 時間の経過に伴って変化するメディアの収録済みの映像コンテンツがテキストの代替メディアである場合は、代替メディアであることを明確にラベル付けする

※映像トラックにある情報のすべてが音声トラックですでに提供されている場合には、音声ガイドを必要としない。

情報及び関係性に関する達成基準

状況A： ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムが解釈可能にするセマンテックな構造を提供している場合

セマンティックな要素を用いて、構造をマークアップする

• a. 強調、又は視覚的な装飾個所が特別な意味を持つ場合、その情報がセマンティックなマークアップによって伝えられている。
• b. 引用箇所に、blockquote要素が使われている。
• c. 参照箇所に、cite要素が使われている。
• d. 下付き文字、上付き文字が、sub、sup要素でマークアップされている。

<strong class="fontColorRed">重要なお知らせ</strong>

<blockquote cite="https://ja.wikipedia.org/wiki/クリスマス">
    <p>イエス・キリストの降誕を記念する祭</p>
</blockquote>

<span>エタノールの化学式は CH<sub>3</sub>CH<sub>2</sub>OH</span>

テキストを用いて、テキストの表現のバリエーションによって伝えている情報を伝達する

ローストターキーを太字で表示すると視覚のみで情報が提供されてしまう。

1. ローストターキー
2. ローストチキン
3. ローストポテト

「オススメ」を表記すれば聴覚での情報も提供される。

1. ローストターキー（オススメ）
2. ローストチキン
3. ローストポテト（売り切れ）

視覚的なバリエーションが何らかの情報を伝達している場合は、
コンテンツのどこか他の場所でテキストによっても入手可能である必要がある。

情報と構造を表現から分離して、異なる表現を可能にする（CSSを用いて構造と表現を分離する）

<p>・ローストターキー<br>
・ローストチキン<br>
・ローストポテト</p>

<!-- リストで書く -->
<ul>
    <li>ローストターキー</li>
    <li>ローストチキン</li>
    <li>ローストポテト</li>
</ul>

色の手がかりを用いる場合には、セマンティックにマークアップする

重要という意味で色を使用するならばマークアップもそれに従う。

<p>赤色で<strong style="color: #ff0000;">必須</strong>と示されている項目は、必須項目ですので必ず入力してください。</p>

テーブルのマークアップを用いて、表の情報を提示する

tableがあり、table, tr, th, tdを用いてマークアップされているか。
レイアウトに使用されるテーブルの場合は、th要素、又はcaption要素などは必要ない。

<table>
<tr>
<td class="head">お名前</td>
<td class="item"><input type="text"></td>
...
<tr>
</table>

caption要素を用いて、データテーブルの表題とデータテーブルを関連付ける

table要素にcaption要素が記述されているか。

<table>
<caption>表のタイトル</caption>
<tbody>
<tr>
...
</tr>
</tbody>
</table>

データテーブルに列方向か行方向かあいまいな見出しセルがある場合、scope属性を用いて、見出しセルとデータセルを関連付ける

scope=”row”
同じ行（水平方向）のセルを対象とする。

<table>
<tr>
<th scope="row">くだもの</th>
<td>りんご</td>
<td>ぶどう</td>
</tr>
<tr>
<th scope="row">野菜</th>
<td>トマト</td>
<td>玉ねぎ</td>
</tr>
</table>

scope=”col”
同じ列（垂直方向）のセルを対象とする。

<table>
<tr>
<th scope="col">くだもの</th>
<th scope="col">野菜</th>
</tr>
<tr>
<td>りんご</td>
<td>トマト</td>
</tr>
<tr>
<td>ぶどう</td>
<td>玉ねぎ</td>
</tr>
</table>

見出し構造が複雑で、scope属性だけでは見出しセルが指定できないデータテーブルでは、id属性及びheaders属性を用いて、データテーブルのデータセルを見出しセルと関連付ける

複雑なテーブルであればheaders属性を使う。

<table>
<tr>
<th>年度</th>
<th id="y2021">2021年</th>...
</tr>
<tr>
<th id="sales">売上</th>
<td headers="sales y2021">1億</td>
...
</tr>
</table>

label要素を用いて、テキストのラベルとフォーム・コントロールを関連付ける

フォームにはlabel要素が書かれているか。

• 各要素の前にlabel要素があるか
• label要素のfor属性値がidと一致しているか
• label要素のラベルが視覚的に認識できる状態であるか

フォームのコントロールがあるグループを形成している場合、fieldset要素及び legend要素を用いて、フォーム・コントロールのグループに関する説明を提供する

fieldset要素はフォームの入力項目をグループ化する場合に使用。
グループの先頭には、legend要素でタイトルをつける。

<form>
<fieldset>
<legend>お客様情報</legend>
<label for="name">お名前</label>
<input type="text" id="name" name="name">
...
</fieldset>
<fieldset>
<legend>このサイトをどこで知りましたか？</legend>
<input type="radio" id="google" name="google" value="1">
<label for="google">Google</label><br>
<input type="radio" id="yahoo" name="yahoo" value="2"><br>
<label for="yahoo">Yahoo!</label>
...
</fieldset>
</form>

optgroup要素を用いて、select要素内の option要素をグループ化する

<select>
<optgroup label="関東">
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="千葉県">千葉県</option>
<option value="埼玉県">埼玉県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
</optgroup>
</select>

リストに、ol要素、ul要素、dl要素を用いる、リストのマークアップを用いて、リストの情報を提示する

順序リストはol要素で記述されているか。
順不同リストはul要素で記述されているか。
定義される言葉とその説明はdl要素で記述されているか。

意味のある順序に関する達成基準

コンテンツを意味のある順序で並べる

cssを排除しコンテンツをリニアライズ（線形化）し、
順序で並べたコンテンツが、リニアライズする前のコンテンツと同じ意味を示しているか。

単語の文字間にスペースやタグを用いない

単語(日本語だけでない)の文字間にスペース、タグを挿入して整形していないか。

<ul>
<li>神無月</li>
<li>霜 月</li>
<li>師 走</li>
</ul>

感覚的な特徴に関する達成基準

理解すべき情報を感覚的にだけ伝えることのないように、テキストでも情報を伝える

「フォームをすべて入力完了後、ページ左側にある四角形の『送信』ボタンを押してください。」などの説明文で、形、大きさ、または位置を使って説明しているすべての言及箇所が、ページ左側にある四角形という情報が無い場合でもボタンを見つけられるように情報が表記されているか。

色の使用に関する達成基準

状況A： ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムが解釈可能にするセマンテックな構造を提供している場合

色の違いで伝えている情報をテキストでも入手可能にする

異なる色を使用することで違いを表現していないか。
色が消えても違いがわかるようにテキストを表記する。

テキストの色の違いで情報を伝える際は、視覚的な手がかりを補足する

周辺の情報との差別化のために太字やイタリック、下線を使用しているか。

色の違いだけで示されているリンク又はコントロールは、その文字色と周囲にあるテキストとのコントラスト比を 3:1 以上にして、フォーカスを受け取ったときには視覚的な手がかりを補足して強調する

リンクの色のコントラスト比は 3:1 以上か。

状況B： 情報を伝える画像の中で色を用いている場合

色とパターンを併用する

画像の中で色の違いを用いている場合には、
色に依存せずに同じ情報を伝達するためのパターン（模様）を併用しているか。

色の違いで伝えている情報をテキストでも入手可能にする

フォームに緑の「次へ」と赤の「キャンセル」ボタンある場合、
「入力完後、緑の[次へ]ボタンを押してください」と表記する。

音声制御に関する達成基準

音声の再生を3秒以内に自動的に停止する

ウェブページをロードし、自動的に再生される全ての音が3秒、またはそれより早く停止されるか。
スクリーンリーダーの利用者が、音が聞こえないためにコントロールを探せないという問題が起こらないようにする。

自動的に再生される音声を停止するコントロールを、ウェブページの先頭付近で提供する

自動的に再生するメディアを設置している場合、停止ボタンはあるか。

利用者の要求に応じてのみ、音声を再生する

（例）ウェブページのBGMが設定されているが自動再生はされず、ヘッダー付近に再生・停止ボタンがあり、
再生ボタンには「BGMを再生する」停止ボタンには「BGMを停止する」と表記する。

キーボード操作に関する達成基準

キーボードがトリガーとなるイベント・ハンドラを提供する

ドラッグアンドドロップでしか機能しないコンテンツはないか。
すべての機能がキーボードだけを使ってアクセスできるか。

フォーカスに関する達成基準

ユーザーがコンテンツ内に閉じ込められないようにする

Tabキーでコンテンツ内を最初から最後まで移動してみてどこかのコンテンツに閉じ込められてはいないか。
閉じ込められた場合、ぬけ出す方法を説明したヘルプがキーボードで利用できるか。

3回の閃光又は閾値以下に関する達成基準

どの1秒間においても、コンテンツに3回よりも多く閃光を放つコンポーネントがないことを確認する

光感受性発作を引き起こす恐れがあるため。

閃光を放つエリアを十分に小さくする

閃光を放つ領域が視野10度の25％未満であればいい。
1024 x 768ピクセルの中で言えば、341 x 256ピクセル程度。

ブロックスキップに関する達成基準

コンテンツの各セクションの開始位置に見出し要素を提供する

段落を訴える見出しタグが正しく表記されているか。

構造を示す要素を用いて、リンクをグループ化する

ナビゲーションがページ上部にある場合、スクリーンリーダーの利用者がナビゲーションバーを飛ばしたり、
そこに含まれる全てのリンクの読み上げを回避したりできるようにする。

<!-- リンクの羅列ではなく -->
<a href="">ホーム</a>
<a href="">事業内容</a>
<a href="">会社概要</a>

<!-- グループ化する -->
<ul>
    <li><a href="">ホーム</a></li>
    <li><a href="">事業内容</a></li>
    <li><a href="">会社概要</a></li>
</ul>

フォーカスに関する達成基準

コンテンツ内の順番及び関係に従った順序で、インタラクティブな要素を配置する

タブ移動がコンテンツの順序に従っているか。

プログラムが解釈可能な識別名、役割及び設定可能な値に関する達成基準

マークアップを用いて、名前及び役割をユーザーエージェントに提供し、利用者が設定可能なプロパティを直接設定可能にし、変化を通知する

ユーザーインタフェース要素が、識別名と役割を決定することができるような適切なマークアップがされているか。
また、全て支援技術から操作することができるように適切にマークアップされているか。

例えば、ハンバーガーメニューやタブはdivやspanで実装しない。
キーボード利用者はそれらにフォーカスを当てることができないので
buttonを使用するか、aで実装してrole="botton"を付与する。

おわりに

ウェブアクセシビリティ検証基準の一部をご紹介してきました。
その他にもフォームの制限時間やテキストサイズに関する基準などがあります。
さらに見てみたい方は下記リンクが参考になるかと思います。
JIS X 8341-3:2016 試験実施ガイドライン

ユーザーに的確に情報を伝えることは時に難しく、視覚的な美しさでは足りず、
その手段と表現方法に最善の解を見い出すことがとても大事なことだと思います。

私もWEBデザイナーとしてそれを体現できているか確信はありませんが、
常に自らの常識を疑いながら、ユーザーへの想像力を育んでいきたいと思っています。