WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:アクセシビリティに関して

そふらん [MAIL] [WriteDate : Tue May 15 21:11:07 2001]

以前お世話になったそふらんと申します。その節は有難うございました。

ウェブコンテンツ・アクセシビリティ・ガイドラインの邦訳を読んでいて疑問に思う点があります。

http://www.zspc.com/documents/wcag10-tech/html-techniques/index.html#list-images

に、

DLとDT、DDによって作られる定義リストに対して、マークとして画像をつけないようにしてください。もし画像を使うのであれば、画像に対して同等の役割を果たすテキストをつけるようにしてください

とあるのですが、非推奨例として

<DL>
  <DD><IMG src="star.gif" alt="* ">Audrey
  <DD><IMG src="star.gif" alt="* ">Laurie
  <DD><IMG src="star.gif" alt="* ">Alice
</DL>

のように示してあります。

この例の一体どこに問題があるかが分からないのです。どなたかご教示くだされば幸いです。


そふらん [MAIL] [WriteDate : Tue May 15 21:13:11 2001]

例の部分、失礼しました。

<DL>
  <DD><IMG src="star.gif" alt="* ">Audrey
  <DD><IMG src="star.gif" alt="* ">Laurie
  <DD><IMG src="star.gif" alt="* ">Alice
</DL>


Nobu3 [URL] [WriteDate : Tue May 15 23:38:06 2001]

<dt>がない。とか。

基本的に、
>DLとDT、DDによって作られる定義リストに対して、マークとして画像をつけないようにしてください。
と言っているのなら「推奨」するはずが無いと思うのですが。どうでしょうか?

もし、「何故『定義リスト』に画像を使ってはいけないのか」という質問なら…何故でしょうね?


おーなーしぇふ [WriteDate : Wed May 16 00:43:24 2001]

あくまで私的見解になるのですが……。

まず、『同等の役割を果たすテキスト』(text equivalents)について確認しておくと、画像に関しては、その画像を説明する言葉や文章ということになります。

前述ページの例にある「満月」の場合、満月の画像に対してalt="[満月の画像]"としておくと、画像を見ることができない閲覧者にとっても、満月の画像と同じ情報を得られることになります。
※『3 用語解説』の「同等の役割を果たす」の語を参照のこと

但し、「画像を見ることができない」という意味には2通りあり、一つは lynx のように画像を表示しないブラウザ(いわゆるテキストブラウザ)によるケース及び視覚障碍のために閲覧者自身が見られないケースが考えられます。

で、非推奨例についてですが、たいていの場合、非推奨例とは実はそれまでに多く用いられている方法が取りあげられていると思います。今回の例も、前者のテキストブラウザ対策としてよく見かけたものです。つまい、画像を表示しないブラウザでは:

* Audrey
* Laurie
* Alice

と表示されるので、都合がよいとされていました。

しかし後者の場合では、音声読み上げの利用が考えられますが、その際には、「*」をどのように読み上げるのか……が問題になります。例えば「こめじるし……」では、閲覧者に意味が通じないあるいは混乱してしまう可能性が大です。
※こめじるし……と読み上げてくれるかどうかも不明(アスタリスクとか?)

ですから、通常はスタイルシートの使用がすすめられ、原則として『マークとして画像をつけないようにしてください』とあるわけで、もしつけるのであれば、『同等の役割を果たすテキスト』をつけるように、となっているのでは?と思われます。

つまり今回の非推奨例の場合、本来は:

<DL>
 <DD><IMG src="star.gif" alt="[星印]">Audrey
 <DD><IMG src="star.gif" alt="[星印]">Laurie
 <DD><IMG src="star.gif" alt="[星印]">Alice
</DL>

ぐらいが妥当ではないかと思われます。つまり、そこにある画像が何なのかを alt で説明した方がよい、ということです。
※[星マーク画像]でもいいかもしれませんが……このあたりの判断はむずかしいです。そもそも画像使わないほうがよいですし(^^;)

以上でどうでしょうか?
といっても、私も全部に目を通してないのですが……
※ごめんなさい!!(汗)>ZSPC様


おーなーしぇふ [WriteDate : Wed May 16 00:50:41 2001]

追記です……:
但し、こちらの説明とは趣が異なるようで、気がかりですが(汗)

●アクセシブルなWebデザインについて(こころWeb)
http://www.kokoroweb.org/src/tips/part1-1.html
※「画像にはALT属性を付けること。」を参照のこと

