公式リポジトリにテーマを登録したのは今回で２度目。
前回は2年くらい前かな、その時の感覚でやってたらかなり基準が変わってましたorz
中でも苦戦したのがキーボードナビゲーションです。
レビューする人もよるのかな～。
キーボードナビゲーションなんて注意してるテーマは少ないよね？
WordPressテーマを作ろうとする人なんてそうそういないだろうけど、キーボードナビゲーションは意識してるかな？
ってことで、キーボードナビゲーションってそもそも何なのかについてから、実装のコツまでメモします☆
キーボードナビゲーションとは？
「Tab」キーでページ内の要素やリンクを辿れるやつです。
ページ内でキーボードの「Tab」キーを押していくと、フォーカスが次々移動していくのが分かると思います。
これは普通の人は使わないだろうけど、必要な人はいるわけで。
アクセシビリティっていうのかな。
キーボードナビゲーションを意識して作られている国産テーマはほんの僅かだと思う。
これを一部だけではなく、全てで対応するっていうのがね。
キーボードナビゲーション実装で苦労したところ
メニューリストです。
サブメニューとしてマウスホバー時にしか表示されないメニューあるでしょ？
あとはドロワーメニューっていうやつ？「三」みたいなアイコンでクリックするとにゅるっと出てくるようなメニューもね。
これらはマウスをホバー、または「三」をクリック（タップ）しないと視覚的にメニューを確認できないけど、それじゃ一部の人には不便なんです。
そこでキーボードナビゲーションの出番。
キーボードナビゲーションでフォーカスした時にメニューが開けば、そういう方でも簡単に隠れたメニューが確認できると。
確認方法
まずはアドレスバーをクリックしてください。
次にキーボードの「Tab」キーを押してください。
するとページ内のリンクや一部の要素にフォーカスされていくと思います。
これで、隠れたメニューにフォーカスした時に、開かなければなりません。
このブログではGoogleクロームのデベロッパーモードでスマホサイトを表示させてみると、ドロワーメニューもフォーカスで開くのが確認できると思います。
隠れたメニューにキーボードナビゲーションを適用させるコツ
CSSで実装したんだけど、ポイントになるのは、
- focus
- focus-within
この辺です。
「focus」はそのまんまフォーカスされた時のスタイルを指定します。
「focus-within」は、
それ自身が :focus 疑似クラスに該当するか、子孫に :focus に該当する要素がある要素を表します。
https://developer.mozilla.org/ja/docs/Web/CSS/:focus-within
という感じです。
スキップリンクって知ってる？
これも知らなかったことなんだけど、WordPressには「スキップリンク」という機能があり、これが正常に動作することが公式リポジトリに登録される条件にもなっています。
実装方法はこちらをみてみてください。
これも意識しないと対応できないよね。
テーマ作者はアクセシビリティをどう考えるか。
もちろん対応した方がいいのは間違いないけど、やるとなると難しい一面も。
テーマ作りに慣れてきたら、アクセシビリティにも積極的に取り組んでいきたいところだね(*´ω｀*)
あとがき
WordPressテーマを作れるようになると、公式に登録してみたくなるものです。
なかなかガイドラインが一般的に浸透していないので、学び方によってはまるで別物を作るように感じるかも知れません。
でもしっかり学んでいけば、必ず登録できると思います。
テーマを公式に登録するメリットは、
- 正しい知識を得られる
- 世界中の人が使ってくれるという充実感
- 自身に繋がる
- 達成感がある
などなど、わたしは有意義なものだと考えています。
今回「BunnyPressLite」を登録したのは2回目で、前回はおよそ2年前。
2年前登録した時のガイドラインとはかなり違う部分があって、こんなに進化しているのか～としみじみ思いました。
審査開始から実際に登録されるまではなんだかんだで半年くらいかかったけどね（笑
審査してくれる人はボランティア。
早くして！なんて決して言えないし、色々丁寧に教えてくれるのは感謝しかありません。
「BunnyPressLite」は2020年4月に公式リポジトリに掲載され、現在までの約１ヵ月半で1000以上のアクティブインストールがあります。
もっとダウンロードされているテーマは他にたくさんあるけど、わたしの中ではこの数字を見ると嬉しくなります♪
コメントを残す