本文へ


Geeklogデフォルトテーマのスクリーンリーダ用非表示テキストについて

  • 2019年February12日(Tue) 11:50 JST

久しぶりにGeeklogのデフォルトテーマのアクセシビリティ的修正を行いGeeklogの本家にブルリクを送ったところ 変数名とクラス名の修正だけですぐにマージしてもらえました。

修正の内容ですが、私が作っていたGeeklogのアクセシビリティ配慮型テーマには 視覚的情報を得られる人には理解できてもスクリーンリーダー利用者には理解できない箇所にスクリーンリーダーでは読み上げ視覚的には非表示にする設定をしていたのですが、 デフォルトテーマにうまく反映されていなかったので今回反映させる為の追記修正をしました。

もちろんテキストを視覚的に非表示にせずテキスト(情報)は表示するのがベストなのですが、Geeklogサイト構築時どうしても視覚的に非表示にしないといけない場合は、 classにgl-screen-reader-onlyを指定すればスクリーンリーダーでは読み上げるけど画面上では表示されなくなります。

WordPressのアクセシビリティ対応テーマでは、作成時の必須事項に「Screen Reader Text」 の記載があるように、テーマ「Twenty Seventeen」にはスクリーンリーダー用のテキストが入っています。なので、私が子テーマ「Dog Channel」を作った時追記してスクリーンリーダー用にテキストを入れる事はありませんでした。

GeeklogもWordPressのようにデフォルトのテーマの必要な箇所に(情報過多及び冗長にならないよう注意)スクリーンリーダー用テキストが入っていればサイト構築の際、それについての知識が無くても スクリーンリーダー利用者が理解できないという状況を防げるので、今後も必要な箇所には追記するようにしていきたいと思います。