1. 2008年5月15日 UAIセミナ
コンテンツ
アクセシブルな ナビゲーション
フォーム
独立行政法人 国立特別支援教育総合研究所
山口 俊光

2. 目次
第6章 アクセシブルなコンテンツ 6. アクセシブルなイメージマップ
1. アクセシブルなWeb開発のためのガ 7. レイアウトとナビゲーション
イドライン 8. アクセシブルなリンク
2. 画像への等価テキストの使用
3. 音声の等価テキストを用いる 第8章 アクセシブルなフォーム
4. 色の使用 1. データ入力フォームのガイドライン
5. アクセシブルなテーブルを作る 2. アクセシブルなフォーム
6. フリッカー(明滅)の問題 3. フォームの必須のフィールド、エ
ラー、ヘルプ
第7章 アクセシブルなナビゲーション 4. PDFフォーム
1. ナビゲーションの考察 5. ろう者のためのフォームのアクセシ
2. 読み上げ順序 ビリティ
3. 見出しナビゲーション 6. 時間制限のある入力
4. ナビゲーションリンクのスキップ 7. 日本語環境でのフォームの読み上げ
5. アクセシブルなフレーム テスト

3. Jim Thatcher
• アクセシビリティコンサルタント
• 計算機科学が専門 Ph.D
• 前職はIBMのアクセシビリティエ
ンジニア
• IBM Screen Reader(DOS)
• IBM Screen Reader(OS/2)

4. スクリーンリーダ
• ホームページ・リーダー（IBM）
• PC-Talker（高知システム）
• 95Reader（SSCT）
• JAWS（Freedom Scientific/エクストラ）
• FocusTalk（スカイフィッシュ）
参考：「視覚障害者のパソコン・インターネット・携帯電話利用状況調査 2007」
http://www.nise.go.jp/kenshuka/josa/kankobutsu/pub_d/d-267.html

5. 6-8章の注意点
視覚障害(特に全盲)にやや偏りがある
この後、少し補足します
日本の環境では使えないテクニックも
JIS X8341-3技術解説も併せて読みましょう
http://www.jsa.or.jp/stdz/instac/commitee-acc/

6. 認知的な障害
「認知的な障害」

7. 認知的な障害
「認知的な障害」
知的障害、自閉症、ダウン症、アスペルガー症候群、
脳外傷、失語症、失読症、学習障害、アルツハイマー病、
注意欠陥障害(ADD)、注意欠陥多動性障害(ADHD)
など

8. 人数が多い
6.3%
(平成17年 中央教育審議会 答申)

9. 人数が多い
6.3%
(平成17年 中央教育審議会 答申)
68万人
全学齢児童生徒数：1092万人

10. 認知機能で見る
「記憶」「問題解決」「注意」
「読みや表現、言語に関する能力」
「数学的な能力」「視覚的な能力」

11. アクセシブルコンテンツ
アクセシブルなWeb開発のためのガイドライン
画像への等価なテキストの使用
音声の等価テキストを用いる
色の使用
アクセシブルなテーブルを作る
フリッカー(明滅)の問題

12. 画像の代替テキスト
代替テキスト
alt属性

13. 画像の代替テキスト
代替テキスト
alt属性
alt属性以外にも、longdesc属性やコンテンツ
で記述する方法などがある

14. altの例1
<a href=”...”>
<img src=”go.gif” ... alt=”go” />
</a>

15. altの例2
<a href=”http://...”>
<img src=”logobt2.gif” alt=”Home” .../>
</a>

16. グラフのalt
<img src = ”images/bargraph.gif”
width = ”400” height = ”250”
alt = ”3グループの結果の棒グラフ”
longdesc = ”bargraph.htm” />

17. 位置やコンテキスト
alt = ”Find out how” (調べる)
alt = ”Find out how to save $30 with
Amazon Visa Card”

18. 位置やコンテキスト
alt = ”Find out how” (調べる)
alt = ”Find out how to save $30 with
Amazon Visa Card”
Tabキーでリンクだけを辿っても意味が分かる

19. イメージマップ
<img src = ”...”
alt = ”Web Resources at The University of
Arizona” ...
usemap = ”#banner” />
<map name = ”banner” id = ”banner”>
<area shape = ”rect”
alt = ”UA Web Resources Homepage”
coords = ”10,05 90,75”
href = ”...” />
</map>

