アルファサード株式会社 代表取締役 野田 純生のブログ


街を歩きながらJIS X 8341-3:2010の達成基準 1.4.1 を理解する


公開日 : 2014-10-12 13:53:05


10月4日にCEATEC JAPANに行ってきました。目的はこれ。

セミナーの内容については主に社内にリアルタイムツイートしていたので、また機を見て纏められればと思いますが(最近筆が重くなっとる...)、幕張からオフィスへの帰り道中に見たもの、考えたものについてちょっと面白い? というかアクセシビリティを考える上でヒントになる出来事がありましたので書いてみます。

達成基準 1.4.1 を理解する | WCAG 2.0解説書

1.4.1 色の使用: 情報を伝える、何が起こるか又は何が起きたかを示す、ユーザの反応を促す、もしくは視覚的な要素を区別する唯一の視覚的な手段として、色だけを使用しない。 (レベルA)

注記: この達成基準は、特に色の知覚に関するものである。その他の知覚形態については、色やその他の視覚的な表現のコーディングへのプログラムによるアクセスも含めて、ガイドライン 1.3で網羅されている。

この説明、難しいなぁっていつも思ってるのですが、これは例がないということもあります。富士通さんのサイトの解説なんかは例示がされているため、よりわかりやすいと思います。

でも、街を歩いてるときにもヒントがあります。私はいつもここを通るたびに思うのですが、京葉線の東京駅から東京駅の中心部?地下鉄の駅に移動してるときに「歩く歩道」ありますよね?

京葉線の歩く歩道の上に表示されているカラーサイン

これ見てガイドラインの 1.4.1 ? とか思った人。職業病です!(笑)

そもそもが赤や緑って識別できない人が多い組み合わせでもありますが。

ただ、1.4.1 が示しているのは、何色かということではないです。

情報を伝える、(中略)もしくは視覚的な要素を区別する唯一の視覚的な手段として、色だけを使用しない

「緑」が通行可、「赤」が通行不可、ということを「情報を伝える唯一の視覚的な手段」となっているため、これは不適合ではないか、ということになるわけです。

色、+何か。

では、これをクリアするにはどうデザインすれば良いか。

MacOS Xのウィンドウのツールバーボタン

この画像はMacOS Xのウィンドウのツールバーボタンですが、色+形を併用しています。OS Xがリリースされたときは確かこの形での識別ができなくて後から追加されたように記憶しています(ちょっと検索してみましたが見つけられなかったのですが)。

京葉線東京駅のこの歩く歩道の上部のサインでは、赤い方に「×」を加えるか形を変えることで 1.4.1 へ適合することができます。もちろんWebにおいては画像の altテキストを正しく記述することを忘れずに。

そもそも「赤」が通行不可ってのはどこから来ているのか

ついでに、せっかくなのでもう少し深堀りしてみましょう。赤色が通行不可ってのはどこから来ているか。普通に考えると「信号」ですわね。青(緑)は進んで良い、赤は通行不可。

信号機の画像

そこから考えると、冒頭の京葉線のあるく歩道(京葉線じゃないけど、もう「京葉線のあるく歩道」で統一する(遅い! )の緑と赤の位置は左右逆ですね。 もし位置関係が逆だったら、色+位置で表現しているということであり、許容されるという解釈も成り立つのかもしれません。

東京メトロの路線を示すサインは、色+アルファベット

赤い丸=丸ノ内線、青い丸=東西線、このサインも昔は丸印だけでしたけど、丸の中にMとかTとかつくようになりましたね。これも同じです。色+文字ということです。

東京メトロの案内サイン

京葉線からJR東京駅構内を通り過ぎて地下鉄へ。これは1.4.1 とは関係ないですが、ふと足下を見れば階段の前後に視覚障害者誘導用ブロックがあります。

視覚障害者誘導用ブロック

意識しながら街を歩くことで、気づくことが色々あります。

でね、こんな感じで、1.1.1から全部シリーズ化して連載しませんか? (誰) わかりやすく理解が進むことで、JIS X 8341-3やウェブアクセシビリティが怖くない人が増えれば、と思うので。



このブログを書いている人
野田純生の写真
野田 純生 (のだ すみお)

大阪府出身。ウェブアクセシビリティエバンジェリスト。 アルファサード株式会社の代表取締役社長であり、現役のプログラマ。経営理念は「テクノロジーによって顧客とパートナーに寄り添い、ウェブを良くする」。 プロフィール詳細へ