popoverが肩代わりするのは半分だけ: ツールチップ7実装で測ったSC 1.4.13
ツールチップの実装を7つ作り、WCAG 2.2 SC 1.4.13のDismissible・Hoverable・Persistentを個別に測った。CSSだけの3つは全部Dismissibleで落ち、popover="hint"はDismissibleを無料でくれる代わりにHoverableで落ちた。
タグ
Web開発
19件の記事
Chromeのエージェントスキルを数えた：ガイド138本、アクセシビリティ2本、検索0本
Google Chromeチームの Modern Web Guidance 0.0.180 を入れ、ガイド138本をカテゴリ別に数え、3領域22件のクエリで検索を突いた。上位類似度はUI 0.643、アクセシビリティ0.508、構造化データ0.267で無応答2件。コーパスの空白を規約で埋める手順まで書く。
リフローを320pxの幅だけで測ると半分しか測れない: 400%拡大の高さ200px
WCAG 1.4.10 リフローを 320x844・320x256・320x200 の3条件で同時に測った。横方向の判定は3条件で1ピクセルも違わず、400%拡大で実際に変わるのは高さのほうだ。82pxの sticky ヘッダーがビューポートの41%を占め、本文の可視領域は6割を切っていた。測定スクリプトも置いた。
引用された一文へ戻るリンクは、コードブロックだけで切れる
自サイトのビルド成果物から69本のテキストフラグメントを作り、Chromiumで一つずつクリックして到達を記録した。散文の48本は全部届き、コードブロックは15本中14本が切れた。ブロック境界と単語境界の規則を実測で整理する。
WCAG 2.2 AAのルールが既定で無効だった: 正解付き1,213件で測った自動チェックの守備範囲
W3C ACTが公開する正解ラベル付きテストケース1,213件にaxe-coreを全件通した。失敗するはずの387件のうち、当該達成基準で違反が出たのは145件(37.5%)。基準36個のうち22個は0件で、沈黙の一部はルールが既定でオフだったことに起因する。
1年前の記事のLast-Modifiedが昨日だった: デプロイが消すキャッシュ検証子
去年書いた記事にcurlをかけたら、Last-Modifiedが昨日のデプロイ時刻だった。ETagを分解すると、ファイルの更新時刻とサイズを16進数で繋いだ値だ。同じソースで再ビルドしたHTML 1,346枚が100%バイト一致するのに、デプロイ一回でサイト全体の条件付きリクエストが成立しなくなる。
サンプル26ページが取りこぼした3種類：WCAG-EM 2.0を1,342ページに当てた記録
W3Cが7月23日にWCAG-EM 2.0をGroup Noteとして公開した。その手順どおりにサンプルを26ページ選び、同じビルドの1,342ページ全部をaxe-coreで走らせて突き合わせた。サンプルが拾えたのは違反4種類のうち1種類。ランダムサンプルが新しい発見を返す確率は0.29%だった。
タイトルを宣言している七か所のうち、自分が書いたのは六か所だった
一つの記事のタイトルは title・h1・og:title・headline・RSS など六か所で宣言される。1,296本すべてで一致していた。問題は七つ目のチャネルだった。自サイトに向かう内部リンク18,296本のうち、リンク先の見出しと一致するアンカーテキストは0.7%。原因はカード全体を包んだ<a>一つだった。
内部リンク46,382本のうち24,948本が301を踏んでいた
アクセシビリティ指標を測るために書いたスクリプトが、URLのバグを掘り当てた。ビルド済みHTML 1,334ページの内部リンクを全数調査したところ、半分を超える24,948本が末尾スラッシュなしの、つまり301リダイレクトを経由するURLを指していた。原因の特定と4段階の修正、そしてゼロにするまでの記録。
言語別の一覧4枚を外したら296本が到達不能になった: クロール深度の実測
関連記事リンクが中央値8本ついているサイトの内部リンクを、到達性の基準で数え直した。ビルド済みHTML1,330枚を幅優先で辿ると記事1,288本のうち1,276本が深度2。ところが言語別の一覧ページ4枚をリンクグラフから外した瞬間、296本がホームから届かなくなった。入口は言語別の一覧ページだった。
divグリッドの表が失うもの：アクセシビリティツリーとテキスト抽出の同時実測
同じ営業時間の表を4通りのマークアップで作り、axe-coreと5種類の抽出器に通した。axeは4つとも違反0件。ところがHTMLをMarkdownやテキストへ還元した途端、7行のうち0行しか復元できないマークアップが3つあった。role="table"では届かない層を実測ログで整理する。
JSON-LD vs Microdata vs RDFa — 構造化データの構文、いつどれを使うか(実測比較)
同じProductエンティティを三つの構文で書き、パーサーに通してバイト数と壊れやすさを実測した。Googleは三つを同等に扱う。ならJSON-LDを勧める本当の理由は順位ではなく、リデザインで生き残る結合度だった。公式ドキュメントと再現ログで整理する選択基準。
sitemap.xmlでGoogleが本当に読むのは lastmod だけだ
priority 1.0 に changefreq always を付けても、Googleは全部捨てる。公式ドキュメントが使うフィールドは lastmod ひとつ。しかも検証可能なほど正確なときだけ使う。三種類のsitemapを公式XSDで実際に通し、何が検証を通り、何が黙って無視されるかを実測した。
同じマークアップ、違う判定 — axe-coreをCIに入れるとcolor-contrastが静かに消える理由
AIが吐き出した予約ウィジェットを1つ、jsdomと実ブラウザでそれぞれaxe-coreに通してみた。構造的な違反4件はブラウザなしでも捕まったが、color-contrastだけjsdomではincompleteに落ちた。なぜそうなるのか、カバレッジの穴を開けないためにCIパイプラインをどう2段に組むかを実測ログとともにまとめた。
技術SEO監査を5日間回した — 直した5項目より効いたのはゲートだった
4言語ブログを5日間、実測で監査した。relatedPostsの404が12件、hreflang破損4ペア、レンダーブロッキングのフォントCSS 405KB、翻訳ドリフト21件、断片化したJSON-LD 7ブロック。全部直した。だが本当の成果は、これらが二度と戻れないようにしたビルドゲートだ。実測ログと検査器のコードまで。
JSON-LDを一つの@graphに束ねる — 散らばった構造化データを検索とAIが読むエンティティモデルへ
自分のページのJSON-LDを検証ツールにかけたら、三つの島にバラバラだった。@idのノード参照でOrganization・WebSite・Articleを一つの@graphに繋ぎ、jsonldで連結性を実測。3コンポーネントが1つに統合される過程と、Googleが保証しない点まで。
hreflangは双方向でなければならない — 4言語ブログを自分で監査して見つけたトップページのバグ
30行のチェッカーを自サイトのビルド成果物に直接走らせた。ブログ記事248本のhreflangクラスターは全部通ったのに、トップページだけが引っかかった。Google公式の相互リンク規則、実測ログ、3つの実装方法の比較、そして開発者がすぐ適用できる修正コードまでまとめた。
AIクローラーをrobots.txtで正しく制御する — 学習は拒否、引用は許可する2026年の戦略
GPTBotを一行ブロックして「AI遮断完了」と思っているサイトは多い。学習・検索・ユーザー要求のクローラーを分けて制御するrobots.txtを実際に書き、標準パーサーで検証した。Google-ExtendedがAI Overviewsを止められない落とし穴と、llms.txtの正直な現状まで。
LocalBusiness構造化データ、JSで入れてもいいがサーバーサイドの方が確実な理由
店舗検索ページのLocalBusiness JSON-LDをJSで注入すると、生のHTMLにはブロックが0個。サーバーサイド出力と直接比較し、Google公式見解と順位の限界まで整理した。