WEBVTT

1
00:00:00.000 --> 00:00:00.945
こんにちは。

2
00:00:00.945 --> 00:00:04.410
エイチティーエムエル、リファレンス解説です。

3
00:00:04.410 --> 00:00:08.978
エイチティーエムエルタグ編の五十八本目は、ラベルタグです。

4
00:00:08.978 --> 00:00:13.230
ラベルは、フォームの入力欄に説明を結び付けるタグです。

5
00:00:13.230 --> 00:00:17.877
たとえばメールアドレスやお名前といった文字は、ただ画面に書いただけでは、

6
00:00:17.877 --> 00:00:22.523
どの入力欄の説明かは見た目でしか伝わりません。

7
00:00:22.523 --> 00:00:27.012
ラベルで結び付けると、説明をクリックしただけで対応する入力欄に移動したり、

8
00:00:27.012 --> 00:00:31.501
チェックを付けたりできるようになります。

9
00:00:31.501 --> 00:00:36.541
さらに画面読み上げソフトでも、入力欄と説明がセットで伝わります。

10
00:00:36.541 --> 00:00:43.944
今回は結び付けの二つの書き方、クリックできる仕組み、間違えやすいポイントまで順に学びましょう。

11
00:00:43.944 --> 00:00:47.916
どんな場面で使うか、身近なフォームで考えてみましょう。

12
00:00:47.916 --> 00:00:51.741
お問い合わせフォームのお名前、メールアドレス、本文。

13
00:00:51.741 --> 00:00:53.360
会員登録のパスワード。

14
00:00:53.360 --> 00:00:56.596
アンケートのチェックボックスやラジオボタン。

15
00:00:56.596 --> 00:00:58.214
商品を選ぶプルダウン。

16
00:00:58.214 --> 00:01:03.952
これらすべての入力部品には、何を入れるのか、何を選ぶのかを示す説明が必要です。

17
00:01:03.952 --> 00:01:06.453
その説明を担当するのがラベルです。

18
00:01:06.453 --> 00:01:11.749
入力欄が増えるほど、説明との対応が分かりにくくなりますが、ラベルで正しく結び付けておけば、

19
00:01:11.749 --> 00:01:17.046
利用者は迷わず、支援技術を使う人も内容を理解できます。

20
00:01:17.046 --> 00:01:22.636
フォームを作るときは、入力欄とラベルを常にセットで考える習慣を付けましょう。

21
00:01:22.636 --> 00:01:24.554
基本の書き方を確認します。

22
00:01:24.554 --> 00:01:28.980
画面の例では、ラベルにフォー属性でイーメールと書き、入力欄のアイディーにもイーメールと書いて、

23
00:01:28.980 --> 00:01:33.406
ふたつを結び付けています。

24
00:01:33.406 --> 00:01:39.603
ここで最も間違えやすいのが、フォーはネームではなくアイディーに対応するという点です。

25
00:01:39.603 --> 00:01:45.799
ネームは送信時の項目名、アイディーは文書の中で要素を区別する目印で、役割が違います。

26
00:01:45.799 --> 00:01:49.488
アイディーは同じ文書の中で重複させてはいけません。

27
00:01:49.488 --> 00:01:53.397
値が一文字でもずれると結び付きは切れてしまうので、コピーしてそろえるなど、

28
00:01:53.397 --> 00:01:57.307
正確に一致させることが大切です。

29
00:01:57.307 --> 00:02:00.848
開始タグと終了タグの間に、説明の文字を書きます。

30
00:02:00.848 --> 00:02:05.871
もうひとつの書き方として、入力欄をラベルの中に入れる方法があります。

31
00:02:05.871 --> 00:02:12.815
画面の例のように、説明の文字と入力欄をまとめてラベルで囲むと、それだけで結び付きが成立します。

32
00:02:12.815 --> 00:02:16.657
この場合はフォーとアイディーを書く必要がありません。

33
00:02:16.657 --> 00:02:25.226
チェックボックスやラジオボタンでは、この包む書き方がよく使われ、文字と部品が近くに置けるので読みやすいのが利点です。

