メインコンテンツへスキップ

label要素

1.仕様

LABEL要素は、
ユーザーインターフェイスの
キャプションを
表します。

LABEL - - (%Phrasing)* -- form field label text. (Normal elements.) [Flow|Phrasing|Interactive|Palpable] --

label

フォームフィールドのラベルテキスト (form field label text)

種類

通常要素

カテゴリ

使用できるコンテキスト
フレージングコンテンツを受け入れる要素

フレージングコンテンツを受け入れる要素のコンテンツとして、使用できます。

フレージングコンテンツを受け入れる要素は、<h1>要素, <h2>要素, <h3>要素, <h4>要素, <h5>要素, <h6>要素, <p>要素, <pre>要素, <output>要素, <progress>要素, <meter>要素, <label>要素, <datalist>要素, <body>要素, <section>要素, <nav>要素, <aside>要素, <article>要素, <header>要素, <footer>要素, <main>要素, <address>要素, <li>要素, <dt>要素, <dd>要素, <caption>要素, <th>要素, <td>要素, <form>要素, <fieldset>要素, <search>要素, <blockquote>要素, <figure>要素, <figcaption>要素, <div>要素, <dialog>要素, <abbr>要素, <b>要素, <bdi>要素, <bdo>要素, <cite>要素, <code>要素, <data>要素, <dfn>要素, <em>要素, <i>要素, <kbd>要素, <mark>要素, <q>要素, <s>要素, <samp>要素, <small>要素, <span>要素, <strong>要素, <sub>要素, <sup>要素, <u>要素, <var>要素 です。

コンテンツモデル
0個以上のフレージングコンテンツ

0個以上のフレージングコンテンツが配置できます。

フレージングコンテンツに分類される要素は、<script>要素, <noscript>要素, <template>要素, <input>要素, <textarea>要素, <select>要素, <label>要素, <button>要素, <output>要素, <progress>要素, <meter>要素, <datalist>要素, <picture>要素, <object>要素, <img>要素, <iframe>要素, <embed>要素, <video>要素, <audio>要素, <canvas>要素, <map>要素, <area>要素, <a>要素, <ins>要素, <del>要素, <abbr>要素, <b>要素, <bdi>要素, <bdo>要素, <cite>要素, <code>要素, <data>要素, <dfn>要素, <em>要素, <i>要素, <kbd>要素, <mark>要素, <q>要素, <s>要素, <samp>要素, <small>要素, <span>要素, <strong>要素, <sub>要素, <sup>要素, <u>要素, <var>要素, <time>要素, <ruby>要素, <br>要素, <wbr>要素, <slot>要素, テキスト, <meta>要素, <link>要素 です。

要素のラベル付きコントロールである場合を除き、子孫にラベル付け可能な要素はなく、子孫ラベル要素もありません。

タグの省略

どちらのタグも省略できません。

コンテンツ属性
グローバル属性 他
for属性
ラベルをフォームコントロールに関連付ける
DOM インターフェイス
HTMLLabelElement
  1. [Exposed=Window]
  2. interface HTMLLabelElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. readonly attribute HTMLFormElement? form;
  6. [CEReactions, Reflect='for'] attribute DOMString htmlFor;
  7. readonly attribute HTMLElement? control;
  8. };
