Soumettre la recherche
Mettre en ligne
An example of how to make the accessibility ready theme
•
Télécharger en tant que PPTX, PDF
•
2 j'aime
•
2,813 vues
T
Takeshi Kashihara
Suivre
Design
Signaler
Partager
Signaler
Partager
1 sur 31
Télécharger maintenant
Recommandé
Learning from theme review requirements
Learning from theme review requirements
Shinichi Nishikawa
WorcCamp Kansai 2015 LT大会
WorcCamp Kansai 2015 LT大会
Koji Asaga
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
Ayaka Sumida
レスポンシブ・イメージのWordPressへの実装と4.4
レスポンシブ・イメージのWordPressへの実装と4.4
Toru Miki
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
Kitani Kimiya
WordPressで行う継続的インテグレーションのススメ
WordPressで行う継続的インテグレーションのススメ
horike37
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
Hidetaka Okamoto
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
タカシ キタジマ
Recommandé
Learning from theme review requirements
Learning from theme review requirements
Shinichi Nishikawa
WorcCamp Kansai 2015 LT大会
WorcCamp Kansai 2015 LT大会
Koji Asaga
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
Ayaka Sumida
レスポンシブ・イメージのWordPressへの実装と4.4
レスポンシブ・イメージのWordPressへの実装と4.4
Toru Miki
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
Kitani Kimiya
WordPressで行う継続的インテグレーションのススメ
WordPressで行う継続的インテグレーションのススメ
horike37
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
Hidetaka Okamoto
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
タカシ キタジマ
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
Akari Doi
WordCamp Kansai 2015 発表資料
WordCamp Kansai 2015 発表資料
Masahito Muratake
WordCampKansai 2015 公式ディレクトリへの テーマ掲載とビジネスモデル
WordCampKansai 2015 公式ディレクトリへの テーマ掲載とビジネスモデル
Hidekazu Ishikawa
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
Hidekazu Ishikawa
WordPressで行う継続的インテグレーション入門編
WordPressで行う継続的インテグレーション入門編
Hiroshi Urabe
初心者でもすぐできる Wordpress バックアップのススメ
初心者でもすぐできる Wordpress バックアップのススメ
Seiichiro Mishiba
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
Naoko Takano
WordCamp Kansai 2015 - 京都大学における WordPress を利用した多言語情報発信と管理運用 #wck2015
WordCamp Kansai 2015 - 京都大学における WordPress を利用した多言語情報発信と管理運用 #wck2015
Kitani Kimiya
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
Katz Ueno
var dumpを使わないWordPress開発フロー
var dumpを使わないWordPress開発フロー
優也 田島
airyのご紹介
airyのご紹介
Teruaki Murakami
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Hidetaka Okamoto
WP REST API の活用事例と今後
WP REST API の活用事例と今後
Yuusuke Yoshida
WordPressで行うシステム開発 WordCamp Tokyo 2015用
WordPressで行うシステム開発 WordCamp Tokyo 2015用
Satoshi Kamigaki
サーバ管理はサーバレスで
サーバ管理はサーバレスで
horike37
YARAIYA! Opendata with WordPress
YARAIYA! Opendata with WordPress
Hidetaka Okamoto
ウェブ制作者のためのセルフブランディング
ウェブ制作者のためのセルフブランディング
Hidekazu Ishikawa
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
Yoshinori Kobayashi
WordCamp Kansai GPL study
WordCamp Kansai GPL study
YAT blog
Make the 3D Wapuu model and printing by the 3D printer.
Make the 3D Wapuu model and printing by the 3D printer.
Takeshi Kashihara
Wapuu 5th - WordCamp Kansai 2016
Wapuu 5th - WordCamp Kansai 2016
kazuko kaneuchi
Contenu connexe
Tendances
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
Akari Doi
WordCamp Kansai 2015 発表資料
WordCamp Kansai 2015 発表資料
Masahito Muratake
WordCampKansai 2015 公式ディレクトリへの テーマ掲載とビジネスモデル
WordCampKansai 2015 公式ディレクトリへの テーマ掲載とビジネスモデル
Hidekazu Ishikawa
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
Hidekazu Ishikawa
WordPressで行う継続的インテグレーション入門編
WordPressで行う継続的インテグレーション入門編
Hiroshi Urabe
初心者でもすぐできる Wordpress バックアップのススメ
初心者でもすぐできる Wordpress バックアップのススメ
Seiichiro Mishiba
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
Naoko Takano
WordCamp Kansai 2015 - 京都大学における WordPress を利用した多言語情報発信と管理運用 #wck2015
WordCamp Kansai 2015 - 京都大学における WordPress を利用した多言語情報発信と管理運用 #wck2015
Kitani Kimiya
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
Katz Ueno
var dumpを使わないWordPress開発フロー
var dumpを使わないWordPress開発フロー
優也 田島
airyのご紹介
airyのご紹介
Teruaki Murakami
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Hidetaka Okamoto
WP REST API の活用事例と今後
WP REST API の活用事例と今後
Yuusuke Yoshida
WordPressで行うシステム開発 WordCamp Tokyo 2015用
WordPressで行うシステム開発 WordCamp Tokyo 2015用
Satoshi Kamigaki
サーバ管理はサーバレスで
サーバ管理はサーバレスで
horike37
YARAIYA! Opendata with WordPress
YARAIYA! Opendata with WordPress
Hidetaka Okamoto
ウェブ制作者のためのセルフブランディング
ウェブ制作者のためのセルフブランディング
Hidekazu Ishikawa
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
Yoshinori Kobayashi
WordCamp Kansai GPL study
WordCamp Kansai GPL study
YAT blog
Tendances
(20)
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 発表資料
WordCamp Kansai 2015 発表資料
WordCampKansai 2015 公式ディレクトリへの テーマ掲載とビジネスモデル
WordCampKansai 2015 公式ディレクトリへの テーマ掲載とビジネスモデル
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPressで行う継続的インテグレーション入門編
WordPressで行う継続的インテグレーション入門編
初心者でもすぐできる Wordpress バックアップのススメ
初心者でもすぐできる Wordpress バックアップのススメ
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
WordCamp Kansai 2015 - 京都大学における WordPress を利用した多言語情報発信と管理運用 #wck2015
WordCamp Kansai 2015 - 京都大学における WordPress を利用した多言語情報発信と管理運用 #wck2015
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
var dumpを使わないWordPress開発フロー
var dumpを使わないWordPress開発フロー
airyのご紹介
airyのご紹介
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
WP REST API の活用事例と今後
WP REST API の活用事例と今後
WordPressで行うシステム開発 WordCamp Tokyo 2015用
WordPressで行うシステム開発 WordCamp Tokyo 2015用
サーバ管理はサーバレスで
サーバ管理はサーバレスで
YARAIYA! Opendata with WordPress
YARAIYA! Opendata with WordPress
ウェブ制作者のためのセルフブランディング
ウェブ制作者のためのセルフブランディング
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
WordCamp Kansai GPL study
WordCamp Kansai GPL study
En vedette
Make the 3D Wapuu model and printing by the 3D printer.
Make the 3D Wapuu model and printing by the 3D printer.
Takeshi Kashihara
Wapuu 5th - WordCamp Kansai 2016
Wapuu 5th - WordCamp Kansai 2016
kazuko kaneuchi
WordPress + JSON-LDで構造化するこれからのマークアップ
WordPress + JSON-LDで構造化するこれからのマークアップ
Takami Kazuya
オープンデータ公開プラットフォームとしてのWordPressへの期待
オープンデータ公開プラットフォームとしてのWordPressへの期待
Kouji Kozaki
これから使おう!Term metadataの使い方
これから使おう!Term metadataの使い方
Kasumi Ogawa
Let’s make elastic cms together!
Let’s make elastic cms together!
Shinichi Takahashi
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
Cherry Pie Web
WordPress RESTful API & Amazon API Gateway - WordCamp Kansai 2016
WordPress RESTful API & Amazon API Gateway - WordCamp Kansai 2016
崇之 清水
WordPressセキュリティの心配事を吹き飛ばせ! WordCamp Kansai 2016
WordPressセキュリティの心配事を吹き飛ばせ! WordCamp Kansai 2016
yoshinori matsumoto
En vedette
(9)
Make the 3D Wapuu model and printing by the 3D printer.
Make the 3D Wapuu model and printing by the 3D printer.
Wapuu 5th - WordCamp Kansai 2016
Wapuu 5th - WordCamp Kansai 2016
WordPress + JSON-LDで構造化するこれからのマークアップ
WordPress + JSON-LDで構造化するこれからのマークアップ
オープンデータ公開プラットフォームとしてのWordPressへの期待
オープンデータ公開プラットフォームとしてのWordPressへの期待
これから使おう!Term metadataの使い方
これから使おう!Term metadataの使い方
Let’s make elastic cms together!
Let’s make elastic cms together!
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
WordPress RESTful API & Amazon API Gateway - WordCamp Kansai 2016
WordPress RESTful API & Amazon API Gateway - WordCamp Kansai 2016
WordPressセキュリティの心配事を吹き飛ばせ! WordCamp Kansai 2016
WordPressセキュリティの心配事を吹き飛ばせ! WordCamp Kansai 2016
Similaire à An example of how to make the accessibility ready theme
ThemeStudy ― CHI2017-2018分析 + CHI2018速報
ThemeStudy ― CHI2017-2018分析 + CHI2018速報
cvpaper. challenge
実録 情熱と苦悩のテーマ・プラグインビジネス
実録 情熱と苦悩のテーマ・プラグインビジネス
Hidekazu Ishikawa
20160430co-edo
20160430co-edo
Chieko Aihara
静的HTMLファイルをWordPressのテーマにするワークショップ
静的HTMLファイルをWordPressのテーマにするワークショップ
masaya yamao
Photoshop & illustrator はここがスゴイ!
Photoshop & illustrator はここがスゴイ!
Mori Kazue
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
BizVektorに見る汎用テンプレートの設計思想
BizVektorに見る汎用テンプレートの設計思想
Hidekazu Ishikawa
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
タカシ キタジマ
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
Hidekazu Ishikawa
テーマ・プラグイン 公開のススメ WordCampTokyo2012
テーマ・プラグイン 公開のススメ WordCampTokyo2012
Hidekazu Ishikawa
WordCamp Tokyo2012 handson Portfolio
WordCamp Tokyo2012 handson Portfolio
regret raym
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
Yat-wbnara201602
Yat-wbnara201602
YAT blog
IA2010 - アジャイル時代のWeb解析事例
IA2010 - アジャイル時代のWeb解析事例
Makoto Shimizu
WordPress初心者テーマ作成勉強会
WordPress初心者テーマ作成勉強会
Tsuyoshi.
今やWeb制作者じゃなくなった私の仕事実態
今やWeb制作者じゃなくなった私の仕事実態
力也 伊原
X Design Academy
X Design Academy
Makoto Inage
知っておきたい「Adobeソフトを選び、使いこなすポイント」
知っておきたい「Adobeソフトを選び、使いこなすポイント」
Mori Kazue
Adobe experience designのプロトタイプをbehanceへ
Adobe experience designのプロトタイプをbehanceへ
Kazuma Sekiguchi
SharePointアドイン開発 Line風Chat アドイン
SharePointアドイン開発 Line風Chat アドイン
Akihiro Ehara
Similaire à An example of how to make the accessibility ready theme
(20)
ThemeStudy ― CHI2017-2018分析 + CHI2018速報
ThemeStudy ― CHI2017-2018分析 + CHI2018速報
実録 情熱と苦悩のテーマ・プラグインビジネス
実録 情熱と苦悩のテーマ・プラグインビジネス
20160430co-edo
20160430co-edo
静的HTMLファイルをWordPressのテーマにするワークショップ
静的HTMLファイルをWordPressのテーマにするワークショップ
Photoshop & illustrator はここがスゴイ!
Photoshop & illustrator はここがスゴイ!
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
BizVektorに見る汎用テンプレートの設計思想
BizVektorに見る汎用テンプレートの設計思想
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
テーマ・プラグイン 公開のススメ WordCampTokyo2012
テーマ・プラグイン 公開のススメ WordCampTokyo2012
WordCamp Tokyo2012 handson Portfolio
WordCamp Tokyo2012 handson Portfolio
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
Yat-wbnara201602
Yat-wbnara201602
IA2010 - アジャイル時代のWeb解析事例
IA2010 - アジャイル時代のWeb解析事例
WordPress初心者テーマ作成勉強会
WordPress初心者テーマ作成勉強会
今やWeb制作者じゃなくなった私の仕事実態
今やWeb制作者じゃなくなった私の仕事実態
X Design Academy
X Design Academy
知っておきたい「Adobeソフトを選び、使いこなすポイント」
知っておきたい「Adobeソフトを選び、使いこなすポイント」
Adobe experience designのプロトタイプをbehanceへ
Adobe experience designのプロトタイプをbehanceへ
SharePointアドイン開発 Line風Chat アドイン
SharePointアドイン開発 Line風Chat アドイン
An example of how to make the accessibility ready theme
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.
アクセシビリティ対応のテーマを作る時に ぜひ参考にしてください。 ご清聴ありがとうございました。
Télécharger maintenant