34
00:02:25.226 --> 00:02:30.692
ただし、ひとつのラベルの中に複数の入力部品を入れる書き方は避けてください。

35
00:02:30.692 --> 00:02:35.568
対応が曖昧になり、クリックや読み上げの動作も分かりにくくなります。

36
00:02:35.568 --> 00:02:39.557
どちらの書き方でも、結び付ける相手はひとつが原則です。

37
00:02:39.557 --> 00:02:43.574
ラベルを正しく結び付けると、操作がぐっと楽になります。

38
00:02:43.574 --> 00:02:45.806
代表例がチェックボックスです。

39
00:02:45.806 --> 00:02:52.054
チェック欄そのものは小さく、マウスでもスマートフォンのタップでも押しにくい部品です。

40
00:02:52.054 --> 00:02:59.493
ところがラベルと結び付けておくと、横の説明文字を押しただけでもチェックのオンとオフが切り替わります。

41
00:02:59.493 --> 00:03:04.849
ラジオボタンでも同じで、選択肢の文字全体がクリックできる範囲になります。

42
00:03:04.849 --> 00:03:09.610
テキスト入力欄では、ラベルを押すとその欄にカーソルが移動します。

43
00:03:09.610 --> 00:03:13.330
見た目の説明であるだけでなく、操作できる範囲を広げる実用的な役割がある点が、

44
00:03:13.330 --> 00:03:17.049
ラベルの大きな魅力です。

45
00:03:17.049 --> 00:03:20.765
活用例として、申込みフォームの形を見てみましょう。

46
00:03:20.765 --> 00:03:26.562
画面の例では、お名前と電話番号、それぞれの入力欄の直前にラベルを置いています。

47
00:03:26.562 --> 00:03:30.352
こうして目的を常に表示しておくと、入力の途中で、この欄には何を書くのでしたか、

48
00:03:30.352 --> 00:03:34.142
と迷うことがありません。

49
00:03:34.142 --> 00:03:40.087
記事でも、入力欄の目的を常に表示する場面がラベルの代表例として挙げられています。

50
00:03:40.087 --> 00:03:45.438
メールアドレスの例のように、オートコンプリート属性を入力欄に添えると、ブラウザーが過去の入力を候補として出してくれて、

51
00:03:45.438 --> 00:03:50.789
さらに使いやすくなります。

52
00:03:50.789 --> 00:03:56.437
ラベルは見出しのように装飾するためではなく、目的を伝えるために書くものです。

53
00:03:56.437 --> 00:04:00.530
よく混同されるプレースホルダーとの違いを整理します。

54
00:04:00.530 --> 00:04:07.772
プレースホルダーは、入力欄の中に薄く表示される入力例で、文字を打ち始めると消えてしまいます。

55
00:04:07.772 --> 00:04:12.180
つまり入力後には、何の欄だったのかが分からなくなります。

56
00:04:12.180 --> 00:04:16.273
一方ラベルは入力欄の外に常に表示され続ける説明です。

57
00:04:16.273 --> 00:04:21.468
そのため、説明をプレースホルダーだけで済ませるのは避けてください。

58
00:04:21.468 --> 00:04:23.357
おすすめは役割分担です。

59
00:04:23.357 --> 00:04:28.474
ラベルで欄の目的をはっきり示し、プレースホルダーは、たとえばアットマークを含むアドレスの形のような、

60
00:04:28.474 --> 00:04:33.590
書き方のヒントだけに使います。

61
00:04:33.590 --> 00:04:38.313
この区別を知っておくと、使いやすいフォームに一歩近づきます。

62
00:04:38.313 --> 00:04:40.347
ラベルの属性を確認します。

63
00:04:40.347 --> 00:04:46.918
ラベル専用で中心になるのはフォー属性で、結び付ける入力部品のアイディーを指定します。

64
00:04:46.918 --> 00:04:49.421
包む書き方ではフォーは不要です。

