jangwook.net CONTEMPORARY NOTES ON TECHNOLOGY

タグ

アクセシビリティ

12件の記事

17 分

400%拡大が残す画面領域を実測したら、固定ピクセルという通行料が見つかった

320pxのリフローに合格したページでも、短いビューポートでは本文に残る縦方向の空間が118pxまで減っていた。損失は割合ではなく82pxの固定ピクセル通行料で、その大半はアプリケーションCSSの外側にあるサードパーティの固定コンテナから生じていた。測定手順と回帰ゲートの設計、閾値の置き方まで記録する。

アクセシビリティ WCAG CSS
16 分

Chromeのエージェントスキルを数えた：ガイド138本、アクセシビリティ2本、検索0本

Google Chromeチームの Modern Web Guidance 0.0.180 を入れ、ガイド138本をカテゴリ別に数え、3領域22件のクエリで検索を突いた。上位類似度はUI 0.643、アクセシビリティ0.508、構造化データ0.267で無応答2件。コーパスの空白を規約で埋める手順まで書く。

Web開発 AIエージェント アクセシビリティ
18 分

リフローを320pxの幅だけで測ると半分しか測れない: 400%拡大の高さ200px

WCAG 1.4.10 リフローを 320x844・320x256・320x200 の3条件で同時に測った。横方向の判定は3条件で1ピクセルも違わず、400%拡大で実際に変わるのは高さのほうだ。82pxの sticky ヘッダーがビューポートの41%を占め、本文の可視領域は6割を切っていた。測定スクリプトも置いた。

アクセシビリティ WCAG CSS
15 分

WCAG 2.2 AAのルールが既定で無効だった: 正解付き1,213件で測った自動チェックの守備範囲

W3C ACTが公開する正解ラベル付きテストケース1,213件にaxe-coreを全件通した。失敗するはずの387件のうち、当該達成基準で違反が出たのは145件(37.5%)。基準36個のうち22個は0件で、沈黙の一部はルールが既定でオフだったことに起因する。

アクセシビリティ WCAG CI
16 分

同じページを逆向きに辿ったら違反16件: 固定ヘッダーが飲み込むキーボードフォーカス

同じ6ページをTabで下りながら測ると WCAG 2.4.11 の違反は0件、Shift+Tabで上りながら測ると16件だった。ブラウザがフォーカス対象を画面内に入れる際の寄せ方が進行方向で変わるからだ。CSS一行で16件を0件にした実測記録である。測る向きを変えると、結果そのものが変わる点が核心だ。

アクセシビリティ WCAG キーボード
18 分

サンプル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%だった。

アクセシビリティ WCAG Web開発
17 分

タイトルを宣言している七か所のうち、自分が書いたのは六か所だった

一つの記事のタイトルは title・h1・og:title・headline・RSS など六か所で宣言される。1,296本すべてで一致していた。問題は七つ目のチャネルだった。自サイトに向かう内部リンク18,296本のうち、リンク先の見出しと一致するアンカーテキストは0.7%。原因はカード全体を包んだ<a>一つだった。

SEO アクセシビリティ アンカーテキスト
16 分

divグリッドの表が失うもの：アクセシビリティツリーとテキスト抽出の同時実測

同じ営業時間の表を4通りのマークアップで作り、axe-coreと5種類の抽出器に通した。axeは4つとも違反0件。ところがHTMLをMarkdownやテキストへ還元した途端、7行のうち0行しか復元できないマークアップが3つあった。role="table"では届かない層を実測ログで整理する。

アクセシビリティ セマンティックHTML GEO