アクセシビリティの最近のブログ記事

【レポート】CSS Nite in Ginza, Vol.44

| コメント(1) | トラックバック(1)

CSS Nite in Ginza, Vol.44

2010年2月18日にアップルストア銀座で開催された「CSS Nite in Ginza, Vol.44」に参加しました。個人的には今年一発目のセミナー参加でした。

今回は株式会社インフォアクシア・植木真さんによるアクセシビリティのお話。「JIS X 8341-3 徹底比較 60分1本勝負 『2004年版』 vs 『2010年改定版」ということで、今年の5〜7月に公示予定の JIS X 8341-3:2010 に関するセッションでした。

画像置換とアクセシビリティ

| コメント(2) | トラックバック(1)

Shift2の植木さんのセッションで取り上げられていた「画像置換とアクセシビリティ」について、まとめてみます。

2008年12月に勧告されたWCAG 2.0の【1.1.1 Non-text Content】には以下のように書かれています。

1.1.1 非テキストコンテンツ(Non-text Content):ユーザーに提示されるすべての「非テキストコンテンツ」には、以下に挙げる場合を除いて、同等の目的を果たす「代替テキスト」があること。(LevelA)

なお、文中にある以下の場合として「コントロール、入力」「時間に伴って変化するメディア」「試験」「感覚的」「CAPTCHA」「装飾、整形、非表示」が挙げられています。

LevelAに指定されているので、守るべき項目だと思います。

そして、WCAG2.0に準拠するためのテクニック集という位置づけである「Techniques for WCAG 2.0」というガイドラインの【F3】に、画像置換に関する事項が掲載されています。

【レポート】Shift2 - Shift to JIS X 8341-3:2009

Shift to JIS X 8341-3

Shift2の前日に勧告になった「WCAG 2.0」。まさにグッドタイミングだったわけですが、そんなしてやったりのインフォアクシア・植木真さんによるアクセシビリティの2008年総括、そしてアクセシビリティが大きくShiftする2009年についてのセッションでした。

まず、W3Cの新しいアクセシビリティ・ガイドライン「WCAG 2.0」が2008年中にも勧告となる見込みですに勧告されました。それをうけて、日本国内では、2004年6月に制定されたJIS X 8341-3が、2009年9月に改定される予定です。
このセッションでは、JIS X 8341-3のガイドラインがどのように変わるのかを、ひと足早くご紹介します。

WCAG2.0、ようやく勧告・・・

もう勧告しているのかと勘違いしそうになったアクセシビリティのガイドライン「WCAG 2.0」ですが、2008年12月11日ようやく勧告されました。

2回目の最終草案からちょうど1年という月日が経ったわけですね。いやぁ〜、長かったですね。

CAPTCHAとアクセシビリティ

CAPTCHAの例

コンピュータによる不正なアカウント取得などを防ぐ目的で開発された技術として「CAPTCHA」というものがあります。グニャグニャしたアルファベットや数字が表示され、表示されている文字を入力してください・・・といわれるものです。

先月末に、セキュリティ的な視点からCAPTCHAに関する記事がいくつかアップされていました。

セキュリティ的なことはちょっとよくわからないのですが、単純に「画像を見て文字を入力させる」という動作は、アクセシビリティ的に問題があるとされています。
そこで、代替手段として音声読み上げによるAudio CAPTCHAというものがあります。

WCAG2.0 second Last Call Working Draft 公開

W3Cは2007年12月11日、WCAG2.0の2回目の最終草案を公開しました。
2006年の最終草案からの変更点は下記ドキュメントにまとめられています。

読めない英語を翻訳サイト使いながら読んでいきましたが、要約すると、不必要な専門用語が排除され、読みやすく、理解しやすくなったこと。文章量が減ったこと。学習障害への対応についてドキュメントの見直しがおこなわれ、一部達成基準のレベルが上げられたこと。達成基準への考え方(Level AAA~Level Aの3つの基準があることについて)が再考されたことなどがあげられています。

カラー・コントラスト・アナライザー キャプチャ画面

