1. アクセシビリティ対応のテーマが
公式ディレクトリに登録されるまで
WordCamp Kansai 2016 実行委員
柏原 剛（カッシー）
〜テーマ作成の手順とレビュー時の対処方法の一例〜

2. 自己紹介
登壇者：柏原 剛（かしはら たけし）
ニックネーム：カッシー
Digistry 代表
フリーランスWebデザイナー
大学・専門学校の講師
博士（芸術）大阪芸術大学 2011年
専攻：情報デザイン

3. このセッションの概要
「BG-PhotoFrame」というアクセシビリティ対応のテー
マを作成。アクセシビリティのテーマレビューを経て公
式ディレクトリへ登録されました。
レビュー時の状況と、作って良かった点などをお話しし
ます。
これからテーマを作る人、または作ったテーマをアクセ
シビリティ対応にする方はぜひ参考にしてください。

4. 目次
• Webアクセシビリティとは
• アクセシビリティ対応のテーマを作ったきっかけ
• アクセシビリティのテーマレビュー
• アクセシビリティ対応のテーマを作成して良かったこと

5. Webアクセシビリティとは
高齢者や障害者など心身の機能に制約のある
人を含め、Webを利用するすべての人がWeb
で提供されている情報を取得し、サービスや
機能を利用できること
(社)日本Webアクセシビリティ協会ホームページより
http://www.jawaa.or.jp/Accessibility/

6. アクセシビリティ対応の
WordPressテーマを作る意義
WordPressコミュニティだけでなく
情報社会に貢献。
WordPressテーマもアクセシビリティに対応することで、
サイトも誰でも利用できるように。
誰でも導入、カスタマイズできるWordPress。

7. アクセシビリティ対応の
テーマを作ったきっかけ
• WordCamp Tokyo 2015のコントリビューターデイ
に参加。そこでテーマ作成を行う。
• 仕事の案件でつくった自作のjQueryプラグインをス
ターターテーマ「_s(アンダースコアー・エス)」に
組み込み。

8. WordPressにおける
アクセシビリティのガイドライン
• キーボード操作テスト
• スクリーンリーダーテスト
• カラーコントラスト、色盲テスト
• コードテスト
テーマレビュー時にはこれらのテストが行われます。
https://make.wordpress.org/accessibility/handbook/testing/how-to-test-for-accessibility/

9. キーボード操作テスト
• タブキーでボタンの選択の前進、後進ができること
• すべてのボタンにアクセスできること
• タブキーでどのボタンがフォーカスされているか。
• キーボードのみで操作が完了できるようにする。
• ウィンドウを小さくしてレスポンシブモードでも再テスト
• 異なるブラウザ、タブレットやスマートフォンでもテスト
する

10. スクリーンリーダーテスト
• テスト環境
• VoiceOver + Safari on Mac
• NVDA + Firefox on Windows
• JAWS and IE 11 (no Edge yet) on Windows

11. アクセシビリティのレビューを受けるには
/*
Theme Name: Accessibility Ready Theme
Theme URI: http://example.com/accessibility-ready-theme/
Description: Accessibility Ready Theme
Author: John Doe
Author URI: http://example.com
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: accessibility-ready-theme
*/
テーマスタイルシート (style.css) のスタイルシートヘッダ、
テーマの特徴を記述するTagsに「accessibility-ready」を追加する。
公式ディレクトリにアップロード
https://wordpress.org/themes/upload/
レビュアーがつくまで約3〜4か月ひたすら待つ。

12. レビュー内容と行った修正

13. レビュー1
背景いっぱいに画像を配置してるけど、これだ
と文字が見えづらいです。文字の部分に背景色
を加えることはできますか？
レビュアー
文字と背景のカラーコントラスト

14. テーマカスタマイザーに背景画像とコンテンツエリアの
背景の透明度を変えられる機能を追加
文字と背景のカラーコントラスト
修正内容

15. ボタンのフォーカス時に色が反転するように
してください。
レビュアー
レビュー2
ボタンのカラーコントラスト

16. すべてのボタンでフォーカス時の色を反転
修正内容
通常時
ホバー時
フォーカス時
ボタンのカラーコントラスト

17. キーボード操作テスト
Tabキーでフォーカスできる各ボタンの
順番を調節してください。
レビュアー
レビュー3

18. Tabキー操作
修正内容
tabキー(safariはtab+option)でボタンをページ上
で配置されている順番通りにフォーカスできるよ
うに修正。
バックググラウンドモード フォトフレームモード

19. 背景の画像も含めて配置されているすべて
の画像にalt属性を追加してください。
レビュアー
レビュー4
スクリーンリーダー

20. 修正内容
スクリーンリーダー
背景に配置しているギャラリー画像に対して
alt属性を追加（ファイル名が値に入るように）
<ul>
<li><img src="http://site.dev/wp-content/uploads/bg-1.jpg" alt="bg-1"></li>
<li><img src="http://site.dev/wp-content/uploads/bg-2.jpg" alt="bg-2"></li>
<li><img src="http://site.dev/wp-content/uploads/bg-3.jpg" alt="bg-3"></li>
</ul>
<ul>
<li><img src="http://site.dev/wp-content/uploads/bg-1.jpg"></li>
<li><img src="http://site.dev/wp-content/uploads/bg-2.jpg"></li>
<li><img src="http://site.dev/wp-content/uploads/bg-3.jpg"></li>
</ul>

21. すべてのボタンに対して「screen-reader-text 」ラベルを追
加してください。
bootstrapのグラフィックアイコンを使ってるボタンに対して
「aria-hidden=true」の属性を追加してください。
レビュアー
レビュー5
スクリーンリーダー

22. 修正内容
スクリーンリーダー
<span class="glyphicon glyphicon-chevron-right"></span>
アイコンのみのボタンはスクリーンリーダー等で読
み上げをスキップ。
代わりに"screen-reader-text"クラスのspan要素を追
加し、こちらの内容が読み上げられるようにする。
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
<span class="screen-reader-text">Switch Mode</span>

23. • 検索フォームのSubmitボタンを表示させてください。
• コメントフォームのPost Commentボタンが小さすぎる
のでサイズを十分にとってください。
レビュアー
レビュー6
フォームのボタン

24. 修正内容
スクリーンリーダー
• 検索フォームの検索ボタンが非表示になっていたので、表示させた。
• コメント投稿のボタンの大きさが小さかったため、十分なサイズを取っ
た。

25. 他にもレビューと修正を重ねて・・・

26. めでたく登録されました！
アップロードから登録まで延べ半年ぐらいかかりました。
https://ja.wordpress.org/themes/bg-photo-frame/

27. アクセシビリティ対応のテーマを
作成して良かったこと

28. 良かったこと
• 人に優しいテーマが作れました。
• ここに登壇できるネタができました
• 何よりアクセシビリティについてすごい勉強に
なりました。

29. 他に良かったこと
現在テーマディレクトリには約4000個ぐらいのテー
マが登録中。そのうちアクセシビリティ対応のテーマ
は100個ちょっと。非常に少ないです。
作ったテーマが目立つチャンス！
実力をアピールできるチャンス！
https://ja.wordpress.org/themes/tags/accessibility-ready/
https://ja.wordpress.org/themes/browse/new/

30. レビューの経緯はここで見れます。
https://themes.trac.wordpress.org/ticket/28202

31. アクセシビリティ対応のテーマを作る時に
ぜひ参考にしてください。
ご清聴ありがとうございました。