H10-3 placeholder 未入力時 <textarea title="title " placeholder="placeholder "></textarea> placeholder title +placeholder + 各 input typeの読み上げ例 tit

Size: px

Start display at page:

Download "H10-3 placeholder 未入力時 <textarea title="title " placeholder="placeholder "></textarea> placeholder title +placeholder + 各 input typeの読み上げ例 tit"

よしたかとこたに
7 years ago
Views:

1 HTML H1-1 title - あり <title> </title> - ページタイトル + ページ遷移時に読み上げる H1-2 - なし <title></title> なし読み上げしない H2 h1...h6 <h1> </h1> みだし + H3 em - <em> </em> タグ前後のがある場合は一拍おいて読まれる H4 strong - <strong> </strong> タグ前後のがある場合は一拍おいて読まれる H5 mark - <mark> </mark> タグ前後のがある場合は一拍おいて読まれる H6 time datetime <time datetime=" "> </time> 時刻 + 属性 :datetime 内のは読み上げない H7-1 img title <img src="hoge.gif" title=" "> ( 画像の表示 ) H7-2 alt <img src="hoge.gif" alt=" "> ( 画像の表示 ) imgタグの読み上げはalt 属性の利用を推奨する H7-3 なし <img src="hoge.gif"> ( 画像の表示 ) イメージ + 拡張子を除いたファイル名属性 :longdescを指定した場合も同様 H7-4 title=" " alt=" " <img src="hoge.gif" alt=" " title=" "> ( 画像の表示 ) alt 属性とtitle 属性に同じが設定されていた場合 2 度読まず1 度だけ読み上げる H7-5 title="title " alt="alt " <img src="hoge.gif" alt="alt " title="title 文字列 "> ( 画像の表示 ) title +alt alt 属性とtitle 属性にそれぞれ異なるが設定されていた場合両方読み上げる H7-6 alt="" <img src="hoge.gif" alt=""> ( 画像の表示 ) 読み上げない alt 属性が空文字の場合読み上げを行わない H8-1 input type="text" <input type="text"> - 文字入力ボックス +テキストボックスに入力された未入力の場合は補足読み上げのみ H8-2 type="password" <input type="pwssword"> - パスワード入力ボックス + ( 入力文字分ドットを読み上げる) 未入力の場合は補足読み上げのみ H8-3 type=" " <input type=" "> - メールアドレス入力ボックス +テキストボックスに入力された未入力の場合は補足読み上げのみ H8-4 type="number" <input type="number"> - 数字入力ボックス +テキストボックスに入力された数値未入力の場合は補足読み上げのみ H8-5 type="url" <input type="url"> - URL 入力ボックス +テキストボックスに入力された未入力の場合は補足読み上げのみ H8-6 type="radio" チェック時 <input type="radio"> - ラジオボタンです + オングループ設定されている場合は以下ラジオボタン + オン + 個中の個です <label>タグと組み合わせることで選択項目の読み上げが可能 H8-7 未チェック同上 - ラジオボタンです + オフグループ設定されている場合は以下ラジオボタン + オフ + 個中の個です <label>タグと組み合わせることで選択項目の読み上げが可能 H8-8 type="checkbox" チェック時 <input type="checkbox"> - チェックボックス + オン <label>タグと組み合わせることで選択項目の読み上げが可能 H8-9 未チェック同上 - チェックボックス + オフ <label>タグと組み合わせることで選択項目の読み上げが可能 H8-10 type="file" <input type="file"> - ファイル選択 +ファイル名未選択の場合は補足読み上げのみ H8-11 type="range" <input type="range"> - スライダー + 数値 H8-12 type="image" alt <input type="image" src="hoge.gif" alt=" "> ( 画像の表示 ) + ボタン altは指定が必須の属性 H8-13 type="submit" value <input type="submit" value=" "> ( のボタン表示 ) + ボタン value 値に何も設定されていない場合デフォルト文言を読み上げる読み上げ方 : 送信 + ボタン H8-14 type="reset" value <input type="reset" value=" "> ( のボタン表示 ) + ボタン value 値に何も設定されていない場合デフォルト文言を読み上げる読み上げ方 : リセット + ボタン H8-15 type="button" value <input type="button" value=" "> ( のボタン表示 ) + ボタン H8-16 type="search" <input type="search"> - 検索文字入力ボックス +テキストボックスに入力された H8-17 type="tel" <input type="tel"> - 電話番号入力ボックス +テキストボックスに入力された H8-18 上記以外のタイプ - - 文字入力ボックス +テキストボックスに入力された H8-19 タイプ属性全般 title 例 <input type="text" title=" "> - + 各 input typeの読み上げ例 + 文字入力ボックス +テキストボックスに入力された H8-20 タイプ属性全般 placeholder 未入力時例 <input type="text" title="title " placeholder="placeholder "> placeholder title +placeholder + 各 input typeの読み上げ例 title +placeholder + 文字入力ボックス H8-21 タイプ属性全般 placeholder 入力済例 <input type="text" title="title " placeholder="placeholder "> ( 入力された ) placeholderの内容は表示しない title + 各 input typeの読み上げ例 title + 文字入力ボックス +テキストボックスに入力された H9-1 select - <select> 選択されている項目の文字 + 単一選択ボックス + n 項目中 m 項目目 H9-2 multiple <select multiple> 先頭に選択されている項目の文字 + 複数選択ボックス + n 項目中 m 項目選択複数選択していても先頭しか読み上げされない H9-3 title 例 <select title=" "> + 各 selectの読み上げ例 + 選択されている項目の文字 + 単一選択ボックス + n 項目中 m 項目目 H10-1 textarea - <textarea></textarea> 文字表示ボックス +テキストボックスに入力された未入力の場合は補足読み上げのみ H10-2 title <textarea title=" "></textarea> - +textareaの読み上げ例 + 文字表示ボックス +テキストボックスに入力された 1

