AmebaのアクセシビリティについてページのOGP画像

 

ウェブアクセシビリティ試験結果アップデートのお知らせです。

 

継続的なアクセシビリティ改善を続けてきた結果、

この度以下項目に対して非適合から適合といたしました。

  • 1.3.1 情報や関係性を明確にする(A)
  • 1.3.3 感覚的な特徴だけで説明しない(A)
  • 1.4.1 色だけで伝えない(A)
  • 2.4.3 適切なフォーカス順序にする(A)
  • 2.4.7 フォーカスを見えるようにする(AA)
  • 4.1.1 HTMLを正しく記述する(A)

改善の一部を少しご紹介させていただきます。

 

「1.3.1 情報や関係性を明確にする」達成基準に対する改善

記事詳細ページの見出しレベル1(記事タイトル)の前に見出しレベル2(ブログタイトル)があり文書構造が適切ではなかったため、見出しレベル2を段落要素に変更しました。

 
見出しレベル1の前に見出しレベル2が表示されているスクリーンショット
 

「1.3.3 感覚的な特徴だけで説明しない」達成基準に対する改善

リブログ記事であることをアイコンだけで説明しており、代替テキストが指定されていませんでしたが代替テキストを指定することにより解決することができました。
 
リブログアイコンが表示されているブログ記事のスクリーンショット

 

「1.4.1 色だけで伝えない」達成基準に対する改善

タブがリンクであることを色だけ示していました。
リンクであることが色以外でも伝わるようにデザインを見直し解決することができました。
 
リンクが色だけで伝えられているタブの変更前と変更後のスクリーンショット
 

「2.4.3 適切なフォーカス順序にする」達成基準に対する改善

フォローフィードにある「もっと見る」ボタンを押下後にフォーカス位置が変わらないため追加で読み込んだフォローフィードにアクセスすることが難しい状況にありました。
 
「もっと見る」ボタンを押下後に追加で読み込んだ1記事目にフォーカスを当てることで問題を解決することができました。

 

「2.4.7 フォーカスを見えるようにする」達成基準に対する改善

いいねボタンのoutlineがCSSによって消されていた問題を修正しました。
 
フォーカスを受け取りoutlineが表示されるようになったいいねボタンのスクリーンショット
 

「4.1.1 HTMLを正しく記述する」達成基準に対する改善

同一ページ内にIDが重複して存在していた問題を修正しました。
 
他にもご意見や気になることがありましたら、IssueTwitterで教えていただければと思います。 Amebaブログでは引き続き、誰もがいつでも、迷わず「書く」「読む」「応える」ができるサービスを目指してアクセシビリティ向上に取り組んでまいります。