--- id: 587d7787367417b2b2512aa1 title: header の目印でスクリーンリーダーのナビゲーションを容易にする challengeType: 0 videoUrl: 'https://scrimba.com/c/cB76vtv' forumTopicId: 301023 dashedName: make-screen-reader-navigation-easier-with-the-header-landmark --- # --description-- 次の HTML5 要素は、セマンティックな意味を加えてアクセシビリティを向上させる `header` タグです。 これは導入的な情報や、親タグ内のコンテンツのナビゲーションリンクを囲むために使われることが多く、複数ページのトップに繰り返し表示するようなコンテンツを囲むのに役立ちます。 `header` は `main`でも取り上げた目印を埋め込む機能を共有しており、支援技術がそのコンテンツに素早く移動できるようにします。 **注:** `header` は HTML ドキュメントの `body` タグ内で使用するためのものです。 これはページのタイトルやメタ情報などを含む `head` 要素とは異なるものです。 # --instructions-- Camper Cat は忍者の訓練についてのすばらしい記事を書いていて、そのためのページをサイトに加えたいと思っています。 現在 `h1` を囲んでいる先頭の `div` を `header` タグへ変更してください。 # --hints-- コードには `header` タグが 1 つ必要です。 ```js assert($('header').length == 1); ``` `header` タグは `h1` 要素を囲む必要があります。 ```js assert($('header').children('h1').length == 1); ``` コードに `div` タグを含めないでください。 ```js assert($('div').length == 0); ``` `header` 要素には終了タグが必要です。 ```js assert( code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/
/g).length ); ``` # --seed-- ## --seed-contents-- ```html

Training with Camper Cat

Stealth & Agility Training

Climb foliage quickly using a minimum spanning tree approach

No training is NP-complete without parkour

Combat Training

Dispatch multiple enemies with multithreaded tactics

Goodbye world: 5 proven ways to knock out an opponent

Weapons Training

Swords: the best tool to literally divide and conquer

Breadth-first or depth-first in multi-weapon training?

``` # --solutions-- ```html

Training with Camper Cat

Stealth & Agility Training

Climb foliage quickly using a minimum spanning tree approach

No training is NP-complete without parkour

Combat Training

Dispatch multiple enemies with multithreaded tactics

Goodbye world: 5 proven ways to knock out an opponent

Weapons Training

Swords: the best tool to literally divide and conquer

Breadth-first or depth-first in multi-weapon training?

```