これ以上時間を無駄にせず、早速本題に入りましょう。 1. ロゴに代替テキストを追加する コードをコピー コードは次のとおりです。<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 サイト ユーザビリティのヒントを紹介しています。気に入っていただければ幸いです。 |
1.コマンドが見つかりません コマンドが見つかりません2. そのようなファイルまたはディレクトリは...
nginxでサポートされている仮想ホストには3つの種類があります1. ドメイン名ベースの仮想ホスティ...
まずコードファイルの構造を見てみましょう。エントリファイル (index1.js) の内容: ...
目次元の配列を変更しない方法1. 連結文法:パラメータ:戻り値: 2. 参加する文法:パラメータ:戻...
最新バージョンのMySQL 8.0.11をインストールした後、ユーザーを作成して認証します。認証され...
序文最近、フロントエンドの学習に関する以前のメモを整理したところ、モバイル Web 画面の適応 (r...
目的: Linux では、さまざまな理由でサーバー プログラムがダンプされ、ユーザーの使用に影響する...
目次1. HTTPGET 2. HTTP POSTウェブソケット4. Egretのhttpとwebs...
1. CSS を使用して、小さな尖った角のチャット ダイアログ ボックスと尖った角の吹き出しを描画...
Redux はデータ状態管理プラグインです。React や Vue を使用してコンポーネント化された...
序文デモでは古いバージョンのブラウザのグラデーションが実装されています[IE9-]。 IE9 より前...
図書館運営クエリ1.SHOW DATABASE; ----すべてのデータベースを照会する2. SHO...
1. Vueとは何かVue は、ユーザー ページを構築するためのプログレッシブ フレームワークです。...
1 セミコロン「;」のない CSS スタイル2 タグが閉じられておらず、「>」がありません...
質問最近、以下に示すように、テキストストローク効果を実現するという要件に遭遇しました。 解決策1まず...