CMS大阪夏祭り2016セッション オーサリングツールとしてのCMSとWebアクセシビリティ

1. CMS⼤阪夏祭り2016セッション
野⽥ 純⽣@アルファサード株式会社
オーサリングツールとしての
CMSとWEBアクセシビリティ

3. オーサリングツールとしてのCMSとWEBアクセシビリティ
ABOUT ME
▸ 野⽥純⽣(のだ すみお)
▸ https://twitter.com/junnama
▸ https://www.facebook.com/junnama.noda
▸ http://junnama.alfasado.net/online/
▸ アルファサード株式会社 代表取締役社⻑
▸ Movable Type エバンジェリスト
▸ webアクセシビリティ エバンジェリスト
▸ ソフトウェア開発者(Perl/PHP/JavaScript/Swift/XOJO)

5. MOVABLE TYPEのプラグインを
世界で⼀番たくさん書いている⼈

6. オーサリングツールとしてのCMSとWEBアクセシビリティ
ABOUT US
▸ アルファサード株式会社
▸ 2003年11⽉設⽴ 本社⼤阪府⼤阪市 / 東京オフィス(九段南)
▸ ソフトウェア事業(PowerCMS/MTCommerce他)
▸ クラウドサービス事業
▸ webインテグレーション事業
▸ webアクセシビリティ向上⽀援

12. アルファサード と MOVABLE TYPE

13. オーサリングツールとしてのCMSとWEBアクセシビリティ
MOVABLE TYPE のリリースノートの「THANKS TO」の当社⽐率を調べてみました
Thanks To
このリリースにはMovable Typeコミュニティーから
報告された多くの、バグ修正、パッチ提供が取り込ま
れています。FogBugz を通じてパッチおよび、バグ
レポートを提供してくださったコミュニティーメンバー
のお名前は以下の通りです。皆様のご協⼒に感謝しま
す！
“

14. オーサリングツールとしてのCMSとWEBアクセシビリティ
MOVABLE TYPE のリリースノートの「THANKS TO」の当社⽐率を調べてみました
MOVABLE TYPE 6.0.2

15. オーサリングツールとしてのCMSとWEBアクセシビリティ
MOVABLE TYPE のリリースノートの「THANKS TO」の当社⽐率を調べてみました
▸ Movable Type 6.0.2 (84%)
▸ Movable Type 6.0.4 (67%)
▸ Movable Type 6.1 (48%)
▸ Movable Type 6.2 (77%)
▸ Movable Type 6.2.4 (77%)
▸ Movable Type 6.3 (65%)
35%
65%

16. オーサリングツールとしてのCMSとWEBアクセシビリティ
2015年から WORLD WIDE WEB CONSORTIUM (W3C) のメンバー

17. オーサリングツールとしてのCMSとWEBアクセシビリティ
̶ TIM BERNERS-LEE, W3C DIRECTOR AND INVENTOR OF THE WORLD WIDE
The power of the Web is in its
universality. Access by everyone
regardless of disability is an
essential aspect.
“

19. お前んちのCMSはATAGに準拠してんのか?

20. ここから本題

21. オーサリングツールとしてのCMSとWEBアクセシビリティ
WEBアクセシビリティとは
ウェブページにおけるアクセシビリティは、
⾼齢者や障害者、また異なる情報端末やソフ
トウェアにおいても、情報を取得あるいは発
信できる柔軟性に富んでいること（あるいは
その度合い）を意味する。公共サービスでは、
障害があっても知る権利を保障する情報保障
によって重要となる。
“
https://ja.wikipedia.org/wiki/アクセシビリティ

22. オーサリングツールとしてのCMSとWEBアクセシビリティ
WEBアクセシビリティとは
▸ 利⽤者の状態、端末、障害の有無に関わらずwebが利⽤
できる
▸ Web Contents Accessibility Guidelines 2.0
▸ ⽇本においては JIS X8341-3:2016 が規格
▸ 公共サイトでは「AA」に準拠することが必須
▸ 4つの原則 - 知覚可能、操作可能、理解可能、堅牢
▸ 障害者差別解消法(2016年)

23. オーサリングツールとしてのCMSとWEBアクセシビリティ
ABOUT AUTHORING TOOL ACCESSIBILITY GUIDELINES(WTAG)2.0
http://www.w3.org/TR/ATAG20/

24. オーサリングツールとしてのCMSとWEBアクセシビリティ
ABOUT AUTHORING TOOL ACCESSIBILITY GUIDELINES(WTAG)2.0
https://www.w3.org/WAI/intro/atag.php

25. オーサリングツールとしてのCMSとWEBアクセシビリティ
ABOUT AUTHORING TOOL ACCESSIBILITY GUIDELINES(WTAG)2.0
▸ オーサリングツール(WYSIWYGエディタ)などの開発者
▸ CMS，コンテンツアグリゲータ開発者
▸ ワープロソフトのHTMLエクスポート機能開発者
▸ マルチメディア・オーサリングツール開発者
▸ また、それらのツールを使うコンテンツ制作者

26. オーサリングツールとしてのCMSとWEBアクセシビリティ
ABOUT AUTHORING TOOL ACCESSIBILITY GUIDELINES(WTAG)2.0
▸ ATAG 2.0 has two main parts:
▸ Part A is about making the authoring tool itself
accessible.(パートAはオーサリングツール⾃⾝をアクセシ
ブルにすること)
▸ Part B is about the authoring tool helping authors
produce accessible content.(パートBはオーサリングツー
ルがアクセシブルなコンテンツ作成を⼿助けすること)

