manual/index.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
   3 <head>
   4 <title>NVDA日本語版　操作ガイド</title>
   5 <link type="text/css" href="screen.css" rel="stylesheet" />
   6 <style type="text/css"></style>
   7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   8 </head>
   9
  10 <body>
  11 <div class="LTheader">
  12 <div id="header" role="banner">
  13 <h1>NVDA日本語版　操作ガイド</h1>
  14 </div>
  15 </div>
  16
  17 <div class="LTnavi" role="navigation">
  18 <h2 id="TOC">目次</h2>
  19 <ol id="mozToc">
  20 <li><a href="#readme">はじめに</a></li>
  21 <li><a href="#operation">操作方法</a>
  22 <ul class="olnavi">
  23 <li><a href="#reading">読み上げ</a></li>
  24 <li><a href="#stopReading">読み上げの停止</a></li>
  25 <li><a href="#restartReading">停止したところから再び読ませる</a></li>
  26 <li><a href="#readByLine">一行ずつ読ませる</a></li>
  27 <li><a href="#readByChar">一文字ずつ読ませる</a></li>
  28 <li><a href="#haedingElement">見出し<span class="navkey">[H]</span></a></li>
  29 <li><a href="#linkElement">リンク<span class="navkey">[K]</span></a></li>
  30 <li><a href="#listElement">リスト<span class="navkey">[L]</span>・リスト項目<span class="navkey">[I]</span></a></li>
  31 <li><a href="#tableElement">テーブル<span class="navkey">[T]</span></a></li>
  32 <li><a href="#formElement">フォームフィールド<span class="navkey">[F]</span></a>
  33 <ul>
  34 <li><a href="#editField">エディットフィールド<span class="navkey">[E]</span></a></li>
  35 <li><a href="#combobox">コンボボックス<span class="navkey">[C]</span></a></li>
  36 <li><a href="#checkbox">チェックボックス<span class="navkey">[X]</span></a></li>
  37 <li><a href="#radioButton">ラジオボタン<span class="navkey">[R]</span></a></li>
  38 <li><a href="#generalButton">ボタン<span class="navkey">[B]</span></a></li>
  39 </ul>
  40 </li>
  41 <li><a href="#hrElement">区切り線<span class="navkey">[S]</span></a></li>
  42 <li><a href="#imgElement">画像<span class="navkey">[G]</span></a></li>
  43 <li><a href="#landmarkAttr">ランドマーク<span class="navkey">[D]</span></a></li>
  44 <li><a href="#miscFunc">その他の機能</a>
  45 <ul>
  46 <li><a href="#keyboardHelp">キーボードヘルプ</a></li>
  47 </ul>
  48 </li>
  49 </ul>
  50 </li>
  51 <li><a href="#letsStart">実際にWebページを読んでみよう</a></li>
  52 </ol>
  53 </div>
  54
  55 <div class="LTcontent" role="main">
  56 <div class="h2section">
  57 <h2 class="article"><a id="readme" name="readme">はじめに</a></h2>
  58 <p>ここでは、NVDAの操作方法を紹介します。ただし、今回はWebページを閲覧する際に必要となる操作のみを紹介し、Web以外の読み上げ、現在時刻やバッテリー情報の読み上げなど、Webページ閲覧に関係しないものは省略します。このページでNVDA操作の練習を行うことも出来ますので、ぜひ読み上げを体感してみてください。</p>
  59 <dl>
  60 <dt>NVDAキー</dt>
  61 <dd>NVDAキーは、<span class="navkey">[Insert]</span>キーと置き換えて読んでください。</dd>
  62 <dt>逆方向にジャンプ</dt>
  63 <dd>ここで紹介したコマンドは、<span class="navkey">[Shift]</span>キーと組合わせると、逆方向にジャンプします。</dd>
  64 </dl>
  65
  66 <h2 class="article"><a id="operation" name="operation">操作方法</a></h2>
  67 <h3 class="stress"><a id="reading" name="reading">読み上げ</a></h3>
  68 <p>NVDAをはじめとするスクリーンリーダは一般的に、まずページのタイトルを読み、次にWebページの左上（ソースの先頭）から読み始めます。</p>
  69
  70 <h3 class="stress"><a id="stopReading" name="stopReading">読み上げの停止 <span class="navkey">[Ctrl]</span></a></h3>
  71 <p><span class="navkey">[Ctrl]</span>を押すと、いつでも読み上げを中止できます。</p>
  72
  73 <h3 class="stress"><a id="restartReading" name="restartReading">停止したところから再び読ませる <span class="navkey">[NVDAキー]</span>＋<span class="navkey">[下矢印]</span></a></h3>
  74
  75 <h3 class="stress"><a id="readByLine" name="readByLine">一行ずつ読ませる <span class="navkey">[下矢印]</span><span class="navkey">[上矢印]</span></a></h3>
  76 <p>一行ずつ読ませたい場合は、<span class="navkey">[上矢印]</span>と<span class="navkey">[下矢印]</span>キーで、それぞれ前の行と後の行を読みます。</p>
  77
  78 <h3 class="stress"><a id="readByChar" name="readByChar">一文字ずつ読ませる <span class="navkey">[右矢印]</span><span class="navkey">[左矢印]</span></a></h3>
  79 <p>一文字ずつ読ませたい場合は、<span class="navkey">[右矢印]</span>と<span class="navkey">[左矢印]</span>キーで左右の文字を一文字ずつ読みます。</p>
  80
  81 <h3 class="stress"><a id="haedingElement" name="haedingElement">見出し <span class="navkey">[H]</span></a></h3>
  82 <p><span class="navkey">[H]</span>を押すと、次の見出しにジャンプします。例えば<code>&lt;h1&gt;今日のランチ&lt;/h1&gt;</code>とマークアップされているテキストは「今日のランチ見出しレベル1」というように読み上げられます。</p>
  83 <p>また、数字キー<span class="navkey">[1]</span>～<span class="navkey">[6]</span>はそれぞれh1～h6に対応しています。例えば<span class="navkey">[2]</span>のキーを押すと、h2要素でマークアップされた箇所にのみジャンプします。</p>
  84
  85 <div class="task"><h5>練習タスク１</h5><p>このページ内にh4要素でマークアップされている見出しは全部でいくつあるでしょうか。上記の説明を参考に調べてみましょう。</p>
  86 </div>
  87 <p class="toclink">[<a href="#TOC">目次に戻る</a>]</p>
  88
  89 <h3 class="stress"><a id="linkElement" name="linkElement">リンク <span class="navkey">[K]</span></a></h3>
  90 <p><span class="navkey">[K]</span>を押すと、次のリンクにジャンプします。例えば<code>&lt;a href=&quot;http://www.yahoo.co.jp&quot;&gt;ヤフートップ&lt;/a&gt;</code>とマークアップされているテキストは、「ヤフートップリンク」というように読み上げられます。読み上げられたところで<span class="navkey">[Enter]</span>キーを押すと、リンク先に飛びます。</p>
  91
  92 <div class="task">
  93 <h5>練習タスク２</h5>
  94 <p>上記リンク<span class="navkey">[K]</span>の説明を参考にしてこのページの「目次」から各項目にジャンプし、また目次に戻ってみましょう。</p>
  95 </div>
  96
  97 <p class="toclink">[<a href="#TOC">目次に戻る</a>]</p>
  98
  99 <h3 class="stress"><a id="listElement" name="listElement">リスト <span class="navkey">[L]</span>・リスト項目 <span class="navkey">[I]</span></a></h3>
 100 <p><span class="navkey">[L]</span>を押すと、次のリスト（のリスト項目の先頭）にジャンプします。順序つきリスト、順序無しリストに対応しています。また、<span class="navkey">[I]</span>を押すと、そのリストの中の次の項目を読みます。リストに飛ぶと、「リスト6項目…」というように、そのリストの項目数も読み上げます。</p>
 101 <p>以下、順序無しリストの例と順序ありリストの例です。実際に読み上げさせてみましょう。</p>
 102 <ul>
 103 <li>いちご</li>
 104 <li>りんご</li>
 105 <li>パイナップル</li>
 106 </ul>
 107 <ol>
 108 <li>赤</li>
 109 <li>白</li>
 110 <li>黄色</li>
 111 </ol>
 112 <p class="toclink">[<a href="#TOC">目次に戻る</a>]</p>
 113
 114 <h3 class="stress"><a id="tableElement" name="tableElement">テーブル <span class="navkey">[T]</span></a></h3>
 115 <p><span class="navkey">[T]</span>を押すと、次のテーブルにジャンプします。テーブル内で<span class="navkey">[下矢印]</span>キーを押すと、次の（右の）セルに移動します。セルに移動すると、「2行3列」といったようにセルの位置と、セル内の項目を読み上げます。</p>
 116 <p>また、<span class="navkey">[Alt]</span>＋<span class="navkey">[Ctrl]</span>＋<span class="navkey">[上下左右]</span>キーで、テーブル内を自由にカーソル移動することが出来ます。</p>
 117 <p>以下、テーブルの例です。実際に読み上げさせて見ましょう。</p>
 118 <table style="text-align: left; width: 381px; height: 91px;" border="1" cellpadding="2" cellspacing="2">
 119 <tbody>
 120 <tr>
 121 <th>好き</th>
 122 <th>嫌い</th>
 123 </tr>
 124 <tr>
 125 <td>ハンバーグ</td>
 126 <td>グリーンピース</td>
 127 </tr>
 128 <tr>
 129 <td>オムライス</td>
 130 <td>ピーマン</td>
 131 </tr>
 132 </tbody>
 133 </table>
 134 <p class="toclink">[<a href="#TOC">目次に戻る</a>]</p>
 135
 136 <h3 class="stress"><a id="formElement" name="formElement">フォームフィールド <span class="navkey">[F]</span></a></h3>
 137 <p><span class="navkey">[F]</span>を押すと、ラジオボタンやエディットフィールド（テキストフィールド）などのフォームフィールド（フォーム・コントロール）にジャンプします。</p>
 138 <h4 class="stress2"><a id="editField" name="editField">エディットフィールド（テキストフィールド）<span class="navkey">[E]</span></a></h4>
 139 <p><span class="navkey">[E]</span>を押すと、次のエディットフィールド（テキストフィールド）にジャンプします。エディットフィールドに飛ぶと、「エディット」と読み上げられます。</p>
 140 <p>以下、エディットフィールドの例です。実際に聴いてみましょう。</p>
 141 <form action="dummy.html">
 142 <fieldset>
 143 <legend>名前入力</legend>
 144 <label for="name">名前</label>
 145 <input id="name" size="22" name="fullname" type="text" />
 146 </fieldset>
 147 </form>
 148
 149 <h4 class="stress2"><a id="combobox" name="combobox">コンボボックス <span class="navkey">[C]</span></a></h4>
 150 <p><span class="navkey">[C]</span>を押すと、次のコンボボックスにジャンプします。<span class="navkey">[C]</span>でジャンプし、<span class="navkey">[Enter]</span>キーを押した後に<span class="navkey">[上矢印]</span><span class="navkey">[下矢印]</span>キーでコンボボックスの値を選択できます。</p>
 151 <p>コンボボックスに飛ぶと、「コンボボックス クローズサブメニュー○○（項目名）」のように読み上げられます。ラベルが正しくマークアップされているものは、ラベル名も一緒に読み上げられます。</p>
 152 <p>以下、コンボボックスの例です。実際に聴いてみましょう。</p>
 153 <form action="dummy.html">
 154 <label for="from">出身地：</label>
 155 <select id="from" name="todoufuken">
 156 <option selected="selected" value="0">選択してください</option>
 157 <option value="1">東京都</option>
 158 <option value="2">千葉県</option>
 159 <option value="3">神奈川</option>
 160 <option value="4">埼玉県</option>
 161 <option value="5">栃木県</option>
 162 <option value="6">群馬県</option>
 163 </select>
 164 </form>
 165 <h4 class="stress2"><a id="checkbox" name="checkbox">チェックボックス <span class="navkey">[X]</span></a></h4>
 166 <p><span class="navkey">[X]</span>を押すと、チェックボックスにジャンプします。チェックボックスで<span class="navkey">[スペース]</span>または<span class="navkey">[Enter]</span>を押すとチェックされ、もう一度押すとチェックが外れます。</p>
 167 <p>チェックされていないチェックボックスは「チェックなし」、チェックされているチェックボックスは「チェックあり」と読み上げられます。ラベルが正しくマークアップされているものは、ラベル名も一緒に読み上げられます。</p>
 168 <p>以下、チェックボックスの例です。</p>
 169 <form action="dummy.html">
 170 <fieldset>
 171 <legend>興味のある国</legend>
 172 <label for="us">アメリカ</label>
 173 <input id="us" value="1" name="country" type="checkbox" />
 174 <label for="ig">イギリス </label>
 175 <input id="ig" value="2" name="country" type="checkbox" />
 176 <label for="cn">中国 </label>
 177 <input id="cn" value="3" name="country" type="checkbox" />
 178 <label for="au">オーストラリア</label>
 179 <input id="au" value="4" name="country" type="checkbox" />
 180 </fieldset>
 181 </form>
 182 <div class="task">
 183 <h5>練習タスク３</h5>
 184 <p>以下のチェックボックス中にラベルが正しくマークアップされておらず、NVDAで正しく読み上げられない項目があります。どの項目でしょうか。上記チェックボックス<span class="navkey">[X]</span>の説明を参考に調べてみましょう。</p>
 185 <form action="dummy.html">
 186 <fieldset>
 187 <legend>好きなデザート</legend>
 188 <input id="pu" value="1" name="sweets" type="checkbox" />
 189 <label for="pu">プリン</label>
 190 <input id="cp" value="2" name="sweets" type="checkbox" />
 191 <label for="cp">チョコレートパフェ</label>
 192 <input id="an" value="3" name="sweets" type="checkbox" />
 193 <label for="an">杏仁豆腐</label>
 194 <input id="ti" value="4" name="sweets" type="checkbox" />
 195 <label for="an">ティラミス</label>
 196 </fieldset>
 197 </form>
 198 </div>
 199 <h4 class="stress2"><a id="radioButton" name="radioButton">ラジオボタン <span class="navkey">[R]</span></a></h4>
 200 <p><span class="navkey">[R]</span>を押すと、次のラジオボタンにジャンプします。そこで<span class="navkey">[スペース]</span>または<span class="navkey">[Enter]</span>を押すとチェックされます。</p>
 201 <p>チェックされていないラジオボタンは「チェックなし」、チェックされているラジオボタンは「チェックあり」と読み上げられます。ラベルが正しくマークアップされているものは、ラベル名も一緒に読み上げられます。</p>
 202 <p>以下、ラジオボタンの例です。</p>
 203 <form action="dummy.html">
 204 <fieldset>
 205 <legend>性別</legend>
 206 <label for="man">男性</label>
 207 <input id="man" value="1" name="sex" type="radio" />
 208 <label for="feman">女性 </label>
 209 <input id="feman" value="2" name="sex" type="radio" />
 210 <label for="difficult">微妙 </label>
 211 <input id="difficult" value="3" name="sex" type="radio" />
 212 </fieldset>
 213 </form>
 214 <h4 class="stress2"><a id="generalButton" name="generalButton">ボタン <span class="navkey">[B]</span></a></h4>
 215 <p><span class="navkey">[B]</span>を押すと、次のボタンにジャンプします。そこで<span class="navkey">[Enter]</span>を押すと、ボタンが押されます。</p>
 216 <p>ボタンにジャンプすると、「○○ボタン」というように読み上げられます。</p>
 217 <p>以下、ボタンの例です。</p>
 218 <form action="dummy.html">
 219 <input value="送信" name="button" type="submit" />
 220 </form>
 221 <p class="toclink">[<a href="#TOC">目次に戻る</a>]</p>
 222
 223 <h3 class="stress"><a id="hrElement" name="hrElement">区切り線 <span class="navkey">[S]</span></a></h3>
 224 <p><span class="navkey">[S]</span>を押すと、次のhr要素（区切り線）にジャンプします。<span class="navkey">[S]</span>を押すと「区切り」と読み上げられます。</p>
 225 <p>以下、区切り線の例です。</p>
 226 <hr />
 227 <p class="toclink">[<a href="#TOC">目次に戻る</a>]</p>
 228
 229 <h3 class="stress"><a id="imgElement" name="imgElement">画像 <span class="navkey">[G]</span></a></h3>
 230 <p><span class="navkey">[G]</span>を押すと、次のimg要素にジャンプします。 ジャンプすると、「○○（代替テキストの内容）がぞう」のように、img要素の代替テキストが読み上げられます。</p>
 231 <p>以下、画像の例です。</p>
 232 <p><img src="img/rainy.JPG" alt="あまがさ" /></p>
 233 <div class="task">
 234 <h5>練習タスク４</h5>
 235 <p>以下の画像の代替テキストはそれぞれなんと読み上げられますか。上記画像<span class="navkey">[G]</span>の説明を参考に調べてみましょう。</p>
 236 <p><img style="width: 211px; height: 320px;" alt="新潟の雪景色" src="img/76-snow.jpg" /><img style="width: 211px; height: 320px;" alt="グアムのビーチ" src="img/guam.jpg" /><img style="width: 211px; height: 320px;" alt="鳥取砂丘" src="img/sakyu.jpg" /></p>
 237 </div>
 238 <p class="toclink">[<a href="#TOC">目次に戻る</a>]</p>
 239
 240 <h3 class="stress"><a id="landmarkAttr" name="landmarkAttr">ランドマーク <span class="navkey">[D]</span></a></h3>
 241 <p><span class="navkey">[D]</span>を押すと、&lt;div role=&quot;main&quot;&gt;のようにマークアップされたランドマークにジャンプします。 </p>
 242 <p>ランドマークとは、<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA</a>で導入された、ナビゲーションを容易にする技術仕様で、コンテンツのナビゲーション上の役割を、role属性を用いて示しています。</p>
 243 <p>このページは、ページの先頭のコンテンツを「banner」、目次のコンテンツを「navigation」、操作ガイド本文を「main」、フッターを「contentinfo」というランドマークでマークアップしています。</p>
 244 <p>それぞれ「banner＝大見出しランドマーク」「navigation＝ナビゲーションランドマーク」「main＝メインランドマーク」「contentinfo＝コンテンツ情報ランドマーク」というように読み上げられます。ランドマークを使ってページ内をジャンプすることで、広告部分を読み飛ばしだり、ページ内のどこからでもメインコンテンツに戻ったりすることが容易になります。</p>
 245 <div class="task">
 246 <h5>練習タスク５</h5>
 247 <p>上記ランドマーク<span class="navkey">[D]</span>の説明を参考にして、ページの一番上のh1「NVDA操作ガイド」からmainに飛んでみましょう。mainランドマークが通知された直後には何が読み上げられるでしょうか。</p>
 248 </div>
 249 <p class="toclink">[<a href="#TOC">目次に戻る</a>]</p>
 250
 251 <h3><a id="miscFunc" name="miscFunc">その他の機能</a></h3>
 252 <h4 class="stress2"><a id="keyboardHelp" name="keyboardHelp">キーボードヘルプ <span class="navkey">[NVDAキー]</span>＋<span class="navkey">[1]</span></a></h4>
 253 <p><span class="navkey">[NVDAキー]</span>＋<span class="navkey">[1]</span>で、任意のキーの機能を説明するキーボードヘルプ機能が使えるようになります。キーボードヘルプをONにした状態で<span class="navkey">[NVDAキー]</span>＋どれかのキーというように、任意のキーを押すと、そのキーの機能が説明されます。もう一度<span class="navkey">[NVDAキー]</span>＋<span class="navkey">[1]</span>で、OFFになります。</p>
 254 <p class="toclink">[<a href="#TOC">目次に戻る</a>]</p>
 255
 256 <h2 class="article"><a id="letsStart" name="letsStart">実際にWebページを読んでみよう</a></h2>
 257 <p>たとえば「<a href="http://www.asahi.com/">asahi.com</a>」などにアクセスし、実際に操作してみましょう。</p>
 258 <p>また、<a href="nvda_commands.html">NVDA日本語版 コマンド・キーボード操作の一覧表</a>も参考にしてみてください。</p>
 259 <p class="toclink">[<a href="#TOC">目次に戻る</a>]</p>
 260 </div>
 261 </div>
 262
 263 <div class="LTfooter" role="contentinfo">
 264 Copyright 2009：<a href="http://www.comm.twcu.ac.jp/~nabe/">東京女子大学現代文化学部コミュニケーション学科 渡辺ゼミ</a>4年 木下可南子・島谷知絵<br />
 265 最終更新　2010年3月15日</div>
 266 </body>
 267 </html>