• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
WCAGで学ぶアクセシビリティ
 

WCAGで学ぶアクセシビリティ

on

  • 846 views

WCAG2.0の読み方、代表的なガイドラインの紹介など。

WCAG2.0の読み方、代表的なガイドラインの紹介など。

Statistics

Views

Total Views
846
Views on SlideShare
846
Embed Views
0

Actions

Likes
1
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    WCAGで学ぶアクセシビリティ WCAGで学ぶアクセシビリティ Presentation Transcript

    • WCAGで学ぶアクセシビリティ 富永 冴樹
    • アジェンダ• WCAG 2.0 とは • 4つの原則 • 3つの達成基準 • 抽象的な表現と関連文書 • WAICによる日本語訳とAS情報• WCAG 2.0 を見てみよう(代表的なガイドラインの紹介) • 1.1.1 非テキストコンテンツ (レベルA) • 1.4.3 最低限のコントラスト (レベルAA) • 2.1.1 キーボード操作 (レベルA) • 3.2.1 オン・フォーカス (レベルA) • 4.1.1 構文解析 (レベルA)
    • WCAG 2.0 とは
    • 4つの原則• Perceivable (知覚可能) 情報及びユーザインタフェース・コンポーネントは、利用者が知覚できる方法で利用者に提示可能でなければな らない。• Operable (操作可能) ユーザインタフェース・コンポーネント及びナビゲーションは操作可能でなければならない。• Understandable (理解可能) 情報及びユーザインタフェースの操作は理解可能でなければならない。• Robust (堅牢性) コンテンツは、支援技術を含む様々なユーザエージェントが確実に解釈できるように十分に堅牢でなければなら ない。 ※解説部分は日本語訳より
    • 3つの達成基準• レベルの低い方から A , AA, AAA の3種類• より高い適合レベルを満たすには、低いレベルも満たしていることが必要 (レベルAAを目指すなら、レベルAもすべて対応する)• レベルAAAに適合するのは難しい • 音声に手話通訳が必要だったり、一行の最大長さが指定されていたり、中学生レ ベル以上の読解力が必要な場合はイラストなどで補足が必要など• レベルA適合を目指しつつ、レベルAAから達成可能なものをいくつか選 択するのが現実的なところか ミツエーリンクスでは、2010年より適合レベルAへの「標準対応」を実施• ウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0への標準対応の開始について
    • 抽象的な表現例えば…3.1.1 ページの言語: それぞれのウェブページの主たる自然言語がどの言語であるかを、プログラムが解釈可能である。 (レベルA) 意味分かります?• HTMLの場合は、html要素にlang属性を付ければよいのだろう。• HTML以外(PDF, テキストファイルなど)はどうする?
    • 抽象的な表現解説書へのリンクがある
    • 抽象的な表現• html要素の言語属性を用いる• デフォルトの使用言語をHTTPヘッダで指定するなど 具体的な解説は関連文書に書かれている
    • 関連文書• How to Meet WCAG 2.0 (WCAG 2.0を満たす方法) クイックリファレンス• Understanding WCAG 2.0 (解説書) 抽象的な表現が多いガイドライン本文に対して、詳細な説明が書かれており、理解に役立つ• Techniques for WCAG 2.0 (実装方法集) 具体的なコード例も交えつつ、ガイドラインを満たす方法や、逆に不適合事例を紹介 HTMLだけでなくPDFやFlashも• The WCAG 2.0 Documents (文書群) 各文書群の関係図など
    • WAICによる日本語訳とAS情報 ウェブアクセシビリティ基盤委員会(WAIC)
    • アクセシビリティ・サポーテッド アクセシビリティ・サポーテッド(AS)情報
    • WCAG 2.0 を見てみよう 代表的なガイドラインの紹介
    • ★ 1.1.1 非テキストコンテンツ (レベルA)1.4.3 最低限のコントラスト (レベルAA)2.1.1 キーボード操作 (レベルA)3.2.1 オン・フォーカス (レベルA)4.1.1 構文解析 (レベルA)
    • ガイドライン 1.1 代替テキスト
    • 旧石器時代のHTML仕様• HTML 2.0 (RFC1866, 1995年) text to use in place of the referenced image resource, for example due to processing constraints or user preference. Hypertext Markup Language - 2.0 この文字列は、処理系の制約やユーザー側の選択しだいで、参照され ている画像リソースのかわりに表示される。 「RFC1866翻訳計画」の修正案件• HTML 3.2 (1997年) This is used to provide a text description of the image and is vital for interoperability with speech-based and text only user agents. HTML 3.2 Reference Specification これは、画像の代わりのテキスト記述を提供し、スピーチペースやテキス ト専用のユーザエージェントとの相互運用性を活性化する。 「どら猫本舗」による翻訳版
    • 現在のHTML仕様• HTML 4.01 (1999年) For user agents that cannot display images, forms, or applets, this attribute specifies alternate text. The language of the alternate text is specified by the lang attribute. HTML 4.01 Specification この属性は、画像、フォーム、アプレットを表示できないユーザエージェン トのために、代替テキストを指定する。代替テキストの言語は、lang属性 で指定する。 「HTML 4仕様書邦訳計画補完委員会」による翻訳版
    • これからのHTML仕様• HTML5 (2012年現在、WD) – alt属性は必須ではなくなった – 写真共有サイトなど、ユーザーが代替テキストを入力しないこと が想定されるケース – CAPTCHA – 専用の節(4.8.1.1)を設けて詳細に解説されている • 4.8.1.1 Requirements for providing text to act as an alternative for images • 4.8.2.1 イメージの代替として作用するテキストを提供するための要件 (HTML5.JP) ※HTML5.JPによる日本語訳は2009年8月25日版を基にしているので節番号が異なる。 – さらに別の文書も • HTML5: Techniques for providing useful text alternatives • HTML5: 有用な代替テキストを提供するためのテクニック (血統の森)
    • 代替テキストに関する文献その1• altはつけるだけじゃなくて (ツルカメ 森田雄 氏) • Web Site Designで連載されていた「実践アクセシブルHTML」(2003年~2004年)の第一回。 • ウェブサイトでの公開はしばらく停止されていましたが、2011年に復活!
    • 代替テキストに関する文献その2• サンプルで学ぶHTML5の仕様変更要素・中編(ライブドア 浜俊太朗 氏) • ASCII.jpで2011年より浜 俊太朗のHTML5マークアップ移行ガイドを連載中。
    • 複雑な図形にobject要素を使った例• 株式会社オークセールの組織図 – 代替テキスト(object要素の中身)はul要素でマークアップしているの で、画像が表示できない環境やスクリーンリーダーにもやさしい – IE7以下はobject要素で画像を表示するとスクロールバーが出てしま うので、JavaScriptでimg要素に変換• AOI Pro. Inc.の組織図 – bAによる制作 – SVGで実装 – SVGに対応していないIE8以下では、テキスト(ul要素)を表示
    • 1.1.1 非テキストコンテンツ (レベルA)★ 1.4.3 最低限のコントラスト (レベルAA)2.1.1 キーボード操作 (レベルA)3.2.1 オン・フォーカス (レベルA)4.1.1 構文解析 (レベルA)
    • 1.4.3 最低限のコントラスト• 1.4.3 最低限のコントラスト: テキスト及び画像化された文字の視覚 的な表現には、少なくとも 4.5:1 のコントラスト比をもたせる。ただし、次 の場合は除く: (レベルAA)よくある事例 – 強調したい部分を赤文字で装飾している ↓ 白背景に赤文字(#ff0000)はコントラスト比4.0:1で条件を満たさない ↓ ほんの少し濃くしよう(白背景の場合、#f00000以上)
    • カラーコントラストアナライザー• 文字と背景をマウスカーソルで選択するだけでコントラスト比を算出する ツール• WCAGの達成基準を満たしているかも示してくれる 日本語版はInfoaxiaのサイトで配布
    • CCAを使ってみた
    • 1.1.1 非テキストコンテンツ (レベルA)1.4.3 最低限のコントラスト (レベルAA)★ 2.1.1 キーボード操作 (レベルA)3.2.1 オン・フォーカス (レベルA)4.1.1 構文解析 (レベルA)
    • 2.1.1 キーボード操作• 2.1.1 キーボード操作: コンテンツのすべての機能は、個々のキース トロークに特定のタイミングを要することなく、キーボード・インタフェース を通じて操作可能である。ただし、その根本的な機能が利用者の動作に よる始点からの終点まで続く一連の軌跡に依存して実現されている場合 は除く。 (レベルA)よくある事例 ~JavaScriptによる画像切り替え – 別ページにリンクするわけではないので、a要素を使っていない – JS無効環境を考えてa要素を使っているが、スクリプトでhref属性を除去している ↓ いずれもキーボードでフォーカスを合わせることができない。 ↓ tabindex=“0”を付けよう! (なお、HTML4.01やXHTML1.0では限られた要素にしか付けられないので注意)
    • 1.1.1 非テキストコンテンツ (レベルA)1.4.3 最低限のコントラスト (レベルAA)2.1.1 キーボード操作 (レベルA)★ 3.2.1 オン・フォーカス (レベルA)4.1.1 構文解析 (レベルA)
    • 3.2.1 オン・フォーカス• 3.2.1 オン・フォーカス: いずれのコンポーネントも、フォーカスを 受け取ったときに 状況の変化を引き起こさない。 (レベルA)よくある事例 ~プルダウンを選択すると別ページに遷移 – ユーザーは選択するだけで遷移してしまうとは想像できない – 手を滑らすと想定とは違うページに遷移してしまう – 遷移先から戻った場合に、再び同じページに進むことができない – キーボード操作を考慮していないケース – JavaScript無効環境では遷移できない ↓JavaScriptによる遷移ではなく、submitボタンによる送信にする W3Cトップページの言語選択フォームはちゃんと送信ボタンがある
    • 1.1.1 非テキストコンテンツ (レベルA)1.4.3 最低限のコントラスト (レベルAA)2.1.1 キーボード操作 (レベルA)3.2.1 オン・フォーカス (レベルA)★ 4.1.1 構文解析 (レベルA)
    • 4.1.1 構文解析• 4.1.1 構文解析: マークアップ言語を用いて実装されているコンテンツ においては、仕様で認められているものを除いて、要素には完全な開始 タグ及び終了タグがあり、要素は仕様に準じて入れ子になっていて、要 素には重複した属性がなく、どのIDも一意的である。 (レベルA) バリデートチェックすべし