time datetime <time datetime="2000-1-1"> </time> 時刻 + 属性 :datetime 内のは読み上げない H7-1 img title <img src="hoge.gif" title=" "> ( 画像の表示 ) H7-2 alt <img src="hoge.

2 H10-3 placeholder 未入力時 <textarea title="title " placeholder="placeholder "></textarea> placeholder title +placeholder + 各 input typeの読み上げ例 title +placeholder + 文字表示ボックス H10-4 入力済 <textarea title="title " placeholder="placeholder "></textarea> ( 入力された ) placeholderの内容は表示しない title + 各 input typeの読み上げ例 title + 文字表示ボックス +テキストボックスに入力された H11-1 button <img>の入れ子 <button type="button"><img src="hoge.gif"></button> ( 画像の表示 ) イメージ + 拡張子を除いたファイル名 + ボタン H <button type="button"> </button> (ボタン上に表示 ) + ボタン H11-3 title <button type="button" title="title "> </button> (ボタン上に表示 ) title +buttonの読み上げ例 title + + ボタン H12 label <input type="text"> と関連付け <label for="label1">label </label><input type="text" id="label1"> label +<input type="text">の内容用例の場合 : イメージ + 拡張子を除いたファイル名フォームコントロール(button input textarea select keygen)の関連付けも同様 H13 table summary summary 属性の読上げ <table summary=" ">~ (summaryの内容は表示されない) + 選択要素読み上げ table 内の要素選択時に一度だけ読み上げ他のtable 要素やtable 以外の要素選択で状態はリセット H14 caption - <table><caption> </caption> ( 表の上部に表示 ) H15-1 th - <table> <tr><th> </th></tr> H15-2 abbr <table> <tr><th abbr=" 省略形 "> </th></tr> abbr 属性は読み上げない H16-1 td - <table> <tr><td> </td></tr> H16-2 abbr <table> <tr><td abbr=" 省略形 "> </td></tr> abbr 属性は読み上げない H17-1 a - <a href="hoge.html"> </a> + リンク H17-2 title 例 1 <a href="hoge.html" title="title "> </a> 例 2 <a title=" 押してください"> <h1>これは<span>サンプルイメージ</span>です </h1> </a> 例 1 title + + リンク例 2 imgタグ選択時押してください+ サンプル画像 + リンク h1タグ選択時押してください+ みだし + これはサンプルイメージです + リンク spanタグ選択時押してください+ みだし + サンプルイメージ + リンク aタグ内の要素に触れられた場合常にtitleの内容を読み上げる H18-1 area href alt=" " <img src="map.gif" usemap="#map1> <map name="map1"> <area href="store.html"alt=" "> </map> H18-2 href + altなし <img src="map.gif" usemap="#map1> <map name="map1"> <area href="store.html"> </map> H19 ul <li>の入れ子 <ul> <li> </li> </ul> - + リンク - img 要素読み上げ( 用例の場合拡張子を除いたファイル名 )+ リンク area 要素のリンクにはalt 属性は必須である本仕様はあくまでフェールセーフの明記となるため利用は推奨しないリスト項目 + n 項目中 m 項目目 + n 項目中 m 項目目は対象リストアイテムを初めて選択した場合に読み上げ H20-1 ol <li>の入れ子 <ol> <li> </li> </ol> リスト項目 + n 項目中 m 項目目 + 番号 + n 項目中 m 項目目は対象リストアイテムを初めて選択した場合に読み上げ H20-2 <li>の入れ子 <li value="">の入れ子 <ol> <li value=" 値 "> </li> </ol> (valueは順序の数値 ) リスト項目 + n 項目中 m 項目目 + 番号 + <li>のvalue 属性は読み上げない個中の個ですは対象リストアイテムを初めて選択した場合に読み上げ H21 p - <p> </p> <p>~</p> 内を連続して読み上げる(<br>は無視 ) H22 keygen - 選択されている項目の文字 + 単一選択ボックス + n 項目中 m 項目目 selectと同様の読み上げ H23-1 audio - タグ全体を選択 <audio src="sample.ogg"></audio> 音楽を再生できます H23-2 controls 再生停止ボタンを選択 <audio src="sample.ogg" controls></audio> 再生停止ボタン 2

