2014年10月アーカイブ

今日、SEOがテーマのセミナーがあるので、MT、というか PowerCMS のプラグインを作りました。

キーワードの管理画面

テンプレートタグ

自動置換するブロックはテンプレートタグ(ブロックタグ)で指定します。

<MT:Keyword2Link blog_ids="children" add_attr='class="keyword"'>

このブロックのテキストからキーワードにマッチする部分を自動的にリンクにします

</MT:Keyword2Link>

パブリッシュすると、

<a class="keyword" href="http://example.com/keyword/SEO">SEO</a>

みたいなリンクに置換してくれるものです。キーワードとURLは管理画面から入力するだけでなく、CSVから一括で登録することもできます。便利でしょ? 便利、だよね!

※公開はちょっと待ってね。

続きます。

前回は、「色の利用」について取り上げました。もう一つ、WCAG、JIS X 8341-3:2010には色(というよりも正しくはコントラストですが)に関する項目があります。

1.4.3 最低限のコントラスト: テキスト及び画像化された文字視覚的な表現には、少なくとも 4.5:1 のコントラスト比をもたせる。ただし、次の場合は除く: (レベルAA)

  • 大きな文字: サイズの大きなテキスト及びサイズの大きな画像化された文字には、少なくとも 3:1 のコントラスト比がある。

  • 付随的: テキスト又は画像化された文字において、次の場合はコントラストの要件は該当しない。アクティブではないユーザインタフェース・コンポーネントの一部である、装飾だけを目的にしている、誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。

  • ロゴタイプ: ロゴ又はブランド名の一部である文字には、コントラストの要件はない。

AAAの場合はさらに厳しくて、7:1のコントラスト、大きな文字で4.5 : 1 のコントラストを確保すること、とされています。

この、コントラスト比の計算方法はWCAGのサイトで公開されています。計算方法をここでご紹介する意味はあまりないと思うので詳細はリンク先を参照ください。

チェックはどうするかというと、コントラストの計算を行うソフトウェアがありますので、そういったものを使うのが一般的です。最も有名なのはColour Contrast Analyser (CCA)でしょう。アルファサードでも、ColorTesterというフリーソフトを公開しています。

JR新大阪駅の新幹線電光掲示板

JR新大阪駅の電光掲示板

写真の撮り方によりますし、正確な数字ではないことをお断りしておきますが、写真から色を拾ってColorTesterのチェックにかけてみました。

ColorTesterのテスト結果

文字のどの位置かによって結果は異なりましたが、概ね 2.5 : 1 から 3.0 : 1。3.0 : 1 だと「大きな文字」でぎりぎり適合ということになります。ウェブの場合は(WCAGで)「18 ポイントのテキスト又は太字で 14 ポイントのテキスト」が大きな文字とされています。(WCAGで)「18 ポイントのテキスト又は太字で 14 ポイントのテキスト」が大きな文字とされています。JIS X 8341-3:2010では「日本語を含む場合、少なくとも22ポイント又は18ポイントの太字」と追記されています。

電光掲示板はリアルなサインですから、距離によって文字の大きさは変わってみえるので(遠くから見たら当然文字は小さく見えるし、確度によって太さの見え方も異なるでしょう)一概にどちらの数字を適用したらいいかを述べることはできませんが、少なくとももう少しコントラストを確保したいところです。ちなみに、「こだま」の青色は4〜4.5 : 1確保できていますので、大きな文字においては「適合」です。

ちなみに「のぞみ」は 10.0 :1以上のコントラストが確保されており、「適合」です。

新大阪駅の電光掲示板。のぞみの表示

参考 : このページに掲載されている写真だと、「こだま」はもう少し明るい色になってますね。「ひかり」は相変わらずに見えます。

間もなくクリスマスですね! (違)

少し涼しくなったと思ったら、街にはクリスマスツリーが出現したりして近頃は気が抜けませんね。ツリー、サンタといえば、グリーンと赤色。この組み合わせが識別しにくい人がいるよって話しは先のエントリーに書きましたが、以下の画像の背景色と前景色のコントラスト比は、1.1 : 1 / 2.2 : 1 で、これらは普通の文字、大きな文字ともに不適合です。但し、後者の写真は背景と文字の間に白い縁取り線があります。こうすれば「適合」となる例ですね(ちなみに、この写真は少し古い写真で、現在これがこのまま残っているかはわかりません)

