ウェブマスターが注目すべき、ウェブサイトのユーザビリティを向上させる 9 つのコード最適化のヒント

1. ロゴに代替テキストを追加する

これには 2 つの利点があります。スクリーン リーダーがロゴ画像の意味を識別できることと、画像が読み込まれていない場合に、視覚障害のないユーザーにロゴがどこにあるかを伝えることができることです。
いくつかの方法:

2. 基本的なランドマークを追加する

ARIA ランドマークは、W3C によって定義された Web サイトのユーザビリティ ルールのセットです。説明的なランドマーク (単にロールとも呼ばれます) を Web サイトのさまざまなモジュールに追加すると、スクリーン リーダーが Web ページをよりよく理解できるようになり、視覚障害のあるユーザーが Web サイトをより使いやすくなります。

実際、多くの Web サイトは、特に IE ブラウザでは、ブラウザの :focus スタイルを削除するよう最善を尽くします。実際、ブラウザがデフォルトで :focus スタイルを持っているのは理にかなっています。これにより、現在のマウス フォーカスがどこにあるかをユーザーに示すことができます。これはキーボードフローにとって特に重要です。
したがって、:focus スタイルを削除しないでください。デフォルトのスタイルが見苦しい、または一貫性がないと思われる場合でも (IE は点線のボックス、Webkit はハイライトされた実線のボックス、Safari は青、Chrome はオレンジ)、ハイライトの色を自分で定義できます。

aria-required 属性は、フォーム内の必須フィールドを定義するために使用できます。主にスクリーン リーダーに次のことを伝えます。

5. ページにh1を追加する

理由は簡単です。SEO に良いだけでなく、ウェブサイト全体の使いやすさと読みやすさにも役立ちます。また、コードに執着はありませんか?

6. テーブルヘッダーを定義する

通常、多くの人はすべてのテーブルに td タグを使用することに慣れています。実際、テーブルには hd タグだけでなく、th、col、scope なども存在します。
簡単に言うと、ヘッダーを th タグに置き換えます。

7. テーブルの説明を定義する

表の前後に「p」を付けるだけではいけません。画像と同様に、表にも専用のキャプション タグがあります。

8.「ここをクリック」を避ける

このようなリンクの説明は一般の人にとっては問題になりませんが、スクリーンリーダーソフトウェアにとっては非常に悪影響があり、視覚障害のあるユーザーにとっては一種の妨害となります。
したがって、適切な場所のリンクを使用してください。

9. タブインデックスを削除する

これまで、多くの人がユーザー エクスペリエンスを「強化」するために tabindex を使用していましたが、この属性はページの通常の読み取り順序を乱し、視覚障害のあるユーザーにとっては悲惨な結果となり、一般ユーザーにとっても使いにくいものになる可能性があります。
したがって、tabindex 属性を乱用しないでください。