HTMLElement
  1. [Exposed=Window]
  2. interface HTMLElement : Element {
  3. [HTMLConstructor] constructor();
  4.  
  5. // metadata attributes
  6. [CEReactions] attribute DOMString title;
  7. [CEReactions] attribute DOMString lang;
  8. [CEReactions] attribute boolean translate;
  9. [CEReactions] attribute DOMString dir;
  10.  
  11. // user interaction
  12. [CEReactions] attribute (boolean or unrestricted double or DOMString)? hidden;
  13. [CEReactions] attribute DOMString inert;
  14. undefined click();
  15. [CEReactions] attribute DOMString accessKey;
  16. readonly attribute DOMString accessKeyLabel;
  17. [CEReactions] attribute boolean draggable;
  18. [CEReactions] attribute boolean spellcheck;
  19. [CEReactions] attribute DOMString writingSuggestions;
  20. [CEReactions] attribute DOMString autocapitalize;
  21.  
  22. [CEReactions] attribute [LegacyNullToEmptyString] DOMString innerText;
  23. [CEReactions] attribute [LegacyNullToEmptyString] DOMString outerText;
  24.  
  25. ElementInternals attachInternals();
  26.  
  27. // The popover API
  28. undefined showPopover();
  29. undefined hidePopover();
  30. boolean togglePopover(optional boolean force);
  31. [CEReactions] attribute DOMString? popover;
  32. };
  33.  
  34. HTMLElement includes GlobalEventHandlers;
  35. HTMLElement includes ElementContentEditable;
  36. HTMLElement includes HTMLOrSVGElement;
Element
  1. [Exposed=Window]
  2. interface Element : Node {
  3. readonly attribute DOMString? namespaceURI;
  4. readonly attribute DOMString? prefix;
  5. readonly attribute DOMString localName;
  6. readonly attribute DOMString tagName;
  7.  
  8. [CEReactions] attribute DOMString id;
  9. [CEReactions] attribute DOMString className;
  10. [SameObject, PutForwards=value] readonly attribute DOMTokenList classList;
  11. [CEReactions, Unscopable] attribute DOMString slot;
  12.  
  13. boolean hasAttributes();
  14. [SameObject] readonly attribute NamedNodeMap attributes;
  15. sequence<DOMString> getAttributeNames();
  16. DOMString? getAttribute(DOMString qualifiedName);
  17. DOMString? getAttributeNS(DOMString? namespace, DOMString localName);
  18. [CEReactions] undefined setAttribute(DOMString qualifiedName, DOMString value);
  19. [CEReactions] undefined setAttributeNS(DOMString? namespace, DOMString qualifiedName, DOMString value);
  20. [CEReactions] undefined removeAttribute(DOMString qualifiedName);
  21. [CEReactions] undefined removeAttributeNS(DOMString? namespace, DOMString localName);
  22. [CEReactions] boolean toggleAttribute(DOMString qualifiedName, optional boolean force);
  23. boolean hasAttribute(DOMString qualifiedName);
  24. boolean hasAttributeNS(DOMString? namespace, DOMString localName);
  25.  
  26. Attr? getAttributeNode(DOMString qualifiedName);
  27. Attr? getAttributeNodeNS(DOMString? namespace, DOMString localName);
  28. [CEReactions] Attr? setAttributeNode(Attr attr);
  29. [CEReactions] Attr? setAttributeNodeNS(Attr attr);
  30. [CEReactions] Attr removeAttributeNode(Attr attr);
  31.  
  32. ShadowRoot attachShadow(ShadowRootInit init);
  33. readonly attribute ShadowRoot? shadowRoot;
  34.  
  35. Element? closest(DOMString selectors);
  36. boolean matches(DOMString selectors);
  37. boolean webkitMatchesSelector(DOMString selectors); // legacy alias of .matches
  38.  
  39. HTMLCollection getElementsByTagName(DOMString qualifiedName);
  40. HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName);
  41. HTMLCollection getElementsByClassName(DOMString classNames);
  42.  
  43. [CEReactions] Element? insertAdjacentElement(DOMString where, Element element); // legacy
  44. undefined insertAdjacentText(DOMString where, DOMString data); // legacy
  45. };