20. イメージマップ
<img src = ”...”
alt = ”Web Resources at The University of
Arizona” ...
usemap = ”#banner” />
<map name = ”banner” id = ”banner”>
<area shape = ”rect”
alt = ”UA Web Resources Homepage”
coords = ”10,05 90,75”
href = ”...” />
</map>

21. 代替テキストの記述法
画像のテキスト 実際のaltテキスト altテキストの代替案
Web Resources UA Web Resources Homepage Web resources
The University of Arizona UA Homepage U of A
Search Search Search
Comments Comments & questions Comments
Web Resources Home Web Resources Home Web Resources
UA Home UA Home U of A

22. 代替テキストの記述法
音訳マニュアル【音訳・調査編】
ISBN:4-86055-268-7
762円
視覚障害者向けの音声図書制作マニュアル
写真や図、グラフの音訳に関する解説がある

23. 写真の説明
1. 主観的な表現避け、客観的な表現につとめる
2. 場所や概略などの説明を先に、次にテーマやポイントなる
部分を説明する
3. 写真のテーマとなるところ、ポイントの部分は詳しく説明
し、周辺に属する部分は簡略化する
4. 写真の説明文や本文中に書かれていることは、説明を適宜
省くなどして、簡潔にする
5. 写真中、確定的でないものには断定的な表現は使わない
6. 白黒写真では、「白っぽい」「黒っぽい」の表現は、根拠
のある場合のみ
7. 説明の詳しさの度合いにばらつきがないように注意する

24. 図の説明
1. 図のポイント、重要な部分をまずつかむ
2. ポイントになる部分を中心に説明すると、分かりやすくな
る場合が多い
3. 必要な限り、図に表された情報は音声化する
図の場合、本文中に図の説明が入ることが多い
ので、altは簡素な表現としても良い

25. 装飾画像
スペーサ、ビュレット、本文で説明されている画
像、altを書くと冗長になる場合
alt= (alt= ではない)

26. 装飾画像
スペーサ、ビュレット、本文で説明されている画
像、altを書くと冗長になる場合
alt= (alt= ではない)

27. longdesc問題

28. longdesc問題
alt = ”Madeira中学校の人種別在籍者数は、ほと
んどが白人で他の人種は13%以下である”

29. longdesc問題
alt = ”Madeira中学校の人種別在籍者数は、ほと
んどが白人で他の人種は13%以下である”
longdesc = ”madeiraDetail.html”
日本のメジャなスクリーンリーダは未対応

30. 代替テキストまとめ
• アクティブな画像（画像リンク、画像ボタン）
• 機能を伝える明確で簡素なaltをつける
• 非アクティブな画像
• 画像の情報を伝えるaltをつける
• 非アクティブな装飾画像
• alt=

31. 代替テキストまとめ
• 短いalt属性では情報を伝えきれない画像
• longdesc属性
• 本文中に画像の内容を記述する

32. 音声の等価テキスト
• 「書き起こしテキスト」を提供する
• 「書き起こしテキスト」
• 人が話した内容
• 重要な音響的な手掛かり
参考：アクセシビリティPodcast
http://accessibility.mitsue.co.jp/archives/podcast/

33. 色の使用
• 色だけで情報を伝えない（色弱への対応）
• 「赤い字は必須項目」
• コントラストをとる
• 1:3以上のコントラスト
カラー・コントラスト・アナライザなど確認

34. レイアウトテーブル
• 読み上げ順序をリニアライズして確認する
• th, caption, summary, thead, tbodyな
どは、使わない
• table, tr, tdだけで書く

35. データテーブル

36. データテーブル
• 見出しは、できるだけ1行目1列目に書く
• 見出しは、thでマークアップ
• 見出しが列方向か行方向か分かりづらい時
は、th要素のscope属性(scope= row )
• thを解釈できるのはHPRとJAWSのみ

37. 階層構造テーブル
P.203 図6-15
• データセルに対応するヘッダが階層的
• 「Moldboard」「0P/0K」「April
23-26」
• id/headersでマークアップする

