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 withdisabilities
can usemeans
the Web.
 Web
accessibility
that people withMore specifically,
Webmeans
disabilities
can usetheaccessibility
Web. Morespecifically,
accessibility
that people Webwith disabilities
can meansperceive,thatpeople
with disabilitiesperceive,understand,navigate, andcan
interactwith theunderstand,navigate,and interact
with theWeb, and thatthey can contributeto theWeb, and that they can contribute to theWeb.

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 withdisabilities 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 andcovers a wide spectrum of needs, thus
benefiting everyone in different situations
to different degrees. This is especially truefor the Web and Mobile technologies, wheredevices 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 “peoplewith 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 thatinterprets HTML documents. User agentsinclude visual browsers (text-only andgraphical), 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> or <h3><h2>

 見出しレベルは見た目の大きさ等ではなく、その文書構造で決める

 直前にある見出しのセクションのサブセクション？
 それとも関係のない独立したセクション？

ツール「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. リスト項目1
2. リスト項目2
3. リスト項目3
4. リスト項目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. リンクの含まれているリスト項目（<li>要素）
3. リンクの含まれているパラグラフ(<p>要素内）
4. リンクの含まれているセルと関連付けられた見出し
セル（関連付けられている<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 anatural 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”><asiderole=”complementary”><section role=”region”><article role=”article”><header><footer><div id=”application”
role=”application”><footer role=”contentinfo”><formrole=”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
集まれ！ アクセシビリティー・ビギナーズ！