アクセシビリティに配慮した WordPress テーマ「Luxeritas」

公開日2018年8月20日更新日

WordPress を利用してサイトを制作する際にどの WordPress テーマを選ぶかというのは頭を悩ませるところです。

WordPress Theme Luxeritas

シンプルで読み込みの速いのは無いか、国産テーマなら尚良いなと詮索していた所、何やら Luxeritas というテーマが評判良さそうだという情報が。
どれどれ、公式サイトを覗いて見ると、なるほど文面からも製作者さんの自信が伺えます。
そこで目を引いた取り組みが

[「高齢者や障害者にも優しい、サイトのバリアフリー化」

サイトのバリアフリー化とは

適切に role 属性を挿入する事により、スクリーンリーダー等でサイトを閲覧した際のウェブアクセシビリティを向上させられるとの事です。
これがテーマを選ぶ決め手になる人もそうは居ないと思いますが、ここでアクセシビリティの情報も発信して行こうという私には大きな理由となりました。

テーマが決まったは良いものの本番はここから。
実際に設定を見てみるとかなり詳細なカスタマイズが出来そうです。
設定が多過ぎて何処に何があるか覚えるのが大変ですが
左メニューの「Luxeritas」→「その他」タブに有りました。
「バリアフリーのための role 属性を追加」なるものが。

Role 属性の確認

「バリアフリーのための role 属性を追加」にチェックを入れて保存、トップページのソースを見てみると

role=”banner”
role=”main”
role=”contentinfo”

の3つの Role 属性が付加されているのが確認出来ました。
iPhone の VoiceOver を使ってトップページを読ませてみると、Role 属性が付加された位置で「Landmark」と追加して読み上げられます。
Windows の PC-Talker でも確認してみると、それぞれ、「バナーランドマーク」「メインランドマーク」「コンテンツ情報ランドマーク」と追加情報が読み上げられました。

音声を頼りにネット閲覧をしている人にとっては、何処に欲しい情報が有るのか、見出しやランドマークを辿ってアクセス出来る情報を付加する事は有用かと思います。
テーマをインストールしただけではスクリーンリーダーへの対応はまだ不十分で、特にアイコンフォントが読み上げられない事への対応や、記号を視覚的にでは無く文字情報として伝える等の修正をする必要が有ります。
それらのカスタマイズ方法も私自身勉強しながらここで紹介していけたらと思います。