1.
これだけは知っておきたい
「Webアクセシビリティ」のこと
植木 真（株式会社インフォアクシア）

2.
植木 真 （株式会社インフォアクシア）
Webアクセシビリティ コンサルタント
 診断・検証、ユーザビリティテスト、ガイドライン作成、リニ
ューアル支援、JIS / WCAG 対応サポート など
国内外の標準化活動（規格・ガイドライン作成）に参加
 日本工業規格「JIS X 8341-3」（2004年版、2010年版、2016年版）
 W3C勧告「WCAG 2.0」、「WCAG 2.1」ワーキングドラフト
ウェブアクセシビリティ基盤委員会（WAIC） 委員長
 Certified Professional in Web Accessibility (CPWA)

3.
例えば、
こんなふうに使っている人もいます。

4.
障害者のウェブページ利用方法の紹介ビデオ
http://www.soumu.go.jp/menu_news/s-news/2005/051215_1_wmv.html

5.
都バスの運賃表

6.
都バスの運賃表

7.
そういえば、
最近Twitterでも
デフォルト 🌙🌙 夜間モード

8.
「アクセシビリティ」には
いろいろな 説 があります。
まずは、それらを検証してみる :-)

9.
文字サイズ変更ボタンを
置かなければいけない 説

10.
いらない。

11.
本来ならブラウザが提供すべきもの
IE3には「文字サイズ変更ボタン」があった！

12.
アクセシビリティを確保すると、
デザインがださくなる 説

13.
そういうわけでもない。
http://weba11y.jp/basics/faq/accessible-web-pages-are-boring/

14.
そういうわけでもない。
http://weba11y.jp/basics/faq/accessible-web-pages-are-boring/

15.
そういうわけでもない。
http://weba11y.jp/basics/faq/accessible-web-pages-are-boring/

16.
ガイドラインを読んでも、
難しくて理解できない 説

17.
例えば「1.2.2 キャプション（収録済み）の達成基準」
同期したメディアに含まれている全ての収録済みの音声
コンテンツに対して，キャプションが提供されている。
これを ”日本語訳” すると…
収録済みの動画（ライブ配信ではない動画）には、その音声
が伝えている情報を書き起こしたキャプションを提供する。

18.
例えば、Facebook
How to Add Closed Captions to Facebook Videos
http://www.3playmedia.com/how-it-works/how-to-guides/ht-facebook/
閲覧時間 モバイル フレンドリー 聴覚障害者対応 集中・理解

19.
JIS X 8341-3:2016
2016年3月22日 公示
国際規格「ISO/IEC 40500:2012」（= W3C
「WCAG 2.0」）と同じ内容の一致規格
「JIS X 8341-3」＝「WCAG 2.0」の日本語訳
特定の技術に依存しない達成基準
HTML、PDF、Flash、Silverlight、???
JIS X 8341-3:2016 解説 http://waic.jp/docs/jis2016/understanding/201604/

20.
アクセシビリティ逆引きガイドライン
http://weba11y.jp/know-how/guidelines/guidelines_index/

21.
アクセシビリティで下手こくと、
マサカリが飛んでくる 説

22.
Be The Fireman and not The Cop
https://www.slideshare.net/johnfoliot/fireman-cop

23.
アクセシビリティ界隈には
プレゼン芸人が多い 説

24.
SAWADA STANDARD DESIGN さんの動画
https://www.youtube.com/channel/UCkYDTXQCaimYzUtzhRW7zvQ

25.
SAWADA STANDARD DESIGN さんのスライド
https://www.slideshare.net/nozomisawada969/important04-sawada20170603

26.
アクセシビリティは
障害者対応だから、
健常者には関係ない 説

27.
W3Cによる「定義」
Web accessibility means that
people with disabilities can use the Web.

28.
「○○できない」、「○○しづらい」って、障害のある人だけ？
「○○できない」、「○○しづらい」を
「○○できる」、「○○しやすくする」のが、
アクセシビリティ。

29.
例えば、駅のホームのエスカレーター
エスカレーターがあるのに、階段使います？
写真：http://junfuse.com/160105-2/

30.
Accessibility for Everyone
https://abookapart.com/products/accessibility-for-everyone
アクセシビリティを考慮してデザインすると、
Webは誰でも、どこでも使えるものになる。
You make the web more inclusive
for everyone, everywhere,
when you design with accessibility in mind.

31.
Inclusive Design Principles
http://inclusivedesignprinciples.org/ja/

32.
Inclusive Design at Microsoft
https://www.microsoft.com/en-us/design/inclusive

33.
アメリカでは、ウェブサイトの
アクセシビリティに関する
訴訟が増えている 説

34.
Q. これらのウェブサイトの共通点は何でしょう？

35.
企業サイトのアクセシビリティ
アメリカでの訴訟件数推移
2015年 57件
2016年 262件
2017年 432件（* 8/15 時点）
3年間 合計751件 のうち、
小売業 353件
レストラン 186件
旅行関連産業 57件
0
50
100
150
200
250
300
350
400
450
500
2015年 2016年 2017年 *
参考：Website Accessibility Lawsuit Filings Still Going Strong
http://www.adatitleiii.com/2017/08/website-accessibility-lawsuit-filings-still-going-strong/

