WordPressのアクセシブルなサイト用テーマ「Dog Channel」を作成しました。このテーマは、テーマ「Twenty Seventeen」の子テーマになります。

WordPress公式ディレクトリに掲載していただいています。

PC&iPad&iPhoneのスクリーンショット

テーマ「Dog Channel」の特徴及び仕様

このテーマはテーマ「Twenty Seventeen」の子テーマで、可愛い犬をイメージしたアクセシブルなサイト用のテーマになります。
背景イメージを変更すると、様々なサイトで使用していただけます。トップページは、背景画像が全画面表示されるようになってます。

ドロワーメニューを開いた時は、「×　メニュー」ボタンを選択するまではフォーカスはグローバルナビゲーション内のみの移動になります。

マシンリーダブルな Schema.orgに対応する為、Microdataを使用し、パンくずリストを schema.org の仕様に従って記述しています。

テーマ「Dog Channel」のダウンロード

テーマ「Dog Channel」のダウンロードは、WordPress公式ディレクトリの「Dog Channel — Free WordPress Themes」で行ってください。(無料です)

テーマ「Dog Channel」のアクセシビリティについて

• WCAG 2.0の1.4.3 最低限のコントラストに関する達成基準(レベルAA)の基準を満たしています。(カラーチェックツール colour contrast Analyser を使用)
• WCAG 2.0の2.1.1 キーボード操作に関する達成基準(レベルA)の基準を満たしています。
• グローバルメニューとパンくずリストで選択されているメニューには、aria-current属性を付けています。
• ドロワーメニューを開くと、全画面表示になるので、フォーカスを見失うことがないようメニュー内をTabキーで移動するようにしています。（フォーカスは下の元のページに移動しません）ドロワーメニューを閉じると、元のページのフォーカスが維持されます。

親テーマ「Twenty Seventeen」で実装されているアクセシブルな点

• ナビゲーションスキップが設置されてます。
• ドロワーメニュとドロップダウンメニューの開閉の状態は、aria-expanded属性を使用して示されてます。aria-expanded属性に対応しているスクリーンリーダーでは、開閉ボタンにフォーカスした時に「折り畳み」「展開」のように読み上げます。
• スクリーンリーダー利用者のかたが、そこに何があるのかわかりやすいよう、ページネーションやサブメニュー等各箇所にその箇所を表すラベルが設置してあり、視覚的には表示しないように設定されています。

表示と読み上げ確認について

テーマユニットテストデータをインポートして下記の環境で表示確認等してます。

WordPress バージョン4.9.4
OS:Windows 7

ブラウザ：

Internet Explorer11(+ ズーム200% 時と文字サイズ「大」「最大」)

Firefox59.0.1(+ ズーム200% 時と文字サイズだけ変更×6 )

GoogleChrome65.0.3325.1621(+ ズーム200% 時)

OS:Windows 10
ブラウザ:

Edge41.16299.248.0(+ ズーム200% 時)

Firefox59.0.1(+ ズーム200% 時と文字サイズだけ変更×6 )

GoogleChrome65.0.3325.1621(+ ズーム200% 時)

OS:Mac OS High Sierra 10.13.3
ブラウザ:

Safari11.0.3(+ ズーム200% 時と文字サイズだけ変更×4 )

Firefox59.0.1(+ ズーム200% 時と文字サイズだけ変更×6 )

GoogleChrome65.0.3325.1621(+ ズーム200% 時)

タブレット:

iPad iOS 11.2.6 Safari

スマートフォン:

Xperia Android8.0.0 - GoogleChrome65.0.3325.109,Firefox59.0.1

iPhone7 iOS 11.2.6 Safari

音声読上げ確認に使用した音声読上げソフトとブラウザ

PC-Talker 7 + Win7 Internet Explorer11

NVDA 2018.1jp + Win7 Firefox59.0.1

Voice Over + iPad iOS 11.2.6 Safari

TalkBack6.1.0.186797687 + Xperia Android8.0.0 GoogleChrome65.0.3325.109

カラーチェックツール

colour contrast Analyser

Windows7のInternet Explorer11では、リンク画像のhover時スタイルが非対応になります。

テーマのインストール方法

ダウンロードしたファイルを解凍し、サーバーにFTPで wp-content/themes/ にアップロードしてください。管理画面の「外観」の中の「テーマ」をクリックするとテーマ「Dog Channel」が表示されるので[有効化]をクリックしてください。テーマ有効後、 外観>カスタマイズ>ホームページ設定でホームページの表示を「固定ページ」にし、その下のホームページで「ホームページ」を選択し投稿ページで「ブログ」を選択してください。 (トップページのみ背景画像が全画面表示になります)

著作権

テーマ「Dog Channel」のライセンスはGPLv2 or later になります。詳しくは、license.txtをお読みください。

感想

親テーマの「Twenty Seventeen」がアクセシブルなテーマだったので、アクセシブルにする為の作業には時間がかかりませんでした。私は、テーマ「Twenty Seventeen」がアクセシブルとは知らず自分が作りたいデザインに一番近かったからという理由でこのテーマを選んだのですが、作り出してアクセシブルだという事が分かり「ラッキー」だと思いました。

親テーマがアクセシブルだと私のようにアクセシブルだと知らないでそのテーマを使う人も自然とアクセシブルなサイトが作れるでしょうし、アクセシブルなサイトやテーマを作成する時は、作業時間が短縮され効率よく作業する事が出来ます。このような事からもCMSのダウンロードパッケージにアクセシブルなテーマが入っている事は、非常に重要な事だと改めて実感しました。