見出し画像

NVDAの読み上げを強化!アクセシビリティ向上 2023年まとめ

noteは2021年からアクセシビリティの向上に取り組んでいます。

約3年間アクセシビリティ向上と向き合ってきた結果、クリエイターからの反響も増えてきました。ありがたいことに、数あるウェブサイトの中でも「noteが一番使いやすい」と高評価をいただくこともあります。

今までのカイゼンに加えて、2023年はさらに幅広い方々にnoteをお使いいただけるように、Windows向け音声読み上げソフトNVDAの操作も、noteで快適に利用できるようにしました。

この記事では、2023年に行ったアクセシビリティ向上の一部を紹介していきます。

2023年に行ったアクセシビリティ向上への取り組み

NVDAの対応強化

これまでnoteではMacの音声読み上げ機能であるVoiceOverを中心にカイゼンを行ってきましたが、2023年はNVDAへの対応強化に特に力を入れました。

NVDAへの対応がまったくされていないわけではありませんでしたが、細かな部分で至らない点や使いづらい機能がありました。

NVDAへの対応箇所の洗い出しをSlackでやりとりしている画像
NVDAへの対応箇所の洗い出し

具体的には、NVDAによる操作時にフォーカスが意図しない挙動をしている箇所などがあり、場合によっては操作が進まない機能もありました。

そこで、まずは全社員がNVDAのチェックができるように、実機のWindowsの用意に加えて、リモート上にも環境を構築をしました。これによってだれでもWindows環境にリモートでアクセスができるようになりました。

ランドマークを検討するために項目を決めている画像
キーボード操作に対応するためのランドマーク検討

チーム全員がWIndows環境を使用可能になったことで、NVDA操作でのチェックが格段にしやすくなりました。

その成果もあり、NVDAでの操作によるキーボードのフォーカス移動などの改善を行うことができ、noteを快適に操作できる幅が広がりました。

アクセシビリティに関する開発のレビュー項目を強化

アクセシビリティ向上を行う中で壁になってしまうのが、社内への文化の浸透です。

開発する際に、アクセシビリティを意識したうえで実装をしないと、新機能がでる度に追加での修正が必要になってしまいます。

そこで、社内のだれもがアクセシビリティ向上に取り組みやすくなるように、まずはレビュー項目の見直しを実施しました。

チートシートのキャプチャ画像
チェックがしやすいチートシートを作成

レビュー項目を具体化することによって、開発者とレビュー者が迷いなく作業に取り掛かることができます。まだまだ見直しが必要な段階ですが、以前よりはアクセシビリティ向上に取り組みやすくなったはずです。

ただし、あくまでタイミングと手段を提供しただけであるため、これからも全社員に向けてアクセシビリティ向上の重要さを伝えていく必要はあると考えています。

チームメンバー以外も巻き込む

アクセシビリティ向上は全社員で取り組むべき活動であるため、会社として文化を根付かせる必要があります。そのため、全社会での発表や社外への発信は、チームとして欠かさずに行ってきました。

Slackでアクセシビリティチームの定例に誘っているキャプチャ画像①
Slackでアクセシビリティチームの定例に誘っているキャプチャ画像②

2023年は、さらにミクロな観点での取り組みとして、アクセシビリティに興味がある方をチームの定期ミーティングに誘うことに。時間はかかる活動ではありますが、一人ひとりの理解度を一気に上げることができました。

また、エンジニアだけではなく、公式記事の執筆や編集を担当しているディレクターなどに積極的に声をかけました。様々な職種も巻き込みながら進めることが重要です。

アクセシビリティの活動を広げるために「アクセシブルですねぇ〜」というスタンプを作ったときのSlackキャプチャ画像

また、「アクセシブルですねぇ〜」というスタンプを制作し、アクセシビリティ活動が目につきやすいようにも工夫しました。誰かがスタンプを活用した際には、定期ミーティングへの誘致にもつながっていきます。

Slackでアクセシビリティチームのチャンネルに相談が来たときのキャプチャ画像

地道に活動を続けてきたことで、アクセシビリティチームのSlackチャンネルに、相談やバグ報告が集まってくるようになりました。文化への浸透に近道はないため、ゆっくりでも少しずつ続けていくしかないのかもしれません。

