](https://image.slidesharecdn.com/a11ysummerfestivalslidepub-151026021733-lva1-app6891/85/-63-320.jpg)
ウェブアクセシビリティチェックツール開発者の頭ん中
- 1. 〜ウェブアクセシビリティチェックツール開発者の頭ん中〜 2015.08.26 ! Sumio Noda (Alfasado Inc.) アクセシビリティやるぞ! 夏
- 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適合⽀援
- 8. 33% 67%
- 21. ルビが嬉しいのは誰でしょうか?
- 23. Another side of Alfasado Inc.
- 24. for Mac OS X
- 25. for Mac OS X
- 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. 話し元に戻します
- 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. 修正すべき点を指摘してくれて
- 48. MTのプラグイン あります http://www.powercms.jp/blog/2014/07/html_tidy_plugin.html
- 51. 要件2.JIS X 8341-3:2010 AAの すべての箇条についてチェックできること
- 52. できません
- 55. About PowerCMS 8341 (WCAGTester 1.0)
- 57. PowerCMS 8341 ✴ Movable Type / PowerCMS のプラグイン ✴ JIS X8341-3:2010のA、AAへの対応⽀援 ✴ 各箇条を機械的にOK、エラー、N/A、要確認に仕分け る ✴ JIS X8341-3:2010準拠のエビデンスをCMS上に残す ✴ 数千∼数万ページを適合(準拠)させることを想定して企 画・開発 ✴ ウェブアクセシビリティをサイト運⽤のワークフロー
- 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
- 72. Webページの検証
- 82. ⼤阪オフィスの地図
- 86. 1.4.1 色の使用: 情報を伝える、何が起こる か又は何が起きたかを示す、ユーザの反応を 促す、もしくは視覚的な要素を区別する唯一 の視覚的な手段として、色だけを使用しな い。 (レベルA) “ 例 現状では資格に依存して情報を伝えているかど うかは機械的には判断できない。
- 100. ワークフロー
- 101. 権限は2種類
- 102. リンク 評価 画像 評価 HTML 評価 JIS* チェック リストに *JIS X 8341-3:2010 エビデン スを保存 評価途中の記録やメモを残せる 最終試験 対象ペー ジを抽出 適合試験
- 104. エンジニア/ディレクタ募集中