Comments
Description
Transcript
JIS X 8341-3:2010を『日本語訳』してみる！
JIS X 8341-3:2010を 『日本語訳』してみる！ ～Webアクセシビリティの基本の『キ』～ あなたは ”ビギナー” ですか？ はじめに 「アクセシビリティ」とは？ WWWの創世者、かく語りき “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee W3C Director and inventor of the World Wide Web Web accessibility means that people with disabilities can usemeans the Web. Web accessibility that people with More specifically, Web means disabilities can use theaccessibility Web. More specifically, accessibility that people Web with disabilities can means perceive,that people with disabilities perceive, understand, navigate, andcan interact with the understand, navigate, and interact with the Web, and that they can contribute to the Web, and that they can contribute to the Web. Web. Web accessibility also benefits others, including older people with changing abilities due to aging． Introduction to Web Accessibility | W3C WAI http://www.w3.org/WAI/intro/accessibility.php Reframing Accessibility for the Web We need to change the way we talk about accessibility. Most people are taught that “web accessibility means that people with disabilities can use the Web”—the official definition from the W3C. This is wrong. Web accessibility means that people can use the web. Reframing Accessibility for the Web http://alistapart.com/article/reframing-accessibility-for-the-web “The New Accessibility” Accessibility was once viewed as benefiting people with disabilities only - not anymore! Accessibility now exists on a continuum and covers a wide spectrum of needs, thus benefiting everyone in different situations to different degrees. This is especially true for the Web and Mobile technologies, where devices are diverse and their use varies across every conceivable context. The 11th Web For All Conference “New Accessibility” http://www.w4a.info/2014/ THIS IS NOT THE WEB THIS IS THE WEB. マルチスクリーン時代 デバイスのいま マルチスクリーン時代 デバイスのいま http://yahoojp-marketing.tumblr.com/post/109564662638 THIS WILL BE THE WEB. やはりお前らのWebアクセシビリティは間違ってい る やはりお前らのWebアクセシビリティは間違っている http://i.yimg.jp/images/creativeblog/140916/sfukumot.pdf ヤフーの事例 スマートフォンやタブレットなどの普及により、 多様化 お客さまの利用環境が今後ますます しながら変化していくことが予想されます。 一人ひとりのお客さまに対して誠実 スマートフォンやタブレットなどの普及に ヤフーは、そのような時代の変化の中において、 に向き合い ながら、ウェブアクセシビリティを大切にして いきます。 より、お客さまの利用環境が今後ますます 多様化しながら変化していくことが予想さ れます。ヤフーは、そのような時代の変化 の中において、一人ひとりのお客さまに対 して誠実に向き合いながら、ウェブアクセ シビリティを大切にしていきます。 コニカミノルタの事例 近年では、スマートフォンやタブレットの普及 などにより、お客様の年齢や障害の有無のみ な らず、お客様がウェブサイトにアクセスする デバイスや環境の多様化も加わって、 アク セシビリティの重要性はますます高まって きました。 近年では、スマートフォンやタブレットの普及など により、お客様の年齢や障害の有無のみならず、 お客様がウェブサイトにアクセスするデバイスや 環境の多様化も加わって、アクセシビリティの 重要性はますます高まってきました。 Reframing Accessibility for the Web Web accessibility means that people can use the web. ・・・・・・ Not “people with disabilities.” Not “blind people and deaf people.” Not “people who have cognitive disabilities” or “men who are color blind” or “people with motor disabilities.” People. People who are using the web. People who are using what you’re building. Reframing Accessibility for the Web http://alistapart.com/article/reframing-accessibility-for-the-web 全ユーザーが特殊な存在 全ユーザーが特殊な存在 近年の Web 利用者の動向をみると、高齢者や 障がい者を意識しなかったとしても、情報に アクセスできるかどうかを真剣に考えなければ、 見られない・読まれないコンテンツになること が分かります。 コンテンツのアクセシビリティが未来を保証する http://www.yasuhisa.com/could/article/accessible-content/ UXの土台となるアクセシビリティ Evaluation method of UX “The User Experience Honeycomb” BOOKSLOPE BLOG — information architect/user experience designer http://www.bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html アクセシビリティとは？ もはや「高齢者・障害者対応」だけではなく より多くのユーザーが、より多くの場面で、 より多くのデバイスから利用できるようにすること （将来の技術も含む）より多くの利用環境に対応して、 より多くのユーザーにコンテンツを提供すること Webコンテンツの品質基準の一つ あらゆる機会を最大化する（＝機会損失を未然に防ぐ） アクセスできなければ、ユーザビリティもUXもない 何をどこまで？ の目安となるのがガイドライン WCAG 2.0（W3C勧告） JIS X 8341-3:2010 ISO / IEC 40500:2012 ところが･･･ 日本語なんだけど、読んでも･･･ 時間の経過に伴って 変化するメディア コンポーネント 識別名及び役割 プログラムが 解釈可能 メカニズム そこで･･･ 『日本語訳』してみようと思います･･･ 時間の経過に伴って 変化するメディア コンポーネント 識別名及び役割 プログラムが 解釈可能 メカニズム 植木 真（うえき まこと） 株式会社インフォアクシア 代表取締役 Webアクセシビリティコンサルタント • サイト診断、ガイドライン＆チェックリスト作成、教育・研修、 制作会社サポート など 国内外のアクセシビリティガイドライン策定に従事 • W3C WCAG ワーキンググループ • JIS X 8341-3 原案作成ワーキンググループ ウェブアクセシビリティ基盤委員会（WAIC）委員長 • 今年度は JIS X 8341-3 改正原案作成委員会 委員長を兼任 「アクセシビリティ」確保の基本 中でも対応が難しそうなのは･･･ スクリーンリーダー（画面読み上げソフト）対応 スクリーンリーダー対応で留意すべきポイントの例 ページの内容が分かるページタイトルを記述する メインコンテンツへ移動できる手段を提供する 見出しやリストなどの文書構造をマークアップする リンクテキストは、リンク先が分かるように記述する 情報を伝えている画像に代替テキストを提供する 色の違いだけで情報を伝えないようにする キーボードだけでも操作できるようにする フォーム・コントロールのラベルをマークアップする データテーブルの構造をマークアップする エラーメッセージではエラー箇所とその修正方法を説明 する など スクリーンリーダー対応とSEOとの共通 点 スクリーンリーダー対応と SEOには共通点が多い Google 検索エンジン最適化スターター ガイド http://www.google.com/intl/ja/webmasters/docs/searchengine-optimization-starter-guide-ja.pdf キーワードは “Machine Readable” Webコンテンツを マシンリーダブル にすること マシンリーダブルとは？ 今や誰でもWebで情報発信できる時代だ。 しかし、ヒューマン・リーダブルな高品質さ と、適切なマシン・リーダブルさを両立 してデザインできるのは、ごくわずかなプロ フェッショナルだけである。 素人とは違う、Webプロフェッショナルの仕事としての Webコンテンツ開発を考えてみた（長谷川恭久） http://web-tan.forum.impressrd.jp/e/2012/05/17/12727 作成したデータを人間が読みやすくするの とは別に、コンピュータにも処理しやすく することで何倍にも活用の幅が広がる。 マシン リーダビリティの重要性 東日本大震災と情報、インターネット、Google http://www.google.org/crisisresponse/kiroku311/chapter_09.html 「マシンリーダブル」とは？ Machine Readable = Machine + Read + Able 「マシン + 読む + できる」 マシン？ スーパー・ストロング・マシン たぶん違うｗ © 新日本プロレスリング でもないはず。 http://buzznews.asia/?p=75700 マシン＝ユーザーエージェント HTML user agent An HTML user agent is any device that interprets HTML documents. User agents include visual browsers (text-only and graphical), non-visual browsers (audio, Braille), search robots, proxies, etc. 引用元：HTML 4.01 Specification 4.1 Definitions 「マシンリーダブルにする」とは？ ユーザーエージェントがHTMLソースから コンテンツを読みとれるようにすること *HTMLの場合 – ビジュアル・ブラウザ “text-only and graphical” – ノンビジュアル・ブラウザ（支援技術） “audio, braille” – 検索クローラー “search robots” 基本はテキストとマークアップ テキストが最もアクセシブル 晴海トリトンスクエア <title>要素でページタイトルになる <title>晴海トリトンスクエア</title> 基本はテキストとマークアップ <h1>要素で大見出しになる <h1>晴海トリトンスクエア</h1> <li>要素でリスト項目になる <li>晴海トリトンスクエア</li> 基本はテキストとマークアップ <strong>要素で強調される <strong>晴海トリトンスクエア</strong> <a>要素でリンクになる <a href=“http://www.sansokan.jp/”> 晴海トリトンスクエア </a> THIS WILL BE THE WEB. まず最初に押さえておきたい達成基準をチェック 「JIS X 8341-3:2010」日本語訳 チェックポイント #1 ページタイトル 関連するJIS X 8341-3:2010の達成基準 達成基準 7.2.4.2 ページタイトル[等級A] ウェブページには，主題又は目的を説明した タイトルがなければならない。 ページの内容がわかるページタイトルを付ける 「ページタイトル」のチェック方法 ページタイトル（title要素）で、そのページが どういうページか（ページの主題が）分かるか オススメは「ページタイトル＋サイト名」 良い例： アクセシビリティ（1）JIS X 8341-3の概要｜AccSell 悪い例： アクセシビリティ（1）｜AccSell チェックポイント #2 見出し 関連するJIS X 8341-3:2010の達成基準 達成基準 7.1.3.1 情報及び関係性[等級A] 表現を通じて伝達されている情報，構造及び関係性 は，プログラムが解釈可能でなければならない。 プログラムが解釈可能にすることができないウェブ コンテンツ技術を用いる場合は，それらはテキスト で提供されていなければならない。 見出しは “見た目だけでなく” マークアップする 関連するJIS X 8341-3:2010の達成基準 達成基準 7.2.4.6 見出し及びラベル[等級A] 見出し及びラベルは，主題又は目的を説明して いなければならない。 見出しは、そのセクションの主題を説明する 「見出し」のチェック方法 ページに「見出し」があるかを目視で確認する 見た目だけでなく、h1～h6要素で見出しを マークアップしているか 見出しの文言がそのセクションのコンテンツ （主題）を説明しているか 見出しレベルは「スタイル」ではなく「文書構造」で ●●●●● ●●●●● ●●●●● <h1> ●●●●● <h2> <h2> <h2> ●●●●● <h2> ●●●●● ●●●●● ●●●●● <h2> <h2> <h2> or <h3> 見出しレベルは見た目の 大きさ等ではなく、その 文書構造で決める 直前にある見出しのセク ションのサブセクション？ それとも関係のない独立 したセクション？ ツール「Web Developer」 Firefox版 https://addons.mozilla.org/ja/firefox/addon/webdeveloper/ Google Chrome版 https://chrome.google.com/webstore/detail/webdeveloper/bfbameneiokkgbdmiekhjnmfkcnldhhm チェックポイント #3 リスト 関連するJIS X 8341-3:2010の達成基準 達成基準 7.1.3.1 情報及び関係性[等級A] 表現を通じて伝達されている情報，構造及び関係性 は，プログラムが解釈可能でなければならない。 プログラムが解釈可能にすることができないウェブ コンテンツ技術を用いる場合は，それらはテキスト で提供されていなければならない。 リストは “見た目だけでなく” マークアップする 「リスト」のチェック方法 ページに「リスト」があるかを目視で確認する 「リスト」のチェック： 見た目だけでなく、リストの種類に応じてマー クアップしているか 順不同リスト：ul要素、li要素 番号付きリスト：ol要素、li要素 定義リスト：dl要素、dt要素、dd要素 順不同リスト リスト項目1 リスト項目2 リスト項目3 リスト項目4 <ul> <li>リスト項目1</li> <li>リスト項目2</li> <li>リスト項目3</li> <li>リスト項目4</li> </ul> 番号付きリスト 1. 2. 3. 4. リスト項目1 リスト項目2 リスト項目3 リスト項目4 <ol> <li>リスト項目1</li> <li>リスト項目2</li> <li>リスト項目3</li> <li>リスト項目4</li> </ol> 定義リスト 拡大鏡 Windows OSに標準で搭載されている画面 拡大ソフト。 用語とその説明文をマーク アップするために用いる <dl> <dt>拡大鏡</dt> <dd>Windows OSに標準で搭載されている画 面拡大 ソフト。</dd> </dl> チェックポイント #4 リンクテキスト 関連するJIS X 8341-3:2010の達成基準 達成基準 7.2.4.1 文脈におけるリンクの目的[等級A] それぞれのリンクの目的が，リンクのテキストだけ から，又はプログラムが解釈可能なリンクの文脈を リンクのテキストと合わせたものから解釈できなけ ればならない。ただし，リンクの目的が一般的に みて利用者にとってあいまい（曖昧）な場合は除く。 リンクテキストだけでリンク先が分かるようにする 「リンクテキスト」のチェック方法 リンクテキスト（画像の場合は代替テキスト） だけで、リンク先がどういうページか分かるか 悪い例： 「アクセシビリティセミナー」の参加お申込みはこちら。 良い例： 「アクセシビリティセミナー」の参加お申込み （SEO的には）リンク先のページのキーワードになる 関連するJIS X 8341-3:2010の達成基準 達成基準 7.2.4.3 文脈におけるリンクの目的[等級A] それぞれのリンクの目的が，リンクのテキストだけ から，又はプログラムが解釈可能なリンクの文脈を リンクのテキストと合わせたものから解釈できなけ ればならない。ただし，リンクの目的が一般的に みて利用者にとってあいまい（曖昧）な場合は除く。 または、リンクの文脈と合わせて分かるようにする “プログラムが解釈可能なリンクの文脈”とは？ JIS X 8341-3:2010の等級Aに準拠する上では 以下の文脈との組み合わせでもOK： 1. 2. 3. 4. リンクの含まれている文（一つの文章） リンクの含まれているリスト項目（<li>要素） リンクの含まれているパラグラフ(<p>要素内） リンクの含まれているセルと関連付けられた見出し セル（関連付けられている<th>要素） 5. リンクの直前にある見出し（<h1>～<h6>要素） 文脈1: リンクの含まれている文 「アクセシビリティセミナー」の参加お申込みはこちら。 「アクセシビリティセミナー」の参加お申込みの詳細。 各講座に関するお問い合わせはここをクリック。 達成基準を満たすことはできるがオススメしません 文脈2: リンクの含まれているリスト項目 「アクセシビリティセミナー」の参加お申込みはこちら。 有料セミナーの詳細はこちら。 各講座に関するお問い合わせはこちら。 li要素でマークアップされたリスト項目であること 達成基準を満たすことはできるがオススメしません 文脈3: リンクの含まれているパラグラフ 「アクセシビリティセミナー」は、2月11日に晴海トリト ンスクエアで開催します。ただいまセミナー受講の申込を 受付中です。お申込みはこちら。 p要素でマークアップされたパラグラフであること 達成基準を満たすことはできるがオススメしません 文脈4: リンクの含まれているデータテーブル 有料セミナー HTML版 Word版 PDF版 オープンセミナー HTML版 Word版 PDF版 展示ブース HTML版 Word版 PDF版 見出しセルがth要素でマークアップされたデータテーブ ルであること 文脈5: リンクの直前にある見出し Webアクセシビリティ講座 スケジュール 受講申し込み お問い合わせ Webユーザビリティ講座 スケジュール 受講申し込み お問い合わせ h1～h6要素でマークアップされた見出しであること チェックポイント #5 画像の代替テキスト 関連するJIS X 8341-3:2010の達成基準 達成基準 7.1.1.1 非テキストコンテンツ[等級A] 利用者に提示されるすべての非テキストコンテンツ には，同等の目的を果たす代替テキストを提供しな ければならない。ただし，次の場合は除く。 f) 装飾，整形及び非表示 非テキストコンテンツが，装飾 だけを目的にしているとき，見た目の整形のためだけに 用いられているとき，又は利用者に提供されるものではない とき，支援技術が無視できるように実装されている。 画像の情報と同等の代替テキストを提供する 例1. 文字画像 画像にある文字をそのまま記述する 「第一生命ホールNEWS」 「弁当ステーション 専門店それぞれのこだわりが満載 「トリトンポイントカード 入会費・年会費無料！ 5のつく日はポイント3倍!!」 毎月 66 例2. 写真画像 写真であることが分かるように記述するとよい 「書籍「伝わる！修造トーク」の表紙の写真」 「写真：書籍「伝わる！修造トーク」の表紙」 リンクの場合は、写真を説明する必要はなく、 リンク先がどういうページか分かるように記述する 67 例3. 顔写真画像 顔写真であることが分かるように記述するとよい 「山本和泉の顔写真」 「顔写真：山本和泉」 顔写真であることが「写真：」よりも明確になる 68 例4. グラフ画像 グラフが提示しているデータを記述する 「製品別シェアの円グラフ：製品A 55％、製品B 20％、製品C 10％、 その他 15％」 alt属性ではなく、データテーブルで同じデータを提供してもよい 69 例5. フロー図 フロー図で説明している内容を記述する 登録申込の流れ STEP 1. STEP 2. STEP 3. 登録申込 書類提出 許可証交付 「登録申込の流れ：STEP 1. 登録申込、STEP 2. 書類提出、 STEP 3. 許可証交付」 70 代替テキストを記述する上での注意点 冗長な文言にならないようにする – 例えば、以下のような文言は記述しなくてもよい 「○○○の画像」 「○○○の写真です」 「○○○へのリンク」 – 画像にない文言は記述しない 補足説明が必要なら、画像にも明記すべきでは？ 画像にあるアイコンの説明は、アイコンでしか 伝えていない情報ならば記述すべき 71 もしかしたら、近い将来自動化されちゃう？？？ A picture is worth a thousand (coherent) words: building a natural description of images http://googleresearch.blogspot.jp/2014/11/a-picture-is-worththousand-coherent.html チェックポイント #6 ピュアな装飾などの画像 関連するJIS X 8341-3:2010の達成基準 達成基準 7.1.1.1 非テキストコンテンツ[等級A] 利用者に提示されるすべての非テキストコンテンツ には，同等の目的を果たす代替テキストを提供しな ければならない。ただし，次の場合は除く。 f) 装飾，整形及び非表示 非テキストコンテンツが，装飾 だけを目的にしているとき，見た目の整形のためだけに 用いられているとき，又は利用者に提供されるものではない とき，支援技術が無視できるように実装されている。 情報を伝えていない画像は 支援技術が無視できるように実装する 「装飾画像の代替テキスト」のチェック方法 情報を伝えていない画像かどうか 支援技術が無視できるように、次のように実装 されているか alt属性値が空（alt=“”）になっているか または、CSSの背景画像になっているか 厚生労働省のWebサイト：通常の表示 厚生労働省のWebサイト：ハイコントラスト表示 Windowsのハイコントラスト表示によるチェック 同じ弱視/ロービジョンでもやや軽度のユー ザーが利用していることが多い Windows標準の「拡大鏡」とは異なる CSSの背景画像は表示されない 画像には <img> 要素を用いる – alt属性で代替テキストを提供する – 装飾画像の場合は、alt属性を空（alt＝“”）にする ハイコントラスト表示で非表示でもOKならCSS を用いる – 文字画像の背景を透過にしない HTML5 ページの領域（セクション）も “マシンリーダブル” に セクショニング要素 <header> <nav> <main> <section> <article> <header> <footer> <div id=”application”> <footer> <aside> <form> 検索 ランドマークrole <header role=”banner”> <nav role=”navigation”> <main role=”main”> <aside role=”complementary”> <section role=”region”> <article role=”article”> <header> <footer> <div id=”application” role=”application”> <footer role=”contentinfo”> <form role=”search”> 検索 チェックポイント #7 キーボード操作 関連するJIS X 8341-3:2010の達成基準 達成基準 7.2.1.1 キーボード操作 [等級 A] コンテンツのすべての機能は，個々のキースト ロークに特定のタイミングを要することなく， キーボードインタフェースを通じて操作可能で なければならない。ただし，その根本的な機能が 利用者の動作による始点から終点まで続く一連の 軌跡に依存して実現されている場合は除く。 キーボードだけでも操作できるようにする 関連するJIS X 8341-3:2010の達成基準 達成基準 7.2.4.3 フォーカス順序 [等級 A] ウェブページが順番にナビゲートできて，その ナビゲーション順序が意味又は操作性に影響を 及ぼす場合，フォーカス可能なコンポーネントは 意味及び操作性を保持した順序でフォーカスを 受け取らなければならない。 キーボード操作時のフォーカス順序に注意する 関連するJIS X 8341-3:2010の達成基準 達成基準 7.2.4.7 視覚的に認識可能なフォーカス [等級 AA] キーボード操作が可能なユーザインタフェース には，キーボードフォーカスの状態が視覚的に 認識できる操作モードがなければならない。 キーボードフォーカスの位置が分かるようにする 関連するJIS X 8341-3:2010の達成基準 達成基準 7.3.2.1 オンフォーカス[等級 A] いずれのコンポーネントも，フォーカスを受け取っ たときに状況の変化を引き起こしてはならない。 フォーカスを受け取る以外の挙動をしない 「状況の変化」は用語の定義に注意 3.4.4 状況の変化（changes of context） ウェブページのコンテンツにおける大きな変化で，利用者が 気づかないと，ページ全体を一度に見ることのできない利用 者をまごつかせてしまうおそれのあるもの。状況の変化には 次に挙げるものの変化が含まれる。 － ユーザエージェント － ビューポート － フォーカス － ウェブページの意味を変えるコンテンツ 定義されている内容以外は該当しない 「状況の変化」に該当する具体例 3.4.4 状況の変化（changes of context） 例 新しいウィンドウを開くこと，フォーカスを異なる要素 へ移動させること，新しいウェブページへ移動すること （新しいウェブページへ移動したかのように思わせて しまうことも含む。），ウェブページの内容を大きく 再配置することなどは，状況の変化の事例である。 ユーザーが予期しない挙動のこと 「キーボード操作」のチェック方法 マウスで操作できる機能が全てキーボードだけ でも同じ操作ができるか キーボード・フォーカスの現在位置が表示され ているか フォーカス移動順序に問題がないか ページの先頭から最後まで「状況の変化」が 起こることなくキーボード・フォーカスを移動 できるか モーダル・ダイアログ The Incredible Accessible Modal Window http://accessibility.oit.ncsu.edu/training/aria/modalwindow/version-2/ ヒューマンリーダブルも重要 素人とは違う、Webプロフェッショナルの仕事としての Webコンテンツ開発を考えてみた（長谷川恭久） http://web-tan.forum.impressrd.jp/e/2012/05/17/12727 チェックポイント #8 色のコントラスト 関連するJIS X 8341-3:2010の達成基準 達成基準 7.1.4.3 最低限のコントラスト [等級AA] テキスト及び画像化された文字の視覚的な表現には， 少なくとも4.5:1 のコントラスト比がなければならない。 ただし，次の場合は除く。 a) 大きな文字 サイズの大きなテキスト及びサイズの 大きな画像化された文字には，少なくとも3:1 のコント ラスト比がある。 文字色と背景色とのコントラスト比を 4.5:1以上確保する 関連するJIS X 8341-3:2010の達成基準 b) 附随的 テキスト又は画像化された文字において，次の 場合はコントラストの要件は該当しない。アクティブ ではないユーザインタフェースコンポーネントの一部で ある，装飾だけを目的にしている，だれ（誰）も視覚的 に確認できない，又は重要な他の視覚的なコンテンツを 含む写真の一部分である。 c) ロゴタイプ ロゴ又はブランド名の一部である文字には， コントラストの要件はない。 以下のようなものは対象外： 非アクティブなフォームコントロール 装飾目的の文字や写真の中の文字 ロゴマーク など チェックポイント #9 色の違い 関連するJIS X 8341-3:2010の達成基準 達成基準 7.1.4.1 色の使用 [等級A] 情報を伝える，何が起こるか若しくは何が起きたか を示す，利用者の反応を促す，又は視覚的な要素を 区別する視覚的な手段として，色だけを使用しては ならない。 色の違いが分からなくても理解できるようにする 「赤字は必須項目です。」 悪い例： 以下のフォームに入力してください。赤字は必須項目です。 名前 メールアドレス 電話番号 色の違いが分からないと、どれが必須項目か 分からない 「赤字は必須項目です。」 良い例： 以下のフォームに入力してください。赤字は必須項目です。 名前［必須］ メールアドレス［必須］ 電話番号 テキストでも伝えているので、色の違いが 分からなくても、どれが必須項目か分かる テキストがあれば、音声や点字にも変換される チェックポイント #10 動画のキャプション JIS X 8341-3:2010の動画に関する達成基準 達成基準 7.1.2.2 収録済みの音声コンテンツのキャプション[等級A] 同期したメディアに含まれているすべての収録済み の音声コンテンツに対して，キャプションを提供 しなければならない。 ただし，その同期したメディアがテキストの代替 メディアであって，代替メディアであることが明確 にラベル付けされている場合は除く。 動画（収録済み）にキャプションを提供する 用語定義 3.3.3 キャプション（captions） そのメディアのコンテンツを理解するのに必要な， 会話及び会話でない音声情報の両方に対する，同期 した視覚的表現又は代替テキスト。 注記 キャプションは発話だけの字幕と似ているが，次の点 において異なる。すなわち，キャプションは，発話 コンテンツだけでなく，その番組の内容を理解する ために必要となる， 発話ではない音声情報と等価な 内容も伝える。つまり，効果音，音楽， 笑い声， 話者の特定，位置なども含まれる。 引用元：「JIS X 8341-3:2010」規格票 Shift8でのプレゼン資料 動画にキャプション付けなきゃ、ダメよ～ダメダメ！ http://accsell.net/files/201412-shift8.pdf JIS X 8341-3:2010の動画に関する達成基準 達成基準 7.1.2.2 収録済みの音声コンテンツのキャプション[等級A] 同期したメディアに含まれているすべての収録済み の音声コンテンツに対して，キャプションを提供 しなければならない。 ただし，その同期したメディアがテキストの代替 メディアであって，代替メディアであることが明確 にラベル付けされている場合は除く。 テキストコンテンツの動画版である場合は除く まとめ 「アクセシビリティ」とは Webコンテンツの品質基準の一つ マルチデバイス＆マルチスクリーンの時代 ウェアラブルデバイスやスマートデバイスの登場 キーワードは「マシンリーダブル」 アクセスできなければ、ユーザビリティもUXもない 単なる「高齢者・障害者対応」だけではない コンテンツ制作の目安となるのはガイドライン W3C「WCAG 2.0」 ISO/IEC 40500:2012 JIS X 8341-3:2010 2015年度に改正される予定 ポイント一覧 ページの内容がわかるページタイトルを付ける 見出しは “見た目だけでなく” マークアップする 見出しは、そのセクションの主題を説明する リストは “見た目だけでなく” マークアップする リンクテキストだけでリンク先が分かるようにする または、リンクの文脈と合わせて分かるようにする 画像の情報と同等の代替テキストを提供する 情報を伝えていない画像は支援技術が無視できるように実装する キーボードだけでも操作できるようにする キーボード操作時のフォーカス順序に注意する キーボードフォーカスの位置が分かるようにする フォーカスを受け取る以外の挙動をしない 文字色と背景色とのコントラスト比を4.5:1以上確保する 色の違いが分からなくても理解できるようにする 動画（収録済み）にキャプションを提供する 誰でも最初はビギナー ビギナー卒業は意外と早いはず AccSell Meetup #008 集まれ！ アクセシビリティー・ビギナーズ！