GlobalEventHandlers
  1. interface mixin GlobalEventHandlers {
  2. attribute EventHandler onabort;
  3. attribute EventHandler onauxclick;
  4. attribute EventHandler onbeforeinput;
  5. attribute EventHandler onbeforematch;
  6. attribute EventHandler onbeforetoggle;
  7. attribute EventHandler onblur;
  8. attribute EventHandler oncancel;
  9. attribute EventHandler oncanplay;
  10. attribute EventHandler oncanplaythrough;
  11. attribute EventHandler onchange;
  12. attribute EventHandler onclick;
  13. attribute EventHandler onclose;
  14. attribute EventHandler oncontextlost;
  15. attribute EventHandler oncontextmenu;
  16. attribute EventHandler oncontextrestored;
  17. attribute EventHandler oncopy;
  18. attribute EventHandler oncuechange;
  19. attribute EventHandler oncut;
  20. attribute EventHandler ondblclick;
  21. attribute EventHandler ondrag;
  22. attribute EventHandler ondragend;
  23. attribute EventHandler ondragenter;
  24. attribute EventHandler ondragleave;
  25. attribute EventHandler ondragover;
  26. attribute EventHandler ondragstart;
  27. attribute EventHandler ondrop;
  28. attribute EventHandler ondurationchange;
  29. attribute EventHandler onemptied;
  30. attribute EventHandler onended;
  31. attribute OnErrorEventHandler onerror;
  32. attribute EventHandler onfocus;
  33. attribute EventHandler onformdata;
  34. attribute EventHandler oninput;
  35. attribute EventHandler oninvalid;
  36. attribute EventHandler onkeydown;
  37. attribute EventHandler onkeypress;
  38. attribute EventHandler onkeyup;
  39. attribute EventHandler onload;
  40. attribute EventHandler onloadeddata;
  41. attribute EventHandler onloadedmetadata;
  42. attribute EventHandler onloadstart;
  43. attribute EventHandler onmousedown;
  44. [LegacyLenientThis] attribute EventHandler onmouseenter;
  45. [LegacyLenientThis] attribute EventHandler onmouseleave;
  46. attribute EventHandler onmousemove;
  47. attribute EventHandler onmouseout;
  48. attribute EventHandler onmouseover;
  49. attribute EventHandler onmouseup;
  50. attribute EventHandler onpaste;
  51. attribute EventHandler onpause;
  52. attribute EventHandler onplay;
  53. attribute EventHandler onplaying;
  54. attribute EventHandler onprogress;
  55. attribute EventHandler onratechange;
  56. attribute EventHandler onreset;
  57. attribute EventHandler onresize;
  58. attribute EventHandler onscroll;
  59. attribute EventHandler onscrollend;
  60. attribute EventHandler onsecuritypolicyviolation;
  61. attribute EventHandler onseeked;
  62. attribute EventHandler onseeking;
  63. attribute EventHandler onselect;
  64. attribute EventHandler onslotchange;
  65. attribute EventHandler onstalled;
  66. attribute EventHandler onsubmit;
  67. attribute EventHandler onsuspend;
  68. attribute EventHandler ontimeupdate;
  69. attribute EventHandler ontoggle;
  70. attribute EventHandler onvolumechange;
  71. attribute EventHandler onwaiting;
  72. attribute EventHandler onwebkitanimationend;
  73. attribute EventHandler onwebkitanimationiteration;
  74. attribute EventHandler onwebkitanimationstart;
  75. attribute EventHandler onwebkittransitionend;
  76. attribute EventHandler onwheel;
  77. };
ElementContentEditable
  1. interface mixin ElementContentEditable {
  2. [CEReactions] attribute DOMString contentEditable;
  3. [CEReactions] attribute DOMString enterKeyHint;
  4. readonly attribute boolean isContentEditable;
  5. [CEReactions] attribute DOMString inputMode;
  6. };
HTMLOrSVGElement
  1. interface mixin HTMLOrSVGElement {
  2. [SameObject] readonly attribute DOMStringMap dataset;
  3. attribute DOMString nonce; // intentionally no [CEReactions]
  4.  
  5. [CEReactions] attribute boolean autofocus;
  6. [CEReactions] attribute long tabIndex;
  7. undefined focus(optional FocusOptions options = {});
  8. undefined blur();
  9. };
ARIA in HTML
暗黙的="No" ARIAロール="No" aria-* 属性="Global"

