PowerCMS 8341 のご紹介

〜今こそ取り組むウェブアクセシビリティ〜

2014.12.08

Sumio Noda (Alfasado Inc.)

About Me (野田純生)


• アルファサード株式会社代表取締役



• Movable Type エバンジェリスト




• ウェブアクセシビリティエバンジェリスト





• CEO : マーケティング〜営業戦略の立案〜製品企画






• CTO : ソフトウェア製品の企画〜開発






• CTO : ソフトウェア製品の企画〜開発

• Blogger / http://junnama.alfasado.net/online/

https://www.facebook.com/junnama.noda

https://www.facebook.com/junnama.noda

About Us (Alfasado Inc.)


• アルファサード株式会社 (2003年11月設立)



• 本社 : 大阪府大阪市/東京オフィス : 神田神保町




• PowerCMS開発・販売・サポート





• CMS/受託開発を通じてクライアントを爆速化





• CMS/受託開発を通じてクライアントを爆速化

• ウェブアクセシビリティ調査・改善支援、JIS-X 8341-3適合支援

33%

67%

33%

67%

33%

67%

Another side of Alfasado Inc.

for Mac OS X/Windows

for Mac OS X

for Mac OS X

for Mac OS X/Windows

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

本題ここから

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

できません

北　海　道 (きたうみみち) 東　　　北 (ひがしきた)

北海道東北

￥1000(せん) 1000円

2014/12/8(じゅうにぶんのにせんよ

んはち)2014年12⽉月8⽇日

㍿(記号⽂文字) 株式会社

段落段落

...

段落段落

...

強調 強調

<blink>点滅</blink> 点滅

<img src=”...”><img src=”...”alt=”...” / >

できるだけ綺麗なプレーンなHTMLにするPDFをプレーンHTMLに変換

ルビを振ったり配色反転ハイコントラスト化したり...

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

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

MTのプラグインあります

http://www.powercms.jp/blog/2014/07/html_tidy_plugin.html

http://weba11y.jp/tools/


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

機械で修正できるものはごく一部

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

できません







でも、未来はすぐそこに

http://gigazine.net/news/20141119-google-automatically-caption/



About PowerCMS 8341(WCAGTester 1.0)

PowerCMS 8341

PowerCMS 8341

• Movable Type / PowerCMS のプラグイン

PowerCMS 8341


• JIS X8341-3:2010のA、AAへの対応支援

PowerCMS 8341



• 各箇条を機械的にOK、エラー、N/A、要確認に仕分ける

PowerCMS 8341




• JIS X8341-3:2010準拠のエビデンスをCMS上に残す

PowerCMS 8341





• 数千〜数万ページを適合(準拠)させることを想定して企画・開発

PowerCMS 8341





• 数千〜数万ページを適合(準拠)させることを想定して企画・開発

• ウェブアクセシビリティをサイト運用のワークフローに乗せる

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

※miCheckerの画⾯面

PowerCMS 8341の機能

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

“

“色の相対輝度 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.4GsRGB <= 0.03928 の場合：G = GsRGB/12.92、それ以外の場合：G = ((GsRGB+0.055)/1.055) ^ 2.4BsRGB <= 0.03928 の場合：B = BsRGB/12.92、それ以外の場合：B = ((BsRGB+0.055)/1.055) ^ 2.4...

#mtddc

#000000

#EFBF2F

コントラスト比 [ 12.1 : 1 ](適合)

背景色と前景色判定


• 画像を縮小する (動作速度のため)



• 256色に丸める (グラデーション、近似色を丸める)




• ピクセルをなめて、一番大きな面積を占める色が背景色





• 二番目以降の面積を占める色で、背景色と一定のコントラスト比以上の色が前景色






• 色数が一定数/総ピクセル以上のものは写真(文字を含まない)






• 色数が一定数/総ピクセル以上のものは写真(文字を含まない)

