Fluent UI 2のラジオボタンコンポーネントのアクセシビリティ実装とBlazor 5との比較・使い分けを解説。ラジオボタンの正しいa11y設計を学べる。
シェアックリップ
シェアされたアックリップです。
そのほかの #WAI-ARIA ピックアップ
画像の必要性を根本から問い直す。見えない人にとって意味がある場合、代替テキストが必要であることを示す。装飾的と見なされる画像も、実質的な意義の有無を判断する枠組みを提案。
ストリーミングチャットインターフェースで、サーバーハートビートをトークンと誤認識し、スクリーンリーダーユーザーに状態が更新されないままになる問題を解決。状態機械の設計と適切な live region 更新の必要性を解説。
アクセシブルな Web チェックリストツールの構築方法を解説。ネイティブな HTML コントロール、ローカルストレージ、キーボード操作、プリント対応による、フレームワーク不要のシンプルな実装を紹介。
CAPTCHA の代わりにハニーポットを使って、スクリーンリーダー利用者に負担をかけずにスパムボットを検出する実装方法。フロントエンドとサーバー側の検証を解説。
WebMCPの提案に対して、人と支援技術が利用するHTML・ARIAなどの共有レイヤーを改善するべきで、エージェント向けの別の意味レイヤーを作るべきではないと主張する記事。アクセシビリティのベストプラクティスを強化する設計の重要性を述べている。
ネイティブダイアログ要素でモーダル閉じ込めとフォーカス移動を検証するためのテストフィクスチャとテスト方法を解説。フォーカスリーク防止と複数ブラウザでの検証の重要性を説明している。
そのほかの #デザインシステム ピックアップ
Vaadin Button の Web Component 開発の 9 年以上の歴史をとおして、アクセシビリティに対応するための技術的課題と解決方法を描く。Shadow DOM 設計、フォーカス管理、tooltip の accessible 化など、進化の過程を追う。
色調パレットをアクセシビリティ規則に基づいて自動修正するエンジンの実装。WCAG対比率を満たすよう色を調整し、OKLCH色空間を使って知覚的な色合い変化を最小限に抑える。
デザインシステムがキーボード操作とフォーカス移動を一貫して管理するメカニズムを解説。フォーカストラップ・ARIA・イベントハンドリングの実装と、アプリ側のオーバーライドが破壊する事例を紹介。
レトロアーケード美学を保ちながら WCAG コントラスト要件を満たす色設計と、Flash of Unstyled Content を避ける実装方法を解説。CSS カスタムプロパティと同期スクリプトを組み合わせた構成。
プロジェクト管理ツール Pleasanter の 2027 年 1 月予定の UI テーマ改善について、CSS 変数削除やクラス名変更などの変更点をまとめた。
デザインシステムの配色監査を支援するツール。複数色の組み合わせをすべて表行列で可視化し、WCAG のコントラスト比基準（AA/AAA）と文字サイズ別の達成状況を一覧表示。相対輝度の計算ロジックと実装方法を解説。
そのほかの #キーボード操作 ピックアップ
ChatGPTの画面更新によるスクリーンリーダー対応の低下を報告。見出し削除、リスト構造喪失、キー操作の変化など、スクリーンリーダー利用者に影響する具体的な問題を述べ、Webサイト変更時にはスクリーンリーダーでの操作確認の必要性を主張。
アクセシブルな Web チェックリストツールの構築方法を解説。ネイティブな HTML コントロール、ローカルストレージ、キーボード操作、プリント対応による、フレームワーク不要のシンプルな実装を紹介。
ネイティブダイアログ要素でモーダル閉じ込めとフォーカス移動を検証するためのテストフィクスチャとテスト方法を解説。フォーカスリーク防止と複数ブラウザでの検証の重要性を説明している。
業務システムのマウス操作による手首の負担を、キーボード操作で解決した経験から、アクセシビリティの本質を考える。相手の困りごとに寄り添い、摩擦を減らす設計思想の重要性について述べる。
ストリーム型のAI生成UIにおいて、キャンセル操作時にフォーカスを失い、古い状態の通知がスクリーンリーダーで宣言される問題を分析。WAI-ARIAのライブリージョンとフォーカス管理の実装パターンと、デバッグ手法を具体的に解説している。
インタラクティブ動画プレイヤー hihaho の9月アップデート。キーボード操作で再生・字幕・スキップができ、スクリーンリーダーで状態と結果が読み上げられるように対応。画像代替テキスト機能も追加。