Krafty

Web ディレクターのための HTML チェッカー

Krafty はページの構造とメタデータを確認するためのブラウザ拡張機能です。11のチェックを、ツールバーから、あるいはご自身で割り当てたキーボードショートカットから、任意のページに重ねて表示できます。処理はすべてお使いのブラウザ内で完結し、どこにも送信しません。データの収集も一切ありません。表示言語はブラウザの設定に追従し、日本語と英語に対応しています。 ### ヘッドチェッカー head の中で機械が判断できる問題を報告します。検索避けの robots 指定、viewport や title、description、lang の欠落、DOCTYPE の不備、canonical が別ページを指している、タグの重複、省略されそうな文字数、SNS で使うには小さすぎる og:image、読み込めない og:image。 多言語サイトでは hreflang も見ます。自身を指す指定があるか（無ければその指定はすべて無視されます）、そして値が言語コードとして成立しているか。`jp` や `cn` は国コードで、日本語と中国語は `ja` と `zh` です。hreflang が無いこと自体は報告しません。単一言語のサイトには不要だからです。 ただし、そのタイトルが適切かどうかまでは分かりません。どんなツールにも分かりません。「ホーム | ホーム」もステージング環境の名前が残ったままのタイトルも、形式としては何も間違っていないからです。そこで、検索結果と SNS で共有したときの見た目をそのまま描画します。判断はご自身の目で。 head の全項目はその下に一覧で並びます。値ごとにコピーボタンが付き、URL は別タブで開けます。 ### ネストチェッカー 親要素が含むことのできない要素を強調します。ul の直下に置かれた div、リストの外にある li、といったものです。強調された要素にカーソルを合わせると、どの規則に反しているか、その親に本来置ける要素は何かが表示されます。 パネルには件数と、親子の組み合わせごとの内訳が出ます。まとめてコピーできるので、そのまま不具合票に貼れます。 ### 見出しチェッカー 見出し構造について機械が判断できることを報告します。レベル1の見出しが複数ある、レベルが飛んでいる、文字列のない見出しがある、そもそも見出しがない、といったものです。 その見出しがページの構成として筋が通っているかどうかは、ソフトウェアには答えられません。そこで見出しを出現順に、レベルごとに字下げして並べます。目次として読んでご判断ください。行にカーソルを合わせるとページ上の見出しに枠が描かれ、クリックするとそこまでスクロールします。誰にも見えない見出しは集計から外し、その件数を明記します。構造全体はそのままの字下げでコピーできます。 ### マークアップチェッカー 見た目には現れない形で誤っているマークアップを報告します。 複数回使われている id。表示は何も変わりませんが、label が対応する入力欄に届かなくなり、ページ内リンクは常に最初の要素にしか飛ばず、その id で要素を取得しているスクリプトは先に出てきた方を掴みます。同じテンプレートを一覧で繰り返すと、誰も書いていないのに発生します。 そして見出しセルの無いテーブル。読み上げでは、どの列の値なのかが分からないまま、すべてのセルが読まれます。レイアウト用と明示されたテーブルは対象外です。 続いて、名前を持たない入力欄。for による label も、囲んでいる label も、`aria-label` も、参照先が存在する `aria-labelledby` も、`title` も無いものです。中に書かれたプレースホルダは、見えている人にだけ何の欄かを伝えます。type が hidden とボタン系のものは、そもそも label を取らないので数えません。 そして、名前を持たない iframe・embed。`title` も `aria-label` も、参照先がある `aria-labelledby` も無いものです。スクリーンリーダーは役割しか読み上げません。 そして、名前も `aria-hidden` も無いインライン SVG。名前があれば読み上げられ、`aria-hidden` があれば飛ばされますが、どちらも無いと、どう扱われるかはスクリーンリーダー次第になります。アイコンを包む要素に `aria-hidden` が付いている場合も対象外です。実際にはその書き方が最も一般的だからです。そのアイコンがリンクやボタンの中身のすべてである場合は、より重い指摘として扱います。そのリンクを無名にしている当の原因だからです。 そして、アクセシブルな名前をまったく持たないリンクやボタン。中身が svg だけのアイコン `<button>` や `<a>` は、役割——「ボタン」「リンク」——としか読み上げられません。あわせて、`href` が空で、どこにも遷移せず今のページを再読み込みするだけのリンク、同じテキストで複数の遷移先を持つリンク（スクリーンリーダーのリンク一覧で同じ名前が繰り返されます）、そして「こちら」「read more」のような曖昧なテキスト——曖昧かどうかは言語にもよる判断なので、断定せず一覧にして委ねます。 そして、すでに付いている ARIA の中の矛盾。フォーカスできない要素に付いた操作用の `role`（約束した操作に到達できません）、タブ順に残ったままの `aria-hidden`（フォーカスが当たるのに何も読み上げられません）、0 より大きい `tabindex`（文書全体のタブ順を組み替えます）。いずれもマークアップが二重に、食い違う主張をしているものです。 そして、ブラウザが解釈できないインライン `style`——`colr` や `flexx` のような typo で、CSSOM が黙って落とすもの。SVG 書き出しの残骸は対象外です。 各項目とも、件数だけでなく該当箇所を一覧にします。各一覧はまとめてコピーできます。入力欄・アイコン・無名のリンクは「呼び名が無いこと」自体が問題なので、各行はその要素が持っているもの——id、name、リンクなら遷移先、class、いずれも無ければ親のもの——から組み立てます。入力欄にはプレースホルダを併記します。ページ上で探す手がかりとして最も速く、そしてたいてい、それがラベルを省いた理由でもあるからです。 一覧の行にカーソルを合わせると、ページ上の該当要素に枠が描かれます。クリックするとそこまでスクロールし、枠を残します。行に出る短い記述子は、これらのチェックが指摘する要素——自前の識別子を持たない要素——ではとりわけ弱いので、枠の方が確実に見つけられます。 各パネルには再チェックのボタンがあり、Escape でいちばん上のパネルを閉じられます。パネルを開くとフォーカスが入り、閉じると元に戻ります。タイトルバーは矢印キーでも動かせます。チェックはボタンを押した時点のページを見るので、開閉したあとやスクロールしたあとに押し直せます。 ### レビュー結果のコピー チェッカー一覧の下のボタンを押すと、報告を行うチェッカーをまとめて実行し、結果を1ブロックでコピーします。アドレスがあり、その下にチェッカーごとの結果が並ぶ形で、そのまま不具合票に貼れます。 **合計は出しません。意図的です。** 1つの数字は、何も見ていない部分まで含めたページ全体への判定として読まれてしまうからです。各チェッカーは、自分が確認した範囲だけを述べます。 ### 画像チェッカー 表示領域よりかなり大きく配信されている画像を見つけます。1920×1080 のファイルを 300×169 で表示している、といったものです。ヒーローやセクションの CSS `background-image` も含め、無駄の大きい順に並べ、ファイル名と、そのままコピーできるアドレスを添えます。width と height 属性の無い画像も一覧にします。読み込み中にレイアウトがずれる原因です。 高精細ディスプレイ向けの画像は考慮済みで、表示サイズの2倍で正しく用意された画像は指摘しません。判定基準はお使いのモニタに左右されません。どの基準で判定したかはパネルに明記し、各行にその超過倍率を添えます。行にカーソルを合わせるとページ上の画像に枠が描かれ、クリックするとそこまでスクロールします。 ### 残骸チェッカー ページが公開時に残してしまった開発時の痕跡を見つけます。`src`・`href`・`srcset`・`action` が、訪問者の誰も到達できないローカル・プライベートアドレス——`localhost`、`192.168` や `10.x` のホスト、`.local` の名前——を指しているもの。たとえば、本番ページがヒーロー画像を制作環境のマシンから読み込んだままになっている場合です。https ページ上で `http` で読み込まれ、ブラウザにブロックされるリソース。そして、placehold.co や dummyimage.com のようなプレースホルダサービスのままで、本物に差し替えられていない画像です。 さらに3つは、断定せず一覧で示します。どれも問題ないこともあるからです。ホスト名の先頭がステージング環境らしく読めるリソース——`dev.`、`staging.`、`test.`——は、テスト環境へのリンクが残ったものかもしれませんし、単に製品名かもしれません。HTML コメントに残った開発マーカー——TODO、FIXME、仮——も、まだ意味があるとは限りません。そして本文に残ったダミーテキスト——Lorem ipsum、あああ、テストです——は、「テスト」のような語が本物の原稿であることもフィラーであることも同じくらいあり、どちらなのかはご自身にしか判断できません。 ページ自身のホストは対象外なので、localhost で配信しているサイトが自分の相対 URL で指摘されることはありません。各項目はアドレス付きで一覧にし、ページ上に表示できる要素であればそこを指し示します。 ### ランドマークチェッカー ページのランドマーク領域について機械が判断できることを報告します。読み手が飛べる `main` が無い、あるいは1つしか許されないのに複数ある、といったもの。そして、同じ役割のランドマークがスクリーンリーダーに同一に読み上げられる場合——名前が同じか、どちらも名前が無いか——です。名前の無い `nav` が2つあると、領域を飛び渡る一覧で同じ語が二度読まれます。 ページが本来マークアップすべき領域を備えているかは、ソフトウェアには答えられません。`main` が1つだけで他に何も無いページは、正しいのかもしれませんし、ヘッダーやフッターがマークアップされていない div でできているのかもしれません。そこでランドマークを出現順に、入れ子にして、役割とアクセシブルな名前を添えて並べます。ページの地図として読んでご判断ください。行にカーソルを合わせるとページ上の領域に枠が描かれ、クリックするとそこまでスクロールします。誰にも見えない領域は集計から外します。地図全体はそのままの字下げでコピーできます。 ### トークンチェック ページが実際に描いている色・フォント・角丸・影を一覧にし、先頭に「トークンが締まっているか」が分かる件数を出します。ほぼ同じ色・角丸・影や、先頭の書体が読み込まれていないスタックは断定せず一覧で示します。デザインシステムは Krafty が知らないので、システム外かどうかは主張しません。 ### アウトラインチェッカー すべての要素に輪郭線を表示します。レイアウトの構造と余白の取り方が一目で分かります。 ### alt チェッカー すべての画像の alt を表示します。alt が未設定の画像と、装飾目的として意図的に空の alt を指定した画像は区別して表示します。ブラウザ上ではまったく同じに見えるのに、意味は正反対だからです。ラベルは計測で置き、画像の読み込みや表示領域への進入で取り直します。自動では拾えないリフローのあとは「再チェック」で合わせてください。 ### 明度チェッカー ページをモノクロにします。色だけで情報を伝えている箇所が浮かび上がります。 ### スマホで開く ツールバーメニューに、いま見ているタブのアドレスの QR コードを出します。生成はブラウザ内だけで行い、URL を QR 画像サービスに送ることはありません。ステージングの長いアドレスも、手入力せずにスマホで開けます。