柴田宣史（有限会社時代工房）
- 有限会社時代工房 代表取締役
- 京都のウェブ制作会社。
- 株式会社スタジオニクロム 取締役
- 京都の障害者就労支援事業所。
- ウェブアクセシビリティ基盤委員会（WAIC）WG1
ヒラ委員
- WAICの広報ワーキンググループでWAICのサイトの運営の手伝い。
- 技術
- PHPer。JavaScriptは医者に止められています。XOOPS、PukiWiki、Zend Framework、FuelPHPを経てWordPressに。
- 趣味
- SF、ホラー映画、古典落語、折り紙。
アクセシビリティとは？
障害の有無、心身の状態、閲覧環境、年齢などを問わず、
情報を取得できるようにすること。
類義語
| ユーザビリティ |
使いやすさ |
| ユニバーサルデザイン |
一つのものが普遍的に使えること |
| アクセシビリティ |
情報の取得可能性（最近はインクルーシブとも） |
それぞれ重なる部分はあるが、「使いやすさ」や「単一のプロダクトでの解決」よりも、情報を取得できるかどうかが重視される
たとえば、視覚障害者専用のページは、ユニバーサルデザインではないが、
アクセシビリティの解法としてはありえる
バリアの例
| 視覚障害（全盲） |
画面を見ることができない
マウスを使えない |
| 視覚障害（弱視） |
全体的に読みづらい・部分的に読めない・小さいものが読めない
マウスを使いづらい |
| 聴覚障害 |
音声を聞くことができない |
| 上肢障害 |
マウスを使いづらい |
| 知的障害 |
難しい言葉がわからない |
| 注意力欠陥障害 |
コンテンツに集中しづらい |
| 高齢者 |
なにかとたいへん |
障害がなくても……
メガネが壊れた
日光で画面が見づらい |
視覚障害 |
周りが騒がしい
音声出力のない端末
職場なので音が出せない |
聴覚障害 |
| 腕を怪我した |
上肢障害 |
| マウスが壊れた |
視覚障害、上肢障害 |
| 疲れてヘロヘロ |
注意力欠陥障害 |
| 歳をとった |
視覚障害、聴覚障害、上肢障害、知的障害 |
など、類似の状況は誰にでもあり得ます。
バリアの乗り越え方の例
| 視覚障害（全盲） |
音声読み上げソフト（スクリーンリーダ）
音声入力ソフト
キーボードの利用 |
| 視覚障害（弱視） |
画面拡大ソフト |
| 聴覚障害 |
字幕の利用、手話利用 |
| 上肢障害 |
キーボードの利用
特殊なポインティングデバイスの利用 |
| 知的障害 |
平易な内容の代替コンテンツの利用 |
| 注意力欠陥障害 |
注意力を乱すコンテンツを避ける |
| 高齢者 |
なにかとたいへん |
日本のアクセシビリティに関係する法律 (1)
| 2013年 |
障害者差別解消法 制定（条約批准の準備） |
| 2014年 |
障害者権利条約に批准（締結国177カ国 - 2018年9月現在） |
| 2016年 |
障害者差別解消法 施行 |
障害者差別解消法の罰則
罰則は存在しません。
公的機関は義務、民間団体は努力義務が求められています。
日本のアクセシビリティに関係する法律 (2)
障害者権利条約 9条 アクセシビリティ
締約国は、全ての当事者にインターネットも含めたアクセシビリティの提供を行う為のあらゆる適切な措置を講じ、それを妨げる問題を撤廃する。
障害者差別解消法（サベカイ法）
アクセシビリティは、「差別の禁止」「環境の整備」「合理的配慮」の「環境の整備」で求められる。
アクセシビリティの確保の仕方 - WAICについて
ウェブアクセシビリティ基盤委員会 - WAIC
日本におけるJIS X 8341-3:2016の理解と普及の促進をする団体。
https://waic.jp には、アクセシビリティ確保のためのノウハウが蓄積されているので、困ったらここを見ること。
JIS X 8341-3:2016
アクセシビリティに関する日本工業規格。WCAG 2.0を国際規格化したISO 40500:2012を準用。2018年6月にWCAG 2.1が勧告されています。
アクセシビリティの確保の仕方 - WAIC文書の読み方
WAIC文書で勉強
JIS = WCAGなので、WAICで翻訳しているWCAGの文書でJISの勉強ができる
適合レベルについて
3つの適合レベル
WCAGは、達成度合いに応じてA、AA、AAAの三つの適合レベルがあります。
| A |
最低限達成すべき適合レベル。Aの未達成は、情報を全く取得できない人が存在しうる |
| AA |
達成することが望ましい適合レベル。公的機関では義務として達成すべき |
| AAA |
非常に高度な対応が求められる適合レベル。一般には達成することは推奨されていない |
適合レベルについて（具体例）
PCのメモリを例に（2018年9月現在・異論は認めます）
| A |
メモリ4G |
| AA |
メモリ16G |
| AAA |
メモリ32G |
適合レベルについて（ほんとうの具体例）
まじめにやります
| A |
収録済みの動画には、キャプション（字幕）を付けること。音声解説（副音声）また動画の内容を説明したテキストを用意すること。 |
| AA |
収録済みの動画には、キャプションと音声解説をつけること。 |
| AAA |
収録済みの動画には、キャプション、拡張音声解説（一時停止を伴う解説）、手話をつけ、動画の内容を解説したコンテンツを用意すること。 |
アクセシビリティの確保の仕方 - 書籍
はじめの一歩にオススメ。
技術偏重になりがちなアクセシビリティの取り組みを、実際のウェブ制作フローに寄せて解説。
翻訳。WAI-ARIAについて基本から書かれている入門書。
翻訳。アクセシブルなコード事例を豊富に読める。アクセシビリティに詳しい翻訳者による注釈も充実。
アクセシビリティの確保の仕方 - ウェブ（WAIC以外）
WordPressとアクセシビリティ
WordPress (とまともな品質のテーマ)を使っていれば、アクセシビリティの高いサイトを作るために特に追加でしなければならないことはありません。それでもアクセシビリティ標準に準拠したコンテンツを作成するためにいくつか心がけることがあります。
WordPress Codex 日本語版「アクセシビリティ」
All new or updated code released into WordPress core and bundled themes must conform with the WCAG 2.0 guidelines at level AA.
2016年 以降のコードはWCAG 2.0のレベルAAを満たすことを宣言
WordPress goes WCAG
さすが「世界のCMSの50%超」ですね
WordCampでは？
| Tokyo 2016 |
WordPressでも意識したいアクセシビリティ 〜「優しいウェブサイト」作りをはじめよう〜 |
森田 壮
横田 東母子 |
| Kyoto 2017 |
アクセシビリティ対応のテーマが公式ディレクトリに登録されるまで 〜テーマ作成の手順とレビュー時の対処方法の一例〜 |
カッシー |
| Kyoto 2017 |
誰でも使えるプラグインを作りたい – WordPress プラグイン開発者の視点で考えるアクセシビリティ |
三好 隆之 |
| Tokyo 2017 |
これだけは知っておきたい「Webアクセシビリティ」のこと |
植木 真 |
| Ogijima 2018 |
明日からできるデザイン・コンテンツのアクセシビリティ入門2018 |
間嶋 沙知 |
| 明日からできる自作テーマ・受託プロジェクトのアクセシビリティ入門2018 |
齋木 弘樹 |
WordCampでも近年常連のネタですね。
WordPressでA、AAのサイトを作れるの？
作れます！
作りがちなバリアは？
- formのアクセシビリティ確保（Contact Form 7でAA対応formを作れます）
- 「2.2.2 一時停止、停止、非表示」は、WordPressかどうかを問わず、抵触したサイトが多いので注意
手始めに
accessibility-ready（アクセシビリティ対応）タグのテーマから触ってみる
テーマ開発者はこのタグをつけて公式ディレクトリに登録すると、レビューをしてもらえるらしい？
全盲視覚障害者による情報発信事例（ユニーズ京都）
ユニーズ京都
1970年発足。視覚障害者のQOL（生活の質）向上と市民への意識啓発を目的とした視覚障害者と晴眼者が一緒に活動する市民ボランティアグループ。飲食店メニューの点字化および音訳や京都への視覚障害者の観光の随行ボランティアなど。
ウェブサイトは視覚障害当事者がスクリーンリーダを用いて更新。
管理画面のアクセシビリティ (1)
問題なく更新するためのチェックポイント例
| 3.3.2 ラベルまたは説明 |
入力欄にフォーカスがあるときに、入力すべき内容がわかること。 |
| 2.4.1 ブロックスキップ |
繰り返される膨大なリンクを、ページ移動の度に読まずに済むこと。 |
| 2.1 キーボード操作可能 |
マウスなしで操作できること。 |
| 2.4.7 フォーカスの可視化 |
キーボードだけで操作している人にとって、どこにフォーカスがあるかは、重要。outline: none;は、ダメ、絶対。 |
管理画面のアクセシビリティ (2)
サイト制作者ができる、障害者が更新するWordPressサイト構築のポイント
- GUI依存のコンテンツ管理プラグインに注意
- カスタムポストタイプはわかりやすく
- 適度なカスタムフィールドはコンテンツの品質を保つのに良い
- ブックマーク活用を提案することでもっと便利になるよ
管理画面のアクセシビリティ（ブロックスキップ・苦労例）
膨大なリンクをタブキーでたどっていくため、たいへん。
管理画面のアクセシビリティ（ブロックスキップ・新規追加時）
最初のフォーカスがpost_titleにいくことを覚えていれば便利。
管理画面のアクセシビリティ（ブロックスキップ・隠しリンク）
ページ先頭でタブキーを押すと、隠しリンクが表示される。labelにも注目。
管理画面のアクセシビリティ（ブロックスキップ・見出し）
じつは隠しリンクを用意する必要はなく、hキー (NVDA)で見出しスキップができる。
管理画面のアクセシビリティ（ブロックスキップ・landmark）
dキー (NVDA)で、ランドマークスキップも可能。
CMSとアクセシビリティ
納品時にアクセシブルでも……
日々の更新でじゃんじゃんバリアを作ることができます。
本文欄で作ることができるバリア例
| 1.1.1 非テキストコンテンツ |
妥当でないalt属性値。 |
| 1.2 時間依存メディア |
動画、音声類のアクセシビリティ。 |
| 1.3.1 情報及び関連性 |
文字の大きさをh1-6要素で作っちゃうとか。 |
| 2.4.4 リンクの目的 |
できればわかりやすいリンク文字列に。 |
本文欄バリアの事例
空のaltでa要素（1.1.1、2.4.4）
<a href="http://example.com/"><img src="foo.png" alt="" /></a>
WordPressがスペースを消すので、背景色と同じ文字を挿入（1.3.1、1.3.2）
<span style="color: #fff">あああああああ</span>
本文内でまさかのメタタグ（2.2.1）
<meta http-equiv="refresh" content="0;URL='http://example.com/'" />
プラグインによる更新のチェック - jwp-a11y
A11y?
AccessibilityのAとyに11文字あるので、こういう略記があります。
この表記そのものがアクセシブルでないという批判もあります……。
jwp-a11yのERROR表示
ERROR（対応が必要）
アクセシビリティの試験は、機械的にチェック（AC）できるものとそうでないものがあります。jwp-a11yでは、機械チェックで確実に問題がある場合は、エラーとして表示します。
jwp-a11yのNOTICE表示
NOTICE（対応が必要がどうか確認）
機械チェックで判断が難しいがバリアを作りやすい項目はnoticeとして指摘（AF）します。
さいごに
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
ウェブの力は、その普遍性にあります。
障害に関係なく誰もがアクセスできることは本質的な側面です。
アクセシビリティの界隈では「ティム卿のアレ」と呼ばれたりします。
インターネットにアップする時点で、皆さんはすでに
アクセシビリティの第一歩を踏み出しています。