38. 階層構造テーブル
<table>
<tr><td></td><th id=”h12” colspan=”2”>Moldboard</
th><th id=”h14” colspan=”2”>No-Till</th></tr>
<tr align=”center”>
<th id=”h21”>Planting Date</th>
<th id=”h22”>0P/0K</th>
<th id=”h23”>25P/25K</th>
<th id=”h24”>0P/0K</th>
<th id=”h25”>25P/25K</th>
</tr>
<tr align=”center”>
<th id=”h31” headers=”h21”>April 23-26</th>
<td headers=”h31 h12 h22”>152</td>
...

39. 階層構造テーブル
<table>
<tr><td></td><th id=”h12” colspan=”2”>Moldboard</
th><th id=”h14” colspan=”2”>No-Till</th></tr>
<tr align=”center”>
<th id=”h21”>Planting Date</th>
<th id=”h22”>0P/0K</th>
<th id=”h23”>25P/25K</th>
<th id=”h24”>0P/0K</th>
<th id=”h25”>25P/25K</th>
</tr>
<tr align=”center”>
<th id=”h31” headers=”h21”>April 23-26</th>
<td headers=”h31 h12 h22”>152</td>
...

40. id/headersの問題
• 複雑でマークアップが難しい
• 表の単純化
• 表の分割
• 日本のスクリーンリーダでid/headersに対
応しているのはHPRとJAWS

41. テーブルまとめ
• 1行目、1列目に見出し
• 見出しセルはth要素
• データかつ見出しである場合は、scope属性
やheaders属性を使用
• レイアウトテーブルでは、th, scope,
headers, summaryは使わない

42. フリッカ

43. フリッカ
「てんかん発作を誘発する画像」によるネット攻撃
WIRED VISION 2008/4/1

44. フリッカ

45. フリッカ
点滅すると、光源性てんかんの原因に
そもそも、点滅しない方がいい
blinkやmarqueeを使わないのは当然
JavaScriptやGIFアニメーションで点滅する様
な場合に注意

46. 問題解決を助ける
読んで意味の分かるエラーメッセージ
• 「不正な値」「コード(-108)」？
• 修正方法も併せて示せればより良い

47. 注意を助ける
主要なコンテンツ以外の要素を控え目に
• 大量のバナー広告
• 止まらない動画GIF
• 派手な背景

48. 注意を助ける
主要なコンテンツ以外の要素を控え目に
• 大量のバナー広告
• 止まらない動画GIF
• 派手な背景

49. 言語理解を助ける
複数のメディアで情報を提供する
• イラストや動画、音声は文字の読みを助ける
• ただし、通常の文字情報もきちんと提供する

50. ナビゲーション
ナビゲーションの考察
読み上げ順序
見出しナビゲーション
ナビゲーションリンクのスキップ
アクセシブルなフレーム
アクセシブルなイメージマップ
レイアウトとナビゲーション
アクセシブルなリンク

51. ナビゲーションの問題
• サイト内のナビゲーション
• ページ内のナビゲーション
• フレームのナビゲーション
• マウスを使わないユーザのナビゲーション
• スクリーンリーダのためのナビゲーション

52. 読み上げ順序
読み上げ順序
ソースの順
• 「見た目の順序」ではない
• リニアライズして確認する

53. 読み上げの視覚化
aDesigner(IBM)

54. 見出しナビゲーション
• 見出し(h?)要素の一覧を表示してジャンプ
• 見出し要素を順番にジャンプ
• 見出しナビゲーションを使用できれば、見出
し要素が「目次」になる
JAWS、HPR、FocusTalkが対応

55. ナビゲーションスキップ
• ナビゲーションのメニューをスキップして、
本文にジャンプ（JAWS、HPRが対応）
• 4つの対策

56. 4つの対策
• 普通のテキストでリンク
• 情報を伝えない画像のaltでリンク
• 不可視にしたテキストでリンク（CSS）
• CSSを使ってフォーカスがあたったとき、リ
ンクのテキストを表示