自動販売機の上「本日分」の表示。グリーンの上に赤い文字が重なっている     同じく「本日」前売」の表示。同じ色合いだが、白い縁取りがある

ウェブの場合は、テキスト化することで配色を変えられる可能性がある

AAには、この項目と関連して、以下の達成基準があります。

1.4.9 画像化された文字(例外なし): 画像化された文字は、装飾だけを目的に用いられているか、その情報を伝える上でテキストを特定の形で表現することが必要不可欠である。 (レベルAAA)

注記: ロゴタイプ(ロゴ又はブランド名の一部である文字)は必要不可欠なものであるとみなす。

色を変更する方法と見え方については、OS XでもWindowsにも「アクセシビリティ」の設定があって、そこから変更できます。また、画像化された文字を使わなければ、ブラウザ上でテキストを選択したり、エディタにコピペしたりしても読むことができます(私は、表はExcelにコピペしてスクリーンリーダーで読むねん、という人を知っています)。以下のブログ記事もぜひお読みいただきたいと思います。

上記の記事をお読みいただくことでお感じいただけると思います。アクセシビリティは結構身近なものですよ。

他の箇条の話しで続けたかったのですが、今朝移動している最中にひとつ好例? を見つけてしまったので一昨日の続き。アクセシビリティの試験や評価をするとき、私は評価や試験はそんなに難しくはないという派?なんですけどね、事例の引き出しを増やしておくこと、経験しておくことが問題の発見を素早くするということは言えると思います。

御堂筋線、大国町の次は、何駅だ?

ちょっとコントラストを変えているのはインチキであることは告白しておきます。以下は大阪市営地下鉄の路線図をグレースケールにしたものです。縦、ほぼ中央の線が御堂筋線。新大阪から市内中心部へ向かう線です。ウルフルズが大阪ストラットで心斎橋行きの〜って歌にしている、あれです(よく考えると心斎橋行きの切符っておかしな表現ですな)。

大阪市営地下鉄の路線図をグレースケールで見た時

本町→心斎橋→なんば→大国町、と来て、次は何駅だ?何駅でしょうか?花園町?に見えるわな。これ。さて、正解は色のわかる人は下記のオリジナルの写真でわかることでしょう。正解は動物園前、となるのでした。

大阪市営地下鉄の路線図。通常のカラー表示

18時12分追記、改良案

最近イラレとかインストールしてないのでなんちゃってな線でごめんなさい。この大国町駅あたりに限って言えば、四ツ橋線をちょっと手前でくいっと曲げてやって、御堂筋線のX座標とちょいズラしてやればずいぶん理解しやすくなる筈です。もっと簡単な対応としては線の太さを変える、という方法もとれますね。

大阪市営地下鉄路線図-修正案

18時47分追記、もひとつ追記

中村さんにご指摘いただきました。Y16/M21(大国町)、Y17(花園町)、M22(動物園前)てのが併記されているので、正確には色だけには依存していないと。確かに。

カラーユニバーサルデザインという考え方

東京メトロの路線図をカラーユニバーサルデザイン(CUD)に対応させたものが、少し前に話題になっていました(良い例で)。東京メトロの路線図ではありますが、福島県のページによくまとまっていましたのでこちらを紹介しておきます。

カラーユニバーサルデザインガイド CUDの具体例(路線図)です - 福島県ホームページ

福島県ホームページのカラーユニバーサルデザインガイド
  • 各路線特有の色を保ちながら見分けやすい色相を選択
  • 線は太くして色の面積を充分にとる
  • 路線が交差する箇所に境界線を設ける
  • 色弱者が見分けにくい線に、一般色覚者が気にならない程度のハッチングを加える
  • 線上の路線名や凡例の色名などの情報を追加

カラーユニバーサルデザインに対応した路線図がこのページで紹介されています。

カラーユニバーサルデザインに対応した路線図の例(福島県ホームページより)

問題となりがちな箇所についての経験則を蓄積しておく

富士通のページ(7.1.4.1 色の使用に関する達成基準 : 富士通)では、グラフの凡例における問題の例が示されています。

地図、グラフには1.4.1に関する問題が混入しやすいので注意しようね、というお話でした。

ぼさっと歩いてんじゃなくて、街の中にも考えるヒントはいっぱいあるよ、と。

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やウェブアクセシビリティが怖くない人が増えれば、と思うので。

Facebook

Twitter

このアーカイブについて

このページには、2014年10月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2014年9月です。

次のアーカイブは2014年11月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Powered by Movable Type 6.2.6