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

Wiiki「リンクの文字に色をつける」の問題点

「リンクの文字に色をつける」の問題点

更新：2006-09-22

---

Level3に分類されるWiki表記の中で、
「リンクの文字に色をつける」の手法がある。

これは、もともと、バグを利用しての手法であるが、
入れている属性はスタイル(style)属性になる。

しかも「IEにだけしか機能しないfilter」※1を利用している。

このfilter使い方に配慮しないとおかしな事になってしまう。

例えば、透明度を変更できるfilterがある。
「グランデーションが付きます」とか紹介されていたりする記入例だ。

しかし、これをIE以外でのブラウザで見ていた場合、

「グランデーションになっているでしょう！」といってもそうなっていない。

「影付き文字」についても、
「ほら、影がついているでしょう！」といっても、
そうなっていないのです。

これは、「自分の環境だけしか見ていないで作成するWebページの典型」となります。

これだけなら、まだ、「グランデーションになっていない」、
「影がついていない」だけで、可読するには問題ないのですが、

実はこの「リンク文字に色をつける」手法は、
その記入例としている表記だと、

[標準的な仕様に対応しようとしているブラウザ]や、
IEの中でも古いバージョンやMac版のIEにおいても
この「filterの設定は無視」され
黒の背景(#000000)に、濃い灰色(#666666)のリンク文字で、
非常にコントラストがなく、「見えにくいリンク」となっています。

自分だけの環境で眺めて、「記入例」として配布する前に、

配布するなら、
「その記入例が実際に使えるのか？」

も良く検討して見るのが良いかもしれませんね。

素敵に楽しく記事を書こうという素晴らしいあなただから、
きっと，配慮もできるはず。
期待していますよ！。

---

【ヒント】

• ※1:
  IEといってもWinだけです。MacのIEや、他の最新ブラウザでも機能しません。
  
• [標準的な仕様に対応しようとしているブラウザ]
  firefoxなど
  
  

filterを無視するブラウザ

IE独自の機能で、IEでも対応できないブラウザもあります。
filterでもその使っている技術で違いがあります。

• ノーマルなfilter:WinIE4,5.5,6以外のブラウザ
  
  ・WinIE3,
  ・MacIE全て
  ・firefox全て
  ・NN全て
  ・opera全て
  など
  
• アクティブX使用 filter：WinIE5.5,6以外のブラウザ
  
  ・WinIE3,4,5
  ・MacIE全て
  ・firefox全て
  ・NN全て
  ・opera全て
  など
  
  
  

---

2006-09-22
校正、一部修正しました。

---

この記事は「「リンクの文字に色をつける」の問題点」
更新：2006-09-22
ホームページ制作、千太の絵空事

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
ホームページ制作、千太の絵空事

【色の秘密】-(少しだけ心をつかって４)-u版

【 色の秘密】（少しだけ心をつかって４）u版


色の秘密について語ります。

皆さんは、赤色って言われて、どんな色を想像しますか？

例えば、緋色、黒っぽい赤色、朱色、

全て、赤色で想像する色に入りませんか？

●赤色●
●赤色●


人それぞれで、全くちがいます。

この様に、元々、「赤色」という表現は、

客観的な「絶対的な色ではなく

その人による主観的色、

つまり、「相対的な色」になります。

では、どのように、表現すればいいのでしょうか？

　　　　　☆

ＨＴＭＬには実は、あるんです。

つまり、ＲＧＢ表記です。

ですから１６進法で指定するその数は１６万色、

実は、この中には、

自然界では存在しない色も表現できるほどの種類の色まで含まれています。

この１６進法での数字で色を指定してあげれば、

実は、

赤色というより、はるかに、識別がはっきりするのです。

ですから、色を指定する場合、この１６進法を使って説明すれば、

赤色の、、、
ではなく、#FF0000の色の・・・と。

●赤色●ff9999
●赤色●ff0000

　　　　　☆

少し、わかりにくいかもしれませんが、目に障害がある方への配慮の一つの提案でもあります。

このように、色をつかう場合は、自分だけに見えている場合を想定するのではなく、
いろいろな事について、配慮すると素敵ですね。
　　　　　☆
【u版】
少しだけ心をつかって

素敵な色の使い方
http://blogs.yahoo.co.jp/cen_picture21/10974069.html
色での指定
http://blogs.yahoo.co.jp/cen_picture21/10977669.html
色での強調
http://blogs.yahoo.co.jp/cen_picture21/10978734.html
[色の秘密]
　　　　　☆


【Wiki版】
少しだけ心をつかって

素敵な色の使い方
http://blogs.yahoo.co.jp/cen_picture21/293545.html
色での指定
http://blogs.yahoo.co.jp/cen_picture21/587122.html
色での強調
http://blogs.yahoo.co.jp/cen_picture21/708607.html
色の秘密
http://blogs.yahoo.co.jp/cen_picture21/1561198.html

【色による強調】（少しだけ心をつかって３）u版

【色による強調】（少しだけ心をつかって３）


色による指定でも少し触れていましたが、

ここでは、

強調として、使用する色について語ります。

　　　　　☆

一般的には、黒文字で書き、

強調する場合赤文字を利用して記入しがちです。

それで、これは、非常に見慣れた光景になっています。

実はこの赤文字での強調が、そうならない場合があるということは、

なかなか知られていないかもしれません。

いわゆる「百人いれば百種類ある」という色覚特性の一つです。

この赤色が、黒色と非常に見分けがつきにくい方もいます。

「じゃあどうすれば？」

その場合は、私の場合だと、このように「このように文字を太く」見えるようにしています。

どうですか？。

もしくは「このように斜体に」見えるようにとすればいいのでは、、、。

もちろん、これに[色をつけて]もかまいません。

強調したい場合に、その色での強調以外の手法も併用し、

それと判るような、配慮が素敵かもしれませんね。

(ですが、、、。この方法だけでは少し、、、、と思い。「太字の使い方」の秘密※１)


　　　　　☆
【u版】
少しだけ心をつかって

素敵な色の使い方
http://blogs.yahoo.co.jp/cen_picture21/10974069.html
色での指定
http://blogs.yahoo.co.jp/cen_picture21/10977669.html
[色での強調]

色の秘密
　　　　　☆


【Wiki版】
少しだけ心をつかって

素敵な色の使い方
http://blogs.yahoo.co.jp/cen_picture21/293545.html
色での指定
http://blogs.yahoo.co.jp/cen_picture21/587122.html
色での強調
http://blogs.yahoo.co.jp/cen_picture21/708607.html
色の秘密
http://blogs.yahoo.co.jp/cen_picture21/1561198.html

※１：「太字の使い方」の秘密
http://blogs.yahoo.co.jp/cen_picture21/771149.html

【色での指定】（少しだけ心をつかって２）u版

【色での指定】（少しだけ心をつかって２）u版


これはこのブログに限ったことではありませが、

説明する場合などに

色での指定をやめてください。

「はっ？」

そうです。

例えば、説明用に、赤色と緑色の文字で記入し、

赤色の部分の文字をとか、

緑色の部分の文字をとか、

色でに指定しないようにしましょう。

なぜなら、この色覚に対応できない人も少なからずいるのです。
(２０人に一人と言われています)

又、別の色覚の特性を持った人もいます。

細かくいえば、「１００人いれば百種類」の色覚の特性があります。

つまり、一人一人は全く違うのです。

それを大まかにやっているにすぎません。

じゃあどのようにすれば？

例えば形などで表現したり、この場合ですと文字列に変化をつけるといいでしょう。

指定したい文字を

「」でくくってその後に数字で(１)とかです

「笑っている(1)」
「笑っている(2)」

そう記事の中で注釈をつけるようにです。

(1)の「笑っている」の部分では、、、、、、。
(2)の「笑っている」部分では、、、、、。

というようにです。

説明をするような文の場合このようにすればいいはずです。

だからといって、色を使ってはいけないと言うわけではありませんよ。

それが、なくても、判るように書くのです。

少しの心づかいで、あなたの内面が輝くことでしょう。

　　　　　☆
【u版】
少しだけ心をつかって

素敵な色の使い方
http://blogs.yahoo.co.jp/cen_picture21/10974069.html
[色での指定]
色での強調
色の秘密
　　　　　☆


【Wiki版】
少しだけ心をつかって

素敵な色の使い方
http://blogs.yahoo.co.jp/cen_picture21/293545.html
色での指定
http://blogs.yahoo.co.jp/cen_picture21/587122.html
色での強調
http://blogs.yahoo.co.jp/cen_picture21/708607.html
色の秘密
http://blogs.yahoo.co.jp/cen_picture21/1561198.html