暗黙的な ARIAセマンティクスがありませんが、意味はあり、この意味は、ARIA によって提供されず、ARIA のユーザーに公開されていないロール、状態、プロパティで表現される可能性があります。

作成者は、暗黙的な ARIAセマンティクス, または HTML要素のネイティブセマンティクスを上書きしてはいけません。

グローバル aria-* 属性が記述できます。

レンダリング
特になし
  1. label: Nothing;

CSS を大雑把に読むと、 特に指定はされていません。既定値から、フローレイアウトに配置されたときにインラインレベルのボックス(インラインボックス)を生成すると思われます。 などになります。

説明
label要素は、ユーザーインターフェイスのキャプションを表します。キャプションは、for属性を使用するか、label要素自体の中にフォームコントロールを配置することによって、label要素のラベル付きコントロールとして知られる特定のフォームコントロールに関連付けることができます。
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>label要素の例 - (Example of label element) | 離珠のHTMLでしぃ！</title>
  6. </head>
  7. <body>
  8. <h1>label要素の例</h1>
  9. <form action="../Html/fmreceive.htm">
  10. <label>
  11. label
  12. <input name="nipInput" value="abc">
  13. </label>
  14. <button name="nbtSender" value="../Html/exlabel.htm">ボタン</button>
  15. <br>受信用の<br>ページへ
  16. </form>
  17. </body>
  18. </html>

このサンプルへのリンクです。
(./exlabel.htm)

参照元
参照元
JSONデータ
JSON形式での、データのイメージです。
  1. {
  2. "label": {
  3. "check": "2024-09-01",
  4. "group": "Form",
  5. "element": "- - (%Phrasing)* -- form field label text. (Normal elements.) [Flow|Phrasing|Interactive|Palpable] --",
  6. "attlist": {
  7. "%Global;": "",
  8. "for": "IDREF #IMPLIED -- Associate the label with form control --",
  9. },
  10. "comment": "フォームフィールドのラベルテキスト (form field label text)",
  11. "point": "ユーザーインターフェイスのキャプションを表します。キャプションは、for属性を使用するか、label要素自体の中にフォームコントロールを配置することによって、label要素のラベル付きコントロールとして知られる特定のフォームコントロールに関連付けることができます。",
  12. "kind": "Normal",
  13. "categories": [
  14. "Flow",
  15. "Phrasing",
  16. "Interactive",
  17. "Palpable",
  18. ],
  19. "used": "parent (%Phrasing)*",
  20. "contentmodel": "label (%Phrasing)*",
  21. "contentmodelsupplement": "要素のラベル付きコントロールである場合を除き、子孫にラベル付け可能な要素はなく、子孫ラベル要素もありません。",
  22. "tag": [
  23. "-",
  24. "-",
  25. ],
  26. "attributes": {"for": "ラベルをフォームコントロールに関連付ける"},
  27. "dominterface": "HTMLLabelElement",
  28. "rendering": "None",
  29. "reference": [
  30. {
  31. "title": "HTML Living Standard. 4.10.4 The label element.",
  32. "href": "https://html.spec.whatwg.org/multipage/forms.html#the-label-element",
  33. "heading": "HTML Living Standard. 4.10.4 The label element",
  34. "sub": "Last Updated 27 August 2024",
  35. },
  36. {
  37. "title": "HTML 5.2 W3C Recommendation. 4.10.4. The label element. W3C Recommendation, 14 December 2017.",
  38. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/sec-forms.html#the-label-element",
  39. "heading": "HTML 5.2 W3C 勧告. 4.10.4. The label element",
  40. "sub": "W3C勧告、2017年12月14日",
  41. },
  42. {
  43. "title": "HTML 5.1 W3C Recommendation. 4.10.4. The label element. W3C Recommendation, 1 November 2016.",
  44. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/sec-forms.html#the-label-element",
  45. "heading": "HTML 5.1 W3C 勧告. 4.10.4. The label element",
  46. "sub": "W3C勧告、2016年11月1日",
  47. },
  48. {
  49. "title": "HTML 5 W3C Recommendation. 4.10.4 The label element. W3C Recommendation, 28 October 2014.",
  50. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-label-element",
  51. "heading": "HTML 5 W3C 勧告. 4.10.4 The label element",
  52. "sub": "W3C勧告、2014年10月28日",
  53. },
  54. {
  55. "title": "HTML 4.01 Specification W3C Recommendation. 17.9.1 The LABEL element. W3C Recommendation 24 December 1999.",
  56. "href": "https://www.w3.org/TR/html401/interact/forms.html#h-17.9.1",
  57. "heading": "HTML 4.01 Specification W3C 勧告. 17.9.1 The LABEL element",
  58. "sub": "W3C勧告1999年12月24日",
  59. },
  60. {
  61. "title": "MDN Web Docs. HTML <label>: The Label element.",
  62. "href": "https://developer.mozilla.org/ja/docs/Web/HTML/Element/label",
  63. "heading": "<label>: ラベル要素 - HTML: ハイパーテキストマークアップ言語 | MDN",
  64. },
  65. ],
  66. "version": {
  67. "first": "HTML4",
  68. "latest": "HTML Living Standard",
  69. },
  70. }
  71. }

