リブログ記事スタッフブログのアクセシビリティ改善について
スタッフブログでお知らせした通り、6/1に、スタッフブログのデザインをリニューアルしました。実はアクセシビリティ的にも、いくつかアップデートをしているところがあります。ブログデザインのコントラスト比の改善これまでのスタッフブログより、本文のテキスト色に、ほんのり青みがかっていることに気づいた方はいるでしょうか。実はスタッフブログの配色を少し変更しています。アクセシビリティのガイドラインであるWCAG2.1では、背景色とテキスト色のコントラスト比は4.5:1以上が望ましいとされています。達成基準 1.4.3 コントラスト (最低限) - Web Content Accessibility Guidelines (WCAG) 2.1今のカラーパレットでは、白背景色の上でないと、コントラスト比を高いままに文字を配置することができませんでした。そのため、デザインの幅が狭まり、モジュールの変化をつけることが難しい…ということが起きていました。そこで今、Amebaブランディングチームの中で、カラーパレットの見直しを行っています。Amebaブログ全体に適用する前に、今回はそのお試しも兼ねて、少しだけお披露目されたのでした。※開発中のカラーパレットの画面。今後変更の可能性があります。たとえばこういうボタンの組み合わせができるようになっています。これよりさらに薄めの灰色文字でも、コントラスト比は高いままに背景色のパターンが選べるようになりました。今回変更したのは、ブログデザインでカスタマイズ可能な範囲のものです。Amebaブログの記事全体の配色はこれからの課題です。色の検討については数々の試行錯誤があるので、詳しい話は今後デザイナーに解説してもらおうと思います。ブログタイトルのスクリーンリーダーでの読み上げの工夫今回のリニューアルで、ヘッダー画像を変更しています。ヘッダー画像の中にタイトル文字も含まれているので、元からあるブログタイトルと説明文はCSSカスタマイズ機能で非表示にしています。参考: Amebaヘルプ｜ブログデザインをカスタマイズしたいですリニューアルしたスタッフブログのヘッダー画像部分のスクリーンショット 。元々あったテキストのブログタイトルと説明文の代わりに、「Staff Blog by 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の 1.1.1 画像に代替テキストを提供する 3.1.5 難しい文章表現を避けるから、一部抜粋した内容になっています。スタッフブログを読む方は年齢も特性も様々です。困ったことがあった時に読むという方もたくさんいます。誰が読んでもわかりやすい文章にするべく、日々ガイドラインも見直していきます。今回はスタッフブログにまつわるアクセシビリティについて、少しだけご紹介しました。Amebaでは、他にも様々なアクセシビリティの取り組みを続けています。今後もこちらのブログで発信していきたいと思います。
