スクリーンリーダーがさらにつかいやすく！　アクセシビリティ強化に向けた6〜8月の取り組みをご紹介します

noteは「だれもが創作をはじめ、続けられるようにする。」というミッション達成に向けて、あらゆるクリエイターが創作活動をたのしめるよう、ウェブアクセシビリティ（※1）の向上に力を注いでいます。

2022年6〜8月は、社内勉強会でアクセシビリティに対する意識を社内に浸透させるほか、ウェブのカイゼン、ユーザーインタビュー、社内整備などをおこないました。この記事では、具体的にプロジェクトチームがどのような活動をしたのかをすべてご紹介します！

noteのアクセシビリティ強化

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

社内勉強会を実施し、160か所の既存エラーを修正

勉強会のテーマは画像のalt（代替テキスト）について

前回の社内勉強会では虚空ボタン（※2）の怖さを学び、実際に160か所以上の虚空ボタンを社内エンジニアが修正しました。しかしその後、新たな課題にぶつかることに。altの未入力を自動チェックする仕組みを導入すると、160か所相当のaltエラーを検出。これ以上新しいエラー対象をふやさないために、エンジニアやデザイナーへの意識の浸透が必要となり、今回の勉強会を開催しました。前回の社内勉強会、また虚空ボタンについてくわしく知りたい方は、記事「noteの虚空ボタンを顕現させる社内勉強会を開催しました」をご覧ください。

※2 視覚的にボタンは存在しているのに、スクリーンリーダー（※3）やキーボード操作では存在がないように振る舞うボタンのこと
※3 視覚障害のある方がパソコンを使用するさいに、画面の表示内容とキーボードからの入力内容を音声で読みあげてくれるソフト。WindowsやMac、iOSやAndroidなど、多くのパソコンやスマートフォンのOSに標準で搭載されている。

既存エラーを修正し、アクセシビリティを強化

勉強会後、スクリーンリーダーを利用している方にとって、よりnoteがつかいやすくなるよう、自動チェックでエラー検出された160か所のaltを修正しました。そのなかの修正事例のひとつをご紹介します。

課題として下記図版のようにプロフィール画像とクリエイター名が並んでいる場面で、プロフィール画像のaltに「note公式」と入力されていると、スクリーンリーダーが「note公式」と2回読みあげてしまうことがありました。そこでプロフィール画像のaltを空白にして、1回の読みあげになるよう修正することに！　この修正により、スクリーンリーダーによる冗長な読みあげを無くし、よりスムーズにnoteをおつかいいただけるようになりました。

20名以上が勉強会に参加。アクセシビリティの意識浸透へ

エンジニア、デザイナー、PMなど、コンテンツをつくる機会が多いチームを中心に、20名以上のメンバーが集まりました。各方面のチームからメンバーが参加することで、noteのさまざまな会議でアクセシビリティに関するコミュニケーションが生まれるキッカケになればうれしいです。引き続き、積極的に学んでいく機会をふやしていきます。

そのほかのアクセシビリティ強化施策

ほかにも6〜8月の間で、以下のアクセシビリティに関する施策をおこないました。

全6回のユーザーインタビューを実施

障害当事者の方々にご協力をいただき、全6回インタビューを実施しました。インタビューのなかでは、「いろんなブログを触っているが、とくにnoteは触りやすい」「感動的につかえるレベルになってきている」「進化していてうれしい」などの感想をいただきました。その一方で、カイゼンすべき課題も見つかりました。今後はこれらの知見を活かしながら、カイゼンを進めていきます。

• メニューやボタンを位置で記憶して操作しているため、頻繁に位置が変わると覚えなおす必要がある（弱視で、拡大操作をしている方）

• 画面を拡大して利用している場合、画面の一部しか見えない状態である。

  • iOS上でスクリーンキーボードのEnterキーを1回押すと、その時点でエディタ側に画面表示が移動し、スクリーンキーボードが画面外に見切れてしまう。このためEnterキーを2回連続で押すことができない

  • ページの左端を見ていると、ページ中央にあるボタンのラベルなどに気づけないことがある。何かあることに気づいても、見えている範囲を画面中央まで移動させねばならないこともある

機能のカイゼン

Web

• エディタの文中リンクにマウスを乗せると表示される吹き出しに、キーボード操作でもアクセスできるように対応

• エディタの見出し画像削除ボタンの読みあげが正しくなるように修正

• エディタのalt指定をするさいに、alt指定のコツを記載

• placeholder（入力フィールドに入る補助テキスト）を読みやすくするために、コントラストのA/Bテストを実施

  • ネガティブな影響が出ない、かつ補助テキストだとわかるように、コントラスト3.5:1へ修正

• ヘッダーの検索履歴にスクリーンリーダーでアクセスできるように対応

  • 下キーで履歴一覧にアクセスできるように対応

• 記事ページのタイトル下でスキ数が読まれない問題を修正

• 社内向けalt勉強会vol.2を受けて、note内altを160か所修正

• mabl（テスト自動化ツール）によるa11y（Accessibilityの略）自動チェック導入

• vuejs-accessiblity/alt-text（自動テストツール）で、a11y自動チェック導入

• storybook（UIカタログ） と jest-axe（自動テスト） によるアクセシビリティテストを実施

  • コンポーネント作成時に、自動でテストが走る仕組みを導入

iOS

• WebView系の画面でDynamic Typeと連動するように対応

  • iOSのアクセシビリティ機能で文字サイズを大きくすると、記事中も大きくなるように対応

社内整備

• 有志チームからCDO（Chief Design Officer）直下のプロジェクトに進化

  • より大きな活動ができるようになった

  • アクセシビリティのOKR（目標設定・管理フレームワークのひとつ）を設計

• 社内向けalt勉強会vol.2を開催

• QAチームとの連携し、品質という面での連携を開始

• 毎月、クラウド会計ソフトなどを提供するfreee株式会社が公開しているアクセシビリティー・チェック・リストを活用して課題点を抽出

noteではこれからも「だれもが創作をはじめ、続けられるようにする。」のミッション実現にむけ、アクセシビリティを向上していきます。

インタビューに協力していただける方は、インタビュー募集フォームからご応募ください。

これまでのアクセシビリティ施策や機能カイゼンの一覧は、以下からご覧いただけます。

カイゼンの最新情報は、公式Twitterでもお知らせしています。

機能に関するカイゼン・ご要望は noteフィードバック から。
そのほかのお問い合わせは リクエスト送信フォーム からお願いします。
※ noteは日々カイゼンを行っており、今後のカイゼンによっては、ページデザインが変わる可能性があります。そのため、今回おしらせした新機能の最新版については、ヘルプページをご確認ください。