27. オーサリングツール⾃⾝を
アクセシブルにする
A. Make the authoring tool user interface accessible

28. オーサリングツールとしてのCMSとWEBアクセシビリティ
オーサリングツール⾃⾝をアクセシブルにする
▸ オーサリングツール⾃⾝をWCAG2.0(JIS)に準拠させる
▸ スクリーンリーダーでの操作？
▸ ボタンの代替テキストは適切？
▸ キーボード操作できる？
CMSはフォームのかたまり。フォーム周りは特に注意すべし。
残念ながら(ウチも含めて)そこまで気が回っていないのが現状。

29. オーサリングツールとしてのCMSとWEBアクセシビリティ
今どきのWEBアプリ
ドラッグ&ドロップで直感的に操作できます!

30. オーサリングツールとしてのCMSとWEBアクセシビリティ
ドラッグ&ドロップできない時は?
<img role="button" tabindex="0"
class="toRight" src="/images/right.gif" alt="選択された項⽬をグループから削除" />
チェックボックスとボタン操作で同等の操作ができる
<img class="toRight" src="/images/right.gif" alt="左へ" />

31. オーサリングツールとしてのCMSとWEBアクセシビリティ
CMSは⼊⼒フォームのかたまり
セッションがタイムアウトした
ため、データは破棄されました

32. オーサリングツールとしてのCMSとWEBアクセシビリティ
CMSは⼊⼒フォームのかたまり
http://waic.jp/docs/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html

33. オーサリングツールとしてのCMSとWEBアクセシビリティ
WEBサイトのアクセシビリティと同じ
Guideline A.3.5: (For the authoring tool user interface)
Provide text search of the content. [Implementing A.3.5]

34. オーサリングツールとしてのCMSとWEBアクセシビリティ
今どきのCMSをできるところからアクセシブルにするには?
▸ 「障害者差別解消法」ではサービスやアプリも対象になる可能
性がある
▸ 障害者のIT活⽤は(多分)みなさんの想像以上ですぜ
▸ 開発者がまず「知る」「意識する」ところから
▸ ⼩さなところから始める(シンプルな投稿アプリを提供するとか)
コミュニティで⼀度考えてみませんか?
プラットフォームの優位性になるかもしれませんよ!?

35. オーサリングツールがアクセシブルな
コンテンツ作成を⼿助けする
B. Support the production of accessible content

36. 画像の挿⼊フローを考える
Guideline B.2.3:
Assist authors with managing alternative content for non-text
content.

40. エディタ内画像選択
して確認・修正

51. altの「⾒える化」

52. altの修正

53. オーサリングツールとしてのCMSとWEBアクセシビリティ
WTAGにおける⾮テキストコンテンツの代替テキスト
▸ 単なる「画像」や、ファイル名が代替テキストに指定されて
いるのは望ましくない
▸ コンテンツ作成者はその場で修正しても、その場で修正しな
い(後で修正する)ことも選択できる
▸ 代替テキストは、後で修正することができる
▸ 代替テキストを再利⽤するために保存しておけると良い
▸ 保存した代替テキストを編集または削除できると良い

54. 8341

56. コンテンツのアクセシビリティ向上を⽀援

57. オーサリングツールとしてのCMSとWEBアクセシビリティ
⾊のコントラスト⽐
1.4.3 最低限のコントラスト: テキスト
及び画像化された⽂字の視覚的な表現に
は、少なくとも 4.5：1 のコントラスト
⽐をもたせる。ただし、次の場合は除
く： (レベルAA)
⼤きな⽂字： サイズの⼤きなテキスト
及びサイズの⼤きな画像化された⽂字に
は、少なくとも 3：1 のコントラスト⽐
がある。
“

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

59. https://alfasado.net/apps/colortester-ja.html

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

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

65. ⼈の⼿による検証が必要=>補助する機能を提供

67. WEBページ(記事)の検証試験

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

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

71. フォームやコントロールが
なければ対象外=>OK

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

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

74. さらに、リンクテキストとリンク先遷移ページ
を「⼈間が」⽐較するして、問題なければOK
OK
NG
OK
××
修正案を⼊⼒する欄

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

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

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

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

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

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

84. オーサリングツールとしてのCMSとWEBアクセシビリティ
おわりに
▸ 各CMSのコミュニティで共有してください。
▸ できるところ、⼩さなところから取り組みましょう。
▸ 最初は画像管理、画像挿⼊機能から。
▸ アクセシブルなテーマを作って同梱するのも良いでしょう。
▸ よろしければお⼿伝いします。⼀緒にやりましょう。

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

86. ⼈財およびパートナー募集中

87. アルファサード株式会社では⼈財を募集中です
⼈財およびパートナー募集中
▸ CMSエンジニア/フロントエンドエンジニア
▸ webアクセシビリティ・スペシャリスト
▸ iOS/Androidエンジニア
▸ クラウドインフラエンジニア
▸ webディレクター
▸ セールスエンジニア(100%インバウンド営業)

88. アルファサード株式会社では⼈財を募集中です
⼈財およびパートナー募集中
▸ ⾃分磨き⼿当(⽉に5000円)、携帯⼿当、住宅⼿当
▸ 週1回までの在宅ワーク選択制度
▸ 週休3⽇制選択可能
▸ 従業員持ち株制度
▸ 勤務地はセールスエンジニア/webディレクターは東京
▸ それ以外の職種は、⼤阪、東京または広島県福⼭(⼦会社)