<html xmlns:jis="http://www.macromedia.com/jp/JISX83413_rules" xmlns:saxon="http://icl.com/saxon" lang="ja">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   
      <link rel="stylesheet" href="josh.css">
      <title>［5.9e］ スペース/改行が単語内にありませんか？</title>
   </head>
   <body bgcolor="#ffffff">
      <div id="説明">
         <table cellpadding="0" cellspacing="0" border="0" class="main">
            <tr>
               <td valign="top" class="name" style="background-color:#dcdcdc;padding:3px;">スペース/改行が単語内にありませんか？</td>
            </tr>
            <tr>
               <td colspan="2" class="divider"><img src="dwres:18084" height="1"></td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="requirements" style="text-align:right;">
                      JIS 5.9 e);
                      
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>概要</b>
                  
                  <p>Webページの(X)HTMLソースコード上で、1つの単語（2文字の漢字）の中にスペースあるいは改行（br要素）があります。それが1つの単語（熟語）の場合、音声ブラウザやスクリーンリーダーがその熟語を正しく読み上げない恐れがありますので、1つの漢字の単語の中にスペースあるいは改行を入れないでください。</p>
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>修正/チェック方法</b>
                  
                  <p>Webページの(X)HTMLソースコード上で、1つの単語（熟語）内にスペースまたは改行がある場合は、そのスペースまたは改行を削除してください。</p>
                  
                  <p>同様の見た目の表現がCSSを用いて実現できないかどうかを検討してみるとよいでしょう。例えば、スペースを入れたい場合は、以下のようにCSSで指定することができるかもしれません。</p>
                  <pre>
&lt;span class="date"&gt;日時&lt;/span&gt;

.date {
  letter-spacing: 1em; }
</pre>
                  <p>また、改行して縦1行にしたい場合に関しては、以下のようなCSSの指定が考えられます。</p>
                  <pre>
&lt;div class="vertical"&gt;東京都&lt;/div&gt;

.vertical {
  margin-left:auto;
  margin-right:auto;
  width:1em; }
</pre>
                  <p>ただし、これらのCSSによる指定は、Webブラウザによっては表示が崩れる場合もあります。そのWebサイトのターゲット・ブラウザで画面表示を確認しながら微調整して、最適化してください。</p>
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>修正/チェックのポイント</b>
                  
                  <blockquote style="margin:0px 10px 0px 20px;">
                     
                     <p>音声ブラウザは、1単語内にスペースや改行が入っていると、意図どおり読み上げません。</p>
                     
                     <p>音声ブラウザの利用者は、内容を正しく把握することが困難になります。</p>
                     
                     <ul>
                        
                        <li>レイアウト目的で、単語内にスペースや改行を使用しない。</li>
                        
                     </ul>
                     
                     <p><cite style="font-style:normal;color:#006400">『富士通ウェブ・アクセシビリティ指針 第2.0版』 © 2004 富士通株式会社</cite></p>
                  </blockquote>
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>JIS関連項目</b>
                  
                  <blockquote style="margin:0px 10px 0px 20px;">
                     
                     <p><strong>5.9 言語
                           <br>e)</strong> 表現のために単語の途中にスペース又は改行を入れてはならない。
                        <br><strong>参考</strong> 表示上は一単語だと理解できるが，視覚障害のため音声ブラウザなどを利用している場合，音声ブラウザなどは単語として認識できず，正しく読み上げられないため内容が正しく伝わらない。
                     </p>
                     
                     <p><cite style="font-style:normal;color:#006400">JIS X 8341-3:2004『高齢者・障害者等配慮設計指針－情報機器における機器，ソフトウェア及びサービス－第三部：ウェブコンテンツ』（© 財団法人 日本規格協会）</cite></p>
                     
                  </blockquote>
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>解説</b>
                  
                  <p>視覚に障害のあるユーザーが使用する音声ブラウザやスクリーンリーダーは、漢字を正しく読み上げることができない場合があります。漢字には音読みと訓読みがあり、同じ漢字でもその前後関係や文脈によって読み方が異なるため、音声読み上げソフトがそれを正しく判断できないためです。また、音声ブラウザやスクリーンリーダーには、あらかじめ熟語（単語）が辞書のようなものに登録されており、その辞書に登録されている熟語であれば正確に読み上げることができますが、登録されていない場合は必ずしも正確には読み上げることができません。</p>
                  
                  <p>ただし、もしその熟語が辞書に登録されていたとしても、(X)HTMLソースコード上で、その熟語の文字間にスペースあるいは改行が入っていると、音声ブラウザやスクリーンリーダーはそれが1つの熟語（単語）であると認識できなくなり、結果として、1文字ずつ読み上げることになります。例えば、"日時"
                     は、"日時" であれば「にちじ」と読み上げられますが、"日　時" と文字間にスペースが入っていると「ひ　とき」と読み上げられてしまいます。"経済" が "経　済" となっていると、「けい　すみ」と読み上げられてしまうのです。
                  </p>
                  
                  <p>同じように、文字間に改行の&lt;br&gt;タグが入っていると、やはり1つの熟語であると認識できなくなり、1文字ずつ読み上げられることになるので、ユーザーはその音声読み上げを聞いても意味が分からない恐れがあります。例えば、表の見出しセルを縦に細長くして、そこに見出しとなる文言を縦書きに入れようとして、1文字ずつ改行していった場合、見た目はたしかに縦書きになるかもしれませんが、音声ブラウザやスクリーンリーダーは、"東京都"
                     を1文字ずつ「ひがし　きょう　みやこ」と読んでしまいます。
                  </p>
                  
                  <p>(X)HTMLソースコード上においては、漢字の熟語内にスペースあるいは改行を入れないようにしてください。</p>
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>JIS X 8341-3について</b>
                  
                  <p>JIS X 8341-3 の内容は、以下のサイトにて規格番号「X8341-3」で検索して、規格票をご覧ください。</p>
                  
                  <ul style="margin:0px 0px 0px 10px;">
                     
                     <li><strong>閲覧</strong>：日本工業標準調査会（JISC）
                        <br>http://www.jisc.go.jp/
                     </li>
                     
                     <li><strong>購入</strong>：日本規格協会（JSA Web Store）
                        <br>http://www.webstore.jsa.or.jp/
                     </li>
                     
                  </ul>
                  
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>