UAI Seminar 2008 at Nagoya

1,153 views

Published on

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,153
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide








































































































































  • UAI Seminar 2008 at Nagoya

    1. 1. 2008年5月15日 UAIセミナ コンテンツアクセシブルな ナビゲーション フォーム 独立行政法人 国立特別支援教育総合研究所 山口 俊光
    2. 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. 3. Jim Thatcher• アクセシビリティコンサルタント• 計算機科学が専門 Ph.D• 前職はIBMのアクセシビリティエ ンジニア• IBM Screen Reader(DOS)• IBM Screen Reader(OS/2)
    4. 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. 5. 6-8章の注意点 視覚障害(特に全盲)にやや偏りがある この後、少し補足します 日本の環境では使えないテクニックも JIS X8341-3技術解説も併せて読みましょうhttp://www.jsa.or.jp/stdz/instac/commitee-acc/
    6. 6. 認知的な障害「認知的な障害」
    7. 7. 認知的な障害 「認知的な障害」 知的障害、自閉症、ダウン症、アスペルガー症候群、脳外傷、失語症、失読症、学習障害、アルツハイマー病、 注意欠陥障害(ADD)、注意欠陥多動性障害(ADHD) など
    8. 8. 人数が多い 6.3%(平成17年 中央教育審議会 答申)
    9. 9. 人数が多い 6.3%(平成17年 中央教育審議会 答申) 68万人全学齢児童生徒数:1092万人
    10. 10. 認知機能で見る 「記憶」「問題解決」「注意」「読みや表現、言語に関する能力」「数学的な能力」「視覚的な能力」
    11. 11. アクセシブルコンテンツアクセシブルなWeb開発のためのガイドライン画像への等価なテキストの使用音声の等価テキストを用いる色の使用アクセシブルなテーブルを作るフリッカー(明滅)の問題
    12. 12. 画像の代替テキスト代替テキスト alt属性
    13. 13. 画像の代替テキスト 代替テキスト alt属性alt属性以外にも、longdesc属性やコンテンツ で記述する方法などがある
    14. 14. altの例1<a href=”...”> <img src=”go.gif” ... alt=”go” /></a>
    15. 15. altの例2<a href=”http://...”> <img src=”logobt2.gif” alt=”Home” .../></a>
    16. 16. グラフのalt<img src = ”images/bargraph.gif” width = ”400” height = ”250” alt = ”3グループの結果の棒グラフ” longdesc = ”bargraph.htm” />
    17. 17. 位置やコンテキストalt = ”Find out how” (調べる)alt = ”Find out how to save $30 withAmazon Visa Card”
    18. 18. 位置やコンテキストalt = ”Find out how” (調べる)alt = ”Find out how to save $30 withAmazon Visa Card”Tabキーでリンクだけを辿っても意味が分かる
    19. 19. イメージマップ<img src = ”...” alt = ”Web Resources at The University ofArizona” ... usemap = ”#banner” /><map name = ”banner” id = ”banner”> <area shape = ”rect” alt = ”UA Web Resources Homepage” coords = ”10,05 90,75” href = ”...” /></map>
    20. 20. イメージマップ<img src = ”...” alt = ”Web Resources at The University ofArizona” ... usemap = ”#banner” /><map name = ”banner” id = ”banner”> <area shape = ”rect” alt = ”UA Web Resources Homepage” coords = ”10,05 90,75” href = ”...” /></map>
    21. 21. 代替テキストの記述法 画像のテキスト 実際のaltテキスト altテキストの代替案Web Resources UA Web Resources Homepage Web resourcesThe University of Arizona UA Homepage U of ASearch Search SearchComments Comments & questions CommentsWeb Resources Home Web Resources Home Web ResourcesUA Home UA Home U of A
    22. 22. 代替テキストの記述法音訳マニュアル【音訳・調査編】ISBN:4-86055-268-7762円視覚障害者向けの音声図書制作マニュアル写真や図、グラフの音訳に関する解説がある
    23. 23. 写真の説明1. 主観的な表現避け、客観的な表現につとめる2. 場所や概略などの説明を先に、次にテーマやポイントなる 部分を説明する3. 写真のテーマとなるところ、ポイントの部分は詳しく説明 し、周辺に属する部分は簡略化する4. 写真の説明文や本文中に書かれていることは、説明を適宜 省くなどして、簡潔にする5. 写真中、確定的でないものには断定的な表現は使わない6. 白黒写真では、「白っぽい」「黒っぽい」の表現は、根拠 のある場合のみ7. 説明の詳しさの度合いにばらつきがないように注意する
    24. 24. 図の説明1. 図のポイント、重要な部分をまずつかむ2. ポイントになる部分を中心に説明すると、分かりやすくな る場合が多い3. 必要な限り、図に表された情報は音声化する図の場合、本文中に図の説明が入ることが多い ので、altは簡素な表現としても良い
    25. 25. 装飾画像スペーサ、ビュレット、本文で説明されている画 像、altを書くと冗長になる場合 alt= (alt= ではない)
    26. 26. 装飾画像スペーサ、ビュレット、本文で説明されている画 像、altを書くと冗長になる場合 alt= (alt= ではない)
    27. 27. longdesc問題
    28. 28. longdesc問題alt = ”Madeira中学校の人種別在籍者数は、ほとんどが白人で他の人種は13%以下である”
    29. 29. longdesc問題alt = ”Madeira中学校の人種別在籍者数は、ほとんどが白人で他の人種は13%以下である”longdesc = ”madeiraDetail.html” 日本のメジャなスクリーンリーダは未対応
    30. 30. 代替テキストまとめ• アクティブな画像(画像リンク、画像ボタン) • 機能を伝える明確で簡素なaltをつける• 非アクティブな画像 • 画像の情報を伝えるaltをつける• 非アクティブな装飾画像 • alt=
    31. 31. 代替テキストまとめ• 短いalt属性では情報を伝えきれない画像 • longdesc属性 • 本文中に画像の内容を記述する
    32. 32. 音声の等価テキスト • 「書き起こしテキスト」を提供する • 「書き起こしテキスト」 • 人が話した内容 • 重要な音響的な手掛かり参考:アクセシビリティPodcasthttp://accessibility.mitsue.co.jp/archives/podcast/
    33. 33. 色の使用• 色だけで情報を伝えない(色弱への対応) • 「赤い字は必須項目」• コントラストをとる • 1:3以上のコントラストカラー・コントラスト・アナライザなど確認
    34. 34. レイアウトテーブル• 読み上げ順序をリニアライズして確認する• th, caption, summary, thead, tbodyな どは、使わない• table, tr, tdだけで書く
    35. 35. データテーブル
    36. 36. データテーブル• 見出しは、できるだけ1行目1列目に書く• 見出しは、thでマークアップ• 見出しが列方向か行方向か分かりづらい時 は、th要素のscope属性(scope= row )• thを解釈できるのはHPRとJAWSのみ
    37. 37. 階層構造テーブル P.203 図6-15• データセルに対応するヘッダが階層的 • 「Moldboard」「0P/0K」「April 23-26」• id/headersでマークアップする
    38. 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. 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. 40. id/headersの問題• 複雑でマークアップが難しい • 表の単純化 • 表の分割• 日本のスクリーンリーダでid/headersに対 応しているのはHPRとJAWS
    41. 41. テーブルまとめ• 1行目、1列目に見出し• 見出しセルはth要素• データかつ見出しである場合は、scope属性 やheaders属性を使用• レイアウトテーブルでは、th, scope, headers, summaryは使わない
    42. 42. フリッカ
    43. 43. フリッカ「てんかん発作を誘発する画像」によるネット攻撃 WIRED VISION 2008/4/1
    44. 44. フリッカ
    45. 45. フリッカ 点滅すると、光源性てんかんの原因に そもそも、点滅しない方がいい blinkやmarqueeを使わないのは当然JavaScriptやGIFアニメーションで点滅する様 な場合に注意
    46. 46. 問題解決を助ける 読んで意味の分かるエラーメッセージ• 「不正な値」「コード(-108)」?• 修正方法も併せて示せればより良い
    47. 47. 注意を助ける 主要なコンテンツ以外の要素を控え目に• 大量のバナー広告• 止まらない動画GIF• 派手な背景
    48. 48. 注意を助ける 主要なコンテンツ以外の要素を控え目に• 大量のバナー広告• 止まらない動画GIF• 派手な背景
    49. 49. 言語理解を助ける 複数のメディアで情報を提供する• イラストや動画、音声は文字の読みを助ける• ただし、通常の文字情報もきちんと提供する
    50. 50. ナビゲーションナビゲーションの考察読み上げ順序見出しナビゲーションナビゲーションリンクのスキップアクセシブルなフレームアクセシブルなイメージマップレイアウトとナビゲーションアクセシブルなリンク
    51. 51. ナビゲーションの問題• サイト内のナビゲーション• ページ内のナビゲーション• フレームのナビゲーション• マウスを使わないユーザのナビゲーション• スクリーンリーダのためのナビゲーション
    52. 52. 読み上げ順序 読み上げ順序 ソースの順• 「見た目の順序」ではない• リニアライズして確認する
    53. 53. 読み上げの視覚化aDesigner(IBM)
    54. 54. 見出しナビゲーション• 見出し(h?)要素の一覧を表示してジャンプ• 見出し要素を順番にジャンプ• 見出しナビゲーションを使用できれば、見出 し要素が「目次」になる JAWS、HPR、FocusTalkが対応
    55. 55. ナビゲーションスキップ• ナビゲーションのメニューをスキップして、 本文にジャンプ(JAWS、HPRが対応)• 4つの対策
    56. 56. 4つの対策• 普通のテキストでリンク• 情報を伝えない画像のaltでリンク• 不可視にしたテキストでリンク(CSS)• CSSを使ってフォーカスがあたったとき、リ ンクのテキストを表示
    57. 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. 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. 59. アクセシブルなリンク• 視覚障害者や肢体不自由者は、キーボードで 操作する(Tab / Shift+Tab)• Tabキーでリンクだけを読む場合もある 「ここをクリック」では意味が分からない リンクだけでも、機能が分かるようにするonClick属性では、キーボードから操作不能
    60. 60. 記憶を助ける step 2 of 4 ・ 2/4• 「処理の流れ」• どこに自分がいるのか?• どこまで続くのか?
    61. 61. 記憶を助けるもどる(支払い方法の指定)・すすむ(注文確認)• 「もどる」「すすむ」に情報を補足する• 戻ったらどこに行くのか?• 進んだらどこに行くのか?
    62. 62. アクセシブルなフォームデータ入力フォームのガイドラインアクセシブルなフォームフォームの必須フィールド、エラー、ヘルプPDFフォームろう者のためのフォームのアクセシビリティ時間制限のある入力日本語環境でのフォームの読み上げテスト
    63. 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. 64. フォームのレイアウト• フォームをテーブルに入れるのは、あまり良 くない• labelをつければ読み上げは可能 • ただし、idはユニークでなければならない のでラベルは共有できない• 不可視画像のaltを使うテクニックが使える
    65. 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”>Americanexpress</label> <input id=”card1b” type=”radio”name=”card1”> <label for=”card1b”>Mastercard</label> ... JAWS、HPRが対応している
    66. 66. 必須項目• 色、位置、形に依存しない(例:赤色の項目)• 簡潔な表現にする• 情報がコントロールのラベルの一部になって いること• 必須項目を示す画像でalt= 必須 とするか、 テキストで「必須」などとする
    67. 67. フォームの検証• サーバ側で行うのが無難• クライアント側でJavaScriptを使った場 合、動作しない、エラーに気付かない、と いった問題が起こるかも• フォームでエラーがあった場合、入力内容を 保持して修正できるようにする• 何がエラーしたかを明確にする
    68. 68. ろう者アクセシビリティ• フォームに「電話番号」を入力する欄があっ ても聴覚障害者は電話を受けられないかもし れない• 電話以外の手段(FAXやメール)が必要• 技術的な話ではないが、フォームの設計段階 で考慮すべき
    69. 69. 時間制限• ユーザが時間制限を調節できる • 例)設定値をcookieで保存する• 簡単な操作で延長できる • 例)特定のキーを押すと延長できる• どうしても延長できない場合(オークション や株価)もある
    70. 70. まとめ• コンテンツやナビゲーション、フォームをア クセシブルにするテクニックを紹介• 日本でメジャなスクリーンリーダは、欧米の それに比べて機能が少ない • 標準に合わせる? • 日本向けの対応考える?• 認知的な障害にも注目
    71. 71. Question? 質問?
    72. 72. Thank youありがとうございました

    ×