アクセシビリティ対応のテーマが公式ディレクトリに登録されるまで

WordCamp Kansai 2016 実行委員柏原　剛（カッシー）

〜テーマ作成の手順とレビュー時の対処方法の一例〜

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

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

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

Webアクセシビリティとは高齢者や障害者など心身の機能に制約のある人を含め、 Web を利用するすべての人がWeb で提供されている情報を取得し、サービスや機能を利用できること

( 社 ) 日本 Web アクセシビリティ協会ホームページよりhttp://www.jawaa.or.jp/Accessibility/

アクセシビリティ対応のWordPressテーマを作る意義

WordPress コミュニティだけでなく情報社会に貢献。

WordPress テーマもアクセシビリティに対応することで、サイトも誰でも利用できるように。

誰でも導入、カスタマイズできる WordPress 。

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

WordPressにおけるアクセシビリティのガイドライン• キーボード操作テスト• スクリーンリーダーテスト• カラーコントラスト、色盲テスト• コードテスト

テーマレビュー時にはこれらのテストが行われます。

https://make.wordpress.org/accessibility/handbook/testing/how-to-test-for-accessibility/

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

スクリーンリーダーテスト• テスト環境• VoiceOver + Safari on Mac

• NVDA + Firefox on Windows

• JAWS and IE 11 (no Edge yet) on Windows

アクセシビリティのレビューを受けるには

/* 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 か月ひたすら待つ。

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

レビュー 1

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

文字と背景のカラーコントラスト

テーマカスタマイザーに背景画像とコンテンツエリアの背景の透明度を変えられる機能を追加

文字と背景のカラーコントラスト修正内容

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

レビュー 2

ボタンのカラーコントラスト

すべてのボタンでフォーカス時の色を反転

　修正内容

通常時

ホバー時フォーカス時

ボタンのカラーコントラスト

キーボード操作テスト

Tab キーでフォーカスできる各ボタンの順番を調節してください。レビュアー

レビュー 3

Tabキー操作　修正内容

tab キー (safari は tab+option) でボタンをページ上で配置されている順番通りにフォーカスできるように修正。

バックググラウンドモード フォトフレームモード

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

レビュー 4スクリーンリーダー

　修正内容スクリーンリーダー

背景に配置しているギャラリー画像に対して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>

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

レビュー 5スクリーンリーダー

　修正内容スクリーンリーダー

<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>

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

レビュー 6

フォームのボタン

　修正内容スクリーンリーダー

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

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

めでたく登録されました！

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

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

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

他に良かったこと

現在テーマディレクトリには約 4000個ぐらいのテーマが登録中。そのうちアクセシビリティ対応のテーマは 100個ちょっと。非常に少ないです。

作ったテーマが目立つチャンス！実力をアピールできるチャンス！

https://ja.wordpress.org/themes/tags/accessibility-ready/https://ja.wordpress.org/themes/browse/new/

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

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