an example of how to make the accessibility ready theme
TRANSCRIPT
![Page 1: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/1.jpg)
アクセシビリティ対応のテーマが公式ディレクトリに登録されるまで
WordCamp Kansai 2016 実行委員柏原 剛(カッシー)
〜テーマ作成の手順とレビュー時の対処方法の一例〜
![Page 2: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/2.jpg)
自己紹介登壇者:柏原 剛(かしはら たけし)ニックネーム:カッシー Digistry 代表フリーランス Web デザイナー大学・専門学校の講師博士(芸術)大阪芸術大学 2011 年専攻:情報デザイン
![Page 3: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/3.jpg)
このセッションの概要「 BG-PhotoFrame 」というアクセシビリティ対応のテーマを作成。アクセシビリティのテーマレビューを経て公式ディレクトリへ登録されました。レビュー時の状況と、作って良かった点などをお話しします。これからテーマを作る人、または作ったテーマをアクセシビリティ対応にする方はぜひ参考にしてください。
![Page 4: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/4.jpg)
目次• Web アクセシビリティとは• アクセシビリティ対応のテーマを作ったきっかけ• アクセシビリティのテーマレビュー• アクセシビリティ対応のテーマを作成して良かったこと
![Page 5: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/5.jpg)
Webアクセシビリティとは高齢者や障害者など心身の機能に制約のある人を含め、 Web を利用するすべての人がWeb で提供されている情報を取得し、サービスや機能を利用できること
( 社 ) 日本 Web アクセシビリティ協会ホームページよりhttp://www.jawaa.or.jp/Accessibility/
![Page 6: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/6.jpg)
アクセシビリティ対応のWordPressテーマを作る意義
WordPress コミュニティだけでなく情報社会に貢献。
WordPress テーマもアクセシビリティに対応することで、サイトも誰でも利用できるように。
誰でも導入、カスタマイズできる WordPress 。
![Page 7: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/7.jpg)
アクセシビリティ対応のテーマを作ったきっかけ• WordCamp Tokyo 2015 のコントリビューターデイに参加。そこでテーマ作成を行う。• 仕事の案件でつくった自作の jQuery プラグインをスターターテーマ「 _s( アンダースコアー・エス ) 」に組み込み。
![Page 8: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/8.jpg)
WordPressにおけるアクセシビリティのガイドライン• キーボード操作テスト• スクリーンリーダーテスト• カラーコントラスト、色盲テスト• コードテスト
テーマレビュー時にはこれらのテストが行われます。
https://make.wordpress.org/accessibility/handbook/testing/how-to-test-for-accessibility/
![Page 9: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/9.jpg)
キーボード操作テスト• タブキーでボタンの選択の前進、後進ができること• すべてのボタンにアクセスできること• タブキーでどのボタンがフォーカスされているか。• キーボードのみで操作が完了できるようにする。• ウィンドウを小さくしてレスポンシブモードでも再テスト• 異なるブラウザ、タブレットやスマートフォンでもテストする
![Page 10: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/10.jpg)
スクリーンリーダーテスト• テスト環境• VoiceOver + Safari on Mac
• NVDA + Firefox on Windows
• JAWS and IE 11 (no Edge yet) on Windows
![Page 11: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/11.jpg)
アクセシビリティのレビューを受けるには
/* 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 か月ひたすら待つ。
![Page 12: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/12.jpg)
レビュー内容と行った修正
![Page 13: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/13.jpg)
レビュー 1
背景いっぱいに画像を配置してるけど、これだと文字が見えづらいです。文字の部分に背景色を加えることはできますか?レビュアー
文字と背景のカラーコントラスト
![Page 14: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/14.jpg)
テーマカスタマイザーに背景画像とコンテンツエリアの背景の透明度を変えられる機能を追加
文字と背景のカラーコントラスト修正内容
![Page 15: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/15.jpg)
ボタンのフォーカス時に色が反転するようにしてください。レビュアー
レビュー 2
ボタンのカラーコントラスト
![Page 16: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/16.jpg)
すべてのボタンでフォーカス時の色を反転
修正内容
通常時
ホバー時フォーカス時
ボタンのカラーコントラスト
![Page 17: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/17.jpg)
キーボード操作テスト
Tab キーでフォーカスできる各ボタンの順番を調節してください。レビュアー
レビュー 3
![Page 18: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/18.jpg)
Tabキー操作 修正内容
tab キー (safari は tab+option) でボタンをページ上で配置されている順番通りにフォーカスできるように修正。
バックググラウンドモード フォトフレームモード
![Page 19: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/19.jpg)
背景の画像も含めて配置されているすべての画像に alt 属性を追加してください。レビュアー
レビュー 4スクリーンリーダー
![Page 20: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/20.jpg)
修正内容スクリーンリーダー
背景に配置しているギャラリー画像に対して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>
![Page 21: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/21.jpg)
すべてのボタンに対して「 screen-reader-text 」ラベルを追加してください。bootstrap のグラフィックアイコンを使ってるボタンに対して「 aria-hidden=true 」の属性を追加してください。レビュアー
レビュー 5スクリーンリーダー
![Page 22: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/22.jpg)
修正内容スクリーンリーダー
<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>
![Page 23: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/23.jpg)
• 検索フォームの Submit ボタンを表示させてください。• コメントフォームの Post Comment ボタンが小さすぎるのでサイズを十分にとってください。レビュアー
レビュー 6
フォームのボタン
![Page 24: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/24.jpg)
修正内容スクリーンリーダー
• 検索フォームの検索ボタンが非表示になっていたので、表示させた。• コメント投稿のボタンの大きさが小さかったため、十分なサイズを取った。
![Page 25: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/25.jpg)
他にもレビューと修正を重ねて・・・
![Page 26: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/26.jpg)
めでたく登録されました!
アップロードから登録まで延べ半年ぐらいかかりました。https://ja.wordpress.org/themes/bg-photo-frame/
![Page 27: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/27.jpg)
アクセシビリティ対応のテーマを作成して良かったこと
![Page 28: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/28.jpg)
良かったこと• 人に優しいテーマが作れました。• ここに登壇できるネタができました• 何よりアクセシビリティについてすごい勉強になりました。
![Page 29: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/29.jpg)
他に良かったこと
現在テーマディレクトリには約 4000個ぐらいのテーマが登録中。そのうちアクセシビリティ対応のテーマは 100個ちょっと。非常に少ないです。
作ったテーマが目立つチャンス!実力をアピールできるチャンス!
https://ja.wordpress.org/themes/tags/accessibility-ready/https://ja.wordpress.org/themes/browse/new/
![Page 30: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/30.jpg)
レビューの経緯はここで見れます。https://themes.trac.wordpress.org/ticket/28202
![Page 31: An example of how to make the accessibility ready theme](https://reader033.vdocuments.mx/reader033/viewer/2022061307/5882dabd1a28ab33258b487b/html5/thumbnails/31.jpg)
アクセシビリティ対応のテーマを作る時にぜひ参考にしてください。ご清聴ありがとうございました。