その他の活動

上記の2点以外にもさまざまなアクセシビリティ向上を行ってきました。その一部を紹介します。

  • 視覚障害者が操作しやすいようカラー変更

    • エディタの目次テキストの調整

    • コントラストが足りていなかったクリック要素の改善

    • アプリのカラー設計をウェブと揃えることでコントラストを担保

  • キーボード操作をしやすくするための調整

    • 目次開閉ボタンの当たり判定の改善

    • クリエイター名とスキアイコンのマージン調整

アクセシビリティ向上を続けたことで社外への登壇なども増加

視覚障害者向けイベント「サイトワールド」への登壇

視覚障害者向けイベントであるサイトワールドの「NVDA相談会」で登壇も行いました。講演ではアクセシビリティ向上への取り組みの発表や、NVDAでnoteを操作する様子の実演を行いました。今まで積み重ねてきたカイゼンや発信が成果として現れた形です。

サイトワールドに登壇したときに参加者が多くいたときの画像
登壇している様子

実際の登壇内容や会場の様子は、noteアクセシビリティチームの仙田が公開しているので、ぜひご覧いただければと思います。

令和トラベルさんへアクセシビリティはじめかたレクチャーを実施

noteを利用いただいている令和トラベルさんからお誘いがあり、アクセシビリティのはじめ方を考えるレクチャー会を実施しました。

令和トラベルさんのオンライン講習でnote社員が登壇している様子
noteにおけるアクセシビリティの考え方。自分自身も対象者であることを意識している。
※ 画像は令和トラベルさん掲載許可済

noteにおけるアクセシビリティの考え方。自分自身も対象者であることを意識している。

レクチャー会では、チームを立ち上げた方法やアクセシビリティ向上への考え方、取り組みやすいアクセシビリティ施策などについて講義しました。

また、令和トラベルさんからレクチャー会にお声がけいただいたのは、上記のマガジンを見ていただいたのがキッカケでした。アクセシビリティチームの地道な改善と社外への発信が実を結んだ瞬間です。

詳しい講義内容は令和トラベルさんのnoteアカウントでも記事化しているので、ぜひご覧ください。

アクセシビリティを社内で浸透させるときの注意点

この記事の途中で、「会社として文化を根付かせる必要がある」と書いたのですが、周りを巻き込んでいく際の注意点があります。

それは、「アクセシビリティ推進をしている人たち」と「取り組んでいない人たち」では期待値に大きなギャップがあることです。我々も最近まで気づいていない観点でした。

freeeさんのイベントでnote社員が登壇している様子

この溝に気付いたのは、freeeさんのオフィスでアクセシビリティについて、デザイナーの沢登が登壇したときです。

イベントで、他社のPRや人事の方々と話をしてみると、「具体的なアクションがイメージできない」「自身の業務にどう組み込むかのイメージができない」など、アクセシビリティ向上にまだ取り組んでいない方たちからの率直な意見を聞くことができました。アクセシビリティを推進している我々側では気づくことができない視点です。

取り組み始める前の方たちでは、アクセシビリティ向上を進める意義は理解していても、その先に課題感があるのだと気づきました。推進側と推進される側の大きな括りで考えていましたが、職種も違えば目的も変わってきます。一人ひとりと対話してお互いの目的とすり合わせていくことが大事なのだと改めて知ることができました。

アクセシビリティ向上に取り組んで、3年目になりますが、まだまだ学ぶべきことが多いのだと実感したできごとです。

▲登壇の資料はこちら

アクセシビリティへの取り組みは終わらない

2023年はNVDAの改善に加えて、登壇やレクチャー会など社外への活動を広げてきました。しかし、アクセシビリティ向上に終わりはありません。

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

アクセシビリティ向上に取り組むことは、すべてのクリエイターに還元できるカイゼンだと考えています。プロダクトを作り上げていく中で、社内外にもさらにnoteのアクセシビリティ向上を浸透させていきます。

noteのアクセシビリティ向上を進めてくれるメンバーも募集しております。だれもが創作ができる世界を一緒につくりあげていきましょう。

最後まで読んでくれた方へ。note社の様子や採用情報などをX(Twitter)で発信しています!