注意: 簡易に描画する為に、各項目の後ろに , を付与しています。JSON の形式では、末尾の項目の後には , は付けません。

最終確認日

2024-09-01

2.使用できるコンテキスト

label要素は、
フレージングコンテンツを
受け入れる要素に
配置できます。

<label>要素が使用できるコンテキスト(Context・文脈)は、フレージングコンテンツを受け入れる要素のコンテンツとしてです。

親要素のコンテンツモデルから見ると、コンテンツモデルがフレージングコンテンツまたはフローコンテンツである要素のコンテンツとして使用できます。

フレージングコンテンツをコンテンツの一部として配置できる要素(除く)は、以下の各要素です。

form
label
  1. <body>
  2. <form action="../Html/fmreceive.htm">
  3. <label>
  4. ラベル
  5. <input name="nipInput" value="abc">
  6. </label>
  7. <button name="nbtSender" value="../Html/splabel.htm#MAP2NEXT">ボタン</button>
  8. </form>
  9. </body>

<form>要素のコンテンツの一部として、フレージングコンテンツである<label>要素を配置している例です。

3.コンテンツモデル

label要素は、
フレージングコンテンツを
配置できます。

<label>要素の子や子孫としてどのようなコンテンツ(Content・内容) が含まれなければならないかというと、0 以上のフレージングコンテンツです。ただし、子孫に<label>要素があってはいけません。 要素のラベル付きコントロールでない限り、子孫のラベル付け可能な要素はあってはいけません。

フレージングコンテンツに分類される要素(<label>要素除く)は、以下の各要素です。

ラベル付け可能な要素に分類される要素は、以下の各要素です。

label
Phrasing
content
  1. <body>
  2. <form action="../Html/fmreceive.htm">
  3. <label>
  4. ラベル
  5. <input name="nipInput" value="abc">
  6. </label>
  7. <button name="nbtSender" value="../Html/splabel.htm#MAP3NEXT">ボタン</button>
  8. </form>
  9. </body>

<label>要素のコンテンツの一部として、フレージングコンテンツである<input>要素を配置している例です。

ラベル付け可能な要素は、デフォルトで、その最も近い祖先の<label>要素に関連付けられます。つまり、<label>要素の子孫に、それに関連付けるラベル付け可能な要素を配置すると、ラベルとラベル付けされたコントロールの関連が分かりやすいです。

配置に関係なくラベルとラベル付けされたコントロールの関連付けをする方法もありますので、無理に<label>要素の子孫に、それに関連付けるラベル付け可能な要素を配置する必要はありません。

4.コンテンツ属性

label要素は、
グローバル属性と、
for属性 を
配置できます。

<label>要素に指定することができる属性は、グローバル属性と for属性 です。

