アクセシビリティ強化の一環で、スクリーンリーダーによる読み上げのカイゼンを行いました

4月7日(水)に開催した「note7周年 事業発表会」で発表させていただいたとおり、noteはいま、アクセシビリティ強化に取り組んでいます。その第1弾として、noteをスクリーンリーダーで読み上げて利用するケースでのカイゼンを行いました。

スクリーンリーダーとは

スクリーンリーダーとは、視覚障害のある方がパソコンを使用する際に、画面の表示内容とキーボードからの入力内容を音声で読み上げてくれるソフトです。WindowsやMac、iOSやAndroidなど、多くのパソコンやスマートフォンのOSに標準で搭載されています。

スクリーンリーダーが読み上げるのは、Webページを作成する際に書かれたHTMLです。スクリーンリーダーが画面の表示内容を充分に読み取るためには、内容が伝わるような順序で、適切な要素を使ってHTMLをマークアップすることが重要になります。

スクリーンリーダーに関する5つのカイゼン

今回のカイゼンでは、視覚障害のある方に画面の内容がより伝わるよう、スクリーンリーダーが読み取れる情報の修正や追加を行い、機能を理解したり操作が可能になったりする箇所を増やしました。具体的には、以下の5つのカイゼンを行いました。

1. ヘッダー箇所から検索操作が可能に
これまでは、検索窓に何か入力したときに表示されるクリエイター候補や「全体を検索」の箇所にスクリーンリーダーキーボードのフォーカスが当たっていませんでした。これらをボタンとして認識するようカイゼンし、スクリーンリーダー利用時でも、検索窓から全体検索やクリエイターの記事絞り込みなどの検索操作ができるようになりました。

2. アイコンの一部が日本語で読み上げられるように
これまでは、アイコンのみで表示しているボタンの読み上げが、そもそも読み上げられなかったり、読み上げが英語になっていたり、アイコンの見た目を表現した読み上げになっていたりと、分かりにくい記述の箇所がありました。今回、検索アイコン、通知アイコン、メニューなど、アイコンが配置されている箇所の一部が日本語で読み上げられるようになりました。

3. 目次の見出しレベル変更＋キーボード操作が可能に
これまでは、記事タイトルがh1なのに目次の見出しレベルがh4であり、文書構造として適切ではありませんでした。また、目次の各項目にキーボードフォーカスを合わせることができず、キーボードで操作できませんでした。これを、見出しレベルをh2に修正し、また各項目にキーボードフォーカスが合うようにし、スクリーンリーダー利用時も正しく操作できるようになりました。

4. アカウント設定ページでチェックボックスが操作可能に
アカウント設定ページの各設定項目に対して、スクリーンリーダーではチェックボックスの存在がわからず、操作できない状態になっていました。今回この点を改善し、各項目のチェックボックスの状態をスクリーンリーダーで認識し、オン/オフすることも可能になりました。

5. 本文内の見出しをh3からh2に変更
これまでは、記事タイトルがh1なのに、本文内見出しはh3になっており、見出しレベルが1から3に飛んでしまっていました。この本文内見出しをh3からh2に変更することで、スクリーンリーダー利用時も文書構造が理解しやすくなりました。この変更が適用されるのは新規作成分のみになりますが、作成済みの記事についても自動的にアップデートをかける予定です。

noteのアクセシビリティ向上について

今回のカイゼンは第一歩にすぎません。

noteには現在、読み書きはじめ、さまざまな機能にアクセシブルではない点が多く存在しています。色覚特性やロービジョン、上肢障害など、今回のカイゼンとは異なる方向でアクセシビリティを必要とするケースにおいても、noteらしくこまめにカイゼンし、都度お知らせしていきます。

今回、note社内に「アクセシビリティ カイゼンチーム」を立ち上げたほか、外部のアクセシビリティ専門家にも協力していただいています。ウェブアクセシビリティに関する書籍を出版し、ウェブアクセシビリティ基盤委員会 WG1委員としても活動されている伊原力也さんに協力いただき、社内でアクセシビリティに関する勉強会なども行っています。

また、スクリーンリーダーを使用している方たちへのインタビューをスタートしました。今回のカイゼンによって使い心地がどのように変わったかについて率直にお伺いし、今後のカイゼンに役立てていきたいと思います。

「もっとこうしてほしい」「こういうことができると助かる」など、アクセシビリティに関するご意見は、カイゼン目安箱で募集しています。

クリエイターの環境や心身の条件に関係なく、だれもが創作を楽しめる環境をつくるため、みなさんの声を参考にしながら、ひとつずつ、アクセシビリティの向上に取り組んでいきます。

機能に関するカイゼン・ご要望は こちら
その他のお問い合わせは こちら

▼アクセシビリティ向上にむけて、ご意見くださる方も募集中