Contenu connexe Similaire à UAI Seminar 2008 at Nagoya (20) Plus de Toshimitsu YAMAGUCHI (14) UAI Seminar 2008 at Nagoya2. 目次
第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. アクセシブルなフレーム テスト
4. スクリーンリーダ
• ホームページ・リーダー(IBM)
• PC-Talker(高知システム)
• 95Reader(SSCT)
• JAWS(Freedom Scientific/エクストラ)
• FocusTalk(スカイフィッシュ)
参考:「視覚障害者のパソコン・インターネット・携帯電話利用状況調査 2007」
http://www.nise.go.jp/kenshuka/josa/kankobutsu/pub_d/d-267.html
7. 認知的な障害
「認知的な障害」
知的障害、自閉症、ダウン症、アスペルガー症候群、
脳外傷、失語症、失読症、学習障害、アルツハイマー病、
注意欠陥障害(ADD)、注意欠陥多動性障害(ADHD)
など
8. 人数が多い
6.3%
(平成17年 中央教育審議会 答申)
9. 人数が多い
6.3%
(平成17年 中央教育審議会 答申)
68万人
全学齢児童生徒数:1092万人
13. 画像の代替テキスト
代替テキスト
alt属性
alt属性以外にも、longdesc属性やコンテンツ
で記述する方法などがある
16. グラフのalt
<img src = ”images/bargraph.gif”
width = ”400” height = ”250”
alt = ”3グループの結果の棒グラフ”
longdesc = ”bargraph.htm” />
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
32. 音声の等価テキスト
• 「書き起こしテキスト」を提供する
• 「書き起こしテキスト」
• 人が話した内容
• 重要な音響的な手掛かり
参考:アクセシビリティPodcast
http://accessibility.mitsue.co.jp/archives/podcast/
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>
...
49. 言語理解を助ける
複数のメディアで情報を提供する
• イラストや動画、音声は文字の読みを助ける
• ただし、通常の文字情報もきちんと提供する
52. 読み上げ順序
読み上げ順序
ソースの順
• 「見た目の順序」ではない
• リニアライズして確認する
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>
クライアントサイドを使うのが基本
サーバサイドを使う時には、代替リンクが必要
60. 記憶を助ける
step 2 of 4 ・ 2/4
• 「処理の流れ」
• どこに自分がいるのか?
• どこまで続くのか?
63. ラベル
フォームはlabel要素でラベルをつける
<label for=”name”>名前</label> :
<input name=”test” id=”name” type=”text” size=”15”>
位置による推測も可能(依存しない方が良い)
名前 : <input name=”test” id=”name” type=”text”
size=”15”>
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が対応している