57. アクセシブルなフレーム
frame要素でtitle属性を指定する
<frameset row=”40,*”>
<frame src=”Title.htm” ... id=”toptitle”
name=”TopTitle” title=”Top Title”>
<frameset cols=”150,*,150”>
<frame src=”Left.htm” ... id=”leftnavigation”
name=”LeftNavigation” title=”Left Navigation”>
head内でtitle要素を書く
<head>
<title>Navigation</title>

58. イメージマップ
area要素でalt属性を書く
<map>
<area shape=”rect” cords=”4,33,76,72” href=”..”
alt=”Committee Hearing Schedule” />
<area shape=”rect” cords=”5,78,88,117” href=”..”
alt=”Yesterday’s Senate Floor Activity” />
<area shape=”rect” cord=”5,121,75,140” href=”..”
alt=”Senate Art” />
<area shape=”rect” cords=”5,143,59,172”
href=”..” alt=”Senate History” />
</map>
クライアントサイドを使うのが基本
サーバサイドを使う時には、代替リンクが必要

59. アクセシブルなリンク
• 視覚障害者や肢体不自由者は、キーボードで
操作する（Tab / Shift+Tab）
• Tabキーでリンクだけを読む場合もある
「ここをクリック」では意味が分からない
リンクだけでも、機能が分かるようにする
onClick属性では、キーボードから操作不能

60. 記憶を助ける
step 2 of 4 ・ 2/4
• 「処理の流れ」
• どこに自分がいるのか？
• どこまで続くのか？

61. 記憶を助ける
もどる(支払い方法の指定)・すすむ(注文確認)
• 「もどる」「すすむ」に情報を補足する
• 戻ったらどこに行くのか？
• 進んだらどこに行くのか？

62. アクセシブルなフォーム
データ入力フォームのガイドライン
アクセシブルなフォーム
フォームの必須フィールド、エラー、ヘルプ
PDFフォーム
ろう者のためのフォームのアクセシビリティ
時間制限のある入力
日本語環境でのフォームの読み上げテスト

63. ラベル
フォームはlabel要素でラベルをつける
<label for=”name”>名前</label> :
<input name=”test” id=”name” type=”text” size=”15”>
位置による推測も可能（依存しない方が良い）
名前 : <input name=”test” id=”name” type=”text”
size=”15”>

64. フォームのレイアウト
• フォームをテーブルに入れるのは、あまり良
くない
• labelをつければ読み上げは可能
• ただし、idはユニークでなければならない
のでラベルは共有できない
• 不可視画像のaltを使うテクニックが使える

65. fieldset / legend
関連するものをまとめておく
<fieldset>
<legend>Payment details</legend>
<fieldset class=”radio”>
<legend>Credit card</legend>
<input id=”card1a” type=”radio”
name=”card1”>
<label for=”card1a”>American
express</label>
<input id=”card1b” type=”radio”
name=”card1”>
<label for=”card1b”>Mastercard</
label>
...
JAWS、HPRが対応している

66. 必須項目
• 色、位置、形に依存しない（例:赤色の項目）
• 簡潔な表現にする
• 情報がコントロールのラベルの一部になって
いること
• 必須項目を示す画像でalt= 必須 とするか、
テキストで「必須」などとする

67. フォームの検証
• サーバ側で行うのが無難
• クライアント側でJavaScriptを使った場
合、動作しない、エラーに気付かない、と
いった問題が起こるかも
• フォームでエラーがあった場合、入力内容を
保持して修正できるようにする
• 何がエラーしたかを明確にする

68. ろう者アクセシビリティ
• フォームに「電話番号」を入力する欄があっ
ても聴覚障害者は電話を受けられないかもし
れない
• 電話以外の手段（FAXやメール）が必要
• 技術的な話ではないが、フォームの設計段階
で考慮すべき

69. 時間制限
• ユーザが時間制限を調節できる
• 例）設定値をcookieで保存する
• 簡単な操作で延長できる
• 例）特定のキーを押すと延長できる
• どうしても延長できない場合（オークション
や株価）もある

70. まとめ
• コンテンツやナビゲーション、フォームをア
クセシブルにするテクニックを紹介
• 日本でメジャなスクリーンリーダは、欧米の
それに比べて機能が少ない
• 標準に合わせる？
• 日本向けの対応考える？
• 認知的な障害にも注目

71. Question?
質問？

72. Thank you
ありがとうございました