for属性

  1. <form action="../Html/fmreceive.htm">
  2. <label for="" id="JLA401">
  3. ラベル
  4. </label>
  5. <input id="LIP401" name="nipInput01" value="abc">
  6. <input id="LIP402" name="nipInput02" value="xyz">
  7. <button name="nbtSender" value="../Html/splabel.htm#MAP4NEXT">ボタン</button>
  8. </form>

for属性 は、キャプションを関連付けるフォームコントロールを示す為に指定できます。属性が指定されている場合、属性の値は、labelと同じツリー内のラベル付け可能な要素の ID である必要があります。属性が指定されていて、ツリー内にfor属性の値と等しい ID を持つ要素があり、ツリー順序で最初のそのような要素がラベル付け可能な要素である場合、その要素は<label>要素のラベル付けされたコントロールです。

for属性が指定されていないが、<label>要素にラベル付け可能な要素の子孫がある場合、ツリー順序で最初のそのような子孫が<label>要素のラベル付けされたコントロールです。

例示では見易さの為に、<input>要素にスタイルシートで装飾(幅)の指定をしています。

5.DOM インターフェイス

input要素
(HTMLInputElement
オブジェクト)などの
プロパティである
labelsは、
ラベル要素
(HTMLLabelElement
オブジェクト)の
のリストを
ツリー順に
表します

<label>要素単体を表すプロパティはないですが、ラベル付け可能な要素とすべての<input>要素には、ツリー順序でラベル付けされたコントロールが問題の要素である<label>要素のリストを表すライブ NodeListオブジェクトが関連付けられています。フォームに関連付けられたカスタム要素ではないラベル付け可能な要素の labels IDL 属性と、<input>要素の labels IDL 属性は、取得時にその NodeList オブジェクトを返す必要があり、常に同じ値を返す必要があります。ただし、この要素がtype属性が Hidden 状態である入力要素である場合は、代わりに null を返す必要があります。

<label>要素を JavaScript などで操作するには、documentのquerySelectorAll()メソッドを用いる方法があります。要素セレクタでlabelと指定して、<label>要素のリストを取得します。このメソッドの戻り値は、静的なNodeListオブジェクトであり、lengthプロパティで該当件数を知る事が出来ます。

NodeListオブジェクトは、配列の様に扱う事が出来ますが、for...in を使うとlengthプロパティなども対象となります。for...of を用いる事を推奨します。NodeListオブジェクトは、一致する要素ごとに Element を一つずつ含みます。上記の提示の時に取得できる値の形式はHTMLLabelElement インターフェイスのリストです。その様になる様に取得しているのであり、どのメソッドを用いるか, 指定する条件はどうするかにより異なります。属性セレクタと組み合わせる方法もあります。

HTMLLabelElement インターフェイスは、HTMLElement インターフェイスを継承しつつ、など各IDL属性が追加されています。

charset属性を JavaScriptで取得するには、documentのプロパティであるcharacterSetを用います。

他には、documentのquerySelector()メソッドを用いて、条件に一致する文書内で最初の一件を取得するとか、id属性があればdocumentのgetElementById()メソッドを用いるとか、name属性があればdocumentのgetElementsByName()メソッドを用いるとか、状況, 目的によりいろいろあります。

  1. <form action="../Html/fmreceive.htm">
  2. <label for="LIP501" id="JLA501">
  3. ラベル
  4. </label>
  5. <select onchange="document.getElementById('JLA501').htmlFor = this.value;">
  6. <option label="上側" value="LIP501" selected></option>
  7. <option label="下側" value="LIP502"></option>
  8. </select>
  9. <input id="LIP501" name="nipInput01" value="abc">
  10. <input id="LIP502" name="nipInput02" value="xyz">
  11. <button name="nbtSender" value="../Html/splabel.htm#MAP5NEXT">ボタン</button>
  12. </form>

<label>要素をid属性で特定して、for属性を操作する例です。

6.アクセシビリティ

label要素の
暗黙的な
ARIAセマンティクスは
ありません。

