#15 【字幕あり】「ユーザーと一緒に進めるアクセシビリティ 〜1年でアクセシビリティを組織に浸透させたnoteの取り組み〜」仙田 真郷(note株式会社)
note が短期間で機能的にも組織的にもアクセシビリティが進んだ要因は、多くのユーザーインタビューを実施したことにある。note でなぜアクセシビリティに注力するに至ったか、どのようにユーザーリサーチを実施し、それを社内に広め、活用したのかについて解説している。
Webアクセシビリティの参考資料まとめ
note が短期間で機能的にも組織的にもアクセシビリティが進んだ要因は、多くのユーザーインタビューを実施したことにある。note でなぜアクセシビリティに注力するに至ったか、どのようにユーザーリサーチを実施し、それを社内に広め、活用したのかについて解説している。
弁護士ドットコムは、ロービジョンの方を呼んでユーザーテストを行い、検証結果に基づき改善を進めている。ロービジョンの方がサイトを利用する上で感じた問題点として、見えづらさが挙げられた。そのため、コントラストを判定するツールを使用することが重要である。また、重要でない情報は色だけでなく、文字のサイズやコントラストを下げることでも表現できるが、ロービジョンの方には意図が伝わりにくいため注意が必要である。
弁護士ドットコムでは、全盲の方に続いて「弱視(ロービジョン)」の方をユーザーテストに招いた。ロービジョンの状態によって見え方は異なるため、画面を拡大したり、色を反転させたりすることで対処している人もいる。また、iPad のように本体を手に持って顔に近づけることができるデバイスの方が、PC よりも拡大縮小がしやすく、動画を見るのにも適しているという。
freee 株式会社の中根雅文氏を招いて行った弁護士ドットコムのユーザーテストでは、スクリーンリーダーを使った検索での問題点が明らかになった。また、カルーセルの理解や Web フォームの問題点も指摘された。テストで用意されたタスクを中根氏が実施する中で、同音異義語問題にも対処する必要があった。Google 検索結果には目には見えない見出しが設定されているため、スクリーンリーダーで見出しジャンプ機能を使用することで、検索結果の一覧に直接アクセスできることが分かった。
ユーザーテストの成功の 8 割は事前準備にかかっている。ユーザーテストの目的は、アクセシビリティ上の問題を発見し、サービスの改善を行うことと、支援技術の利用シーンを実際に見てもらうこと。リクルーティングやテスト会場、端末の用意、シナリオ作成、同意書と謝礼の用意など、ユーザーテストには準備が必要。ユーザー数や属性、募集方法も検討する必要がある。
日本視覚障害者 ICT ネットワーク (JBICT.Net) が 2022 年 4 月から 5 月にかけて実施した第 2 回支援技術利用状況調査の結果をまとめたもの。日本において、もっぱら視覚に障害がある人を対象に、どのような環境で Web を見ているのか?がわかる。
日本視覚障害者 ICT ネットワーク (JBICT.Net) が 2021 年 4 月から 5 月にかけて実施した第 1 回支援技術利用状況調査の結果をまとめたもの。日本において、もっぱら視覚に障害がある人を対象に、どのような環境で Web を見ているのか?がわかる。
2021 年に公開された note の新エディタにおいて、キーボード操作のみでの文字の太字化やスクリーンリーダーによる適切な読み上げが可能になるなど、アクセシビリティが大幅に向上した。この改修により、マウス操作が難しいユーザーや片手しか使えないユーザー、スクリーンリーダーを使用しているユーザーにも利便性が向上した。note では、ユーザーリサーチを通じてアクセシビリティの向上に取り組み、ユーザーの声を取り入れることが重要であると考えている。
オープンソースの Windows 向けスクリーンリーダーである NVDA を使用して、アクセシビリティー チェックの手順を解説している。
macOS には VoiceOver というスクリーンリーダーがあり、視力や文字読み取りに困難を持つユーザーに役立つ。この記事では、ウェブ開発者向けの macOS 版 VoiceOver チートシートを紹介し、便利機能も解説している。PDF 版も提供されている。
様々な Web コンテンツをスクリーンリーダーがどのように読み上げるのかを動画で紹介。いろいろな HTML コードのサンプルを使って、実際にどのように読み上げられるのかを分かりやすい解説とともに提供している。
スマホのスクリーンリーダー(VoiceOver、TalkBack)の基本的な操作方法がまとめられた PDF ファイル。
デスクトップ PC のスクリーンリーダー(VoiceOver、NVDA)の基本的な操作方法がまとめられた PDF ファイル。
アクセシビリティのショートカット設定から、具体的な使い方が紹介されている。
中級編として、ローターの活用方法。見出しジャンプの例などが紹介されている。
iOS 版 VoiceOver の基本的な使い方が解説されている。
iOS 版 VoiceOver のズーム機能とローター機能、一文字ずつ読み上げる詳細読みについて紹介されている。
PC-Talker のマニュアルをダウンロードできる。操作方法の参考に。
NVDA のチートシートが PDF とパワーポイントファイルで公開されている。
NVDA を使って Web サイトを閲覧する時に知っておくとよいキーボード操作がまとめられている。
デスクトップ版 VoiceOver の使い方が紹介されている。
デスクトップ版 VoiceOver のクイックナビで要素間をジャンプする方法と、トラックパッドコマンダーの使い方が紹介されている。
JAWS 公式のドキュメント集。操作方法や AS 情報が掲載されている。
TalkBack の起動方法と、基本的な Web 閲覧操作について。