回答編集履歴
7
表現の修正
test
CHANGED
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
h1要素はトップレベルの見出しの為、同じ文書内にh1要素が複数出現することは構造的に正しくありません。
|
|
64
64
|
|
|
65
65
|
**(2) アウトラインの概念があるUser-Agent**
|
|
66
|
-
User-Agentは各々のアウトラインの中に見出しレベルが
|
|
66
|
+
User-Agentは各々のアウトラインの中に見出しレベルがあると解釈します。
|
|
67
67
|
見出しレベルはアウトライン毎に独立している為、アウトラインが異なるなら、文書内にh1要素が複数存在しても問題ありません。
|
|
68
68
|
|
|
69
69
|
MDN(日本語)では、スクリーンリーダーが (1) に該当する為、h1要素を複数使用すべきではない、と説明しているのでしょう。
|
6
重荷→足枷
test
CHANGED
|
@@ -82,4 +82,4 @@
|
|
|
82
82
|
|
|
83
83
|
> A document can contain multiple top-level headings:
|
|
84
84
|
|
|
85
|
-
昔はIE6がWeb制作で新しい技術を使えない要因でしたが、現在ではスクリーンリーダが
|
|
85
|
+
昔はIE6がWeb制作で新しい技術を使えない要因でしたが、現在ではスクリーンリーダが足枷になっているようですね…。
|
5
見出しレベルの解釈
test
CHANGED
|
@@ -39,7 +39,8 @@
|
|
|
39
39
|
- HTML 5の古いバージョン
|
|
40
40
|
- HTML 4.01
|
|
41
41
|
|
|
42
|
-
ただ、`<!DOCTYPE html>` を宣言している限りは古いバージョンを気にする必要はなく、MDNの意図は不明です。
|
|
42
|
+
~~ただ、`<!DOCTYPE html>` を宣言している限りは古いバージョンを気にする必要はなく、MDNの意図は不明です。~~
|
|
43
|
+
MDN(英語)の意図は後述参照。
|
|
43
44
|
|
|
44
45
|
### MDN(日本語)
|
|
45
46
|
|
|
@@ -52,3 +53,33 @@
|
|
|
52
53
|
> HTML の仕様には、<section> 要素で形成されるアウトラインという概念があります。もしこれが実装されれば、複数の <h1> 要素の使用が可能になり、スクリーンリーダーを含むユーザーエージェントが、セクションの中にネストされた <h1> が小見出しであると理解することができるようになります。しかし、この機能はまだ実装されていません。したがって、見出し要素を適切に使用して文書の概要を記述することが重要です。
|
|
53
54
|
|
|
54
55
|
スクリーンリーダがHTML仕様を正しく実装するまでの過渡期の暫定策として、h1要素の複数使用が推奨されていないようです。
|
|
56
|
+
|
|
57
|
+
### 見出しレベルの解釈
|
|
58
|
+
|
|
59
|
+
問題は見出しレベルの解釈の仕方にあると理解しています。
|
|
60
|
+
|
|
61
|
+
**(1) アウトラインの概念がないUser-Agent**
|
|
62
|
+
User-Agentは見出しレベルを「h1-h6要素」に与えられた見出しレベルで解釈します。
|
|
63
|
+
h1要素はトップレベルの見出しの為、同じ文書内にh1要素が複数出現することは構造的に正しくありません。
|
|
64
|
+
|
|
65
|
+
**(2) アウトラインの概念があるUser-Agent**
|
|
66
|
+
User-Agentは各々のアウトラインの中に見出しレベルが存在しています。
|
|
67
|
+
見出しレベルはアウトライン毎に独立している為、アウトラインが異なるなら、文書内にh1要素が複数存在しても問題ありません。
|
|
68
|
+
|
|
69
|
+
MDN(日本語)では、スクリーンリーダーが (1) に該当する為、h1要素を複数使用すべきではない、と説明しているのでしょう。
|
|
70
|
+
MDN(英語)では、MDN(日本語)の説明も加味すると、下記のように読めます。
|
|
71
|
+
|
|
72
|
+
- User-Agentがアウトラインアルゴリズムの概念を持つ前提でHTMLをマークアップするのはベストプラクティスではない
|
|
73
|
+
- アウトラインアルゴリズムが存在しない古いバージョンのHTML仕様を意識してマークアップすべきである
|
|
74
|
+
|
|
75
|
+
つまり、問題の根幹はh1要素ではなく、**アウトラインアルゴリズムに依存してマークアップすべきではない**になると思います。
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
2018/03/27時点でもh1要素が複数存在できるHTML5規定があった事を踏まえると、スクリーンリーダがアウトラインを解釈できるようになる時はかなり先になりそうです。
|
|
80
|
+
|
|
81
|
+
- [4\.3 Sections — HTML5](https://www.w3.org/TR/2018/SPSD-html5-20180327/sections.html#sample-outlines)
|
|
82
|
+
|
|
83
|
+
> A document can contain multiple top-level headings:
|
|
84
|
+
|
|
85
|
+
昔はIE6がWeb制作で新しい技術を使えない要因でしたが、現在ではスクリーンリーダが重荷になっているようですね…。
|
4
MDN(日本語)
test
CHANGED
|
@@ -24,11 +24,11 @@
|
|
|
24
24
|
|
|
25
25
|
- [The W3C Markup Validation Service](https://validator.w3.org/#validate_by_input)
|
|
26
26
|
|
|
27
|
-
### MDN
|
|
27
|
+
### MDN(英語)
|
|
28
28
|
|
|
29
29
|
- [<h1>–<h6>: The HTML Section Heading elements \- HTML: HyperText Markup Language \| MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#do_not_use_multiple_h1_elements_on_one_page)
|
|
30
30
|
|
|
31
|
-
以下、MDN
|
|
31
|
+
以下、MDN英文の日本語訳。
|
|
32
32
|
|
|
33
33
|
「アウトライン アルゴリズムの概念を含む古いバージョンの HTML 仕様では、1 つのページで複数の <h1> を使用することが許可されていました。
|
|
34
34
|
ただし、これはベスト プラクティスとは見なされませんでした。詳細については、ドキュメント アウトライン アルゴリズムが存在しないを参照してください。」
|
|
@@ -40,3 +40,15 @@
|
|
|
40
40
|
- HTML 4.01
|
|
41
41
|
|
|
42
42
|
ただ、`<!DOCTYPE html>` を宣言している限りは古いバージョンを気にする必要はなく、MDNの意図は不明です。
|
|
43
|
+
|
|
44
|
+
### MDN(日本語)
|
|
45
|
+
|
|
46
|
+
MDN日本語に理由が書かれていました。
|
|
47
|
+
|
|
48
|
+
- [<h1>–<h6>: HTML の見出し要素 \- HTML: HyperText Markup Language \| MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/Heading_Elements#%E8%A4%87%E6%95%B0%E3%81%AE_h1_%E8%A6%81%E7%B4%A0%E3%81%AE%E4%BD%BF%E7%94%A8)
|
|
49
|
+
|
|
50
|
+
> 複数の <h1> を使用することは HTML の仕様では認められていますが、ベストプラクティスとは見なされていません。<h1> を 1 つだけ使用することは、スクリーンリーダーの利用者にとって有益です。
|
|
51
|
+
>
|
|
52
|
+
> HTML の仕様には、<section> 要素で形成されるアウトラインという概念があります。もしこれが実装されれば、複数の <h1> 要素の使用が可能になり、スクリーンリーダーを含むユーザーエージェントが、セクションの中にネストされた <h1> が小見出しであると理解することができるようになります。しかし、この機能はまだ実装されていません。したがって、見出し要素を適切に使用して文書の概要を記述することが重要です。
|
|
53
|
+
|
|
54
|
+
スクリーンリーダがHTML仕様を正しく実装するまでの過渡期の暫定策として、h1要素の複数使用が推奨されていないようです。
|
3
HTML Standardを復活(誤って削除していた)
test
CHANGED
|
@@ -1,3 +1,29 @@
|
|
|
1
|
+
### HTML Standard
|
|
2
|
+
|
|
3
|
+
> これまでの仕様でも「h1要素はページに1つだけ」といった言及はされていないはずですが、
|
|
4
|
+
|
|
5
|
+
@arcxor さんがご認識の通り、HTML文書内にh1要素が複数存在しても良いとHTML Standardで規定されています。
|
|
6
|
+
|
|
7
|
+
- [4.3.11.1 サンプルアウトライン - HTML Standard 日本語訳](https://momdo.github.io/html/sections.html#sample-outlines)
|
|
8
|
+
|
|
9
|
+
> 文書は、複数のトップレベルの見出しを含めることができる：
|
|
10
|
+
>
|
|
11
|
+
> ```html
|
|
12
|
+
> <!DOCTYPE HTML>
|
|
13
|
+
> <html lang=en>
|
|
14
|
+
> <title>Alphabetic Fruit</title>
|
|
15
|
+
> <h1>Apples</h1>
|
|
16
|
+
> <p>Pomaceous.</p>
|
|
17
|
+
> <h1>Bananas</h1>
|
|
18
|
+
> <p>Edible.</p>
|
|
19
|
+
> <h1>Carambola</h1>
|
|
20
|
+
> <p>Star.</p>
|
|
21
|
+
> ```
|
|
22
|
+
|
|
23
|
+
上記HTMLはW3CのValidatorで問題なく、通ります。
|
|
24
|
+
|
|
25
|
+
- [The W3C Markup Validation Service](https://validator.w3.org/#validate_by_input)
|
|
26
|
+
|
|
1
27
|
### MDN
|
|
2
28
|
|
|
3
29
|
- [<h1>–<h6>: The HTML Section Heading elements \- HTML: HyperText Markup Language \| MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#do_not_use_multiple_h1_elements_on_one_page)
|
2
表現の修正
test
CHANGED
|
@@ -1,38 +1,11 @@
|
|
|
1
|
-
### HTML Standard
|
|
2
|
-
|
|
3
|
-
> これまでの仕様でも「h1要素はページに1つだけ」といった言及はされていないはずですが、
|
|
4
|
-
|
|
5
|
-
@arcxor さんがご認識の通り、HTML文書内にh1要素が複数存在しても良いとHTML Standardで規定されています。
|
|
6
|
-
|
|
7
|
-
- [4.3.11.1 サンプルアウトライン - HTML Standard 日本語訳](https://momdo.github.io/html/sections.html#sample-outlines)
|
|
8
|
-
|
|
9
|
-
> 文書は、複数のトップレベルの見出しを含めることができる：
|
|
10
|
-
>
|
|
11
|
-
> ```html
|
|
12
|
-
> <!DOCTYPE HTML>
|
|
13
|
-
> <html lang=en>
|
|
14
|
-
> <title>Alphabetic Fruit</title>
|
|
15
|
-
> <h1>Apples</h1>
|
|
16
|
-
> <p>Pomaceous.</p>
|
|
17
|
-
> <h1>Bananas</h1>
|
|
18
|
-
> <p>Edible.</p>
|
|
19
|
-
> <h1>Carambola</h1>
|
|
20
|
-
> <p>Star.</p>
|
|
21
|
-
> ```
|
|
22
|
-
|
|
23
|
-
上記HTMLはW3CのValidatorで問題なく、通ります。
|
|
24
|
-
|
|
25
|
-
- [The W3C Markup Validation Service](https://validator.w3.org/#validate_by_input)
|
|
26
|
-
|
|
27
1
|
### MDN
|
|
28
|
-
|
|
29
|
-
> なぜこのように「h1要素は1つだけ」と言われるようになったのでしょうか。
|
|
30
2
|
|
|
31
3
|
- [<h1>–<h6>: The HTML Section Heading elements \- HTML: HyperText Markup Language \| MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#do_not_use_multiple_h1_elements_on_one_page)
|
|
32
4
|
|
|
33
|
-
MDN原文の日本語訳。
|
|
5
|
+
以下、MDN原文の日本語訳。
|
|
6
|
+
|
|
34
7
|
「アウトライン アルゴリズムの概念を含む古いバージョンの HTML 仕様では、1 つのページで複数の <h1> を使用することが許可されていました。
|
|
35
|
-
ただし、これはベスト プラクティスとは見なされませんでした。詳細については、ドキュメント アウトライン アルゴリズムが存在しないを参照してください。」
|
|
8
|
+
ただし、これはベスト プラクティスとは見なされませんでした。詳細については、ドキュメント アウトライン アルゴリズムが存在しないを参照してください。」
|
|
36
9
|
|
|
37
10
|
「古いバージョンのHTML仕様」は素直に読むと下記のいずれかと思われます。
|
|
38
11
|
|
1
MDN
test
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
### HTML Standard
|
|
2
|
+
|
|
1
3
|
> これまでの仕様でも「h1要素はページに1つだけ」といった言及はされていないはずですが、
|
|
2
4
|
|
|
3
5
|
@arcxor さんがご認識の通り、HTML文書内にh1要素が複数存在しても良いとHTML Standardで規定されています。
|
|
@@ -22,8 +24,20 @@
|
|
|
22
24
|
|
|
23
25
|
- [The W3C Markup Validation Service](https://validator.w3.org/#validate_by_input)
|
|
24
26
|
|
|
25
|
-
|
|
27
|
+
### MDN
|
|
26
28
|
|
|
27
29
|
> なぜこのように「h1要素は1つだけ」と言われるようになったのでしょうか。
|
|
28
30
|
|
|
29
|
-
MDN
|
|
31
|
+
- [<h1>–<h6>: The HTML Section Heading elements \- HTML: HyperText Markup Language \| MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#do_not_use_multiple_h1_elements_on_one_page)
|
|
32
|
+
|
|
33
|
+
MDN原文の日本語訳。
|
|
34
|
+
「アウトライン アルゴリズムの概念を含む古いバージョンの HTML 仕様では、1 つのページで複数の <h1> を使用することが許可されていました。
|
|
35
|
+
ただし、これはベスト プラクティスとは見なされませんでした。詳細については、ドキュメント アウトライン アルゴリズムが存在しないを参照してください。」となります。」
|
|
36
|
+
|
|
37
|
+
「古いバージョンのHTML仕様」は素直に読むと下記のいずれかと思われます。
|
|
38
|
+
|
|
39
|
+
- HTML Living Standardの古いバージョン
|
|
40
|
+
- HTML 5の古いバージョン
|
|
41
|
+
- HTML 4.01
|
|
42
|
+
|
|
43
|
+
ただ、`<!DOCTYPE html>` を宣言している限りは古いバージョンを気にする必要はなく、MDNの意図は不明です。
|