3 H23-3 スライダーを選択 H24-1 video - タグ全体を選択 <video src="sample.ogv"></video> 動画を再生できますスライダー + 時間時間分秒へフォーマット H24-2 controls 再生停止ボタンを選択 <video src="sample.ogv" controls></video> ( 再生停止ボタンの表示 ) 再生停止ボタン H24-3 スライダーを選択 (スライダーの表示 ) スライダー + 時間時間分秒へフォーマット H24-4 全画面ボタンを選択 ( 全画面ボタンの表示 ) 全画面ボタン H25 br - <div>こんにちは <br>いい天気ですね!<div> こんにちはいい天気ですね! こんにちはいい天気ですね! タグの区切りとして使用せず前後の要素を結合するレイアウト等見栄えでbrを使われるケースがあるため文の区切りとしては扱わない H26 wbr - <div>こんにちは <wbr>いい天気ですね!<div> こんにちはいい天気ですね! wbrは改行の許可であり実際の表示では改行されない場合があるこんにちはいい天気ですね! タグの区切りとして使用せず前後の要素を結合するレイアウト等見栄えでwbrを使われるケースがあるため文の区切りとしては扱わない CSS C1 display:none <div> 表示 1<span style="display:none"> 非表示 </span> 表示 2</div> 表示 1 表示 2 読み上げない( の途中で指定されている場合はその部分について読み飛ばす) C2 visibility:hidden <div> 表示 1<span style="visibility:hidden"> 非表示 </span> 表示 2</div> 表示 1 表示 2 読み上げない( の途中で指定されている場合はその部分について読み飛ばす) JavaScrippt J1 alert() <script type="text/javascript" window.alert( ダイアログのメッセージ"); //? J2 confirm() <script type="text/javascript" window.confirm ( ダイアログのメッセージ"); //? J3 prompt() <script type="text/javascript" window.prompt( ダイアログのメッセージ, 入力文字列 "); // --> - ダイアログです + 内容を確認してOKボタンを押して下さい - ダイアログです + 内容を確認してOKボタンまたはキャンセルボタンを押して下さい - ダイアログです + テキストを入力してOKボタンまたはキャンセルボタンを押して下さい 3

<div> こんにちはいい天気ですね! こんにちはいい天気ですね! タグの区切りとして使用せず前後の要素を結合するレイアウト等見栄えでbrを使われるケースがあるため文の区切りとしては扱わない H26 wbr - <div>こんにちは <wbr>いい天気ですね!<div> こんにちはいい天気ですね! wbrは改行の許可であり実際の表示では改行されない場合があるこんにちはいい天気ですね!