• (その他にも) GIFアニメーションは自動判別可能

画像の⾃自動テスト

N/A

背景⾊色と前景⾊色が推測できたもの写真等で

あろうもの

OK NG

コントラスト計算

適合は⼈人の⼿手で確認してフラグを付ける

確認

アニメーションを含むもの

Not Applicable

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

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

⾃自動テストの結果を⼈人が確認しなければならないもの

OK

不適切な結果

適切な結果

OK NG

⼈人の⼿手による検証

Webページの検証

3.3.1 入力エラー箇所の特定: 入力エラーを自動的に発見された場合は、エラーとなっている箇所を特定し、そのエラーを利用者にテキストで説明する。 (レベルA)

“<例>

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

対象となる技術が含まれているかどうか判別可能なもの

N/A=OK

含まれる含まれない

OK 確認を促す

できるもの

機械的に適合判定が

できないもの

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

“<例>

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

エラー判別が可能なもの

NG

エラーの場合

エラー無しの場合

OK 確認を促す

できるもの

機械的に適合判定が

できないもの

2.4.4 文脈におけるリンクの目的: それぞれのリンクの目的が、リンクのテキストだけから、又はプログラムが解釈可能なリンクの文脈をリンクのテキストとあわせたものから...

“<例>

リンクテキストとリンク先遷移ページを「人間が」比較するして、問題なければOK

OK

NG

OK

××

人の手による検証が必要=>補助する機能を提供

修正案を⼊入⼒力する欄

⼤大阪オフィスの地図

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

1.3.3 感覚的な特徴: コンテンツを理解し操作するための説明を、形、大きさ、視覚的な位置、方向、又は音のような、構成要素が持つ感覚的な特徴だけで提供しない。

“<例>

現状では文章が「位置」に依存した表現かどうかは機械的には判断できない。

機械的に適合判定ができないもの

⼿手段を提供

何らかの確認⼿手段を提供できるもの

常に確認を促す

⼈人の⼿手で確認しなければわからないもの

OKを表⺬⽰示

エラーを表⺬⽰示

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



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

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

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

経済産業省ウェブサイトの検証結果一覧

大量のエビデンス

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

ワークフロー

権限は2種類

リンク評価

画像評価

HTML評価

JIS*チェックリストに反映

*JIS X 8341-‑3:2010

エビデンスを保存

評価途中の記録やメモを残せる

最終試験対象ページを抽出

適合試験

PowerCMS 8341

Demo

アクセシビリティ対応サービス

コンテンツ作成者向けに JIS X 8341-3:2010に対応するために必要な知識から、PowerCMS 8341を利用した試験方法と検証チェックリストへの入力方法までを説明会形式でレクチャーします(テキスト込み、半日×2日間、15名まで)。

導入支援レクチャー

価格 : 40万円(旅費交通費、テキスト代を含む)

デザインコンポーネント(HTML、CSS、JavaScriptなどによるページの基本テンプレート)評価及び Movable Type または PowerCMS の10テンプレートについて診断・評価を行い、改善についてのご提案を行います。

コンポーネント・テンプレート評価

価格 : 30万円(等級A) または40万円(等級AA)

ランダムに抽出した20ページおよび、ランダムでない方法で抽出した20ページの合計40ページについての試験を実施し、結果をご報告します。修正必要事項があればご提案を行い、再試験を1回実施します。

JIS X 8341-3:2010適合評価

価格 : 30万円(等級A) または40万円(等級AA)

CMSサーバーへの設置調整を代行します。

※サーバー動作環境要件を満たさない場合、APIを提供します(1年間のAPI利用料金となります)

インストール代行(リモート作業)

価格 : 10万円

価格についてはパートナー様向け価格もご用意しています。詳しくはお問い合わせください。

[email protected]

mailto:[email protected]

mailto:[email protected]

ありがとうございました。

Technology

PowerCMS 8341 のご紹介