[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS
Post on:2017年3月14日
sponsors
HTMLは間違って記述されても、重大なエラーになることはあまりありません。
そのため、validではないHTML、セマンティックではないHTML、アクセシブルではないHTMLのコードが、ページ内に紛れてしまうことは非常に簡単です。
HTMLの潜在的な問題を見つけることができる、少し高度なCSSのセレクタを紹介します。
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- インラインのスタイル
- リンクのターゲット
- アクセシブルではない画像
- ドキュメントの言語指定
- 不適切な文字セット
- アクセシブルではないビューポート属性
- ラベルのないフォーム要素
- 空のインタラクティブな要素
- 不必要、あるいは非推奨の属性
インラインのスタイル
このセレクタは、インラインのスタイルが適用されているページ上のあらゆる要素を対象にします。原則としてインラインのスタイルは、それらの詳細度のレベルが増えた際に上書きするのが難しくなるため、避けるべきです。場合によってインラインのスタイルが必要な場合もありますが、このセレクタはインラインのスタイルをハイライト表示します。
問題の要素が選択されてた場合は、ページ上で目立つようにスタイル（レッドの太いボーダー）を適用できます。
|
1 2 3 |
*[style] { border: 5px solid red; /* Style to make the elements noticeable */ } |
リンクのターゲット
これらのセレクタは、href属性を持たないアンカー要素と役に立たないターゲットを指定している要素をハイライト表示します。
|
1 2 3 4 |
a:not([href]) a:[href="#"], a:[href=""], a[href*="javascript:void(0)"] { … } |
アクセシブルではない画像
画像にalt属性を与えることは、仕様で推奨されています。
alt属性がない場合、ほとんどのスクリーンリーダーはsrc属性の値を読み込みますが、その値はユーザにとって役に立たず、実際には混乱する可能性があります。
|
1 |
img:not([alt]) { ... } |
上記のセレクタでは空のalt属性、つまり「alt=""」の画像を選択しません。空のalt属性はスクリーンリーダーで画像をスキップさせる意図的な方法である可能性があります。たとえば、画像が装飾的に使われている時などです。
下記のセレクタを使うことで、これらをハイライト表示することができます。
|
1 |
img[alt=""] { ... } |
ドキュメントの言語指定
すべてのhtml要素に存在しなければならない重要な属性が、language属性です。この属性は、スクリーンリーダーにページが何の言語なのか伝え、コンテンツをどのように読み上げるかを決定するためのシグナルです。
|
1 2 |
html:not([lang]), html[lang=""] { ... } |
lang属性が間違えている場合に起きる現象を示します。
Share @HTeuMeuLeu's video to show why setting a default language (eg. lang="en") is important. 😂 https://t.co/tjn8GvPVKM
— overflow: heydon (@heydonworks) 2017年2月23日
不適切な文字セット
このセレクタは、UTF-8に設定されていないmeta要素のすべてのcharsetタグをターゲットにします。このタグは、UTF-8形式の文字エンコーディングを使用するようにブラウザに指示します。これは現在、HTMLドキュメントで推奨されている形式です。
したがって、validなHTMLにはこのタグが必要です。
|
1 |
meta[charset]:not([charset="UTF-8"]) { ... } |
理想的には、このタグはhead内で最初の要素として記述する必要があります。下記のセレクタを使用して、確認できます。
|
1 |
meta[charset="UTF-8"]:not(:first-child) { ... } |
アクセシブルではないビューポート属性
このセレクタは、アクセシブルではないビューポートのmeta属性をハイライト表示します。ビューポートを縮小・拡大するユーザの操作を制限しないようにすることが一般的に推奨されています。そのため、「user-scalable=no」「maximum-scale」「minimum-scale」は決して使用しないでください。
|
1 2 3 |
meta[name="viewport"][content*="user-scalable=no"], meta[name="viewport"][content*="maximum-scale"], meta[name="viewport"][content*="minimum-scale"] { ... } |
ラベルのないフォーム要素
フォーム要素はラベルを付けることに関して、最も重要な要素です。フォーム要素にラベルを付けるにはいくつかの方法がありますが、最も一般的な方法は、label要素によって参照されるid属性を要素に与えることです。
下記のセレクタは、id属性を持たないフォーム要素を調べ、for属性を使用してフォーム要素に明示的にリンクされていない要素をラベル付けします。
|
1 2 3 4 5 |
input:not([id]), select:not([id]), textarea:not([id]) { ... } label:not([for]) { ... } |
もう一つのフォーム要素にとって重要なラベル付けは、name属性を使用することです。id属性はHTML文書のコンテキストで要素にラベルを付けるために使用されますが、name属性はフォームのデータとともに送信されたときに要素を参照するために使用されます。
|
1 2 3 |
input:not([name]), select:not([name]), textarea:not([name]) { ... } |
さらに、フォーム要素自体のほかに、フォーム要素自体にname属性やid属性を与えると便利です。
下記のセレクタは、name属性とid属性の両方が欠けているフォーム要素をハイライト表示します。
|
1 |
form:not([name]):not([id]) { ... } |
空のインタラクティブな要素
リンクやボタンなどのインタラクティブな要素は通常、そのコンテンツによってラベル付けされます。aria-label属性など他の方法を使用して、これらの要素にラベルを付けることは可能ですが、値を空にすることは間違いである可能性があります。
このセレクタは、HTMLコンテンツがないボタンのリンクをハイライト表示します。
|
1 2 |
button:empty, a:empty { ... } |
不必要、あるいは非推奨の属性
最後は、CSSセレクタを使用して、必要とされない、あるいは推奨されないHTMLの属性をハイライト表示します。
|
1 2 |
script[type="text/javascript"], link[rel="stylesheet"][type="text/css"] { ... } |
sponsors