アクセシビリティのポータルサイト「Infoaxia」において、WCAG2.0の新基準である輝度コントラスト比によるチェックが可能になった「カラー・コントラスト・アナライザー 2.0」が配布されています。

スピーカー
植木真さん(株式会社インフォアクシア)
田邊佳嗣さん(アドビ システムズ 株式会社)
林岳里さん(アドビ システムズ 株式会社)

アクセシビリティについては、植木さんのセミナーに何回か参加させていただいているのですが、PDFやFlashのアクセシビリティについてはなかなか機会がなかったので、今回受講することにしました。

WCAG2.0 色のコントラスト「輝度コントラスト比」を測定

とある案件のデザインで色のコントラストを調べようとしたのですが、Web標準の日々のWCAG 2.0に関するセッションで「輝度コントラスト比」という指標が示されていたなぁ・・・と気付くものの、「どうやって調べるんだろう?」と思いいろいろ調べてみました。

(L1 + 0.05) / (L2 + 0.05)
L1はテキストの文字色あるいは背景色の明るいほうの輝度で、L2はテキストの文字色あるいは背景色の暗いほうの輝度。

注記 1: 色の輝度は、0.2126 * ((R / FS) ^ 2.2) + 0.7152 * ((G / FS) ^ 2.2) + 0.0722 * ((B / FS) ^ 2.2)と定義される。

  • R、G、そして B は、色のRGB値で赤、緑、そして青である。
  • FS は、R、G、そしてBのRGB値で最大のフルスケール (8ビットカラーチャンネルで255)。
  • "^" は、指数演算子である。

注記 2: 輝度の値の範囲は、0 (黒) から 1 (白)で、輝度コントラスト比の範囲は 1 から 21である。

出典:WCAG 2.0 ラストコール・ワーキングドラフト日本語訳 - 輝度コントラスト比

正直この式を見て計算しようという気にならなかったので(指数演算子って言われても・・・)、何かツールはないものかと探しておりました。

JIS X8341-3 5.2e ページタイトル

JIS X8341-3 5.2e
ページのタイトルには、利用者がページの内容を識別できる名称を付けなければならない。
多くのブラウザの左上に、そのページのまさに「タイトル」として表示されるタイトルタグ。音声ブラウザでも最初にタイトル情報として読み上げられます。 SEO的にも重要な要素として扱われるため、キーワードが羅列されることもありますが、本来のタイトルの意味とは違っているのかなぁと思います。手持ちの資料によると各検索エンジンのタイトル情報の最大表示文字数は、
  • Yahoo!JAPAN - 38文字
  • Google - 34文字
  • msn - 22文字
となっているので、 「そのページの固有のタイトル」と「ページ名(企業名)」の組み合わせで構成するのがいいのではないでしょうか?今回も2006年のアックゼロヨンアワード受賞サイトの採用情報のページで比較をしてみたいと思います。
JIS X8341-3 5.5c
画像などの背景色と前景色には、十分なコントラストを取り、識別しやすい配色することが望ましい。
JIS X8341-3 5.6c
フォントの色には、背景色などを考慮し見やすい色を指定することが望ましい。
背景色と前景色のコントラストは取った方がいい・・・というのはわかっているものの、では実際どのくらいのコントラストを取ればいいのかは、ツールなどを使わないと俗人的になりがちです。 そこで色のコントラストを測れるツールをいくつか紹介します。
JIS X8341-3 5.2g
閲覧しているページがウェブサイトの構造のどこに位置しているか把握できるように、階層などの構造を示した情報を提供することが望ましい。
これっていわゆる「パンくずリスト」のことを指していると思うのですが、 じゃぁどんな感じでマークアップすればいいの?ってわけで調べてみました。気になる点は3つ。
  1. 矢印となる部分って画像?それとも「>」?
  2. パンくずのIDってどんなになっているんだろう?
  3. そもそもどんな感じで組んでいるんだろう?
  4. 現在位置はどんなマークアップなんだろう?

無作為にサイトを選ぶのもつまらないので、2006年のアックゼロヨンアワード受賞サイトで見てみましょう。

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働いています。ごくたまに個人でもWebサイト作ってます。趣味ではジャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー