Highlighting Footnotes
記事 海外
脚注のアクセシビリティを向上させる実装方法。HTML/CSS による脚注表示の最適化手法とキーボード・スクリーンリーダー対応を解説。
シェアックリップ
シェアされたアックリップです。
そのほかの #キーボード操作 ピックアップ
モバイル表示で幅広いテーブルがページ横スクロールを引き起こす問題。テーブルをスクロール可能なコンテナで包み、キーボード利用者が操作できる実装方法を説明。
Webレター・パーソナルメッセージの品質保証フロー。コンテンツファースト、キーボード操作可能性、見出し構造の正確性、画像の代替テキスト、prefers-reduced-motion対応、音声の操作性を含むチェックリスト。
ポートフォリオサイトのアクセシビリティ監査。セマンティックHTML要素（header、nav、main）の採用、見出し階層の一貫性、キーボード操作を想定したリンク記述の改善を具体例で解説。
React で FAQ の答えを state でマウント解除する実装と、`<details>` 要素で常に DOM に保持する実装を比較。マウント解除すると find-in-page 検索が失敗し、トランジション不可になるほか、client component 化を強いる。ネイティブ実装なら同じ見た目でこれらの制約がない。
React Modal コンポーネント（oks-ui）の実装ガイド。role="dialog"・aria-modal="true"・accessible name・フォーカス管理・キーボード操作をカバー。複数ブラウザで動作確認済み。
固定フッターがキーボード操作のフォーカスを隠す問題の検証ツール。ResizeObserver で要素の高さを追跡し、WCAG 2.4.11 の達成基準を参考に改善方法を示す。
そのほかの #WAI-ARIA ピックアップ
モバイル表示で幅広いテーブルがページ横スクロールを引き起こす問題。テーブルをスクロール可能なコンテナで包み、キーボード利用者が操作できる実装方法を説明。
React で FAQ の答えを state でマウント解除する実装と、`<details>` 要素で常に DOM に保持する実装を比較。マウント解除すると find-in-page 検索が失敗し、トランジション不可になるほか、client component 化を強いる。ネイティブ実装なら同じ見た目でこれらの制約がない。
React Modal コンポーネント（oks-ui）の実装ガイド。role="dialog"・aria-modal="true"・accessible name・フォーカス管理・キーボード操作をカバー。複数ブラウザで動作確認済み。
GitHubCopilotやFluentUIといったAIやコンポーネントライブラリが個別実装を支援しても、アクセシビリティや業務要件といった品質判断は設計者に残ることを述べ、AI時代のフロントエンド設計における実装と品質判断の役割分担を整理する
インタラクティブリストがWebの標準パターンであるにもかかわらずプラットフォームでサポートされていない問題を指摘。アクセシビリティ関連の最新記事・ガイドライン・ツールをキュレーション。
CSSで生成されたアイコンはスクリーンリーダーに無視されるため、アイコンのみのボタンには必ず名前が必要。alternative-text構文で名前を供給する実装手法を説明。