ホームページ  >  記事  >  ウェブフロントエンド  >  HTML チュートリアル: スーパー接続の作成

HTML チュートリアル: スーパー接続の作成

黄舟
黄舟オリジナル
2016-12-26 15:22:331627ブラウズ

タブ ブラウジング

ポインティング デバイスを使用しない、または使用できないユーザーは、ショートカット タブ キーを使用して接続を開くことができます。また、論理的なタブ オーダーも必要です。 HTML は線形ですが、tabindex 属性を使用するとショートカット キーの順序を定義でき、これらの論理タブは自動的にその位置に配置されます。

ショートカット キー

ショートカット キーを使用すると、キーボード上の特定のキーをより便利に移動できます (Alt キーまたは Ctrl キーを押し続けるとフォーカスが取得されます)。ポインティング デバイスをお持ちでない場合は、Tab キーを使用して接続するよりも速くて便利です。

すべての接続にショートカット キーを設定する必要はありませんが、メインのナビゲーション接続に対してショートカット キーを設定することをお勧めします。

一部のページ




ショートカット キーの問題は、多くの場合、ショートカット キーがどこにあるか、どのキーであるかを (ソース コードを見ない限り) ユーザーが知る方法がないことです。 JAWS はショートカットを読み上げられるスクリーン リーダーですが、それを最大限に活用するには、ショートカットをよりわかりやすくする必要があります。
「ナビゲーションをスキップ」(以下で詳しく説明)などのリンク手法を使用することも、別のページを選択して、ショートカット キーなどの Web サイトのユーザビリティ関連の機能を説明することもできます。 Windows プログラム メニューの方法と同様に、ショートカット キーに対応する文字に下線を引く方法がますます一般的になっています。


リンクのタイトル

リンクに title 属性を追加すると、ユーザーが指しているリンクの説明が得られるため、ナビゲーションが向上します。

この接続で Javascript が実行されている場合、JavaScript 機能を使用しないユーザーに何が起こる (または起こらない) かを説明することも役立ちます。

Monster


ポップアップwindow

JavaScript ポップアップについて言えば、どうしても使用したい場合、または多くの人 (ユーザー) から使用するよう指示された場合は、onkeypress と onclick を使用してページを使いやすくすることができます。さらに、false を返すポップアップ ウィンドウは、通常のページを指す href 属性を持つリンクを含めて機能的に定義されており、JavaScript 機能を使用しないユーザーの場合、このページは通常の方法で読み込むことができます。

例:


...
Monster


隣接リンク

スクリーン リーダーで読みやすいように、隣接するリンクは少なくともスペースで区切る必要があります。
これは、文字間、接続間 (縦棒 |── 接続 | 接続など)、または周囲の接続 (角括弧 []── [接続] [接続] など) を使用して行うこともできます。リスト内に接続を入れることも良い考えです。並列リストであっても (display: in-line を使用)、CSS を使用して表示のスタイルを設定できます。

ナビゲーションをスキップ

スクリーン リーダーを使用しているユーザーに、ナビゲーションをスキップしてコンテンツに直接移動できる機会を提供する必要があります。これは、接続が固定されていると仮定すると (当然のことですが)、特に情報量が多い場合、ユーザーはすべてのページで同じ情報を確認する必要がないからです。ナビゲーションをスキップしてコンテンツに直接ジャンプするリンクを設定できます。

は次のようになります:







明らかに、ビジュアルブラウザで表示する必要はありません。 CSSを使用して非表示にすることができます。

注意


これは単なる CSS のトリックですが、「ナビゲーションをスキップする」ための特効薬です。これには、接続を非表示にする方法が含まれます。

最も一般的な方法はおそらく display: none を使用することですが、一部のブラウザーはこのリンクを表示しても理解できないため、「ナビゲーションをスキップ」リンクを表示する必要があります。
ただし、それを表示する必要はありません。著名なユーザーに表示する理由はありません。したがって、display: none を含むスタイルに固執する代わりに、要素の幅と高さをゼロ (幅: 0; 高さ: 0; オーバーフロー: 非表示;) に設定することもできます。これにより、同じ視覚効果が得られますが、画面表示が容易になります。読者が理解できるように。

上記は HTML チュートリアルです: スーパー接続の確立 詳細については、PHP 中国語 Web サイト (www.php.cn) に注目してください。