「HTML 解体新書」を 2,023 年 07 月 08 日に読んだ。
目次
メモ
チェックツールを使用する p49
HTML がルールに従っているかどうかは機械的にチェックできます。
古くからあるサービスとしては、 W3C の Markup Validation Service が有名です。
これは現在でも利用できますが、このサービスの後続となる新しい HTML チェッカーとして Nu Html Checker が公開されています。
機械的にチェックできるのは、基本的に字句的ルールと語彙的ルールに限られます。
意味論的ルールの大半は、その性質上、機械でのチェックが困難です。
チェッカーで機械的に正誤が判断できない場合、エラーではなく警告 (warning) として報告することもあります。
警告を必ずしもゼロにすることに固執する必要はありません。
ただし、大量の警告が出ている場合、本当に対応が必要な警告を見逃すことがあります。
大量の警告を放置することも勧められません。
警告の表示内容を理解した上で、必要なものについて対応するとよいでしょう。
style 要素は body 要素内に出現できるか p105
01 のように、 style 要素を body 要素の子孫として記述しているケースがあります。
過去にはこのような書き方を許可すべきという提案もあり、現に廃止された HTML 5.2 では仕様に適合するとされていました。
実際、ブラウザーはこのような style 要素を解釈して、スタイルを適用します。
しかし、 body 要素内にスタイルを記述すると、ページの再描画や再レイアウトを引き起こし、パフォーマンスに悪影響を及ぼします。
そのため HTML Standard では、 古い HTML4 と同様に、引き続き仕様に適合しないものとしています。
なお、 body 要素の内部に <link rel="stylesheet"> を記述して外部スタイルシートを参照することは許されています。
CMS の都合などにより body 要素内でスタイルシートを設定したい場合は、 link 要素を利用するとよいでしょう。
section 要素 p110
section 要素は、文書やアプリケーションの一般的なセクションを表します。
内容モデル
section 要素の内容モデルは Flow です。
通常、 section 要素の先頭には h1 要素などの見出しを配置します。
見出しがなくても構文エラーにはなりませんが、タイトルのないセクションができることは望ましくありません。
10 は望ましくない例です。
見出しを持たないようなブロック、たとえば見た目上の単なる囲みや、 JavaScript で制御するための領域などが必要な場合は、 div 要素を使用します。
10 は 11 のようにできます。
article 要素 p111
article 要素は、自己完結型の構造を表します。
サイトのページやアプリケーションの中での、ブログの投稿、ニュースの記事、インタラクティブなウィジェットなどが該当します。
section 要素と似ていますが、 article 要素は、そのセクションだけで自己完結するものを表します。
main 要素 p135
main 要素は、文書の主要なコンテンツを表します。
とくに、スクリーンリーダーのユーザーが長いヘッダーやナビゲーション部分を読み飛ばして本文のある main 要素にジャンプする、
いわゆるスキップリンクのような挙動を期待できます。
36 は main 要素を使用した例です。
ブロックとインラインはどこへ ? p181
HTML4 の内容モデルでは、要素が大きく「ブロックレベル要素」と「インライン要素」の 2 つに分類されていました。
この分類は CSS の視覚整形モデルの用語「ブロックレベル要素」「インラインレベル要素」に対応しますが、要素の内容モデルと CSS の視覚整形モデルは本質的に異なる概念です。
HTML4 でブロックレベルに分類されていた要素は、ブラウザーのデフォルトスタイルではブロックレベルの見た目になります。
しかし、 CSS で display: inline を指定すれば見た目をインラインに変更可能であり、分類と実際の表示の食い違いがありました。
現在の HTML Standard では要素の分類が一新されました。
HTML4 でインライン要素とされていたものは Phrasing に分類され、ブロックレベル要素のみを分類する区分はなくなりました。
ブロックレベル要素とされていたものは Flow に分類されますが、 Flow は Phrasing も含んでいるため、指すものが異なります。
HTML4 の知識があると、「ブロックレベル要素」に相当する言葉を使いたくなることがあります(たとえば、「 a 要素にブロックレベル要素を入れることができるようになった」のように)。
しかし現在ではその区分は存在しないので、表現に苦慮することがあります。
label 要素 p212
label 要素は、ユーザーインターフェイスのキャプションを表す要素で、フォームコントロールにラベルを付けることができます。
単にフォームコントロールの横にテキストを置いた場合、人間にはラベルのように見えても、ブラウザーにはラベルであることが伝わりません。
label 要素を利用すると、ラベルとフォームコントロールとを明確に関連付けることができ、プログラムによる解釈を可能にします。
ほとんどのブラウザーでは、 label 要素のラベルをクリックすると、対応するフォームコントロールにフォーカスが当たります。
また、対応するフォームコントロールにフォーカスが当たった際、スクリーンリーダーは対応する label 要素を読み上げます。
label 要素でラベルを付けられる要素を「ラベル付け可能要素 (labelable element)」と呼びます。
accesskey 属性 p289
accesskey 属性は、ユーザーエージェントに対して、この要素にアクセするためのショートカットキーのヒントを与えます。
属性値にはキーの文字を指定します。
11 はキーボードの「 1 」のキーをショートカットキーとする例です。
11 accesskey 属性の記述例
<button type="button" accesskey="1" onclick="alert(1)">click</button>
多くのブラウザーでは、ショートカットを利用する際に修飾キーとの同時押しが必要です。
11 の例に示したボタンは、 alt + 1 や Control + Option + 1 キーといった操作で反応します。
仕様では、accesskey 属性に複数の値を指定することでフォールバックする仕組みも規定されています。
しかし、現状のブラウザーのほとんどは、そのような複数指定をうまく解釈できません。
アクセシビリティ上の注意点
accesskey 属性はキーボードのキーを指定するものですが、 OS やデバイスによって利用できるキーは異なります。
利用する修飾キーも OS やブラウザーによって異なり、操作方法は統一されていません。
状況によっては、 OS や支援技術が持つ既存のキーボードショートカットと競合することもあります。
特にスクリーンリーダーなどの支援技術では、 Alt キーや Ctrl キーなども操作に利用するため、誤操作につながる可能性があります。
米国の非営利団体である WebAIM は、 accesskey 属性には実装上の問題があり、
一部のユーザーにはメリットがあるものの、逆にデメリットになるユーザーもいると指摘しています。
そのため、ウェブサイトやウェブアプリでは accesskey 属性の利用を避けることが望ましく、利用する場合はきわめて慎重に用いるべきだと述べています。