4 TIPS 項番概要詳細 E1 タグ一覧にないタグ要素の読み上げについて一覧にない要素属性については補足読み上げなど特別な読み上げには対応しない画面上に見えるのみ読み上げる例 ruby 要素の読み上げについて rubyタグはrp 要素で囲まれた部分は非表示 ( 無視される)となるよってrp 要素は読み上げしない表示されるテキスト部分を読み上げる補足等の読上げはしないなおテキスト部分の読上げに関しましてはタグの順序に依存するわかりにくい読上げとなってしまう例 <ruby> 夕 <rt>ゆう</rt> 飯 <rt>はん</rt> </ruby><br> 上記のような記載の場合 " 夕 " "ゆう" " 飯 " "はん" と文字ごとに分かれて読上げられる(タグで区切られるため) この例の場合は単語に対して読み仮名を設定した方がユーザーが理解しやすいものと考えられる単語に読み仮名を設定した例 <ruby> 夕飯 <rt>ディナー</rt> </ruby><br> 上記の場合は" 夕飯 " "ディナー"と読み上げる E2 E3 z-indexを利用したコンテンツをタップした場合の読み上げについて frame iframeについてタップした位置の最前面の要素を読み上げるフレーム内の要素も読み上げる E4 contenteditable 属性についてグローバル属性のcontenteditable 属性に関しては付加するとコンテンツが編集可能となるが以下観点から読み上げユーザー向けには利用禁止とし編集可能として読み上げず各タグ仕様に従った読み上げとする編集可能かどうかが見た目で判別できないため E5 複数の子要素を内包可能な要素を選択した場合の読み上げ対象付加部分は除く対象要素 button h1~h6 上記以外のタグ以下のタグは個別の読み上げ仕様を優先 area img input select textarea keygen audio video em strong cite mark 子要素のimgとテキストのみをタグ順に並べたとする例 <h1> <div> これは<span>サンプル画像 </span>です </div> <input type="button" value=" 詳細を見る"> </h1> 上記のような記載の場合 h1タグを選択するとみだし + サンプル画像 + これはサンプル画像ですと読み上げられる img 部品とテキストのみを読み上げ対象とするためこの場合はinputの読み上げは行わない E6 子要素の読み上げ時に親要素の補足を読み上げる付加対象要素 h1~h6 time li table 選択要素の読み上げの生成を行った後上位のタグへ向かって必要な読み上げ情報を付加する例入れ子状態の読み上げ例 aタグ( 親要素 )にimg,h1,divが入れ子 ( 子要素 )となっている親要素は子要素の上位タグ <a> <h1>これは<span>サンプルイメージ</span>です</h1> <div> 詳細の確認は<input type="button" value=" 詳細を見る">ボタンを押して下さい </div> </a> タグ選択時サンプル画像 + これはサンプルイメージです詳細の確認は + ボタンを押して下さい + リンク imgタグ選択時サンプル画像 + リンク h1タグ選択時みだし + これはサンプルイメージです + リンク spanタグ選択時みだし + サンプルイメージ + リンク inputタグ選択時詳細を見る + ボタン + リンク 4

のような記載の場合 " 夕 " "ゆう" " 飯 " "はん" と文字ごとに分かれて読上げられる(タグで区切られるため) この例の場合は単語に対して読み仮名を設定した方がユーザーが理解しやすいものと考えられる単語に読み仮名を設定した例 <ruby> 夕飯 <rt>ディナー</rt>

5 TIPS 項番概要詳細 E7 補足読み上げの順番について付加対象要素入れ子の順番によって付加情報が入れ替わる場合がある h1~h6 例入れ子の順番による読み上げ差異 time li <h1><time>2013 年 01 月 15 日 </time></h1> table 上記の例でtime 選択時みだし + 時刻年 01 月 15 日 <time><h1>2013 年 01 月 15 日 </h1></time> 上記の例でh1タグ選択時時刻 + みだし年 01 月 15 日 5

月 15 日 </time></h1> table 上記の例でtime 選択時みだし + 時刻 + 2013 年 01 月 15 日

あいち電子自治体ガイドライン（第1章）

あいち電子自治体ガイドライン（第1章） 1-1 HTML/XHTML 5 1-2 h 6 1-3 TITLE 7 1-4 8 1-5 9 1-6 10 1-7 11 1-8 12 2-1 13 2-2 14 2-3 15 2-4 16 2-5 17 2-6 18 2-7 19 2-8 20 3-1 21 3-2 22 3-3 23 3-4 24 3-5 25 3-6 4 26 3-7 27 3-8 28 - i - 4-1 29 4-2

H10-3 placeholder 未 入 力 時 <textarea title="title " placeholder="placeholder "></textarea> placeholder title +placeholder + 各 input typeの 読 み 上 げ 例 tit

H10-3 placeholder 未入力時 <textarea title="title " placeholder="placeholder "></textarea> placeholder title +placeholder + 各 input typeの読み上げ例 tit