36.
WCAG 2.0
https://www.w3.org/TR/WCAG20/
日本語訳：http://waic.jp/docs/WCAG20/Overview.html

37.
世界中の国々でWebアクセシビリティを義務化
?

38.
日本では、
省庁や自治体だけで、
民間企業は
取り組んでいない 説

39.
障害者差別解消法
2016年4月1日 施行
利用者からの改善要望があれば個別対応
公的機関は法定義務、民間事業者は努力義務
自治体のWebサイトに対して改善要望が出され
始めている
Webアクセシビリティの確保は、先進国の多くでは
法律によって義務化されている
障害を理由とする差別の解消の推進 http://www8.cao.go.jp/shougai/suishin/sabekai.html

40.
みんなの公共サイト運用ガイドライン
2016年4月20日 公開
総務省が作成
公的機関職員向けのJIS対応 手順書
2018年3月末までにレベル AA準拠 を推奨
先進国の多くで義務化されているレベルと同じ
「ウェブアクセシビリティ取組確認・評価表」
を新たに提供
自己採点により毎年取り組み状況を評価し公表
http://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/guideline.html

41.
Webアクセシビリティの方針や試験結果を公開

42.
アクセシビリティやっても、
儲からない 説

43.
「Webアクセシビリティ 取組み状況 調査」
https://wab.ne.jp/wab_sites/general-browse/view/2335

44.
より多くのユーザーとの接点が増えれば…
http://www.bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html

45.
アクセシビリティできる人、やりたい人、急募！
案件数が増えています！
競争力
クライアントにとっても、
アナタにとっても
差別化
とある地方でのコンペ実話

46.
WordPress のアクセシビリティ

47.
Powerful Features
Easy and Accessible

48.
Accessibility Coding Standards
All new or updated code released in
WordPress must conform with the
WCAG 2.0 guidelines at level AA.
Accessibility Coding Standards – Make WordPress Core
https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/

49.
アクセシビリティ対応のテーマ
テーマディレクトリ – アクセシビリティ対応
https://ja.wordpress.org/themes/tags/accessibility-ready/

50.
WP Accessibility
WP Accessibility (By Joe Dolson)
https://wordpress.org/plugins/wp-accessibility/

51.
Contact Form 7: アクセシブルデフォルト
Contact Form 7: アクセシブルデフォルト (By Joe Dolson)
https://ja.wordpress.org/plugins/contact-form-7-accessible-defaults/

52.
アクセシビリティ - WordPress Codex 日本語版
WordPress とアクセシビリティ
WordPress (とまともな品質のテーマ)を使っていれば、
アクセシビリティの高いサイトを作るために特に追加で
しなければならないことはありません。それでも
アクセシビリティ標準に準拠したコンテンツを作成する
ためにいくつか心がけることがあります。
アクセシビリティ - WordPress Codex 日本語版
https://wpdocs.osdn.jp/%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3

53.
[動画] WordPressでも意識したいアクセシビリティ 〜「優しいウェブ
サイト」作りをはじめよう〜
（横田 東母子, 森田 壮）
https://2016.tokyo.wordcamp.org/09/24/slide/#tech07

54.
WordPressのアクセシビリティ関連情報
https://capitalp.jp/2017/09/04/wp-accessibility-pages/

55.
アクセシビリティ確保の基本
まずは、ここから。

56.
個人的にはエーイレブンワイ
Webアクセシビリティの情報提供サイト「エー イレブン ワイ」
http://weba11y.jp/

57.
このサイトをWordPressで構築してくださったのは…
千貫 りこ さん
（Kicks Web）

58.
アクセシビリティ確保の基本の「キ」 10項目
1. ページの内容が分かるページタイトルを記述する
2. ページの領域をセクショニング要素とランドマークroleで示す
3. 見出しやリストなどの文書構造をマークアップする
4. リンクテキストは、リンク先が分かる文言にする
5. 情報を伝えている画像に代替テキストを提供する
はじめてのWebアクセシビリティ
http://weba11y.jp/know-how/first/first_index/

59.
アクセシビリティ確保の基本の「キ」 10項目
6. 文字色と背景色のコントラストを確保する
7. キーボードだけでも操作できるようにする
8. データテーブルの構造をマークアップする
9. フォーム・コントロールのラベルをマークアップする
10. エラーメッセージではエラー箇所と修正方法を明示する
はじめてのWebアクセシビリティ
http://weba11y.jp/know-how/first/first_index/

60.
まずはページタイトル
HTML5のセクショニング要素等に
ランドマークroleを使う