65
00:04:49.421 --> 00:04:51.767
そのほかは共通属性が使えます。

66
00:04:51.767 --> 00:04:57.008
アイディーは文書の中でひとつだけの目印、クラスはシーエスエスやジャバスクリプトでまとめて選ぶための名前、

67
00:04:57.008 --> 00:05:02.249
ラングは内容の言語を示します。

68
00:05:02.249 --> 00:05:09.446
画面の例では、複数行の入力欄であるテキストエリアにも、同じ考え方でラベルを結び付けています。

69
00:05:09.446 --> 00:05:15.235
データ属性に個人情報などの秘密を置かない点も、ほかの要素と共通の注意です。

70
00:05:15.235 --> 00:05:18.207
属性でラベルの意味自体は変わりません。

71
00:05:18.207 --> 00:05:20.197
よくある間違いを三つ挙げます。

72
00:05:20.197 --> 00:05:23.779
一つ目は、フォーの値にネームを書いてしまう間違いです。

73
00:05:23.779 --> 00:05:28.290
対応するのはアイディーだけなので、クリックしても反応しなくなります。

74
00:05:28.290 --> 00:05:31.607
二つ目は、アイディーの重複や、値の打ち間違いです。

75
00:05:31.607 --> 00:05:37.312
大文字と小文字の違いでも一致しなくなるため、開発者ツールで実際の構造を確認しましょう。

76
00:05:37.312 --> 00:05:42.884
三つ目は、ラベル自体を付け忘れたり、プレースホルダーだけで済ませたりする間違いです。

77
00:05:42.884 --> 00:05:46.068
読み上げでは説明のない入力欄になってしまいます。

78
00:05:46.068 --> 00:05:52.304
また、ボタンなどラベルを付けられない部品もあるため、対応できる部品かどうかも意識してください。

79
00:05:52.304 --> 00:05:54.400
ブラウザー互換性を確認します。

80
00:05:54.400 --> 00:06:00.619
記事が参照するエムディーエヌの記録では、ラベル要素はクロームが一以降、エッジが十二以降、

81
00:06:00.619 --> 00:06:06.838
ファイアフォックスが一以降、サファリが四以前から対応しており、フォー属性も同じ顔ぶれです。

82
00:06:06.838 --> 00:06:11.589
歴史の長い基本要素なので、現在の主要ブラウザーでは安心して使えます。

83
00:06:11.589 --> 00:06:15.642
実装後の確認では、まずラベルの文字をクリックして、目的の入力欄に移動するか、

84
00:06:15.642 --> 00:06:19.695
チェックが切り替わるかを試してください。

85
00:06:19.695 --> 00:06:27.521
次にキーボードのタブキーで順に移動できるか、三百二十ピクセル程度の細い画面でも説明と入力欄が欠けないかを見ます。

86
00:06:27.521 --> 00:06:32.412
クリックで反応しない場合は、フォーとアイディーの不一致を疑いましょう。

87
00:06:32.412 --> 00:06:33.865
最後にまとめです。

88
00:06:33.865 --> 00:06:38.709
ラベルタグは、フォームの入力欄に説明を結び付ける要素でした。

89
00:06:38.709 --> 00:06:40.323
ポイントは三つです。

90
00:06:40.323 --> 00:06:48.396
一つ目、結び付けはフォーとアイディーを一致させる方法と、入力欄をラベルで包む方法の二通りがあること。

91
00:06:48.396 --> 00:06:55.661
二つ目、ラベルを押すと入力欄を選べるようになり、小さなチェック欄でも操作しやすくなること。

92
00:06:55.661 --> 00:07:01.958
三つ目、説明は常に残るラベルで示し、プレースホルダーはヒントに留めることです。

93
00:07:01.958 --> 00:07:07.124
練習として、メールアドレスの欄にフォーとアイディーをそろえたラベルを付けて、

94
00:07:07.124 --> 00:07:12.291
文字のクリックでカーソルが移るか試してみてください。

95
00:07:12.291 --> 00:07:13.744
お疲れさまでした。