HTML仕様の再学習を通じて得た気づきをまとめた第2弾。セマンティック要素の正確な使い方とアクセシビリティに関連するHTML仕様の理解を深める内容だ。
シェアックリップ
シェアされたアックリップです。
そのほかの #見出し構造 ピックアップ
WordPress環境でのメール送信におけるアクセシビリティについて。確認メール・パスワードリセット等、ユーザーが受け取る全メッセージが読みやすく・ナビゲート可能である必要性を解説。コンテンツ・構造・デザイン・テスト実践を網羅した講座。
Webアクセシビリティの象徴だったスキップリンクが、テクノロジー進化により必要性を失った現代でもなおチェックリスト項目として形骸化している問題を指摘。正しい見出し構造とランドマーク要素こそが重要であり、形骸化した配慮から脱却することを主張。
HTMLを可視化するブラウザ拡張機能『Accessibility Visualizer』の開発者 ymrl さんが、代替テキスト・見出し・フォームなどの情報を視覚化するツールと活用法を解説する。
HTMLテーブルのアクセシビリティ実装を、スクリーンリーダー対応に重点を置いて解説。caption、scope属性、id+headers属性などの具体的な手法を紹介する。
La Ligaの20クラブサイトについて、自動ツールと手動テストでアクセシビリティを監査した結果。自動ツールは高スコアでも実際にはスクリーンリーダーやキーボード操作に課題があるケースが多く、企業事例とテスト方法を示す。
ブログ記事のセマンティックマークアップ実装ガイド。h1～h3の階層構造、figcaption、alt text、JSON-LD BlogPostingなど、HTMLの正しい要素選択方法とアクセシビリティを解説。
そのほかの #フォーム ピックアップ
React でメールフォームを状態管理（idle、editing、invalid、submitting、success、server error）で構築し、ARIA を用いてアクセシビリティを確保する実装パターン。ユーザーへの段階的情報提供を重視。
同じHTMLを異なるCSSリセットで実装した3パターンを比較。:focusでアウトラインを削除するCSSリセットがキーボードユーザーのフォーカス追跡を不可能にする問題と、:focus-visibleによる解決法を実装で検証している。
同じHTMLを異なるCSSリセットで実装した3パターンを比較。:focusでアウトラインを削除するCSSリセットがキーボードユーザーのフォーカス追跡を不可能にする問題と、:focus-visibleによる解決法を実装で検証している。
color-schemeプロパティでダークモードにおけるブラウザのネイティブUI（日付入力、セレクト、スクロールバー）の自動対応が可能。カスタムコンポーネント制作なしで実装できるテクニック。
ネイティブ<input type="checkbox">を保ちながらカスタムスタイリングする方法。キーボード操作とスクリーンリーダー対応をデフォルトで獲得し、複数の支援技術に対応する責任あるチェックボックスの実装パターンを解説。
HTMLの input type="number" が金額入力に不適切な理由と、type="text" + inputmode="numeric" での実装方法を詳説する。カンマが入力できない、マウスホイールで値が変わるなどの問題を指摘し、Reactコード例を示す。
そのほかの #WAI-ARIA ピックアップ
AIエージェントが画面を操作するとき、見た目よりセマンティックな構造が重要。意味を明示するとUIの操作成功率が43%から90%に向上する。
ブラウザが DOM から構築するアクセシビリティツリーの仕様と構造。Role・Name・State・Value の計算ルール、OS 別 API への変換、支援技術との連携メカニズムを技術的に解説。
noteエディタの見出し画像ボタンのaria-label欠落により、Playwright自動化テストが失敗。同じ欠落がスクリーンリーダーにも影響することを指摘し、位置・サイズで検索する回避策を解説。
React でメールフォームを状態管理（idle、editing、invalid、submitting、success、server error）で構築し、ARIA を用いてアクセシビリティを確保する実装パターン。ユーザーへの段階的情報提供を重視。
AI 生成テキストをストリーミング表示する際、未完成の Markdown 構造が不正な見出しやリンクになり、スクリーンリーダー・キーボード利用者に虚偽の情報を伝える問題を分析。状態管理と ARIA 属性による解決法を提示。
状態管理のバグがキーボード操作とスクリーンリーダーユーザーに異なる影響をもたらす仕組みと、デバッグの順序を解説。実装時に状態遷移表を作成することの重要性を示す。