顧客の Web サイトのある種のアクセシビリティ テスト (視覚障害者、聴覚障害者など) を取得しました。また、アクセシビリティを改善する方法のヒントも得られました。
ヒントの 1 つは画像ボタンに関するものです。
さらに、ボタンには短くて意味のある説明を付ける必要があります (例: 非表示のテキスト)。非表示のテキストは、属性 display:none および visibility:hidden でマークされるべきではありません。代わりに、テキストをビューポートの外に移動する必要があります。
<a href=”...”>[Font-Icon] <span class=“invisible“>Delete</span></a>
.invisible { position:absolute; left:-10000px; overflow:hidden;}
これがまだ推奨される解決策であるかどうかを尋ねたいと思います。私には時代遅れに思えます。非表示の要素の代わりに何らかのariaタグを使用する必要がありますか、または提案された解決策は問題ありませんか?
ボタンには、たとえば非表示のテキストを使用して、短く意味のある説明を付ける必要があります。
私には時代遅れに思えます。
そうです、これは解決策ではありません。
アクセシビリティについて話すとき、スクリーンリーダーを使用している視覚障害者だけに焦点を当てる必要はありません。あらゆる種類の障害に焦点を当てる必要があります。テキストをビューポートの外に移動することはまったくナンセンスです。これは、ARIA がサポートされていなかったときにスクリーン リーダーを使用している人口の一部にとって(悪い)解決策でしたが、これはもはや現実的な解決策ではありません。
最良の解決策は、明らかに全文を書くことです:
<a href="...">[Font-Icon] Delete</a>
はい、明らかですが、言うに値します。
title2 番目の解決策は、属性を使用することです。スクリーンリーダーでサポートされていないのに、なぜそれを使用するのですか? 人口の 99% がスクリーンリーダーを使用していないためです。そして、「[Font-Icon]」には代替手段が必要です。(アクセシビリティのサポートを向上させるために、このtitle属性はキーボード フォーカスで表示されるようにする必要があります。)
<a href="..." title="Delete">[Font-Icon]</a>
最終的な解決策は、スクリーン リーダー ユーザー用の を追加して、他のユーザー用の属性をaria-label残すことです。title
<a href="..." title="Delete" aria-label="Delete">[Font-Icon]</a>