リフローを320pxの幅だけで測ると半分しか測れない: 400%拡大の高さ200px
WCAG 1.4.10 リフローを 320x844・320x256・320x200 の3条件で同時に測った。横方向の判定は3条件で1ピクセルも違わず、400%拡大で実際に変わるのは高さのほうだ。82pxの sticky ヘッダーがビューポートの41%を占め、本文の可視領域は6割を切っていた。測定スクリプトも置いた。
archive
コラム · ページ 3
356 · ページ 3
引用された一文へ戻るリンクは、コードブロックだけで切れる
自サイトのビルド成果物から69本のテキストフラグメントを作り、Chromiumで一つずつクリックして到達を記録した。散文の48本は全部届き、コードブロックは15本中14本が切れた。ブロック境界と単語境界の規則を実測で整理する。
字間を0.12em広げたら570か所が切れた: チェッカーが通したAA基準
axe-coreはWCAG 1.4.12に違反0件を返した。その基準が要求する4つの値を実際に当てると、570個の要素で文字が切れた。4つを1つずつ分けて当て、どの宣言がコンテンツを失わせるのかを分解した記録。
WCAG 2.2 AAのルールが既定で無効だった: 正解付き1,213件で測った自動チェックの守備範囲
W3C ACTが公開する正解ラベル付きテストケース1,213件にaxe-coreを全件通した。失敗するはずの387件のうち、当該達成基準で違反が出たのは145件(37.5%)。基準36個のうち22個は0件で、沈黙の一部はルールが既定でオフだったことに起因する。
同じページを逆向きに辿ったら違反16件: 固定ヘッダーが飲み込むキーボードフォーカス
同じ6ページをTabで下りながら測ると WCAG 2.4.11 の違反は0件、Shift+Tabで上りながら測ると16件だった。ブラウザがフォーカス対象を画面内に入れる際の寄せ方が進行方向で変わるからだ。CSS一行で16件を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"では届かない層を実測ログで整理する。
prerenderを入れたらLCPが6.2秒になった — activationStartを引かないRUMは嘘をつく
Speculation Rulesでページを先読みすると、LCPの生値に待ち時間がまるごと乗る。Chrome 150で6244msと103.5msの差を実測し、補正すべき箇所を整理した。