2

スクリーン リーダー タイプの補助デバイスにセクションを読みやすく伝える最善の方法は何ですか?

理想的には、このジョブを子タグに渡すのではなく、この目的を果たすことができる <h1>実際のタグをマークアップする方法はありますか?<section>

<article>が s に分割されている場合、s はシンジケーションには適していませんが、ドキュメント構造内で独自の固有のアイデンティティを持つ必要が<section>あるという考えです。<section>HTML 作成者としてこれをどのように文書化しますか?

例: このツリーが与えられた場合:

Article: A review of the iPad
section: brief preamble, statement of goals
section: aesthetics
section: performance
section: target market
section: wrap up

s をマークアップして、補助デバイスがタグ<section>からセクション フォーカスを取得できるようにするにはどうすればよいでしょうか?<section>

HTML での例を次に示します。

<!DOCTYPE html>
<html>
<head> <!-- meta data and css --> </head>
<body>
    <article>
        <h1>An article about markup!</h1>
        <section  id="examele_1">
            <h1>Example 1</h1>
        </section>
        <section class="example 2">
            <h1>Example 2</h1>
        </section>
        <section data-subject="Example 3">
            <h1>Example 3</h1>
        </section>
    </article>
</body>
</html>

では、例 1 から 3 のいずれかが適切な選択であるか、それともより適切なオプションがありますか?

4

3 に答える 3

6

あなたが求めていることを理解したら、次のように、セクション要素に role="region" を追加する必要があります。

<section role="region">

これにより、セクションが実際にセクションであることをスクリーン リーダーに伝え、ユーザーに正しいアクセシビリティ情報を提供します。このロールは WAI-ARIA ロールです。section 要素はセマンティクスを暗示しているため、理想的には必要ありませんが、HTML5 要素よりもスクリーン リーダーでの ARIA のサポートの方が優れているため、サポートが広まるまでギャップを埋めることができます。

aria-labelledbyJaws の「例 1 領域」など、セクションをアナウンスするときにスクリーン リーダーによって見出しがアナウンスされるようにする場合は、要素に属性を追加しsectionて h* の ID に関連付けることができます。

headerセクション内の各見出しについて、厳密に必要というわけではありませんが、要素にもそれらを含めることをお勧めします(私は主な記事の見出しのためだけに行うことがよくあります)。

<article role="article" aria-labelledby="title">
    <header>
        <h1 id="title">An article about markup!</h1>
   </header>
   <section role="region" aria-labelledby="eg1">
        <header>
             <h1 id="eg1">Example 1</h1>
        </header>
   </section>
   <section role="region" aria-labelledby="eg2">
        <header>
            <h1 id="eg2">Example 2</h1>
        </header>
    </section>
    <section role="region" aria-labelledby="eg3">
         <header>
            <h1 id="eg3">Example 3</h1>
         </header>
    </section>

詳細については、http://blog.paciellogroup.com/2011/03/html5-accessibility-chops-section-elements/、http://blog.paciellogroup.com/2010/10/using-wai-aria-landmark を参照してください。-roles/およびhttp://blog.paciellogroup.com/2013/10/using-html5-section-element/

于 2013-05-10T19:58:20.650 に答える
4

dstorey の優れたアドバイスに加えて、各セクション レベルで使用しないでください。<h1>

以前は推奨されていましたが、その推奨事項は HTML5 で変更され、現在は<h?>ドキュメント全体で機能するレベルを使用することをお勧めします。つまり、最上位の記事で を使用する<h1>場合、セクションでは を使用する必要<h2>があります。これは、HTML 4 で行った場合と同じです。

その理由は、<h1>全体の使用は HTML5 アウトライン アルゴリズムの実装に依存するためです。残念ながら、ブラウザはこのアルゴリズムを実装することを望んでおらず、スクリーン リーダーはそれを正しく実装することを望んでいないか、実行できないようです。そのため、アクセシビリティ ツール チェーンのどこにもアウトラインが正しく処理されておらず、補助デバイスのユーザーは見出しレベルを正しく理解できません。

于 2013-05-10T21:01:29.840 に答える
0

CSS3 による可能なスタイリング ソリューションを以下に示します。必要に応じて変更できます。便宜上、jsfiddle へのリンクを次に示します: http://jsfiddle.net/M6mpt/

HTML

<!DOCTYPE html>
<body>
<article class="article1">
<h1>An article about markup!</h1>
<section  class="section1">
<h1>Example 1</h1>
</section>
<section class="section2">
<h1>Example 2</h1>
</section>
<section class="section3">
 <h1>Example 3</h1>
 </section>
 </article>
 </body>

CSS3

.article1 {
    font-family: Arial;
}

.article1 h1 {
    text-transform:uppercase;
    font-size:1.2em;
}

.section1 h1 {
    font-size:1.1em;
    color:#606060;
}

.section2 h1 {
    color:#909090;
}

.section3 h1 {
    color:#a0a0a0;
    font-size:0.9em;
}
于 2013-05-10T19:54:51.820 に答える