chore(i18n,learn): processed translations (#44851)
This commit is contained in:
camperbot
GitHub
@ -0,0 +1,46 @@
|
||||
---
|
||||
id: 587d774c367417b2b2512a9c
|
||||
title: 視覚障害者のアクセシビリティのために画像の代替テキストを追加する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||
forumTopicId: 16628
|
||||
dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
他のチャレンジで、`img` タグに `alt` 属性があるのを見たことがあるでしょう。 `alt` テキストは画像の内容を説明するもので、画像に対する代替テキストを提供します。 `alt` 属性は、画像の読み込みに失敗したり、ユーザーがそれを見ることができない場合に役立ちます。 また、検索エンジンが検索結果の画像に含まれているものを理解するためにも使用されます。 例:
|
||||
|
||||
```html
|
||||
<img src="importantLogo.jpeg" alt="Company logo">
|
||||
```
|
||||
|
||||
視覚障害を持つ人々は、ウェブコンテンツをオーディオインターフェースへ変換するためにスクリーンリーダーを利用しています。 視覚的にしか表示されていない場合、彼らは情報を取得できません。 画像の場合、核心となる情報を伝えるために、スクリーンリーダーは `alt` 属性にアクセスしてその内容を読み上げることができます。
|
||||
|
||||
良い `alt` テキストは、画像の簡単な説明を読者に提供します。 画像には `alt` 属性を常に含めるようにしましょう。 HTML5 仕様では、これは必須と考えられています。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat はコーディング忍者かつ実際の忍者でもあり、その知識を共有するためにウェブサイトを作成しています。 彼が使用したいプロフィール画像は彼のスキルを表すものなので、すべてのサイト訪問者に認識されるべきです。 `img` タグに `alt` 属性を追加し、Camper Cat が空手をしている様子だと説明してください。 (画像の `src` は実際のファイルにリンクされていないため、`alt` テキストが表示されることが確認できるでしょう。)
|
||||
|
||||
# --hints--
|
||||
|
||||
`img` タグは空ではない `alt` 属性を持つ必要があります。
|
||||
|
||||
```js
|
||||
assert($('img').attr('alt'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<img src="doingKarateWow.jpeg">
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<img src="doingKarateWow.jpeg" alt="Someone doing karate">
|
||||
```
|
||||
@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 587d778b367417b2b2512aa8
|
||||
title: 使いやすい日付選択フィールドを追加する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cR3bRbCV'
|
||||
forumTopicId: 301008
|
||||
dashedName: add-an-accessible-date-picker
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
フォームはしばしば `input` フィールドをもちます。これにより様々なフォームコントロールを作成することができます。 この要素の `type` 属性は、どの種類の `input` 要素が作成されるかを表します。
|
||||
|
||||
`text` と `submit` タイプには以前のチャレンジで気づいたかもしれません。そして HTML5 では新しい指定オプションとして `date` フィールドが導入されました。 ブラウザのサポート状況に応じて、`input` にフォーカスがある場合、全てのユーザーにとってフォームへの記入が簡単になる日付選択フィールドが表示されます。
|
||||
|
||||
古いブラウザでは、このタイプはデフォルトで `text` になるため、念の為 `label` や `placeholder` を使って期待する日付フォーマットをユーザーに伝えるといいでしょう。
|
||||
|
||||
例:
|
||||
|
||||
```html
|
||||
<label for="input1">Enter a date:</label>
|
||||
<input type="date" id="input1" name="input1">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat は Mortal Kombatトーナメントを実施しており、競技参加者にどの日付が最も良いか尋ねたいと思っています。 `input` タグを追加しましょう。`type` 属性には `date` を、`id` 属性には `pickdate`を、`name` 属性には `date` を設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
日付選択フィールドとして `input` タグを追加します。
|
||||
|
||||
```js
|
||||
assert($('input').length == 2);
|
||||
```
|
||||
|
||||
`input` タグは `date` 値が設定された `type` 属性を持つ必要があります。
|
||||
|
||||
```js
|
||||
assert($('input').attr('type') == 'date');
|
||||
```
|
||||
|
||||
`input` タグは `pickdate` 値が設定された `id` 属性を持つ必要があります。
|
||||
|
||||
```js
|
||||
assert($('input').attr('id') == 'pickdate');
|
||||
```
|
||||
|
||||
`input` タグは `date` 値が設定された `name` 属性を持つ必要があります。
|
||||
|
||||
```js
|
||||
assert($('input').attr('name') == 'date');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Mortal Kombat Tournament Survey</h2>
|
||||
<form>
|
||||
<p>Tell us the best date for the competition</p>
|
||||
<label for="pickdate">Preferred Date:</label>
|
||||
|
||||
<!-- Only change code below this line -->
|
||||
|
||||
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Mortal Kombat Tournament Survey</h2>
|
||||
<form>
|
||||
<p>Tell us the best date for the competition</p>
|
||||
<label for="pickdate">Preferred Date:</label>
|
||||
<input type="date" id="pickdate" name="date">
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aad
|
||||
title: >-
|
||||
情報を伝達する色を慎重に選択して色覚の問題を回避する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c437as3'
|
||||
forumTopicId: 301011
|
||||
dashedName: >-
|
||||
avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
色弱には様々なタイプがあります。 これらには、特定の波長に対する感度が低下するタイプから色が全く見えないタイプまで幅があります。 最も多いタイプは、緑を認識する感度が低下するものです。
|
||||
|
||||
例えば、似たような 2 つの緑色をコンテンツの前景色と背景色に使用した場合、色弱者のユーザーはそれを区別できないかもしれません。 近い色はカラーホイール上の隣り合った色として考えることができます。重要な情報を伝える際にはその組み合わせは避けるべきです。
|
||||
|
||||
**注:** オンラインカラーピッキングツールには、異なるタイプの色弱者にとってそれらの色がどのように見えるかを視覚的にシミュレーションするものがあります。 オンラインのコントラストチェックツールに加えて、これらは素晴らしいリソースです。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat は重要なボタンにおける異なるスタイルをテストしています。しかし、黄色(`#FFFF33`) の背景色 `background-color` と緑 (`#33FF33`) の文字色 `color` はカラーホイールで隣接した色相なので、一部の色弱者にとってほとんど区別できません。 (これらの色は明度も近く、コントラスト比チェックでも失敗します) テキストの `color` をダークブルー (`#003366`) に変更して、両方の問題を解決します。
|
||||
|
||||
# --hints--
|
||||
|
||||
`button` のテキストの `color` をダークブルーに変更してください。
|
||||
|
||||
```js
|
||||
assert($('button').css('color') == 'rgb(0, 51, 102)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
button {
|
||||
color: #33FF33;
|
||||
background-color: #FFFF33;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Danger!</h1>
|
||||
</header>
|
||||
<button>Delete Internet</button>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
button {
|
||||
color: #003366;
|
||||
background-color: #FFFF33;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Danger!</h1>
|
||||
</header>
|
||||
<button>Delete Internet</button>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aac
|
||||
title: 十分なコントラストを使用して色覚の問題を回避する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMEUw'
|
||||
forumTopicId: 301012
|
||||
dashedName: avoid-colorblindness-issues-by-using-sufficient-contrast
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
色はビジュアルデザインの大部分を占めていますが、アクセシビリティの問題が 2 つあります。 第一に、スクリーンリーダーのユーザーには色が見えないので、重要な情報を伝える唯一の方法として色だけを使用するべきではありません。 第二に、色弱者のユーザーが前景色と背景色の違いを区別できるためには十分なコントラストが必要です。
|
||||
|
||||
以前のチャレンジでは、1 つ目の問題に対処するため代替テキストを使う方法を紹介しました。 前回のチャレンジでは、2 つ目の問題の対応に役立つコントラストチェックツールを導入しました。 WCAG 推奨のコントラスト比は 4.5:1 で、カラーでもグレースケールの組み合わせでも適用されます。
|
||||
|
||||
色弱者のユーザーは、ある色を他の色と区別するのに苦労することがあります。色相が問題になることが多いですが、時には明度も関係します。 コントラスト比は、前景色と背景色の相対輝度 (または明度) の値を使用して計算されることを覚えているかと思います。
|
||||
|
||||
実際には、4.5:1 のコントラスト比は、暗い色にシェーディング (黒を加えること)、明るい色にティンティング (白を加えること) することで達成できます。 カラーホイール上では、暗い色合いはブルー、バイオレット、マゼンタ、レッドだと考えられ、一方で明るい色合いはオレンジ、イエロー、グリーン、ブルーグリーンなどです。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat は、ブログのテキストと背景に色を使うテストを行っています。しかし、緑がかった `background-color` とくり色のテキスト `color` の組み合わせのコントラスト比は 2.5:1 です。 CSSの `hsl()` プロパティ (hue 色相、saturation 彩度、lightness 明度の略) を使用して宣言しているため、3 つ目の引数の値を変えることで色の明度を簡単に調整できます。 `background-color` の明度の値を 35% から 55% に増やし、`color` の明度の値を 20% から 15% に減らします。 これにより、コントラストが 5.9:1 に向上します。
|
||||
|
||||
# --hints--
|
||||
|
||||
テキストの `color` プロパティの明度の値だけを 15% に変更してください。
|
||||
|
||||
```js
|
||||
assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));
|
||||
```
|
||||
|
||||
`background-color` プロパティの明度の値だけを 55% に変更してください。
|
||||
|
||||
```js
|
||||
assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: hsl(0, 55%, 20%);
|
||||
background-color: hsl(120, 25%, 35%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: hsl(0, 55%, 15%);
|
||||
background-color: hsl(120, 25%, 55%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aae
|
||||
title: 説明的なリンクテキストを使用してリンクに意味を与える
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c437DcV'
|
||||
forumTopicId: 301013
|
||||
dashedName: give-links-meaning-by-using-descriptive-link-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
スクリーンリーダーのユーザーには、デバイスがどの種類のコンテンツを読み上げるかに関するさまざまなオプションがあります。 これらのオプションには、ランドマーク要素まで (またはその先に) スキップする、メインコンテンツへのジャンプ、見出しからページの要約を取得するなどがあります。 他に、ページで利用可能なリンクだけを聞くこともできます。
|
||||
|
||||
この場合、スクリーンリーダーはリンクテキスト、つまりアンカー (`a`) タグの間にあるテキストを読み上げます。 「click here (ここをクリック)」や「read more (詳細を読む)」というリンクの一覧があっても役に立ちません。 代わりに、これらのユーザーにより多くの意味を提供するために、`a` タグ内では簡潔で説明的なテキストを使用してください。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat が使用しているリンクテキストは、周囲のコンテキストがなければあまり意味を成しません。 アンカー (`a`) タグを移動して、`Click here` の代わりに `information about batteries` の周りを囲うようにします。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードでは、アンカーの `a` タグを `Click here` という単語の周りから `information about batteries` という単語の周りを囲うように移動させる必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a')
|
||||
.text()
|
||||
.match(/^(information about batteries)$/g)
|
||||
);
|
||||
```
|
||||
|
||||
`a` 要素は空文字列の値 `""` が指定された `href` 属性を持たなければなりません。
|
||||
|
||||
```js
|
||||
assert($('a').attr('href') === '');
|
||||
```
|
||||
|
||||
`a` 要素には終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a href=(''|"")>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near. <a href="">Click here</a> for information about batteries</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near. Click here for <a href="">information about batteries</a></p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,115 @@
|
||||
---
|
||||
id: 587d7789367417b2b2512aa4
|
||||
title: audio 要素を使用してオーディオコンテンツのアクセシビリティを向上させる
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJVkcZ'
|
||||
forumTopicId: 301014
|
||||
dashedName: improve-accessibility-of-audio-content-with-the-audio-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 の `audio` 要素は、サウンドやオーディオストリームコンテンツを囲み、セマンティックな意味を与えます。 オーディオコンテンツには、耳が不自由であったり聞こえづらい人々がアクセスできる代替テキストも必要です。 これは、オーディオ要素の近くのテキストや、文字起こしへのリンクで実現できます。
|
||||
|
||||
`audio` タグは `controls` 属性をサポートします。 controls 属性により、ブラウザのデフォルトの再生、一時停止、その他のコントロールが表示され、キーボードによる操作ができるようになります。 controls は真偽値属性なので、値は必要ありません。タグ上にこれが存在することで設定がオンになります。
|
||||
|
||||
例:
|
||||
|
||||
```html
|
||||
<audio id="meowClip" controls>
|
||||
<source src="audio/meow.mp3" type="audio/mpeg">
|
||||
<source src="audio/meow.ogg" type="audio/ogg">
|
||||
</audio>
|
||||
```
|
||||
|
||||
**注:** 一般的に、マルチメディアコンテンツは視覚的要素と聴覚的要素の両方を持ちます。 視覚障害や聴覚障害を持つユーザーがそれにアクセスできるように、コンテンツに同期したキャプション (字幕) とトランスクリプト (文字起こし) が必要です。 一般に、Web 開発者はキャプションやトランスクリプトを作成する責任を負いませんが、それらを含めることを知っておく必要があります。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat から少し離れる時間を取って、アクセシビリティの達人でありスクリーンリーダーのユーザーでもあるキャンパー仲間、Zersiax (@zersiax) をご紹介します。 彼のスクリーンリーダーが動作する様子の音声を聴くには、`p` の後ろに `audio` 要素を追加します。 `controls` 属性を含めましょう。 次に `audio` タグの中に、`src` 属性に `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3` を、`type` 属性に `"audio/mpeg"` を設定した `source` タグを配置します。
|
||||
|
||||
**注:** 音声が高速に聞こえて理解しにくいかもしれませんが、これはスクリーンリーダーのユーザーにとっては通常の速度です。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードには `audio` タグが 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert($('audio').length === 1);
|
||||
```
|
||||
|
||||
`audio` 要素には終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/audio>/g).length === 1 &&
|
||||
code.match(/<audio.*>[\s\S]*<\/audio>/g)
|
||||
);
|
||||
```
|
||||
|
||||
`audio` タグは `controls` 属性を持つ必要があります。
|
||||
|
||||
```js
|
||||
assert($('audio').attr('controls'));
|
||||
```
|
||||
|
||||
コードには `source` タグが 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert($('source').length === 1);
|
||||
```
|
||||
|
||||
`source` タグは `audio` タグの内側にあるようにしてください。
|
||||
|
||||
```js
|
||||
assert($('audio').children('source').length === 1);
|
||||
```
|
||||
|
||||
`source` タグの `src` 属性の値は、指示内のリンクと正確に一致させる必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('source').attr('src') ===
|
||||
'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'
|
||||
);
|
||||
```
|
||||
|
||||
コードには `source` タグの `type` 属性として audio/mpeg という値を含める必要があります。
|
||||
|
||||
```js
|
||||
assert($('source').attr('type') === 'audio/mpeg');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Real Coding Ninjas</h1>
|
||||
</header>
|
||||
<main>
|
||||
<p>A sound clip of Zersiax's screen reader in action.</p>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Real Coding Ninjas</h1>
|
||||
</header>
|
||||
<main>
|
||||
<p>A sound clip of Zersiax's screen reader in action.</p>
|
||||
<audio controls>
|
||||
<source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg"/>
|
||||
</audio>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,161 @@
|
||||
---
|
||||
id: 587d778a367417b2b2512aa5
|
||||
title: figure 要素を使ってチャートのアクセシビリティを向上させる
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJMqtE'
|
||||
forumTopicId: 301015
|
||||
dashedName: improve-chart-accessibility-with-the-figure-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 では `figure` 要素と、これに関連した `figcaption` が導入されました。 これらを使うことで、視覚的な表現 (画像、図形、チャートなど) をキャプション (説明文) と一緒に囲むことができます。 これにより、意味的に関連するコンテンツをグループ化し、`figure` を説明する代替テキストを提供することもできるため、アクセシビリティを二重に向上させることができます。
|
||||
|
||||
チャートなどのデータビジュアライゼーションでは、視覚障害のあるユーザーのために、傾向や結論を簡潔に記したキャプションを使うことができます。 別のチャレンジで、スクリーンリーダーユーザーのために (CSSを利用して) 表形式のチャートデータを画面外に移動させる方法を学びます。
|
||||
|
||||
こちらの例を見てください。`figure` タグの中に `figcaption` があり、他の要素と組み合わせることができます。
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
|
||||
<br>
|
||||
<figcaption>
|
||||
Master Camper Cat demonstrates proper form of a roundhouse kick.
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat は、一週間あたりに隠密行動、戦闘、武器のトレーニングへどれだけの時間を費やしたかを示す積み上げ棒グラフの作成に励んでいます。 彼が使用していた `div` タグを `figure` タグに変更し、キャプションを囲んでいる `p` タグを `figcaption` タグに変更することで、彼のページがより良い構造になるよう手伝ってください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードには `figure` タグが 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert($('figure').length == 1);
|
||||
```
|
||||
|
||||
コードには `figcaption` タグが 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert($('figcaption').length == 1);
|
||||
```
|
||||
|
||||
コードに `div` タグを含めないでください。
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
コードに `p` タグを含めないでください。
|
||||
|
||||
```js
|
||||
assert($('p').length == 0);
|
||||
```
|
||||
|
||||
`figcaption` は `figure` タグの子要素である必要があります。
|
||||
|
||||
```js
|
||||
assert($('figure').children('figcaption').length == 1);
|
||||
```
|
||||
|
||||
`figure` 要素には終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/figure>/g) &&
|
||||
code.match(/<\/figure>/g).length === code.match(/<figure>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
|
||||
<!-- Only change code below this line -->
|
||||
<div>
|
||||
<!-- Stacked bar chart will go here -->
|
||||
<br>
|
||||
<p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
|
||||
</div>
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<figure>
|
||||
<!-- Stacked bar chart will go here -->
|
||||
<br>
|
||||
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 587d778a367417b2b2512aa6
|
||||
title: label 要素を使ってフォームフィールドのアクセシビリティを向上させる
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJMMAN'
|
||||
forumTopicId: 301016
|
||||
dashedName: improve-form-field-accessibility-with-the-label-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
セマンティックな HTML マークアップでアクセシビリティを向上させるには、適切なタグ名と属性を使用する必要があります。 ここからいくつかのチャレンジでは、フォームで属性を使用する主要なシナリオを学びます。
|
||||
|
||||
`label` タグは、指定のフォームコントロール (入力フィールド) アイテムのテキストを囲みます。通常は、選択肢の名前またはラベルを囲みます。 これはアイテムと意味を紐付け、フォームをより読みやすくします。 `label` タグの `for` 属性は `label` とフォームコントロールを明示的に関連付けるもので、スクリーンリーダーが使用します。
|
||||
|
||||
「HTML と HTML5 の基礎」セクションのレッスンでラジオボタンとそのラベルについて学びました。 あのレッスンではテキストをクリック可能にするために、ラジオボタンの入力要素をラベルテキストと共に `label` 要素の内側に入れました。 同じことを実現するもう一つの方法が、このレッスンで説明する `for` 属性を使うことです。
|
||||
|
||||
`for` 属性の値は必ずフォームコントロールの `id` 属性と同じ値でなければなりません。 例:
|
||||
|
||||
```html
|
||||
<form>
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name">
|
||||
</form>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat は彼の示唆に富んだブログ記事に多くの関心が寄せられるだろうと期待しているので、電子メールのサインアップフォームも設置したいと考えています。 電子メール (Email) の `label` の `for` 属性に、`input` フィールドの `id` と一致する値を追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`label` タグの `for` 属性は空にしてはいけません。
|
||||
|
||||
```js
|
||||
assert($('label').attr('for'));
|
||||
```
|
||||
|
||||
`for` 属性の値は電子メールの `input` の `id` 値と一致している必要があります。
|
||||
|
||||
```js
|
||||
assert($('label').attr('for') == 'email');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
|
||||
|
||||
<label>Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
|
||||
|
||||
<label for="email">Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,80 @@
|
||||
---
|
||||
id: 587d778e367417b2b2512aab
|
||||
title: 高コントラストのテキストで読みやすさを向上させる
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cKb3nCq'
|
||||
forumTopicId: 301017
|
||||
dashedName: improve-readability-with-high-contrast-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
前景色と背景色間でコントラストが低いと、テキストが読みづらくなります。 十分なコントラストはコンテンツの可読性を向上させますが、「十分」とは何を意味するのでしょうか？
|
||||
|
||||
ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) では、通常のテキストに対して少なくとも 4.5 〜 1 のコントラスト比を推奨しています。 この比率は 2 色の相対輝度値を比較することで算出します。 その範囲は、比率が 1:1 で同じ色だったりコントラストがない場合から、白に対する黒の比率 21:1、つまり最も大きなコントラストがある場合までの値を取ります。 オンラインで利用可能な多くのコントラストチェックツールがあり、この比率を計算できます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat の最近のブログ記事では明るいグレーに白い背景色を使っていますが、このコントラスト比は 1.5:1 で読み辛くなっています。 テキストの `color` を現在のグレー (`#D3D3D3`) から濃いグレー (`#636363`) に変更し、コントラスト比を 6:1 に改善してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`body` のテキストの `color` を濃いグレーに変更してください。
|
||||
|
||||
```js
|
||||
assert($('body').css('color') == 'rgb(99, 99, 99)');
|
||||
```
|
||||
|
||||
`body` の `background-color` は変更しないでください。
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') == 'rgb(255, 255, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: #D3D3D3;
|
||||
background-color: #FFF;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: #636363;
|
||||
background-color: #FFF;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 587d774e367417b2b2512a9f
|
||||
title: main 要素を使用してコンテンツに直接ジャンプする
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7zuE'
|
||||
forumTopicId: 301018
|
||||
dashedName: jump-straight-to-the-content-using-the-main-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 では、より多くの選択肢を開発者に提供すると同時にアクセシビリティ機能も組み込んだ新しい要素が導入されました。 それらのタグとして特に `main`、`header`、`footer`、`nav`、`article`、`section` があります。
|
||||
|
||||
デフォルトでは、ブラウザはこれらの要素を特に装飾のない `div` と同じように表示します。 しかし、これらを適切に使用することでマークアップに追加の意味を与えることができます。 タグ名だけでそこに含まれる情報の種類を示すことができるので、そのコンテンツにセマンティックな意味を追加することができます。 アシスティブ・テクノロジー (支援技術) はこの情報にアクセスして、より良いページ要約やナビゲーションオプションをユーザーに提供することができます。
|
||||
|
||||
`main` 要素は (名前から推測できる通り) メインコンテンツを囲うために使用されます。この要素は各ページに1つだけであるべきです。 これはページの中心的なトピックに関連する情報を囲むためのものです。 ナビゲーションリンクやバナーなど、ページをまたいで繰り返す項目を含めるべきではありません。
|
||||
|
||||
`main` タグには、支援技術でメインコンテンツに素早く移動できるようにするための目印となる機能も埋め込まれています。 ページの上部に「メインコンテンツへ移動」といったリンクがあるのを見たことがあるでしょうか。`main` タグを使用すれば、自動的に支援機器にその機能を提供することができます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat は忍者の武器に関するページのアイデアを持っています。 (他のチャレンジで説明する) `header` と `footer` の間に、`main` の開始タグと終了タグを追加して、彼のマークアップ作業を手伝ってあげてください。 今のところ `main` タグは空のままにしておいてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードには `main` タグが1つ必要です。
|
||||
|
||||
```js
|
||||
assert($('main').length == 1);
|
||||
```
|
||||
|
||||
`main` タグは、`header` の終了タグと `footer` の開始タグの間でなければなりません。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<header>
|
||||
<h1>Weapons of the Ninja</h1>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<footer></footer>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<header>
|
||||
<h1>Weapons of the Ninja</h1>
|
||||
</header>
|
||||
<main>
|
||||
|
||||
</main>
|
||||
<footer></footer>
|
||||
```
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 587d774c367417b2b2512a9d
|
||||
title: 代替テキストを空白のままにする必要がある場合を知る
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9P4t2'
|
||||
forumTopicId: 301019
|
||||
dashedName: know-when-alt-text-should-be-left-blank
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
前回のチャレンジでは、`img` タグを使用する際に `alt` 属性の指定が必須であることを学びました。 ただし、既に画像を説明するキャプションとグループ化されていたり、装飾のみに使用されていたりする画像の場合もあります。 これらの場合、`alt` テキストは冗長、もしくは不要かもしれません。
|
||||
|
||||
画像が既にテキストコンテンツによって説明されている、もしくは特に意味を持たない画像である場合、`img` には `alt` 属性は引き続き必要ですが、空の文字列が設定可能です。 例:
|
||||
|
||||
```html
|
||||
<img src="visualDecoration.jpeg" alt="">
|
||||
```
|
||||
|
||||
背景画像は通常、「装飾用」画像に分類されます。 ただし、通常これらは CSS ルールによって適用されるため、スクリーンリーダーが処理するマークアップの一部ではありません。
|
||||
|
||||
**注:** キャプション付きの画像の場合、サーチエンジンが画像コンテンツの内容を分類するのに役立つので、`alt` テキストを含めると良いでしょう。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat は彼のウェブサイトのブログ部分の骨組みとなるコードを書きました。 二つの記事の間に日本刀の装飾画像を追加し、視覚的な切れ目を入れようとしています。 `img` タグに `alt` 属性を追加し、空の文字列に設定してください。 (注: `src` は実際のファイルとリンクしていません。ディスプレイに刀が表示されていなくても心配ありません。)
|
||||
|
||||
# --hints--
|
||||
|
||||
`img` 要素には `alt` 属性が必要です。
|
||||
|
||||
```js
|
||||
assert(!($('img').attr('alt') == undefined));
|
||||
```
|
||||
|
||||
`alt` 属性は空文字列に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert($('img').attr('alt') == '');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
```
|
||||
@ -0,0 +1,244 @@
|
||||
---
|
||||
id: 587d778d367417b2b2512aaa
|
||||
title: カスタム CSS でスクリーンリーダーにのみ認識される要素を作成する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cJ8QGkhJ'
|
||||
forumTopicId: 301020
|
||||
dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
応用アクセシビリティでのこれまでチャレンジでは、CSS を一切使用していないことに気付きましたか？ これは視覚的な要素を導入するより前に、論理的なドキュメントの概要とコンテンツの周りを意味のあるタグで囲むことの方が重要であることを示しています。
|
||||
|
||||
一方で、スクリーンリーダー専用のコンテンツを視覚的に隠したい場合には、CSS のマジックによってページのアクセシビリティを向上させることが可能です。 この状況は、情報が視覚的なフォーマット (チャートなど) である場合に発生します。スクリーンリーダーユーザーがデータにアクセスするためには別の表現 (表など) が必要になります。 CSS は、スクリーンリーダー専用の要素をブラウザ画面の可視エリア以外の場所に配置するために使用されます。
|
||||
|
||||
以下はこれを達成するための CSS ルールの例です。
|
||||
|
||||
```css
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
top: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
```
|
||||
|
||||
**注:** 以下の CSS によるアプローチでは同じことができません。
|
||||
|
||||
<ul>
|
||||
<li><code>display: none;</code> または <code>visibility: hidden;</code> はスクリーンリーダーユーザーを含むすべての人からコンテンツを非表示にします。</li>
|
||||
<li><code>width: 0px; height: 0px;</code> といったピクセルサイズが0の値は、ドキュメントの構成からその要素を取り除くため、スクリーンリーダーもこれを無視することを意味します。</li>
|
||||
</ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat は、トレーニングページ用の非常にクールな積み上げ棒グラフを作成し、視覚障害のあるユーザー用の表データも用意しました。 テーブルには既に `sr-only` クラスがありますが、まだ CSS ルールは入力されていません。 `position` に `absolute` の値、`left` に `-10000px` の値、`width` と `height` 両方に `1px` の値を設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`sr-only` クラスの `position` プロパティに値 `absolute` を設定する必要があります。
|
||||
|
||||
```js
|
||||
assert($('.sr-only').css('position') == 'absolute');
|
||||
```
|
||||
|
||||
`sr-only` クラスの `left` プロパティに値 `-10000px` を設定する必要があります。
|
||||
|
||||
```js
|
||||
assert($('.sr-only').css('left') == '-10000px');
|
||||
```
|
||||
|
||||
`sr-only` クラスの `width` プロパティに値 `1` ピクセルを設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/width:\s*?1px/gi));
|
||||
```
|
||||
|
||||
`sr-only` クラスの `height` プロパティに値 `1` ピクセルを設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/height:\s*?1px/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
.sr-only {
|
||||
position: ;
|
||||
left: ;
|
||||
width: ;
|
||||
height: ;
|
||||
top: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<section>
|
||||
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
|
||||
<figure>
|
||||
<!-- Stacked bar chart of weekly training -->
|
||||
<p>[Stacked bar chart]</p>
|
||||
<br />
|
||||
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||
</figure>
|
||||
<table class="sr-only">
|
||||
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th scope="col">Stealth & Agility</th>
|
||||
<th scope="col">Combat</th>
|
||||
<th scope="col">Weapons</th>
|
||||
<th scope="col">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Week One</th>
|
||||
<td>3</td>
|
||||
<td>5</td>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Two</th>
|
||||
<td>4</td>
|
||||
<td>5</td>
|
||||
<td>3</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Three</th>
|
||||
<td>4</td>
|
||||
<td>6</td>
|
||||
<td>3</td>
|
||||
<td>13</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
top: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<section>
|
||||
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
|
||||
<figure>
|
||||
<!-- Stacked bar chart of weekly training -->
|
||||
<p>[Stacked bar chart]</p>
|
||||
<br />
|
||||
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||
</figure>
|
||||
<table class="sr-only">
|
||||
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th scope="col">Stealth & Agility</th>
|
||||
<th scope="col">Combat</th>
|
||||
<th scope="col">Weapons</th>
|
||||
<th scope="col">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Week One</th>
|
||||
<td>3</td>
|
||||
<td>5</td>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Two</th>
|
||||
<td>4</td>
|
||||
<td>5</td>
|
||||
<td>3</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Three</th>
|
||||
<td>4</td>
|
||||
<td>6</td>
|
||||
<td>3</td>
|
||||
<td>13</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512aaf
|
||||
title: HTML アクセスキーでリンクをナビゲーション可能にする
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQvmaTp'
|
||||
forumTopicId: 301021
|
||||
dashedName: make-links-navigable-with-html-access-keys
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML は要素をアクティブ化したりフォーカスを与えるショートカットキーを指定する `accesskey` 属性を提供します。 `accesskey` 属性を追加することで、キーボードだけを使用するユーザーのナビゲーションがより効率的になります。
|
||||
|
||||
HTML5 ではこの属性を任意の要素に使用することができますが、これを対話型の要素に使用すると特に有益です。 これにはリンク、ボタン、フォームコントロールが含まれます。
|
||||
|
||||
例:
|
||||
|
||||
```html
|
||||
<button accesskey="b">Important Button</button>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat は、2 つのブログ記事タイトル周りのリンクがキーボードショートカットを持つことで、サイトのユーザーがすぐに記事全体のページへ移動できるようにしたいと思っています。 両方のリンクに `accesskey` 属性を追加し、1 番目のものに `g` (Garfield の g) に、2 番目のものに `c` (Chuck Norris の c) を設定します。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードは `id` が `first` 値を持つ `a` タグに `accesskey` 属性を追加する必要があります。
|
||||
|
||||
```js
|
||||
assert($('#first').attr('accesskey'));
|
||||
```
|
||||
|
||||
コードは `id` が `second` 値を持つ `a` タグに `accesskey` 属性を追加する必要があります。
|
||||
|
||||
```js
|
||||
assert($('#second').attr('accesskey'));
|
||||
```
|
||||
|
||||
コードには `id` が `first` 値を持つ `a` タグに `accesskey` 属性として `g` を設定する必要があります。 大文字・小文字が区別されることに注意してください。
|
||||
|
||||
```js
|
||||
assert($('#first').attr('accesskey') == 'g');
|
||||
```
|
||||
|
||||
コードには `id` が `second` 値を持つ `a` タグに `accesskey` 属性として `c` を設定する必要があります。 大文字・小文字が区別されることに注意してください。
|
||||
|
||||
```js
|
||||
assert($('#second').attr('accesskey') == 'c');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="first" href="#">The Garfield Files: Lasagna as Training Fuel?</a></h2>
|
||||
|
||||
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="second" href="#">Is Chuck Norris a Cat Person?</a></h2>
|
||||
|
||||
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="first" accesskey="g" href="#">The Garfield Files: Lasagna as Training Fuel?</a></h2>
|
||||
|
||||
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="second" accesskey="c" href="#">Is Chuck Norris a Cat Person?</a></h2>
|
||||
|
||||
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,116 @@
|
||||
---
|
||||
id: 587d7788367417b2b2512aa3
|
||||
title: footer の目印でスクリーンリーダーのナビゲーションを容易にする
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/crVrDh8'
|
||||
forumTopicId: 301022
|
||||
dashedName: make-screen-reader-navigation-easier-with-the-footer-landmark
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`header` や `nav` と同じように、`footer` 要素にも目印になる機能が備わっており、支援機器がそこへ素早く移動することを可能にします。 これは主に著作権情報や関連ドキュメントへのリンクをページの下部に含めるために使用されます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat のトレーニングページ作成は順調に進んでいます。 彼がページの下部にある著作権情報を囲むために使用した `div` を `footer` 要素に変更してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードには `footer` タグが 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert($('footer').length == 1);
|
||||
```
|
||||
|
||||
コードに `div` タグを含めないでください。
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
コードには `footer` の開始タグと終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(code.match(/<footer>\s*© 2018 Camper Cat\s*<\/footer>/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<div>© 2018 Camper Cat</div>
|
||||
|
||||
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
|
||||
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,111 @@
|
||||
---
|
||||
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(/<header>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
</header>
|
||||
|
||||
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 587d7788367417b2b2512aa2
|
||||
title: nav の目印でスクリーンリーダーのナビゲーションを容易にする
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/czVwWSv'
|
||||
forumTopicId: 301024
|
||||
dashedName: make-screen-reader-navigation-easier-with-the-nav-landmark
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`nav` 要素もまた、スクリーンリーダーのナビゲーションを容易にするために目印を埋め込む機能を持つ HTML5 アイテムです。 このタグはページ内のメインナビゲーションリンクを囲うためのものです。
|
||||
|
||||
ページ下部に繰り返し表示されるサイトリンクがある場合は、さらにこれらを `nav` タグでマークアップする必要はありません。 (次のチャレンジで取り上げる) `footer` を使用するだけで十分です。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat はトレーニングページの上部にナビゲーションリンクを設置しましたが、それを `div` で囲っています。 ページのアクセシビリティが向上させるために、`div` タグを `nav` タグに変更してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードには `nav` タグが 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert($('nav').length == 1);
|
||||
```
|
||||
|
||||
`nav` タグは `ul` とそのリストの項目を囲む必要があります。
|
||||
|
||||
```js
|
||||
assert($('nav').children('ul').length == 1);
|
||||
```
|
||||
|
||||
コードに `div` タグを含めないでください。
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
`nav` 要素には終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/nav>/g) &&
|
||||
code.match(/<\/nav>/g).length === code.match(/<nav>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
|
||||
<div>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,132 @@
|
||||
---
|
||||
id: 587d778c367417b2b2512aa9
|
||||
title: HTML5 の datetime 属性で時刻を標準化する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMgtz'
|
||||
forumTopicId: 301025
|
||||
dashedName: standardize-times-with-the-html5-datetime-attribute
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
日付に関する話題を続けます。HTML5 では時刻を標準化する `time` 要素と `datetime` 属性が導入されました。 `time` 要素は、ページ上の日付や時刻をラップできるインライン要素です。 `datetime` 属性は、その日付の有効なフォーマットを保持します。 支援デバイスがこの値にアクセスします。 テキスト中で時刻が非公式または口語的な形式で記載されている場合であっても、標準化された形式の時刻を記述することで混乱を避けることができます。
|
||||
|
||||
例:
|
||||
|
||||
```html
|
||||
<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat の Mortal Kombat の調査結果が出ました！ `Thursday, September 15<sup>th</sup>` というテキストの周りを `time` タグでラップし、`2016-09-15` が設定された `datetime` 属性を追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードには `Thank you to everyone for responding to Master Camper Cat's survey.` のテキストを持つ `p` 要素と、`time` 要素が必要です。
|
||||
|
||||
```js
|
||||
assert(timeElement);
|
||||
```
|
||||
|
||||
追加された `time` タグは `Thursday, September 15<sup>th</sup>` テキストをラップしなければなりません。
|
||||
|
||||
```js
|
||||
assert(
|
||||
timeElement &&
|
||||
timeElement?.innerHTML?.trim() === 'Thursday, September 15<sup>th</sup>'
|
||||
);
|
||||
```
|
||||
|
||||
`time` タグは空ではない `datetime` 属性を持つ必要があります。
|
||||
|
||||
```js
|
||||
assert(datetimeAttr && datetimeAttr?.length);
|
||||
```
|
||||
|
||||
追加された `datetime` 属性には `2016-09-15` の値を設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(datetimeAttr === '2016-09-15');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
<script>
|
||||
const pElement = [...document.querySelectorAll("article > p")]
|
||||
.filter(x => x?.textContent?.includes("Thank you to everyone for responding to Master Camper Cat's survey."));
|
||||
const timeElement = pElement[0] ? pElement[0].querySelector("time") : null;
|
||||
const datetimeAttr = timeElement?.getAttribute("datetime");
|
||||
</script>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Mortal Kombat Tournament Survey Results</h2>
|
||||
|
||||
<!-- Only change code below this line -->
|
||||
|
||||
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15<sup>th</sup>. May the best ninja win!</p>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<section>
|
||||
<h3>Comments:</h3>
|
||||
<article>
|
||||
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
|
||||
<p>Johnny Cage better be there, I'll finish him!</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
|
||||
<p>Wow, much combat, so mortal.</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
|
||||
<p>Looks like I'll be busy that day.</p>
|
||||
</article>
|
||||
</section>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Mortal Kombat Tournament Survey Results</h2>
|
||||
|
||||
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>
|
||||
|
||||
<section>
|
||||
<h3>Comments:</h3>
|
||||
<article>
|
||||
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
|
||||
<p>Johnny Cage better be there, I'll finish him!</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
|
||||
<p>Wow, much combat, so mortal.</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
|
||||
<p>Looks like I'll be busy that day.</p>
|
||||
</article>
|
||||
</section>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 587d774d367417b2b2512a9e
|
||||
title: 見出しを使用してコンテンツの階層関係を表す
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cqVEktm'
|
||||
forumTopicId: 301026
|
||||
dashedName: use-headings-to-show-hierarchical-relationships-of-content
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
見出し (`h1` から `h6` 要素) はコンテンツに構造とラベルを付けるのに役立つタグです。 スクリーンリーダーは、ユーザーが概略を把握するためページの見出しのみを読み上げるように設定することができます。 これは、マークアップ内の見出しタグがセマンティック (semantic) な意味を持ち、互いの関係を表していることが重要であることを意味します。大きさだけで見出しを選ぶべきではありません。
|
||||
|
||||
*セマンティックな意味*とは、コンテンツを囲むタグがその中にある情報の種類を表していることを意味します。
|
||||
|
||||
もしあなたが序論、本文、結論という構成で記事を書いていた場合、本文のサブセクションとして結論を置くことは適切ではないでしょう。 結論は独立したセクションであるべきです。 同様に、ウェブページ内の見出しタグも順番に並べてコンテンツの階層関係を示す必要があります。
|
||||
|
||||
同じランク (または上位) の見出しは新しい暗黙的なセクションを開始し、下位ランクの見出しは前のセクションのサブセクションを開始します。
|
||||
|
||||
たとえば、いくつかのサブセクションが `h4` 要素でラベル付けされ、`h2` 要素の後につづいているページは、スクリーンリーダーの利用者には分かりにくくなるでしょう。 6 つも選択肢があれば、ブラウザ上の見栄えが良いタグを使いたくなるでしょう。しかし、相対的なサイズを編集するには CSS を使うことができます。
|
||||
|
||||
最後のポイントとして、各ページは常に (かつ、たった一つの) `h1` 要素を持たなければなりません。この要素がコンテンツの主題を表します。 この見出しや他の見出しは、検索エンジンがページのトピックを理解するために部分的に使用されます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat は忍者になる方法についての専用ページをサイト上に作りたいと考えています。 マークアップがコンテンツにセマンティックな意味を与え、セクションの適切な親子関係を表すように、見出しの修正を手伝ってあげてください。 全ての `h5` タグを、`h2` タグのサブセクションであることを示す適切な見出しレベルに変更してください。 そのためには `h3` タグを使用してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードには `h3` 要素が 6 つ必要です。
|
||||
|
||||
```js
|
||||
assert($('h3').length === 6);
|
||||
```
|
||||
|
||||
コードには `h3` の終了タグが 6 つ必要です。
|
||||
|
||||
```js
|
||||
assert((code.match(/\/h3/g) || []).length === 6);
|
||||
```
|
||||
|
||||
コードに `h5` 要素を含めないでください。
|
||||
|
||||
```js
|
||||
assert($('h5').length === 0);
|
||||
```
|
||||
|
||||
コードに `h5` の終了タグを含めないでください。
|
||||
|
||||
```js
|
||||
assert(/\/h5/.test(code) === false);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>How to Become a Ninja</h1>
|
||||
<main>
|
||||
<h2>Learn the Art of Moving Stealthily</h2>
|
||||
<h5>How to Hide in Plain Sight</h5>
|
||||
<h5>How to Climb a Wall</h5>
|
||||
|
||||
<h2>Learn the Art of Battle</h2>
|
||||
<h5>How to Strengthen your Body</h5>
|
||||
<h5>How to Fight like a Ninja</h5>
|
||||
|
||||
<h2>Learn the Art of Living with Honor</h2>
|
||||
<h5>How to Breathe Properly</h5>
|
||||
<h5>How to Simplify your Life</h5>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>How to Become a Ninja</h1>
|
||||
<main>
|
||||
<h2>Learn the Art of Moving Stealthily</h2>
|
||||
<h3>How to Hide in Plain Sight</h3>
|
||||
<h3>How to Climb a Wall</h3>
|
||||
|
||||
<h2>Learn the Art of Battle</h2>
|
||||
<h3>How to Strengthen your Body</h3>
|
||||
<h3>How to Fight like a Ninja</h3>
|
||||
|
||||
<h2>Learn the Art of Living with Honor</h2>
|
||||
<h3>How to Breathe Properly</h3>
|
||||
<h3>How to Simplify your Life</h3>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,144 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512ab0
|
||||
title: tabindex を使用して要素にキーボードフォーカスを追加する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMDHW'
|
||||
forumTopicId: 301027
|
||||
dashedName: use-tabindex-to-add-keyboard-focus-to-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML の `tabindex` 属性は要素のキーボードフォーカスに関連した 3 つの異なる機能を持っています。 これがタグ上にある場合、要素にフォーカス可能なことを示します。 値 (正、負、またはゼロの整数) によって動作が決まります。
|
||||
|
||||
リンクやフォームコントロールなどの特定の要素は、ユーザーがページをタブで移動する際、自動的にキーボードフォーカスを受け取ります。 これは要素が HTML ソース上でマークアップされたものと同じ順序です。 これと同じ機能を `div` や `span`、`p` といった他の要素に対しても、`tabindex="0"` 属性を配置することで与えることができます。 例:
|
||||
|
||||
```html
|
||||
<div tabindex="0">I need keyboard focus!</div>
|
||||
```
|
||||
|
||||
**注:** 負の `tabindex` 値 (通常 -1) は、要素がフォーカス可能であるものの、キーボードからは到達できないことを示します。 この手法は一般的に、プログラム的にコンテンツへのフォーカスを与えるために使用されます (ポップアップウィンドウで使用される `div` をアクティブにする場合など)。これはこのチャレンジの範囲外です。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat は、ユーザーに関する情報を収集するための新しい調査を作成しました。 彼は入力フィールドが自動的にキーボードフォーカスを得ることを知っていますが、キーボードユーザーがタブで移動する間に説明文で一時停止したいと思っています。 `tabindex` 属性を `p` タグに追加し、値を `0` に設定してください。 ボーナス - `tabindex` を使用することで、CSS の疑似クラス `:focus` が `p` タグで動作するようになります。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードではフォームの説明文を保持する `p` タグに `tabindex` 属性を追加してください。
|
||||
|
||||
```js
|
||||
assert($('p').attr('tabindex'));
|
||||
```
|
||||
|
||||
コードには `p` タグの `tabindex` 属性として 0 を設定する必要があります。
|
||||
|
||||
```js
|
||||
assert($('p').attr('tabindex') == '0');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
p:focus {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Ninja Survey</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
|
||||
|
||||
<p>Instructions: Fill in ALL your information then click <b>Submit</b></p>
|
||||
|
||||
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" id="username" name="username"><br>
|
||||
<fieldset>
|
||||
<legend>What level ninja are you?</legend>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">9th Life Master</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<fieldset>
|
||||
<legend>Select your favorite weapons:</legend>
|
||||
<input id="stars" type="checkbox" name="weapons" value="stars">
|
||||
<label for="stars">Throwing Stars</label><br>
|
||||
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
|
||||
<label for="nunchucks">Nunchucks</label><br>
|
||||
<input id="sai" type="checkbox" name="weapons" value="sai">
|
||||
<label for="sai">Sai Set</label><br>
|
||||
<input id="sword" type="checkbox" name="weapons" value="sword">
|
||||
<label for="sword">Sword</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form><br>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
p:focus {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Ninja Survey</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
|
||||
|
||||
<p tabindex="0">Instructions: Fill in ALL your information then click <b>Submit</b></p>
|
||||
|
||||
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" id="username" name="username"><br>
|
||||
<fieldset>
|
||||
<legend>What level ninja are you?</legend>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">9th Life Master</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<fieldset>
|
||||
<legend>Select your favorite weapons:</legend>
|
||||
<input id="stars" type="checkbox" name="weapons" value="stars">
|
||||
<label for="stars">Throwing Stars</label><br>
|
||||
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
|
||||
<label for="nunchucks">Nunchucks</label><br>
|
||||
<input id="sai" type="checkbox" name="weapons" value="sai">
|
||||
<label for="sai">Sai Set</label><br>
|
||||
<input id="sword" type="checkbox" name="weapons" value="sword">
|
||||
<label for="sword">Sword</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form><br>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,160 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512ab1
|
||||
title: tabindex を使用して複数の要素のキーボードフォーカスの順序を指定する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzRRcb'
|
||||
forumTopicId: 301028
|
||||
dashedName: use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`tabindex` 属性は要素をタブ移動する順序も指定することができます。 これは、属性の値が 1 以上の正の数に設定されている場合に行われます。
|
||||
|
||||
`tabindex="1"` を設定すると、最初にその要素へキーボードがフォーカスします。 次に、指定された `tabindex` 値 (2、3、など) のシーケンスを循環してから、デフォルトと `tabindex="0"` の項目に移動します。
|
||||
|
||||
タブの順序がこのように設定されている場合、(HTML ソースを使用した) デフォルトの順序を上書きすることに注意することが重要です。 これは、ページの上部からナビゲーションが開始すると思っているユーザーを混乱させる可能性があります。 この手法は特定の状況によっては必要になる場合があるかもしれませんが、アクセシビリティの観点からは、これを採用する前に注意してください。
|
||||
|
||||
例:
|
||||
|
||||
```html
|
||||
<div tabindex="1">I get keyboard focus, and I get it first!</div>
|
||||
```
|
||||
|
||||
```html
|
||||
<div tabindex="2">I get keyboard focus, and I get it second!</div>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat の Inspirational Quotes のページには検索フィールドがあり、CSS で右上隅に配置させる予定です。 彼は、検索 (search) の `input` と送信 (submit) の `input` のフォームコントロールを、タブで移動する順の最初の 2 つのアイテムにしたいと考えています。 `tabindex` 属性に `1` をセットしたものを `search` `input` に追加し、`tabindex` 属性に `2` をセットしたものを `submit` `input` に追加してください。
|
||||
|
||||
もう一つ注意すべきことは、ブラウザーによっては、要素がクリックされるとタブ移動が順序の途中から始まるようになるかもしれないことです。 このページには、常にタブの順序の先頭から始まるようにするための要素が追加してあります。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードは `search` `input` タグに `tabindex` 属性を追加する必要があります。
|
||||
|
||||
```js
|
||||
assert($('#search').attr('tabindex'));
|
||||
```
|
||||
|
||||
コードは `submit` `input` タグに `tabindex` 属性を追加する必要があります。
|
||||
|
||||
```js
|
||||
assert($('#submit').attr('tabindex'));
|
||||
```
|
||||
|
||||
コードは `search` `input` タグの `tabindex` 属性として 1 を設定する必要があります。
|
||||
|
||||
```js
|
||||
assert($('#search').attr('tabindex') == '1');
|
||||
```
|
||||
|
||||
コードは `submit` `input` タグの`tabindex`属性として 2 を設定する必要があります。
|
||||
|
||||
```js
|
||||
assert($('#submit').attr('tabindex') == '2');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<div tabindex="1" class="overlay"></div>
|
||||
<header>
|
||||
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Blog</a></li>
|
||||
<li><a href="">Training</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<form>
|
||||
<label for="search">Search:</label>
|
||||
|
||||
|
||||
<input type="search" name="search" id="search">
|
||||
<input type="submit" name="submit" value="Submit" id="submit">
|
||||
|
||||
|
||||
</form>
|
||||
<h2>Inspirational Quotes</h2>
|
||||
<blockquote>
|
||||
<p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>
|
||||
- Chuck Norris</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>
|
||||
- TMNT</p>
|
||||
</blockquote>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
<style>
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0 !important;
|
||||
padding: 8px;
|
||||
}
|
||||
.overlay {
|
||||
margin: -8px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<div tabindex="1" class="overlay"></div>
|
||||
<header>
|
||||
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Blog</a></li>
|
||||
<li><a href="">Training</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<form>
|
||||
<label for="search">Search:</label>
|
||||
|
||||
|
||||
<input tabindex="1" type="search" name="search" id="search">
|
||||
<input tabindex="2" type="submit" name="submit" value="Submit" id="submit">
|
||||
|
||||
|
||||
</form>
|
||||
<h2>Inspirational Quotes</h2>
|
||||
<blockquote>
|
||||
<p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>
|
||||
- Chuck Norris</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>
|
||||
- TMNT</p>
|
||||
</blockquote>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
<style>
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0 !important;
|
||||
padding: 8px;
|
||||
}
|
||||
.overlay {
|
||||
margin: -8px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 587d774e367417b2b2512aa0
|
||||
title: コンテンツを article 要素でラップする
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp79S3'
|
||||
forumTopicId: 301029
|
||||
dashedName: wrap-content-in-the-article-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`article` は、マークアップにセマンティックな意味を追加する新しい HTML5 要素の 1 つです。 `article` はセクショニング (区分け) 要素であり、独立した自己完結型コンテンツをラップするために使用されます。 このタグはブログのエントリ、フォーラムの投稿、ニュース記事でうまく機能します。
|
||||
|
||||
コンテンツが単独で成り立つかどうかは、通常は主観的に判断するしかありませんが、いくつかの簡単なテストを行うこともできます。 全ての周辺コンテキストを削除しても、そのコンテンツはまだ意味を成すでしょうか？ 同様に、テキストの場合、それが RSS フィードに流れてきた場合でも意味を成す内容でしょうか。
|
||||
|
||||
支援技術を使っている人々は、あなたのサイトをより深く理解するために、系統だって整理された意味的に重要なマークアップに頼っていることを忘れないでください。
|
||||
|
||||
**注:** `section` 要素は HTML5 で新たに登場したもので、`article` と少し意味が異なります。 `article` は独立したコンテンツ用で、`section` はテーマに関連するコンテンツをグループ化するためのものです。 必要に応じて、これらはお互いの要素の中で使用することもできます。 例えば、もし本が `article` だとすると、各章は `section` になります。 コンテンツグループ間に関連性がない場合は `div` を使用します。
|
||||
|
||||
`<div>` - コンテンツをグループ化する `<section>` - 関連があるコンテンツをグループ化する `<article>` - 独立した、自己完結型コンテンツをグループ化する
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat は `article` タグを使ってブログページの投稿を囲いましたが、一番上の投稿にはそれを使うのを忘れてしまいました。 `div` タグを変更し、代わりに `article` タグを使用してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードには `article` タグが3つ必要です。
|
||||
|
||||
```js
|
||||
assert($('article').length == 3);
|
||||
```
|
||||
|
||||
コードに `div` タグを含めないでください。
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<main>
|
||||
<div>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</div>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<main>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,165 @@
|
||||
---
|
||||
id: 587d778b367417b2b2512aa7
|
||||
title: ラジオボタンを fieldset 要素で囲んでアクセシビリティを向上させる
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJVefw'
|
||||
forumTopicId: 301030
|
||||
dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
フォームの次のトピックとして、ラジオボタンのアクセシビリティについて説明します。 前回のチャレンジで説明したように、それぞれの選択肢には対応する項目の `id` に結び付く `for` 属性を持つ `label` が与えられます。 ラジオボタンは、ユーザーがどれか 1 つを選択する必要があるグループ内にあることが多いため、その選択肢がセットの一部であることを意味的に明示する方法があります。
|
||||
|
||||
`fieldset` タグでラジオボタンのグループ全体を囲むのがその方法です。 `legend` タグはグループの説明を提供するために使用され、スクリーンリーダーは `fieldset` 要素内の各選択肢と一緒にこの説明を読み上げます。
|
||||
|
||||
`fieldset` ラッパーと `legend` タグは、性別のように選択肢から選択内容が自明である場合には必須ではありません。 `label` で各ラジオボタンに `for` 属性を設定して使用するだけで十分です。
|
||||
|
||||
例:
|
||||
|
||||
```html
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Choose one of these three items:</legend>
|
||||
<input id="one" type="radio" name="items" value="one">
|
||||
<label for="one">Choice One</label><br>
|
||||
<input id="two" type="radio" name="items" value="two">
|
||||
<label for="two">Choice Two</label><br>
|
||||
<input id="three" type="radio" name="items" value="three">
|
||||
<label for="three">Choice Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat は、ユーザーがメールリストに登録するとき、忍者レベル情報を知りたいと考えています。 彼は前回のチャレンジで、各選択肢に対する `for` 属性を持つ `label` タグを使用してラジオボタンのセットを追加することを学びました。 がんばれ Camper Cat！ しかし、彼のコードはまだ助けを必要としています。 ラジオボタンを囲む `div` タグを `fieldset` タグに変更し、その中の `p` タグを `legend` タグに変更してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
ラジオボタンセットの周りに `fieldset` タグがなければなりません。
|
||||
|
||||
```js
|
||||
assert($('fieldset').length == 1);
|
||||
```
|
||||
|
||||
`fieldset` 要素には終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/fieldset>/g) &&
|
||||
code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
コードには、ユーザーがどのレベルの忍者かを尋ねるテキストの周りに `legend` タグが必要です。
|
||||
|
||||
```js
|
||||
assert($('legend').length == 1);
|
||||
```
|
||||
|
||||
コードに `div` タグを含めないでください。
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
コードには、ユーザーがどのレベルの忍者かを尋ねるテキストの周りの `p` タグが無いようにしてください。
|
||||
|
||||
```js
|
||||
assert($('p').length == 4);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
<label for="email">Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
|
||||
<!-- Only change code below this line -->
|
||||
<div>
|
||||
<p>What level ninja are you?</p>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">Master</label>
|
||||
</div>
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
<label for="email">Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
<fieldset>
|
||||
<legend>What level ninja are you?</legend>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">Master</label>
|
||||
</fieldset>
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
Reference in New Issue
Block a user