アクセシビリティやるぞ! 夏での発表スライド

1. 〜ウェブアクセシビリティチェックツール開発者の頭ん中〜
2015.08.26
!
Sumio Noda (Alfasado Inc.)
アクセシビリティやるぞ! 夏

2. http://markethack.net/archives/51945764.html
http://markethack.net/archives/51945764.html

3. About Me (野⽥ 純⽣)
✴ アルファサード株式会社 代表取締役
✴ Movable Type エバンジェリスト
✴ ウェブアクセシビリティ エバンジェリスト
✴ CEO : マーケティング∼営業戦略の⽴案∼製品企画
✴ CTO : ソフトウェア製品の企画∼開発
✴ Blogger / http://junnama.alfasado.net/online/

4. About Us (Alfasado Inc.)
✴ アルファサード株式会社 (2003年11⽉設⽴)
✴ 本社 : ⼤阪府⼤阪市/東京オフィス : 神⽥神保町
✴ PowerCMS開発・販売・サポート
✴ CMS/受託開発を通じてクライアントを爆速化
✴ ウェブアクセシビリティ調査・改善⽀援、JIS-X 8341-
3適合⽀援

5. W3Cのメンバーになりました

7. MTコミュニティの真ん中にいます

8. 33%
67%

11. AltStyle
http://altstyle.alfasado.net/
アクセシブルなサイトを、いますぐに

15. できるだけ綺麗なプレーンなHTMLにする
PDFをプレーンHTMLに変換
ルビを振ったり配色反転ハイコントラスト化したり...

21. ルビが嬉しいのは誰でしょうか?

22. クラウド提供
||
今すぐアクセシビリティを向上させよう

23. Another side of Alfasado Inc.

24. for Mac OS X

25. for Mac OS X

27. ソフトウェア + アクセシビリティ

28. 少し昔話を

32. 私とウェブアクセシビリティ
✴ Ju’s iEdit(HTMLエディタ) 画像挿⼊時の alt属
性⼊⼒を促したり(1999年∼2002年頃)
✴ Personal i-Checker(⽇本IBM)のツールを許可を
得てMac版を開発して無償配布したり(2001年)
✴ 会社を作ってみたり(2003年)
✴ ColorQuest(Mac)を作って公開したり(2003年)
✴ WCAG2.0の草案を翻訳してみたり

34. 本題ここから

35. きっかけ

36. JISに対応するワークフローの中で、何を使い
ますか? チェックリスト? リストはExcel?で
作るのか
altテキストやリンクテキストのチェックは?
ブラウザ? ソース⾒ろっていうの?
ドキュメントは、紙? 都度引けっての?
教材は紙である必要がありますか?
何かソフト使うんじゃないの? ⽂章書くなら
そもそもワープロやエディタから。
コンサルやら作成者が⾏っている作業を分解
すれば、何かガイド的なものが作れないのか?

39. 俺が作る!

40. 話し元に戻します

41. 要件1.ウェブアクセシビリティ上の問題
について機械的にすべて修正できること

42. できません

43. 北 海 道 (きたうみみち)
東 北 (ひがし きた)
北海道
東北
￥1000(せん) 1000円
2014/12/8
(じゅうにぶんのにせんよ
ん はち)
2014年12⽉8⽇
㍿(記号⽂字) 株式会社

44. p段落
p段落
...
p段落/p
p段落/p
...
b強調/b strong強調/strong
blink点滅/blink strong点滅/strong
img src=”...”
img src=”...”
alt=”” /

46. 修正すべき点を指摘してくれて

47. 可能な部分について自動修正してくれる

48. MTのプラグイン
あります
http://www.powercms.jp/blog/2014/07/html_tidy_plugin.html

49. でも、機械的にできることは
ブラウザや⽀援技術側でもできる

50. 機械で「修正」できるものはごく⼀部

51. 要件2.JIS X 8341-3:2010 AAの
すべての箇条についてチェックできること

52. できません

53. http://weba11y.jp/tools/

54. http://weba11y.jp/tools/

55. About PowerCMS 8341
(WCAGTester 1.0)

56. Movable Typeのプラグイン
※Not PowerCMSでも動作します

57. PowerCMS 8341
✴ Movable Type / PowerCMS のプラグイン
✴ JIS X8341-3:2010のA、AAへの対応⽀援
✴ 各箇条を機械的にOK、エラー、N/A、要確認に仕分け
る
✴ JIS X8341-3:2010準拠のエビデンスをCMS上に残す
✴ 数千∼数万ページを適合(準拠)させることを想定して企
画・開発
✴ ウェブアクセシビリティをサイト運⽤のワークフロー

58. 「要確認」だらけではどうしたらいいかわからない
「ページ全体」では項目が多すぎる
※miCheckerの画⾯

60. PowerCMS 8341の機能

61. 1.4.3 最低限のコントラスト: テキスト及び画像化された
文字の視覚的な表現には、少なくとも 4.5：1 のコン
トラスト比をもたせる。ただし、次の場合は除く： (レベ
ルAA)
大きな文字： サイズの大きなテキスト及びサイズの大き
な画像化された文字には、少なくとも 3：1 のコントラ
スト比がある。
付随的： テキスト又は画像化された文字において、次
の場合はコントラストの要件は該当しない。アクティブで
はないユーザインタフェース・コンポーネントの一部であ
る、装飾だけを目的にしている、...
“

