ホームページ制作、千太の絵空事

OL要素のスクリーンリーダーの読み上げについて

OL要素のスクリーンリーダーの読み上げについて

OL要素を使用した場合、使い方によってはスクリーンリーダーなどでは、判りにくくなってしまいます。

例えば次のような場合

1. 項目
   
2. 項目
   
3. 項目
   
4. 項目
   
5. 項目
   

(OL要素を出力しています）

では、この1. や2. などの数字を読み上げてくれない場合があります。
ですので、例えば、「1.の場合」などと文中で指示しても、それがどこの部分かわからないことが発生してしまいます。

このようなOL要素で出力されている数字を利用しての指示ではなく、「項目名などでの指示」にする
などの配慮が必要となるでしょう。

また、どうしても数字での指示をしたい場合などは、かえって「直接数字を記入」した方がより親切だと思います。
　　1. 項目
　　2. 項目
　　3. 項目
　　4. 項目
　　5. 項目
(OL要素を使わず直接数字を記入）

また、スクリーンリーダーがこのOL要素とLI要素でマークアップされた部分の項目の数字を読み上げる場合でも、数字を読み上げ、左から右、次の行の数字、左から右へと読まれる可能性が高いので、階層を表示している複雑な場合（入れ子状態）

1. 項目
   
   1. 項目
      
   2. 項目
      
   3. 項目
      
   4. 項目
      
   5. 項目
      
2. 項目
   
3. 項目
   
4. 項目
   
5. 項目
   
   

(OL要素を出力しています）

としていたとしても、その数字で指示した場合、どの項目かわからないと思われます。
もし次のように

1. 項目
   
   1. 項目
      
   2. 項目
      
   3. 項目
      
   4. 項目
      
   5. 項目
      
2. 項目
   
3. 項目
   
4. 項目
   
5. 項目
   

(OL要素を入れ子にして出力しています）

としてもここまでが限界ではないでしょうか。

いずれにしても，現実的には、文中で再利用される項目の場合は、数字を直接記入してやるか、
項目名など詳細にした方が判りやすいとなりますね。

ただ，将来的に、このOL要素、Li要素の階層構造を機械が的確に判断して読み上げるようになれば、
HTML本来のマーックアップが活きてきます。
そうなることを期待いたします。

---

【リファレンス】
W3C

• General Techniques for WCAG 2.0 : http://www.w3.org/TR/WCAG20-GENERAL/
  
• General Techniques for WCAG 2.0 (草案）: 日本語訳
  

---

この記事は「OL要素のスクリーンリーダーの読み上げについて」
更新：2006-07-05
ホームページ制作、千太の絵空事

はるさめのチャンポン

はるさめのチャンポン

日頃あまり，加工しているのは使わないようにとしているのですが、
なんか珍しいなーと
（実は安かった…。ふふふ）
しかも，食材が入ったスープもついていらっしゃる

そこで、この「はるさめのチャンポン」に挑戦しました。

ん？

これってレシピになるのでしょうかー。

勝手なレシピ（になるかな，汗）

はるさめ：？
食材入りスープ：？(にんじん、たけのこ、しいたけ、など入っているみたいですが…。）
白菜：150g(1枚半)←なかったので，キャベツにしかも赤（汗）
いか：100g←これもなかったので，残っていたかまぼこ少々。
豚肉：50g←。。。鳥のミンチ肉があったので。。。

1. 鍋に800ccの水を入れ沸騰させます。
   
2. 鶏肉を入れ沸騰させます。
   
3. キャベツ、かまぼこを入れます。
   
4. はるさめを入れ、4分程度加熱。
   
5. 食材入りスープ入れます。
   
   

そのまま、いや，器に入れていただきます。
（ふー暑い，汗）

しかし、
げ！
そう、キャベツが赤キャベツ（パープルですよパープル）。

スープが（パープルに）
サラダでいただく場合はいいいのですが、
スープだと（大汗）

でも、はるさめも（パープル）になって見ようによっては美しい。（笑）

あとで，チャンポン麺ともやしを入れて再加熱していただきました。

---

• ※太平燕とは
  
  中国から熊本に伝わった、はるさめを麺のようにして食べるチャンポン風料理
  
  だそうです。
  

OLのでるwiki

OLのでるwiki

先日、レシピを書いていて。
おや？。

ひょとして！。

おー。OLがでている。
（OL：HTML4.01のOL要素のこと）

順序のあるリスト箇条書き

wiki表記

   1. 文字列
   *文字列
   *文字列
   *文字列
   *文字列

【見え方】

1. 文字列
   
2. 文字列
   
3. 文字列
   
4. 文字列
   
5. 文字列
   
   
   

レシピなど順序のある箇条書き（リスト）に使えそうですが…。

他にはA. a. I. i.でも、それぞれでるようです。

---

ホームページ制作、千太の絵空事