アクセシビリティ強化の一環で、ページごとの見出し要素を揃え、スクリーンリーダーの読み上げをカイゼンしました

さまざまな利用者が、さまざまなデバイスを使い、さまざまな状況でウェブを使うようになった今、あらゆるウェブコンテンツにとって、ウェブアクセシビリティ(※) は必要不可欠な品質になりつつあります。

noteは、2021年からアクセシビリティ強化に取り組みはじめ、あらゆるクリエイターがnoteでの創作を楽しみ、その過程や作品を発表し応援しあえるように、プロジェクトチームを発足しカイゼンを進めています。

• スクリーンリーダーによる読み上げのカイゼン

• iOSアプリのアクセシビリティ強化

• Androidアプリのアクセシビリティ強化

今回は、主にGoogle Chromeなどのウェブブラウザでnoteにアクセスしたときのアクセシビリティをカイゼンしました。

見出し要素がページによって違う指定がされている部分を修正

ホーム画面ヘッダーの「ホーム」「注目」や、カテゴリのナビゲーション、通知などの見出し要素が、ページによって違う指定になっていたため、同じ構造になるように修正しました。

これによって、ウェブブラウザ版（PC、スマホ）でスクリーンリーダー(※) での読み上げができるだけでなく、iOSアプリのVoiceOver(※) での読み上げもわかりやすくなり、自分の探したいコンテンツにアクセスしやすくなりました。

今回修正したページは、以下の5箇所です。

1. お題・コンテスト ページ

2. マガジン ページ

3. ハッシュタグ ページ

4. 検索結果 ページ

5. アカウント設定 ページ

他のアクセシビリティ強化施策

他にも、ここ1〜2ヶ月の間で、以下のアクセシビリティ施策を行いました。

• Webブラウザでのスクリーンリーダーの読み上げ調整

  • 記事に貼り付けた埋め込みコンテンツ（Amazonなど）の画像の読み上げがわかりやすくなりました

  • YouTubeなどの動画コンテンツの読み上げに一部対応しました

  • クリエイターページ・マガジンページの「もっとみる」ボタンをスクリーンリーダーで読み上げるとき、フォーカスがきちんと戻るように修正しました

• iOSアプリでの見やすさ調整

  • ダークモードに切り替えたときの線や影の色を、見やすく調整しました

  • テキスト記事の編集中に、見出しや箇条書きなどの選択済みボタンの色を変更しました

• チーム・開発体制の刷新

  • 「lint」という自動でアクセシビリティをチェックできる仕組みを導入しました。アクセシビリティの考慮漏れに気づきやすくなります

  • 1月から開発メンバーが入れ替わり新体制になりました。メンバーを循環させることで、アクセシビリティチーム以外の視点も入れながら開発を進めていく予定です

noteでは、クリエイターのみなさんの声に真摯に向き合いながら、これからもアクセシビリティ向上を進めていきたいと考えています。インタビューに協力していただけるかたは、こちらのフォームからご応募ください。

これまでのアクセシビリティ施策は、以下のマガジンでまとめています。

アクセシビリティに関するご要望は、noteフィードバック にお寄せください。その他のお問い合わせは、リクエスト送信フォーム からお願いします。