※もっともこちらは、「テーブルレイアウトはアクセシブルではないのでやめましょう」といいつつ、自サイトはテーブルレイアウトを使っていたという話が……(^^;)


D.D. [URL] [WriteDate : Wed May 16 01:25:48 2001]

私見ですが、そのあたりで悩むぐらいならば、飾りのためだけの
画像などは使わずにスタイルシートだけでやった方が幸せでしょう。

で、仮に飾りだけの画像を使ったとしても、「alt=""」で良いのでは
ないかと、画像自体の説明には title 属性がありますし。


TNN [WriteDate : Wed May 16 09:39:00 2001]

<DL>
 <DD><IMG src="star.gif" alt="* ">Audrey
 <DD><IMG src="star.gif" alt="* ">Laurie
 <DD><IMG src="star.gif" alt="* ">Alice
</DL>

ですが、

<ul>
 <li>Audrey
 <li>Laurie
 <li>Alice
</ul>

でいけますね。


D.D. [URL] [WriteDate : Wed May 16 11:53:25 2001]

いけるとかいけないとかじゃなくて
「定義リストに画像を使った非推奨例」
にそーゆーのが挙がっているって話ですよ。


TNN [WriteDate : Wed May 16 12:27:31 2001]

「ul liですっきり表現できるのに、dl dd imgでやるのは良くない」
ッて事ではないか、って事ですよ。

私の文章の意図が読取れなかったのでしたら、ごめんなさい。


D.D. [URL] [WriteDate : Wed May 16 14:28:44 2001]

http://www.zspc.com/documents/wcag10-tech/html-techniques/index.html#list-images
この文章の意図はそういうことではないと読めますけど、僕の誤読でしょうか?

ちなみに、僕がどーしても知りたいわけじゃないから、正式な方は読んでないです。
# そーゆー飾りをHTMLで付けようとは思ってないので。


おーなーしぇふ [WriteDate : Wed May 16 18:17:37 2001]

再び……(^^;)

>「ul liですっきり表現できるのに、dl dd imgでやるのは良くない」
基本的には、TNNさんのこの見解に賛成です。確かに『DLとDT、DDによって作られる定義リストに対して、マークとして画像をつけないようにしてください。』とありますし。またページ該当個所の手前には実際に、ULによる同じ例が紹介されているので。

但し、『もし画像を使うのであれば、画像に対して同等の役割を果たすテキストをつけるように』とあったので、あえてdl dd imgの非推奨例に修正を加えてみました。
※つまり、D.D.さんにフォローしていただいているように「いけるとかいけないとかじゃなくて」ということです。

ただ改めて2点、思い直したことがあります。
1)ひょっとしたら、 DL DD IMG というやり方自体が非推奨なのか?
とすれば、オリジナル(英文)の説明が、誤解を受けやすいのではと感じます(^^;)

2)本当に飾りだけの意味しかないなら、「alt=""」で良い
私も「alt=""」のことは知っていたのですが、""の中を空(から)にするのは文法違反になったかな……と勘違いしてました(汗)「空白だけの文字列」はだめですが、「alt=""」は問題ないのですね。
※以下のページで確認しました。
http://openlab.ring.gr.jp/k16/htmllint/explain.html
「156」「157」の解説を参照のこと。特に「157」の『空の指定 alt="" も、それなりに有効な場合がある』の一文。

というわけで、修正例については:

<DL>
<DD><IMG src="star.gif" alt="">Audrey
<DD><IMG src="star.gif" alt="">Laurie
<DD><IMG src="star.gif" alt="">Alice
</DL>

と再度修正させていただきます(^^;)
※もちろん、あえて DL DD IMG を採用するならという条件で、です。
※ちなみにIMGには本来width,heightも要指定


そふらん [MAIL] [WriteDate : Wed May 16 23:50:59 2001]

まず、私の文章の未熟ゆえに誤解を生んでしまったことをお詫びいたします。

本質的には、私も

>「ul liですっきり表現できるのに、dl dd imgでやるのは良くない」

と思います。ただ、あれは一例で、例えば dt にリストマークを付けてみたいと思う状況はあると思います。そのようなときは、dt{ background-image:url() }で擬似的にマークを付けるのが良いのでしょうか。

最初の例については、alt属性を空にするという考えは思いつきませんでした。

>本当に飾りだけの意味しかないなら、「alt=""」で良い

が、この例に当てはまると、私も思います。伝えたい情報でないなら、alt属性は空にするという一般的な基準となり得そうです。画像の代替テキストの選び方に幅ができ、私には大変有意義でした。有難うございます。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]
ChaichanPAPA's World