UXとスクリーンリーダーのアクセシビリティの問題を解決する方法
私はWeb開発とセマンティックhtmlマークアップを学んでいます。最近のチュートリアルでは、「ここをクリック」または「もっと読む」のアンカーテキストは、スクリーンリーダーによっては視覚障害のあるユーザーにはそれほど説明的ではないため、テキストの説明部分をCTAではなくアンカータグで囲む必要があることを示唆しています。
例えば、 <a href="">Click here</a> to know more information about the trips.は、チュートリアルによると良くなく、Click here to know more <a href="">information about the trips</a>.これにより、視覚的に優れたユーザーがClick hereテキストですが、何も起こりません。
視覚障害者と視覚障害者の両方が苦労せずにページにアクセスできるこの問題をUXに関して解決するにはどうすればよいですか？
すべてのユーザーがマウスを使用するわけではないため（特にここでは多くの人がタッチスクリーンを使用して「タップ」）、「コンテキスト外に表示されたときに単独で立つことができる適切なテキストのアンカーを使用する」ため、「ここをクリック」を避けます。
<a href="">More information about the trips</a>.
これは、UXとスクリーンリーダーの問題ではありません。あいまいなリンクフレーズは、アクセシビリティの障壁であるだけでなく、基本的な使いやすさと読みやすさの問題でもあります。説明リンクはすべての人にメリットがあります。
通常、「ここをクリック」などの動詞句をリンクに含める必要はまったくありません。スタイリングは、リンクをクリックする明示的な書面による指示なしに、リンクを区別しやすく、それ自体で簡単に認識できるようにする必要があります。余分なノイズと繰り返しを追加し、リンクの目的を理解するためにユーザーに周囲のコンテンツを読ませるだけです。
一般的なリンクフレーズがスクリーンリーダーのユーザーに具体的にもたらす問題の1つを示すために、多くの説明的でないリンクを含むページの例を次に示します。ユーザーがこれらのリンクのどこに行くのかを知る方法はありません。
各リンクが自己記述的である方がはるかに優れているため、元のコンテキストから削除された場合でも、それ自体で意味をなします。これにより、スクリーンリーダーのユーザーがナビゲートできるようになりますが、目が見えるユーザーでもコンテンツが読みやすくなり、ページがスキャンしやすくなります。
「ここをクリック」ボタンは通常、デザインのブロックにあります。それぞれに「ここをクリック」CTAが含まれる記事のリストを作成するのが一般的です。この場合、要素全体は単なる「ここをクリック」ではなくリンクである必要があります
記事の本文では、「ここをクリック」は使用しないでください。この例のテキストを想像してください：
この調査では、fooの結果がbarと一致することが示されました。
<a>Click here for a link to the study</a>。
または
<a>study on foo</a>はバーと一貫した結果を示します。
2番目の例は、アクセシビリティとSEOに優れているだけでなく、読者に行動を呼びかけないため、はるかに読みやすくなっています。ユーザーが詳細を読みたい場合は、リンクであるため、クリックする場所がわかります。
最後に、「ここをクリック」CTAリンクが絶対に必要な場合は、 ARIA属性 の正しい使用方法を学ぶ必要があります。
あいまいなリンクテキストを使用する場合は、aria-label属性を使用してリンクにコンテキストを与える必要があります。 意味のあるリンクテキスト の例では、UoWから次のように提案されています。
<a href="post.php?post=632" aria-label="More on Using Meaningful Link Text">More...</a>
http://ux.stackexchange.com/a/127688/32746 で述べたように、タップしたユーザーに「クリック」ワードが表示されることを心配してください。
<a href="">Know more information about the trips</a>
視覚障害のある方にはリンクだと言われます。
ページの開始時にHTMLが正しく、その正確さが潜在的なライブスクリプトコードによって保持されている限り、問題はありません。