誰もが知っておくべきウェブサイトのユーザビリティに関する 10 のヒント

誰もが知っておくべきウェブサイトのユーザビリティに関する 10 のヒント

これ以上時間を無駄にせず、早速本題に入りましょう。

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

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

いくつかの方法:


コードをコピー
コードは次のとおりです。

<img src="logo.png" alt="フロントエンド">

あるいは、背景画像を使用してロゴを実装する場合は、タイトル属性を追加してそれを実現することもできます。

<span title="フロントエンドの世界"></span>
</code>

もちろん、リンク + 背景画像方式が最適ですが、タイトル属性を追加するのも良いでしょう。


コードをコピー
コードは次のとおりです。

<a title="フロントエンドの世界">フロントエンドの世界</a>

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

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


コードをコピー
コードは次のとおりです。

<nav ロール="ナビゲーション">
<div id="maincontent" 役割="main">
<フォームアクション="search.php" 役割="検索">

お待ちください。具体的なルールについては、W3C の推奨事項を確認してください。

3. フォーカスの定義を強化する

実際、多くの Web サイトは、特に IE ブラウザでは、ブラウザの :focus スタイルを削除するよう最善を尽くします。実際、ブラウザがデフォルトで :focus スタイルを持っているのは理にかなっています。これにより、現在のマウス フォーカスがどこにあるかをユーザーに示すことができます。これはキーボードフローにとって特に重要です。

したがって、:focus スタイルを削除しないでください。デフォルトのスタイルが見苦しい、または一貫性がないと思われる場合でも (IE は点線のボックス、Webkit はハイライトされた実線のボックス、Safari は青、Chrome はオレンジ)、ハイライトの色を自分で定義できます。


コードをコピー
コードは次のとおりです。

:フォーカス{
アウトライン:1px 赤実線;
背景:黄色;
}

プロダクト マネージャーまたはビジュアル デザイナーがフォーカス状態を削除することを主張する場合は、マウスを 1 日間取り上げて、リンクの切り替えには Tab キーのみを使用するように指示します。

4. 必須フォーム項目を定義する

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


コードをコピー
コードは次のとおりです。

<input type="text" name="ユーザー名" aria-required="true">

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

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

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

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

簡単に言うと、ヘッダーを th タグに置き換えます。


コードをコピー
コードは次のとおりです。

<th scope="col">日付</th>

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

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


コードをコピー
コードは次のとおりです。

<テーブル>
<caption>授業スケジュール</caption>
<tr>


テーブルに関しては、HTMLテーブルを再発見することを強くお勧めします。

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

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

したがって、適切な場所のリンクを使用してください。

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

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

したがって、tabindex 属性を乱用しないでください。

10. オンラインで確認する

えっと、実は広告だと気づきました。でも、ウェブサイトのユーザビリティの問題を検出できるのなら、それはそれでいいことですよね。WebAIMは、URLを入力するだけでウェブサイトのユーザビリティの問題を自動で検出してくれるウェブツールです。

上記のコンテンツでは、123WORDPRESS.COM プラットフォームを通じて、誰もが知っておくべき 10 個の Web サイト ユーザビリティのヒントを紹介しています。気に入っていただければ幸いです。

<<:  HTMLボタンを中央に配置する方法

>>:  nginxでgzip圧縮を有効にする手順を完了する

推薦する

レスポンシブWebデザイン学習(1) - 画面サイズと使用率の決定

最近では、モバイルデバイスがますます普及しており、ユーザーがスマートフォンやタブレットを使用して W...

CentOS 7.6 への MySQL 5.7 GA バージョンのインストール チュートリアル図

目次環境の準備環境の準備mariadbをアンインストールする rpm -qa | grep mari...

VueとElementUIを組み合わせたスキン変更ソリューション

目次前面に書かれた解決策 1: グローバル スタイル オーバーライドを使用する (フロントエンドに共...

CSS の記述基準と順序を共有する [すべての人に使用を推奨]

CSSの記述順序1. 位置属性(位置、上、右、z-index、表示、フロートなど) 2. サイズ(...

mysqlサーバーは--skip-grant-tablesオプションで実行されています

MySQLサーバーは--skip-grant-tablesオプションで実行されているため、このステー...

Linux でファイルを削除するさまざまな方法の効率の比較

Linux で大量のファイルを削除する効率をテストします。まず500,000個のファイルを作成する$...

vue3で注意すべき2つのポイントを詳しく解説:セットアップ

目次vue2の場合vue3ではセットアップに関する注意事項セットアップライフサイクルは、before...

HTML+CSS+JSはナビゲーションバーのスクロールグラデーション効果を実現します

目次まず効果を見てみましょう:成し遂げる:要約:まず効果を見てみましょう: 成し遂げる: 1. ナビ...

React HTML で react を使用する 2 つの方法

基本的な使い方 <!DOCTYPE html> <html lang="...

Docker の win ping 失敗コンテナ回避ガイド

win docker-desktopを使ってコンテナ開発に接続し、ネットワーク上で色々試してみたいと...

JQueryはアニメーション効果の非表示と表示を実装します

この記事では、アニメーション効果の非表示と表示を実現するためのJQueryの具体的なコードを参考まで...

MySQLのジョイントクエリについて詳しく説明します

目次ユニオンクエリ1. 中国の各省のIDと名前を照会する2. 湖南省のすべての地級市のIDと名称3....

ページコンテンツ全体を中央に配置して、高さがコンテンツに合わせて自動的に拡張されるようにする方法

ページコンテンツ全体を中央に配置する方法と、コンテンツに合わせて高さを自動的に拡大縮小する方法。これ...

Vue 天気予報入門

この記事では、参考までに天気予報を実装するためのVueの具体的なコードを紹介します。具体的な内容は次...

Ubuntuが仮想マシンでインターネットに接続できない問題の解決策

インターネットに接続できない仮想マシンをセットアップするのは非常に面倒です。ここでは、Ubuntu ...