Geeklogのアクセシブルな新テーマ「plain」をリリースしました。

2019/03/05 16:56 JST

ブログ用Geeklog2.2.0対応のアクセシブルなテーマ「plain」を作成しました。

アクセシブルなGeeklogテーマ「plain」は、Geeklog2.2.0次バージョンリリース前の「denim」をベースに作成したテーマです。PC2カラム、タブレットスマホ１カラムのレイアウトになります。

テーマplainのスクリーンショット画像
PC&iPad&iPhoneのスクリーンショット

デモサイトは、plain - みるくが新しいテーマを作成してます。になります。

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

横幅1024以下の環境では、WAI-ARIAを使用したドロワーメニュー(Progressive Hamburger by @heydonworks)を使用させていただいていいます。(よりアクセシブルになるよう少し改良しています)

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

facebookの窓等横幅を絶対値で指定している箇所を追加される場合、その数値(横幅)より小さいサイズのデバイスで閲覧すると横スクロールバーが出てしまうかレイアウトが崩れる可能性があるのでご注意ください。(ご自身で横幅を調整してください)

記事及び静的ページ用テーブルのスタイルを設定していますが、管理画面及びプラグインに影響しないようtable要素にclass="default"を付けて使用してください。

サイト名のフォントスタイルとサイズは、日本語に合わせて設定しています。(デモサイトは、サイト名が英語なのでフォントサイズを変更しています)

テーマ「plain」のダウンロード

テーマ「plain_for_2.2.0」のダウンロードは、GitHub/milk54/geeklog-plainからどうぞ。

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

WCAG 2.0の達成基準1.4.3 コントラスト (最低限)(レベルAA)の基準を満たしています。(カラーチェックツール colour contrast Analyser を使用)
WCAG 2.0の達成基準2.1.1 キーボード(レベルA)の基準を満たしています。
WCAG 2.0の達成基準1.4.4 テキストのサイズ変更 (レベルAA)の基準を満たしています。
ナビゲーションスキップを設置しています。 (ページを表示した後Tabキーを押すと表示されます)
尚、横幅11024以下の環境ではドロワーメニューを使用しているので、ナビゲーションスキップは非表示且つスクリーンリーダーで読み上げないように設定してます。
ドロワーメニューを開閉するボタン(アイコン)部分は、視覚的には「menu」「close」とCSSで表示させ、スクリーンリーダーでは「ナビゲーションメニュー」と読み上げる様に設定しています。また、a要素がボタンである事をWAI-ARIAを使用して示しています。
ドロワーメニューの開閉の状態は、aria-expanded属性を使用して示しています。aria-expanded属性に対応しているスクリーンリーダーでは、開閉ボタンにフォーカスした時に「折り畳み」「展開」のように読み上げます。
ドロワーメニュー使用時のグローバルナビゲーションは、閉めている時は視覚的に表示せず、スクリーンリーダーでも読み上げないようにし、aria-hidden="true"を使用して表示していない事を示しています。
ドロワーメニューが閉まっている時は、グローバルナビゲーションを視覚的にも表示させずスクリーンリーダーでも読み上げないようにしているので、下部にクローンを作成しています。クローンは視覚的には表示せずスクリーンリーダーでは読み上げる様にしています。
画面サイズが1024px以上の時、プラグインのカスタムメニューで第2階層のメニューを設定した際、WAI-ARIAを使ったアクセシブルなドロップダウンメニュー(Simple dropdowns by @heydonworksを使用させていただいてます)になるよう設定しています。（第2階層（1つのサブメニュー）までの対応）
上記のドロップダウンメニューの親要素のa要素にはaria-haspopup属性が記述され、子要素のul要素aria-hidden属性(サブメニューの表示時の値はtrueで非表示の時はfalseになります)とaria-label="submenu"が記述されるように設定しています。
グローバルメニューとパンくずリストの中で選択されているメニューには、aria-current属性が記述されるよう設定しています。

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

以下の環境で表示・動作・読み上げの確認をしています。

Geeklog2.2.0
OS:Windows 7

ブラウザ：: Internet Explorer11 ズーム 200% 時と文字サイズ「最大」時; Firefox65.0.1 ズーム 200% 時と文字サイズだけ変更 200% 時; GoogleChrome72.0.3626.109 ズーム 200%時

OS:Windows 10 ブラウザ:: Edge17.17134 ズーム 200%時; Firefox65.0.1 ズーム 200%と文字サイズだけ変更 200% 時; GoogleChrome72.0.3626.109 ズーム 200%時

OS:Mac OS High Sierra 10.13.6 ブラウザ:: Safari12.0.3 ズーム 200%時; Firefox65.0.1 ズーム 200%と文字サイズだけ変更 200% 時; GoogleChrome72.0.3626.119 ズーム 200%時

タブレット:: iPad iOS 12.1.4 Safari
スマートフォン:: Xperia Android8.0.0 GoogleChrome72.0.3626.105; iPhone7 iOS 11.2.6 Safari; iPhone5s iOS 11.2.6 Safari

トップページと記事詳細ページの音声読上げ確認に使用した音声読上げソフトとブラウザ: PC-Talker 7 + Win7 Internet Explorer11; NVDA 2018.4.1jp + Win10 Firefox65.0.1; Voice Over + iPad iOS 12.1.4 Safari; TalkBack7.2.0.220693075 + Xperia Android8.0.0 GoogleChrome 72.0.3626.105
カラーチェックツール: colour contrast Analyser

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

ダウンロードしたファイルを解凍し、「plain」フォルダをサーバーにFTPで layout/ にアップロードしてください。管理画面のコンフィギュレーションのテーマで「plain」を選択してください。

著作権

テーマ「plain」は、denimのライセンスに準じます。denimのライセンスは License:GPL-2.0+ です。

コメント (0件)

White Stage: https://white-stage.com/article.php/plain