セマンティクスとコンテンツのナビゲーション

ページ ナビゲーションにおけるセマンティクスの役割

Alice Boxhall
Alice Boxhall
X
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

ここでは、アフォーダンス、セマンティクス、および支援技術が 新たなユーザー エクスペリエンスを実現しました。 表現力豊かなセマンティック HTML を記述すると、 多くの標準要素に両方の標準要素が含まれているため、わずかな労力で サポートする動作が組み込まれています。

このレッスンでは、あまり明確ではないセマンティクスについて説明しますが、 スクリーン リーダーのユーザーにとって、特にナビゲーションの点で優れています。シンプルなページで コントロールは多くてもコンテンツはあまり多くないため 簡単にページをスキャンして できます。ただし、Wikipedia のエントリやニュースなど、コンテンツの多いページでは 上から順にすべてを読むのは実用的ではありません。 コンテンツ内を効率よく移動する方法が必要です

デベロッパーには、スクリーン リーダーは面倒で遅いという誤解がよくある 画面上のすべてをフォーカス可能にする必要がある 簡単に見つけられます。多くの場合、そうではありません。

スクリーン リーダーのユーザーは、見出しのリストを使って情報を探すことがよくあります。ほとんど スクリーン リーダーを使用すると、ページの見出しのリスト、 ローターと呼ばれる重要な機能です。HTML の見出しを使用して、 効果的にサポートする必要があります

見出しを効果的に使用する

先ほど説明したように、DOM の順序付けは 重要です。 スクリーン リーダーの順序です。スクリーン リーダーをテストする際に 使用すると、見出しリストが 視覚的な順序ではなく DOM の順序に重点を置いています。

これは、スクリーン リーダー全般に当てはまります。スクリーン リーダーは とし、このツリーは DOM ツリーをベースとしており、 スクリーン リーダーが認識する順序は、DOM の順序に直接基づいています。この 適切な見出し構造の重要性がこれまで以上に高まっています

適切に構成されたページのほとんどでは、見出しレベルがネストされ、 コンテンツ ブロック間の親子関係を維持できます。WebAIM チェックリストでは、 手法です。

  • 1.3.1 「セマンティック マークアップは見出しの指定に使用されます」と述べています。
  • 2.4.1 のブロックをバイパスする手法として方角構造に言及 コンテンツ
  • 2.4.6 では、有用な見出しを作成するための詳細情報と
  • 2.4.10 「コンテンツの個々のセクションは、見出しを使用して指定されます。 」

すべての見出しを画面に表示する必要はありません。 たとえば、Wikipedia では、 一部の見出しを画面外に配置して スクリーン リーダーなどの支援技術のみがアクセス可能。

<style>
    .sr-only {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    }
</style>

<h2 class="sr-only">This heading is offscreen.</h2>

複雑なアプリケーションの場合、この方法は ビジュアル デザインで見出しの表示は不要であるか、スペースがない。

その他のナビゲーション オプション

適切な見出しを持つページはスクリーン リーダーのユーザーが移動しやすくなりますが、 リンク、フォームなど、ページ内の移動に使用できるその他の要素 コントロール、ランドマーク。

リーダーは、スクリーン リーダーのローター機能（ ページ見出しのリストをスキャン）をクリックして、ページ上のリンクのリストにアクセスします。 Wiki のようにリンクの数が多いため、読者が キーワードを使用します。これにより、ヒットを、実際に ページ上で発生したすべての語句ではなく、

この機能は、スクリーン リーダーがリンクとリンクを検出できる場合にのみ有用です。 意味します。たとえば、ここにはリンクを作成する一般的なパターンが 見つけにくい環境です

  • href 属性のないアンカータグ。単一ページでよく使用 そのようなリンク ターゲットを使用すると、スクリーン リーダーで問題が発生します。Google Chat では 詳しくは、シングルページ アプリについての記事をご覧ください。
  • リンク付きで実装されるボタン。その結果、スクリーン リーダーは リンクとして解釈され、ボタンの機能は失われます。対象 アンカータグを実際のボタンに置き換えて、スタイルを設定する 適切に分類します
  • リンク コンテンツとして使用される画像。場合によっては、リンク画像は スクリーン リーダーでは使用できないからです。リンクが適切なユーザーに 画像に alt 属性テキストがあることを確認します。

また、リンクテキストが不十分なことも問題です。「詳細」などのクリック可能なテキストまたは「クリック 」リンク先のセマンティック情報は提供しません。代わりに、 「レスポンシブ デザインの詳細」などの説明文「このキャンバスを表示」と チュートリアル」スクリーン リーダーがリンクに関する有意義なコンテキストを提供できるようにする。

ローターはフォーム コントロール リストを取得することもできます。このリストを使用して 特定の項目を検索して その項目に直接移動することもできます

スクリーン リーダーでよく発生するエラーは、発音です。たとえば画面 読者は「Udacity」と発音するかもしれません「oo-dacity」と検索したり、電話番号を 大文字のテキストを頭字語のように読み取ることができます。 興味深いことに、スクリーン リーダーのユーザーはこの特徴に馴染みがあり、 検討する必要があります

一部のデベロッパーは、スクリーン リーダー専用にすることでこの状況の改善に努めています。 発音でつづられたテキスト。発音のつづりに関する簡単なルールは次のとおりです。 禁止事項問題が悪化するだけだよ！たとえば、ユーザーが 点字ディスプレイがあると、単語のスペルが間違っているため、 混同です。スクリーン リーダーは単語のスペルを読み上げることができるため、 エクスペリエンスを管理し、その必要性を判断できます。

リーダーはローターを使用してランドマーク リストを表示できます。このリストは読者が HTML で提供されるメイン コンテンツとナビゲーション ランドマークのセットを見つける 使用できます。

HTML5 では、HTML5 のセマンティック構造を定義する新しい要素がいくつか導入されました。 ページ（header、footer、nav、article、section、main、および aside。これらの要素はページの構造上の手がかりとなります 組み込みのスタイルは強制されません（いずれにせよ CSS で行う必要があります）。

セマンティック構造要素は、複数の反復的な div ブロックを置き換えます。 ページの構造を直感的に表現するための、より明確でわかりやすい方法を提供する 簡単に作成できます。