62. “色の相対輝度 L = 0.2126 * R + 0.7152 *
G + 0.0722 * B と定義されている。この場合の
R, G 及び B は：
RsRGB = 0.03928 の場合：R = RsRGB/
12.92、それ以外の場合： R =
((RsRGB+0.055)/1.055) ^ 2.4
GsRGB = 0.03928 の場合：G = GsRGB/
12.92、それ以外の場合：G =
((GsRGB+0.055)/1.055) ^ 2.4
BsRGB = 0.03928 の場合：B = BsRGB/
12.92、それ以外の場合：B =
((BsRGB+0.055)/1.055) ^ 2.4...
#mtddc

63. #000000
#EFBF2F
コントラスト比 [ 12.1 : 1 ](適合)

64. for Mac OS X/Windows

66. 背景色と前景色判定
✴ 画像を縮⼩する (動作速度のため)
✴ 256⾊に丸める (グラデーション、近似⾊を丸める)
✴ ピクセルをなめて、⼀番⼤きな⾯積を占める⾊が背景⾊
✴ ⼆番⽬以降の⾯積を占める⾊で、背景⾊と⼀定のコントラス
ト⽐以上の⾊が前景⾊
✴ ⾊数が⼀定数/総ピクセル以上のものは写真(⽂字を含まない)
✴ (その他にも) GIFアニメーションは⾃動判別可能

67. 画像の⾃動テスト
N/A
背景⾊と前景⾊
が推測できたもの 写真等で
あろうもの
OK NG
コントラスト計算
適合は⼈の⼿で確認してフラグを付ける
確認
アニメーショ
ンを含むもの
Not Applicable

69. 画像アップロード時に自動テスト実施

70. 自動テストに失敗したものについて
ピッカーで色を拾うことが可能

71. ⾃動テストの結果を⼈が
確認しなければならないもの
OK
不適切
な結果
適切な結果
OK NG
⼈の⼿による検証

72. Webページの検証

74. 3.3.1 ⼊⼒エラー箇所の特定: ⼊⼒エラー
を⾃動的に発⾒された場合は、エラーと
なっている箇所を特定し、そのエラーを
利⽤者にテキストで説明する。 (レベル
A)
“
例

75. フォームやコントロールがなければ
N/A=OK

76. 対象となる技術が含まれて
いるかどうか判別可能なもの
N/A=OK
含まれる 含まれない
OK 確認を促す
できるもの
機械的に適合判定が
できないもの

77. 2.4.4 ⽂脈におけるリンクの⽬的: それぞ
れのリンクの⽬的が、リンクのテキストだ
けから、⼜はプログラムが解釈可能なリン
クの⽂脈をリンクのテキストとあわせたも
のから解釈できる。ただし、リンクの⽬的
が⼀般的にみて利⽤者にとって曖昧な場合
は除く。
“
例

78. A要素の内容が空の場合、Area要素のALTテキス
トが空もしくは属性がない場合、エラー。
target属性の指定がある場合、確認(On/Off可)。
リンクテキスト=URLの場合に警告。target属性
の指定がある場合、確認。

79. エラー判別が可能なもの
NG
エラー
の場合
エラー無し
の場合
OK 確認を促す
できるもの
機械的に適合判定が
できないもの

80. 2.4.4 文脈におけるリンクの目的: それぞれ
のリンクの目的が、リンクのテキストだけから、
又はプログラムが解釈可能なリンクの文脈を
リンクのテキストとあわせたものから...
“
例
リンクテキストとリンク先遷移ページを「人間が」
比較するして、問題なければOK

81. OK
NG
OK
××
人の手による検証が必要=補助する機能を提供
修正案を⼊⼒する欄

82. ⼤阪オフィスの地図

83. 何を、どうチェックするかをツールで示し、
ウェブアクセシビリティ向上を支援・補助する

84. できるだけ、やさしく
みんな褒められて伸びるタイプ

85. 1.3.3 感覚的な特徴: コンテンツを理解し操
作するための説明を、形、大きさ、視覚的
な位置、方向、又は音のような、構成要素
が持つ感覚的な特徴だけで提供しない。
“
例
現状では文章が「位置」に依存した表現かど
うかは機械的には判断できない。

86. 1.4.1 色の使用: 情報を伝える、何が起こる
か又は何が起きたかを示す、ユーザの反応を
促す、もしくは視覚的な要素を区別する唯一
の視覚的な手段として、色だけを使用しな
い。 (レベルA)
“
例
現状では資格に依存して情報を伝えているかど
うかは機械的には判断できない。

90. 機械的に適合判定が
できないもの
⼿段を提供
何らかの確認⼿段を
提供できるもの
常に確認を
促す
⼈の⼿で確認しなけ
ればわからないもの
OKを
表⺬
エラー
を表⺬

91. http://junnama.alfasado.net/online/2014/12/a11y_tool_logic.html

93. ウェブページ/記事のチェックは2段階

96. 等級A、AAの 38箇条のうち、68%(26
項目)について適合もしくは対象外(N/A)の
判別が可能、15%(3項目)の項目について
エラーの判別ができる

97. JIS X8341-3対応のもう一つの課題

98. 経済産業省ウェブサイトの検証結果一覧
大量のエビデンス

99. 管理画面にそのままエビデンスを残す

100. ワークフロー

101. 権限は2種類

102. リンク
評価
画像
評価
HTML
評価
JIS*
チェック
リストに
*JIS X 8341-3:2010
エビデン
スを保存
評価途中の記録やメモを残せる
最終試験
対象ペー
ジを抽出
適合試験

103. ありがとうございました
One more Thing.

104. エンジニア/ディレクタ募集中