Focus Issues and Refinement Support フォーカス管理の課題と改善サポート
記事 海外
React でアクセシブルなメインナビゲーション開発における、フォーカス管理の課題と改善手法、最適化のプラクティスを解説。
#React
Fluent UI 2 の Progress Bar コンポーネントの実装方法とアクセシビリティ対応について解説。Skeleton との使い分けも含む技術記事。
8 Accessibility Issues We Found During a Next.js Audit Next.js 監査で見つかった8つのアクセシビリティ問題
記事 海外
Next.js プロジェクトの監査で実際に発見されたアクセシビリティ問題8件を紹介。WCAG チェックリストではなく実装レベルの具体的な事例と解決策を扱う。
Fluent UI 2のInputコンポーネント実装における、フォーム設計とアクセシビリティ対応を詳細に解説。ラベル・補足テキストの配置、支援技術への対応方法を扱う。
Navigating With Tabs タブナビゲーション
記事 海外
Reactで完全にアクセシブルなタブナビゲーションコンポーネントの実装方法。キーボード操作とWAI-ARIAの適用を解説。
React Native hitSlop: Enhance Tappable Area for Small Buttons React NativeのhitSlopでボタンのタップ対象領域を拡大する
記事 海外
React NativeのhitSlopプロップでボタンのタッチ対象領域を拡大する実装方法である。モバイル利用者の操作性向上に効果的な手法を紹介している。
Accessible Forms in React Native: A Complete Reference Guide React Nativeのアクセシブルなフォーム：完全リファレンスガイド
記事 海外
React Nativeでアクセシブルなフォームを実装する方法を解説するリファレンスガイド。認証フロー・データ入力・ユーザーサポート等のパターン実装を網羅。
5 shadcn slider components that hold up in real dashboards, not just demos. Find accessible, performant picks that help your team ship faster with less custom code. 実装で使えるShadcn Sliderコンポーネント5選
記事 海外
Shadcnの5種類のスライダーコンポーネントから、実装で選ぶべきアクセシブルで高性能なものを紹介。実装効率と品質を両立させるコンポーネント選定の考え方を解説する。
The Ups and Downs of Keyboard Handling キーボード操作ハンドリングの実装方法
記事 海外
React でキーボード操作に完全対応したアクセシブルなナビゲーションコンポーネント実装の方法を解説。キーボードユーザーとスクリーンリーダーユーザーへの対応。
Most React Devs Use aria-label Wrong (Here's the Fix) ほとんどのReact開発者はaria-labelを間違って使っている（修正方法）
記事 海外
React開発者による aria-label の誤用パターンを指摘し、スクリーンリーダーユーザーに正しく伝わるWAI-ARIA属性の使用方法を解説。
Fluent UI 2 の Accordion コンポーネントの情報設計とアクセシビリティ実装ガイド。大量の情報を扱うUIで認知負荷を下げるための設計手法。
I Built an Accessible React Component Library from Scratch — Here's What I Learned ゼロからアクセシブルなReactコンポーネントライブラリを構築して学んだこと
記事 海外
Reactで一からアクセシブルなコンポーネントライブラリを構築した実装経験と教訓。WAI-ARIA活用によるデザインシステム設計。
Single List Keyboard Handling シングルリスト キーボード操作
記事 海外
Reactでアクセシブルなナビゲーションコンポーネントを開発する際の、キーボード操作とフォーカス管理の実装パターンと工夫を詳細に解説。
kovax-react 0.7: Next.js App Router, kovax-react/server, and jest-axe in every test kovax-react 0.7: Next.js App Router、kovax-react/server、すべてのテストで jest-axe
記事 海外
kovax-react 0.7.0 リリース。Next.js App Router に対応し、アクセシビリティテストツール jest-axe をすべてのテストに統合する。
Why we built A11y Studio — WCAG 2.2 accessibility for React developers A11y Studio を構築した理由 — React開発者向けWCAG 2.2対応ツール
記事 海外
ReactアプリケーションのWCAG 2.2対応を支援するA11y Studioの開発背景と、ルールIDではなく「なぜそれが必要か」という根拠を解説。
React + GSAPを用いたreduced-motionへの対応実装。モーションアクセシビリティを重視したアニメーション設計の方法を解説。
React and User Preferences: Respect the OS Settings Your Users Already Picked Reactでユーザー設定を尊重する: OSの設定を活かした実装
記事 海外
Reactでダークモード、モーション削減等のOSユーザー設定を尊重する実装方法を解説。アクセシビリティとUXを両立させるベストプラクティス。
Foundational Accessibility Begins with the Base Components 基盤コンポーネントから始まるアクセシビリティ：Reactナビゲーション実装
記事 海外
Reactでアクセシブルなメインナビゲーションコンポーネントを開発するアプローチ。基盤となるベースコンポーネントの正しい設計と実装で、プロダクト全体のアクセシビリティ向上を実現する方法を解説。
Spacing Considerations in Accessible Design アクセシブルデザインでのスペーシングの考慮
記事 海外
React でアクセシブルなナビゲーションコンポーネント開発する際に、スペーシング（余白・間隔）がアクセシビリティに与える影響と設計上の考慮点を解説。
Creating Initial Requirements for an Accessible Navigation Component アクセシブルなナビゲーションコンポーネントの初期要件定義
記事 海外
Reactのナビゲーションコンポーネントをアクセシブルに設計するための初期要件整理。WAI-ARIAとキーボード操作仕様に基づいた系統的な要件定義アプローチ。
Hunting for an Accessible React Navigation Component Reactでアクセシブルなナビゲーションコンポーネントを探す
記事 海外
Reactでアクセシブルなナビゲーションコンポーネント実装の課題を探索。既存ライブラリの検討から実装までのプロセスを通じ、開発者が直面する実践的な選択肢を提示する。
The Incredible Overcomplexity of the Shadcn Radio Button :: Aaron Gustafson Shadcn ラジオボタンの驚くべき過剰複雑性
記事 海外
コンポーネントライブラリの実装複雑性を指摘。Shadcn/uiのラジオボタン実装を例に、なぜそうなるのか、より簡潔な設計の可能性を検討する記事。
🚀 Just Published: ReactTailwindAccessKit React Tailwind アクセシビリティキット
記事 海外
React と Tailwind CSS を使用したアクセシブルな UI コンポーネントライブラリ。モダンで視覚的に優れた UI を構築する際のアクセシビリティ実装手法を解説する。
Accessibility-first looks different from accessibility-compliant アクセシビリティファーストはアクセシビリティ準拠とは異なる
記事 海外
WCAG 2.2 AAを必須制約として設計に組み込むアーキテクチャ手法を、Reactコンポーネントライブラリの9事例から解説。コンプライアンス超の一流設計。
APG Patterns Examples APG パターン実装例集
記事 海外
WAI-ARIA APGのデザインパターンをReact・Vue・Svelte・Astroで実装したアクセシブルコンポーネントの実例集だ。
Next.js/Reactでキーボード操作のみで使用可能なログインフォームを実装しながら、WAI-ARIAによるフォーカス管理とエラー通知の実装方法を詳しく解説している。
Matthew Hallonbacka and Elina Niem - React Native: What Accessibility Professionals Need To Know. Matthew HallonbackaとElina Niem — React Native：アクセシビリティ専門家が知っておくべきこと
YouTube 海外
フィンランドの食料品アプリ開発経験をもとに、React Native のモバイルアクセシビリティの課題と解決方法を解説する。
12 Tips for More Accessible React Apps (Slides, React Finland 2019) - Manuel Matuzovic アクセスしやすいReactアプリの12のティップス
記事 海外
Reactアプリケーション開発で実装すべきアクセシビリティ改善の12のティップスをカンファレンス発表スライドで紹介。