スタッフブログでお知らせした通り、6/1に、スタッフブログのデザインをリニューアルしました。
実はアクセシビリティ的にも、いくつかアップデートをしているところがあります。
ブログデザインのコントラスト比の改善
これまでのスタッフブログより、本文のテキスト色に、ほんのり青みがかっていることに気づいた方はいるでしょうか。実はスタッフブログの配色を少し変更しています。
アクセシビリティのガイドラインであるWCAG2.1では、背景色とテキスト色のコントラスト比は4.5:1以上が望ましいとされています。
達成基準 1.4.3 コントラスト (最低限) - Web Content Accessibility Guidelines (WCAG) 2.1
今のカラーパレットでは、白背景色の上でないと、コントラスト比を高いままに文字を配置することができませんでした。そのため、デザインの幅が狭まり、モジュールの変化をつけることが難しい…ということが起きていました。
そこで今、Amebaブランディングチームの中で、カラーパレットの見直しを行っています。
Amebaブログ全体に適用する前に、今回はそのお試しも兼ねて、少しだけお披露目されたのでした。
たとえばこういうボタンの組み合わせができるようになっています。
これよりさらに薄めの灰色文字でも、コントラスト比は高いままに背景色のパターンが選べるようになりました。
今回変更したのは、ブログデザインでカスタマイズ可能な範囲のものです。Amebaブログの記事全体の配色はこれからの課題です。
色の検討については数々の試行錯誤があるので、詳しい話は今後デザイナーに解説してもらおうと思います。
ブログタイトルのスクリーンリーダーでの読み上げの工夫
今回のリニューアルで、ヘッダー画像を変更しています。ヘッダー画像の中にタイトル文字も含まれているので、元からあるブログタイトルと説明文はCSSカスタマイズ機能で非表示にしています。
参考: Amebaヘルプ｜ブログデザインをカスタマイズしたいです
タイトルとブログ説明文の表示をただ隠してしまうと、スクリーンリーダーや検索エンジンのクローラーにとっては「何がこのページのタイトルかがわからない」状態になってしまいます。
ですので今回は、スクリーンリーダーでもタイトルと説明が読めるようにCSSをカスタマイズしました。
.skin-blogMainTitle, .skin-blogSubTitle {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}※このCSSは、2020年6月現在提供しているブログデザインを対象にしています。今後のAmebaブログのアップデートで適用できなくなる可能性があります
見た目だけでなく、音声でスタッフブログをご覧になっている方もたくさんいます。こういったテクニックを使うことで、Amebaらしい世界観とアクセシビリティを両立させています。
テキストガイドライン
今回のアップデートより少し前から、スタッフブログを書く際にテキストガイドラインを設けました。スタッフブログを書く人はAmebaブログチームに複数人いるので、その人ごとに表現や内容をぶらさないために作っています。
Amebaのイメージにあった文体・文調や日本語を正しく使うこと、という当たり前のものに加えて、アクセシビリティを高めるためのいくつかのチェック項目もあります。
- 漢字を5個以上続けて用いていないか？
- 一文が長すぎないか？（80文字まで）
- 画像に代替テキストは入っているか？
- 画像の代替テキスト は「画像で伝えたいこと」を文章化できているか？
こちらはAmeba Accessibility Guidelinesの
から、一部抜粋した内容になっています。
スタッフブログを読む方は年齢も特性も様々です。困ったことがあった時に読むという方もたくさんいます。誰が読んでもわかりやすい文章にするべく、日々ガイドラインも見直していきます。
今回はスタッフブログにまつわるアクセシビリティについて、少しだけご紹介しました。
Amebaでは、他にも様々なアクセシビリティの取り組みを続けています。今後もこちらのブログで発信していきたいと思います。