61.
Webページのセクションをマシンリーダブルに
ヘッダー <header>
ナビゲーション <nav>
メインコンテンツ <main>
補足 <aside>
フッター <footer>
ホーム → 基礎知識 ホーム → 基礎知識
■■■■■■■■■■
■■■■■■■■
■■■■■■■■
■■■■■■■■■■
■■■■■■■■
■■■■■■■■■■
○○○○○○○○○○
○○○○○○○○○○
○○○○○○○○○○
○○
○○○○○○○○○○○○○○○
○○○○○○○○○○○○○
○○○○○○○○○○○○○○○
○○○○○○○○○○○○
○○○○○○○○○○○○○○○
○○○○○○○○○○○○○○
○○○○○○○○○○○○○○○○○
○○○○○○○○○○○○○○○○○
○○○○○○○○○○○○○○○○○
○○○○○○○○○
○○○○○○○○○○○○○○○○○
○○○○○○○○○○○○○○○○○
○○○○○○○○○○○○○○○○○
○○○○○○○○○○○○○

62.
スクリーンリーダーでページ内のセクションを移動
NVDA（Windows） VoiceOver（iOS）

63.
当面はランドマークroleを併用
<header role=“banner”>
<nav role=“navigation”>{グロナビ}</nav>
<form role=“search”>｛サイト内検索｝</form>
</header>
<nav role=“navigation”>｛パンくずリスト｝</nav>
<main role=“main”>
{ここにメインコンテンツ}
</main>
<nav role=“navigation”>{ローカルナビ}</nav>
<aside role=“complementary”>｛バナーとか｝</aside>
<footer role=“contentinfo”>｛フッター｝</footer>

64.
HTML5のセクションを示す主な要素 ＆ 対応するランドマーク role
Webページにある
セクション
HTML5の要素 ランドマークrole
ヘッダー header banner
ナビゲーション nav navigation
メインコンテンツ main main
補足情報 aside complementary
フッター footer contentinfo
当面は併用しておく

65.
ナビゲーションの区別がつかない
NVDA（Windows）

66.
ラベルを付けて それぞれの違いをマシンリーダブルに
<nav role=“navigation” aria-label=“メインメニュー”>
｛ここにナビゲーションバー｝
</nav>
<nav role=“navigation” aria-label=“現在位置”>
｛ここにパンくずリスト｝
</nav>
<nav role=“navigation” aria-labelledby=“local-nav”>
<h2 id=“local-nav”>製品情報</h2>
{ここにローカルナビゲーション｝
</nav>

67.
スクリーンリーダーでページ内のセクションを移動
Before After
aria-label
aria-label
aria-labelledby

68.
まずはページタイトル
写真だと分かる
代替テキストにする

69.
代替テキストによって、画像と同等の情報をマシンリーダブルに
画像にある文字情報をalt属性に記述する
<img src="wct2017_boothtour.png"
alt=“ブースツアー 応援してくれている
スポンサー様をご紹介”>

70.
代替テキストによって、画像と同等の情報をマシンリーダブルに
そのページに写真があることも “情報”
<img src=“photo.jpg”
alt=“写真：iPhone X のホーム画面”>

71.
代替テキストによって、画像と同等の情報をマシンリーダブルに
写真を説明するテキスト（キャプション）がある場合
<figure role=“group” aria-labelledby=“fig1>
<img src=“photo.jpg” alt=“写真”>
<figcaption id=“fig1”>
iPhone X のホーム画面
</figcaption>
<figure>
iPhone X のホーム画面

72.
まずはページタイトル
画像リンクとテキストリンク
リンク先が同じなら1つにまとめる

73.
リンク先が同じなら一つのリンクにまとめたほうがよい
スクリーンリーダー＆キーボード操作対応
<a href="http://amzn.to/2bCe8ep">
<img src=“book.jpg" alt="">
<span>デザイニングWebアクセシビリ
ティ - アクセシブルな設計やコンテンツ
制作のアプローチ</span>
</a>

74.
まずはページタイトルキーボードフォーカス見えてる？

75.
フォーカスインジケータは常に表示させる
キーボード操作時にフォーカスの現在位置を示す
デフォルトでの表示
ドットや水色の矩形 = 分かりづらいこともある
CSSで outline:none の指定があると非表示に
キーボード操作時には致命的

76.
フォーカスインジケータの表示を強調してみた

77.
まずはページタイトル
文字色と背景色の
コントラスト比は 4.5:1以上

78.
場所を選ばないからこそ、色のコントラストは重要

79.
こんなナビゲーションバーは…

80.
コントラスト比が低いと…
ボタンに気づかない 検索窓に気づかない
○○○○○○○○○
○○○○○○○○○○○○
○○○○○○○○○
○○○○○○○○○○○○
○○○○○○
クーポンを使う 数量 1 ▼
¥1,180

81.
参考になる書籍

82.
書籍「デザイニング Webアクセシビリティ」 * 電子書籍版もあり
http://amzn.to/2fTsZan

83.
書籍「インクルーシブHTML+CSS & JavaScript
多様なユーザーニーズに応えるフロントエンドデザインパターン」
http://amzn.to/2wbG0Tb

84.
表紙