スクリーン リーダーを使用して Web サイトのテストを開始する方法

アクセシブルな Web サイトを構築することの重要性に疑いの余地はありません。 これは、Web デザイン コミュニティで常に議論されているトピックです。 そして、私の意見では、ほとんどのデザイナーはそれを正しくしたいと考えています。

アクセシビリティは、何らかの形で私たち全員に影響を与えます。 ブログ投稿で使用される特定の単語であろうと、ページ間を移動する能力であろうと、それは重要です。

しかし、あなたがスクリーン リーダーのような支援技術に依存していない場合は、接続が切断される可能性があります。 特定の機能がユーザーに与える影響を見逃しがちです。 これは、そのコンテキストでテストしていないことが原因である可能性があります。

私はこの分野で苦労したことを認めます。 そして、他にもたくさんのデザイナーがいると確信しています。 マウスを使ってナビゲートする晴眼者としての私の特権は、アクセシビリティのいくつかの重要な側面を常に検討するように導くとは限りません。

確かに、私は自動ツールでテストしています。 フォントが読みやすく、色のコントラストが WCAG 基準を満たし、画像が ALT 属性を使用していることを確認します。 それらはすべて良いことです。 しかし、それらは Web サイトを使用する完全な経験を表しているわけではありません。

では、どうすれば物事を次のレベルに進めることができるでしょうか? スクリーン リーダーを使用して Web サイトをテストすることは、開始するのに最適な方法です。 何が関係しているのか、初心者向けに見てみましょう。 そこから、実験中に見つけたものを共有します。

スクリーン リーダー アプリを探す

プロセスの最初のステップは、適切なスクリーン リーダー アプリを見つけることです。 一部のオペレーティング システムにはデフォルトで含まれているため、それほど遠くまで移動する必要はないかもしれません。

Mac ユーザーは VoiceOver にアクセスできますが、Windows ユーザーはナレーターを利用できます。 さらに、事実上すべての OS で使用できるその他のオプションがいくつかあります。 私としては、オープンソースのアプリ NVDA を使用します。 無料で使用でき (寄付によってサポートされます)、最も人気のある選択肢の 1 つです。

選択するアプリに関係なく、そのしくみについて基本的な理解を深めることが重要です。 また、事前に微調整が必​​要な場合があります。 たとえば、何が読まれているかを確実に理解できるようにする必要があります。 また、コンテンツを読みながら強調表示して、読みやすくすることもできます。

WebAIM は、テスト目的でさまざまなスクリーン リーダーを設定するための便利なガイドをまとめました。 彼らはあなたのウェブサイトがどれだけアクセスしやすいかを確認するのに適した立場にあなたを置きます.

歩き回っている

信頼できるスクリーン リーダーの準備が整ったので、テストの時間です。 ユーザー エクスペリエンスを味わうには、スクリーン リーダーを有効にして、キーボードを使用して Web サイトのさまざまな部分を試してみてください。

一部のキーボード コマンドは、他のコマンドよりも汎用的です。 たとえば、 TABキーはさまざまなリンクやフォーム コントロールに移動し、 ENTERはリンク先に移動します。 ほとんどの場合、行から行へ移動するために矢印キーを使用しているようです。

ただし、スクリーン リーダー アプリに固有の特別なコマンドがいくつかある場合があります。 見出し、ヘッダーやフッターなどのランドマークなどの間を移動できます。そのためには、そのドキュメントを確認してください。

また、この方法で Web サイトを効果的にナビゲートするには練習が必要であることにも注意してください。 最初の数回の試行は、少しぎこちない場合があります。 しかし、さまざまなコマンドのこつをつかむと、物事はより直感的になるはずです。

スクリーン リーダーを使用した私の経験

空気をきれいにするために - 私は専門のスクリーン リーダー ユーザーではありません。 私の知識はせいぜい初歩的なものです。 しかし、NVDA での私の経験は啓発的でした。

ビジネス Web サイトのいくつかのページをテストの場として使用しました。 そして、私が見つけたものは、必ずしも大きな欠陥ではありませんでした. テキストを読むことができ、サイトをナビゲートすることができました。

むしろ、私はいくつかの煩わしさを発見しました – 当然のことながら、ユーザーを苛立たせるものです. いくつかの例を見てみましょう。

割り込むスライダー

アクセシビリティの専門家である Taylor Arndt とのインタビューで、彼女はカルーセル/スライドショーがアクセシビリティを損なう可能性がある機能であると述べました。 スクリーン リーダーでテストすると、それが前面に出てきます。

私が使用した自動カルーセルはナビゲート可能でしたが、次のスライドが表示されるたびに自分自身を発表するという厄介な習慣がありました. そのため、スクリーン リーダーが中断される前に、ページの他のセクションに深く入り込むことが非常に困難でした。

私は十分に簡単な修正を見つけました。 私が利用している WordPress スライダー プラグイン (Soliloquy) には、ARIA のライブ リージョンをあまり攻撃的でない設定に変更するオプションがあります。 これは、カルーセルに手動ナビゲーションを使用することと相まって、煩わしさを取り除きました.

繰り返しのテキスト

画像でALT属性を使用することは、アクセシビリティに関する一般的なアドバイスです。 ただし、純粋に装飾的な画像の場合、説明テキストを提供することは冗長になる可能性があります。 私はいくつかの異なる機会にこれに遭遇しました。

ブログ記事のリストが主な原因でした。 投稿のタイトルとアイキャッチ画像の両方のALT属性が同じでした。つまり、スクリーン リーダーがそれらを 2 回読み上げました。 その結果、比較的短い投稿リストでさえ、苦痛な UX になります。

問題は、私が使用した WordPress の投稿一覧ブロックに、ALT 属性を空のままにするオプションがないことです。 そのため、回避策が必要になる場合があります。

ウェブサイトのアクセシビリティが実際にどのように機能するかを発見する

WCAG 標準に準拠した Web サイトを構築することは、満足感を与えてくれます。これは、Web デザイナーとして行うべきことです。 しかし、やることリストのボックスにチェックを入れただけでは、すべてがわかるわけではありません。

他の人があなたの仕事をどのように体験するかをよりよく理解するには、少し余分な努力が必要です。 スクリーン リーダーを使用したテストは、より多くの洞察を得るためのパスを提供します。 これは決して完全なガイドではありませんが、興味をそそり実験するのに役立つことを願っています.

私が見つけたように、アイテムが標準の文字によってアクセス可能であると見なされたとしても、それは使いやすいという意味ではありません. これが、もう少し深く掘り下げることが有益である理由です。 単に使えるサイトか、可能な限り最高のエクスペリエンスを提供するサイトかの違いかもしれません。

注:前述のとおり、私はこのテクノロジに関しては初心者です。 共有できるスクリーン リーダーのヒントがありましたら、お気軽に Twitter でお知らせください。