Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

An example of how to make the accessibility ready theme

1,606 views

Published on

Published in: Design
  • Be the first to comment

An example of how to make the accessibility ready theme

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

×