ナビゲーションコンポーネントのアクセシビリティ監査を実演。RAMP監査ツールを使いながら、実装の問題点を段階的に明らかにする。
シェアックリップ
シェアされたアックリップです。
そのほかの #テスト・検証 ピックアップ
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
全国810大学を対象にウェブアクセシビリティを自動診断した大規模調査。99.1%に問題が検出。国立大学は画像の代替テキスト欠落、私立大学はUIの役割・キーボード操作の問題が多く、設置区分によって課題が異なることが明らかに。
minimalist-uiスキルのモーション規則をCSSに実装する具体的な方法。translateY・opacityアニメーション、時間差表示、cubic-bezierのタイミング関数、そしてprefers-reduced-motionへの対応を実装例で解説。
Webレター・パーソナルメッセージの品質保証フロー。コンテンツファースト、キーボード操作可能性、見出し構造の正確性、画像の代替テキスト、prefers-reduced-motion対応、音声の操作性を含むチェックリスト。
ポートフォリオサイトのアクセシビリティ監査。セマンティックHTML要素（header、nav、main）の採用、見出し階層の一貫性、キーボード操作を想定したリンク記述の改善を具体例で解説。
ウェブサイトの文字を拡大したときに、説明が隠れたり重なったりしていないか確認する方法を解説。設定の手順から、相談する際のメモの取り方まで、HP運営者向けの実践ガイド。
そのほかの #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構文で名前を供給する実装手法を説明。