<label>要素の暗黙的なARIAセマンティクスは、ありません。
No corresponding role とマークされている要素は、ARIAの暗黙的なセマンティクスを持ちませんが、意味を持ちます。この意味は、ARIAでは提供されていないロール、ステート、プロパティで表現され、アクセシビリティAPIを介して支援技術のユーザーに公開される場合があります。したがって、リストされている要素のセマンティクスを上書きするのではなく、divやspanなどのセマンティクス的に中立な要素にロール属性を追加することをお勧めします。

作成者が<label>要素に明示的に指定可能なARIA ロール（役割）は、「役割なし」です。作成者は暗黙的な ARIA セマンティクスまたは HTML 要素のネイティブ セマンティクスを上書きしてはならないことを表します。

ラベルが要素に関連付けられていない場合、ロールは任意ですが、generic ロールは使用しないでください。

命名禁止として識別される要素は、作成者がaria-label属性またはaria-labelledby属性を指定してはなりません。ただし、その要素が暗黙的なロールを、作成者による命名を許可する明示的な WAI-ARIA ロールによって上書きできる場合は除きます。
それ以外の場合は、グローバル aria-* 属性を使用します。

つまり、<label>要素の役割は、No corresponding role (ARIAの暗黙的なセマンティクスを持ちませんが、意味を持ちます。) で固定です。作成者は、ARIA ロール値を<label>要素に指定出来ないという事です。aria-* 属性については、aria-label属性, aria-labelledby属性 を指定してはなりませんし、aria-hidden=true を指定してもなりません。それ以外のグローバル aria-* 属性は、指定出来ます。

ラベルが要素に関連付けられていない場合、ロールは任意ですが、要素に関連付けしていないラベルは、そもそもラベルとして意味があるかという点が疑問です。

7.レンダリング

レンダリングについて
スタイルシートでの
仕様での提案は
特にないようです。

<label>要素のユーザーエージェントレベルのスタイルシートデフォルトでは、特に指定はなく、displayプロパティの既定値はinline であり、インラインレベルのボックス(インラインボックス) を生成します。

コードを見易くする為に要素毎に改行すると、改行コードがスペースと扱われて意図しない隙間が表れる事があります。 描画を重視するかコードの見易さを重視するか、折衷案でタグの内で改行するか、いろいろ配慮が必要です。

  1. <body>
  2. <form action="../Html/fmreceive.htm">
  3. <label style="display: block; background: #ffccff;">
  4. ブロック
  5. <input name="nipInput01" value="abc">
  6. ブロック
  7. </label>
  8. <label style="background: #ffccff;">
  9. インライン
  10. <input name="nipInput02" value="xyz">
  11. インライン
  12. </label>
  13. <button name="nbtSender" value="../Html/splabel.htm#MAP7NEXT">ボタン</button>
  14. </form>
  15. </body>

ラベルをブロックにしてみた例です。 デザインを考える上での、操作性がどうなるかの例示です。

8.気を付ける点

カテゴリ

インタラクティブコンテンツなので、祖先, 子孫にインタラクティブコンテンツは避けるべきです。仕様上では、「<label>要素のインタラクティブコンテンツの子孫、およびそれらのインタラクティブコンテンツの子孫の子孫を対象とするイベントに対する<label>要素のアクティベーション動作は、何もしないことにする必要があります」とあるだけです。使い手側の使い易さ, 分かり易さからインタラクティブコンテンツの重複する配置は避けるべきです。

ラベル付け可能な要素

ラベル付け可能な要素は、ラベルテキストを表す<label>要素と関係付けてラベル付きコントロールとすることが出来ます。そしてラベル付け可能な要素はデフォルトで、その最も近い祖先の<label>要素に関連付けられます。また位置付けに関係なくfor属性を用いて明示的に関連付ける事も出来ます。 ラベルテキストとラベル付きコントロールの関係付けの設計と見た目の配置の設計は、操作性と視認性をよく考えて行うべきです。 場合によっては、ラベル付けは諦めて単なる補足的な記述に留めるのも、かえって良いかもしれません。