CA11Y #4 〜 Accessibility Maniacs 〜
イベント 開催予定
渋谷を拠点にするアクセシビリティ勉強会の第4回。WAI-ARIA・WCAG 3.0・APCA・acc-nameなどマニアックなテーマのLT5本＋懇親会。
#WAI-ARIA
Fluent UI 2のラジオボタンコンポーネントのアクセシビリティ実装とBlazor 5との比較・使い分けを解説。ラジオボタンの正しいa11y設計を学べる。
Fluent UI 2 の Rating コンポーネント（評価UI）の設計思想とアクセシビリティ実装を、従来版との比較で解説。
Focus Issues and Refinement Support フォーカス管理の課題と改善サポート
記事 海外
React でアクセシブルなメインナビゲーション開発における、フォーカス管理の課題と改善手法、最適化のプラクティスを解説。
Fluent UI 2 の Progress Bar コンポーネントの実装方法とアクセシビリティ対応について解説。Skeleton との使い分けも含む技術記事。
We Deleted Our Focus Trap, Scroll Lock, and Toggle Logic — The Browser Already Does It フォーカストラップを削除する — ブラウザの標準機能を活用したUI実装
記事 海外
フォーカストラップ・スクロール制御・トグルロジックなどのUI実装パターンをブラウザの標準機能で実装する方法。ヘッドレスUIコンポーネント設計のベストプラクティス。
UIコンポーネント実装時に必要なアクセシビリティ基準をコンポーネント単位で整理したカタログ。キーボード操作可能性、支援技術対応、WCAG達成基準の適用方法を具体例とともに解説。
ARIA w tabelach danych a wymogi EAA: jak wdrożyć dostępność bez przekraczania budżetu MŚP? データテーブルのARIA実装とEAA対応――中小企業の予算で実現する方法
記事 海外
データテーブルへのARIA実装とEAA（ヨーロッパアクセシビリティ法）への対応を、中小企業の予算効率を意識しながら実現する方法を解説。規制要件と実装コストのバランス取りを論じる。
Fluent UI 2のNavコンポーネントのガイダンス・動作・レイアウト・アクセシビリティ実装を詳解。Fluent UI Blazor 5との比較を交えながら、アクセシビリティを実装するためのポイントを提示。
Fluent UIのリンクコンポーネント設計を、支援技術での理解を重視しながらボタンとの区別も含めて解説。
How to Test Modal Dialog Accessibility With Keyboard Navigation and Screen Readers モーダルダイアログのアクセシビリティテスト：キーボード操作とスクリーンリーダー検証
記事 海外
モーダルダイアログをキーボードとスクリーンリーダーでテストする方法を解説。WAI-ARIAの正しい実装とアクセシビリティ検証手法、スクリーンリーダーユーザーの操作性確保方法を紹介。
Fluent UI 2のInputコンポーネント実装における、フォーム設計とアクセシビリティ対応を詳細に解説。ラベル・補足テキストの配置、支援技術への対応方法を扱う。
Fluent UI 2のアイコンのセマンティック目的とアクセシビリティ対応について解説する技術記事。デザインシステムにおけるアクセシビリティの実装方法を論じている。
Fluent UI 2のImageコンポーネントのアクセシビリティを含むレイアウト設計について解説する技術記事。支援技術への意味情報の伝達方法を論じている。
Brian Kardell visits the Fireside – HTML Accessibility Brian Kardellが語るファイアサイド - HTMLアクセシビリティ
記事 海外
HTMLアクセシビリティの専門家Brian Kardellへのインタビュー。セマンティックHTMLと標準化によるウェブアクセシビリティの実装ベストプラクティスと業界動向を解説。
JavaScriptデータグリッドコンポーネントのアクセシビリティ実装方法を解説した記事である。支援技術ユーザーを含むすべてのユーザーが利用できるデータ表示方法の考慮点を論じている。
Navigating With Tabs タブナビゲーション
記事 海外
Reactで完全にアクセシブルなタブナビゲーションコンポーネントの実装方法。キーボード操作とWAI-ARIAの適用を解説。
Fluent UI 2 のドロップダウンコンポーネントのアクセシビリティ設計を解説。単一・複数選択に対応したコンテンツ設計の考え方と実装方法を紹介。
Lottie Animations and Accessibility: prefers-reduced-motion, ARIA, and Best Practices Lottieアニメーションとアクセシビリティ：prefers-reduced-motion、ARIA、ベストプラクティス
記事 海外
Lottieアニメーションのアクセシビリティベストプラクティス。アニメーション過敏症への配慮、ARIA属性の活用、CSS prefers-reduced-motion の実装方法を解説。
AriaML : An HTML fork AriaML: HTMLのフォーク
記事 海外
HTMLから派生したマークアップ言語AriaMLの仕様。WAI-ARIAの実装を簡素化し、アクセシビリティを標準化する試み。
Fireside chat – the journey continues… – HTML Accessibility ファイアサイドチャット — 旅は続く…
記事 海外
HTMLアクセシビリティの現状と展望について。W3C・WAI関係者らによる、標準化プロセスと今後の業界動向をめぐる対談。
The Ups and Downs of Keyboard Handling キーボード操作ハンドリングの実装方法
記事 海外
React でキーボード操作に完全対応したアクセシブルなナビゲーションコンポーネント実装の方法を解説。キーボードユーザーとスクリーンリーダーユーザーへの対応。
Fluent UI 2 の Breadcrumb コンポーネントのアクセシビリティ実装を、Fluent UI Blazor 5 との対応と情報設計の観点から解説。ナビゲーション要素の正しい ARIA 属性による構造化。
Accessibility Is Not a Lighthouse Checkbox アクセシビリティはLighthouseチェックボックスではない
記事 海外
自動化ツールに依存せず、セマンティックHTML・キーボード操作・フォーカス設計による総合的なアクセシビリティアプローチを解説。人間による検証の重要性を強調する。
Accessible Web Apps: A Div Is Not a Button アクセシブルなWebアプリ：divはボタンではない
記事 海外
モダンフロントエンドフレームワークでも、セマンティックHTMLを保つことが重要。ボタン等のインタラクティブ要素に適切なHTML要素の使用を強調。
here comes the GoodWitch – HTML Accessibility GoodWitch - HTMLアクセシビリティ
記事 海外
HTMLでのセマンティックマークアップとWAI-ARIAの活用によるアクセシビリティ実装の最新知見を解説する記事。ウェブアクセシビリティの標準的なアプローチを紹介する。
Most React Devs Use aria-label Wrong (Here's the Fix) ほとんどのReact開発者はaria-labelを間違って使っている（修正方法）
記事 海外
React開発者による aria-label の誤用パターンを指摘し、スクリーンリーダーユーザーに正しく伝わるWAI-ARIA属性の使用方法を解説。
SVG Icon Accessibility: Decorative vs Meaningful Icons SVGアイコンのアクセシビリティ：装飾的か機能的か
記事 海外
SVGアイコンの実装において、装飾的か機能的かの使い分けと、aria-hidden・role・aria-labelの適切な使用方法を解説。
Fluent UI 2 の Accordion コンポーネントの情報設計とアクセシビリティ実装ガイド。大量の情報を扱うUIで認知負荷を下げるための設計手法。
Not every form field needs to be in a fieldset すべてのフォームフィールドが fieldset に含まれる必要はない
記事 海外
フォームのアクセシビリティ設計において fieldset の適切な使用方法を解説。すべてのフォームフィールドが fieldset に含まれる必要がないことを学べる。
Liquitousのアクセシビリティ向上活動報告。Webサイトのランドマーク調整など技術的な改善取り組みと実績を報告。
I Built an Accessible React Component Library from Scratch — Here's What I Learned ゼロからアクセシブルなReactコンポーネントライブラリを構築して学んだこと
記事 海外
Reactで一からアクセシブルなコンポーネントライブラリを構築した実装経験と教訓。WAI-ARIA活用によるデザインシステム設計。
Accessibility question: is nesting interactive elements bad? インタラクティブ要素のネストはアクセシビリティ的に問題か
記事 海外
ギャラリースクリプト実装時にぶつかるインタラクティブ要素の入れ子問題。ラベル内にリンクを置くことの是非とスクリーンリーダーでの動作挙動を検討。
Make Your Embedded Audio Player Accessible カスタム音声プレイヤーをアクセシブルに
記事 海外
カスタム音声プレイヤーをアクセシブルに実装するための方法を解説。キーボード操作やWAI-ARIA属性の使用方法などの技術的な実装ガイドを提供している。
ARIA Widgets and Keyboard Accessibility: Tips for Dev Teams ARIAウィジェットとキーボードアクセシビリティ：開発チーム向けのコツ
記事 海外
ARIAウィジェットはセマンティクスを通知するがキーボード動作を提供しない。開発チーム向けのカスタムコンポーネント実装ガイド。
lliveが採用した「不可視アノテーションチャネル」設計パターンを解説。HTMLでは見えないが機械が読める情報を埋め込み、複数プロダクトの相互依存性を実現する手法。
Single List Keyboard Handling シングルリスト キーボード操作
記事 海外
Reactでアクセシブルなナビゲーションコンポーネントを開発する際の、キーボード操作とフォーカス管理の実装パターンと工夫を詳細に解説。
dialog/Popover API の標準化と実装に関する Web標準の設計思想を考察。なぜこれらの仕様が開発者に完全に委ねられているのかを解説
セマンティックHTMLの基本と正しい使い分けを解説。タグの役割とアクセシビリティへの影響、実装時の落とし穴を紹介。
Accessible error messages: the patterns that work across JAWS, NVDA and VoiceOver アクセスエラーメッセージ：JAWS・NVDA・VoiceOverで動作するパターン
記事 海外
スクリーンリーダー環境で正しく機能するエラーメッセージの実装パターンを解説。JAWS・NVDA・VoiceOverで検証したaria-liveとaria-invalidの活用法。
Giving AI Agents Eyes (Part 2): From Page Snapshots to Interaction Traces AIエージェントに目を与える（第2部）: ページスナップショットからインタラクショントレースへ
記事 海外
AIエージェントがページのa11y treeとユーザーアクティビティを追跡する仕組みを解説。Module Federationの活用例とTypeScript実装を紹介する。
Why Your 'Added to Cart' Toast Notification Never Reaches Screen Reader Users (And the Two-Line Fix) トースト通知をスクリーンリーダーユーザーに届かせるための修正方法
記事 海外
トースト通知がスクリーンリーダーユーザーに認識されない問題と、わずかなコード修正での解決方法を技術的に解説する記事。フロントエンド開発者向け。
Accessible and Functional Quantity Spinbutton Pattern アクセシブルで機能的な数量スピンボタンパターン
記事 海外
WAI-ARIA spinbutton パターンのアクセシブル実装方法とベストプラクティスを解説する技術ガイド。
HTMLのネイティブダイアログ要素（dialog・popover・details）の使い分けについて実装ガイド。各要素のセマンティクスと役割の違いを解説している。
Loading Spinners Are Quietly Breaking Your Website for Screen Reader Users ローディングスピナーはスクリーンリーダーユーザーのウェブサイトを密かに破壊している
記事 海外
スピナーやスケルトン画面などの待機表示がスクリーンリーダーに対応していない問題と、その解決方法を解説する。
Foundational Accessibility Begins with the Base Components 基盤コンポーネントから始まるアクセシビリティ：Reactナビゲーション実装
記事 海外
Reactでアクセシブルなメインナビゲーションコンポーネントを開発するアプローチ。基盤となるベースコンポーネントの正しい設計と実装で、プロダクト全体のアクセシビリティ向上を実現する方法を解説。
CSS や ARIA による異なるコンテンツ隠蔽方法（display:none、visibility:hidden、aria-hidden など）がスクリーンリーダーやキーボード操作に与える影響を検証・比較。
Amy Warms to the Fireside – HTML Accessibility エイミーのファイアサイド - HTMLアクセシビリティ
記事 海外
HTMLのアクセシビリティについてのコンテンツ。セマンティックHTMLとWAI-ARIAの適切な使用方法、実装上の考慮点について詳しく解説。
Accessible Blog Search with Eleventy Eleventyのアクセシブルブログ検索実装
記事 海外
Eleventyを使ったアクセシブルなブログ検索機能の実装方法を実装例で解説。WAI-ARIAとキーボード操作対応を含む。
WAI‑ARIA Guidance: Best Practices for Accessible Web Interfaces WAI-ARIAガイダンス: アクセシブルなウェブインターフェースのベストプラクティス
記事 海外
WAI-ARIAの役割・状態・プロパティを使ってスクリーンリーダーなどの支援技術が動的インターフェースを理解できるようにする方法を解説。よくある誤りも指摘。
5 ARIA mistakes that make accessibility worse, not better アクセシビリティを悪化させる5つのARIA間違い
記事 海外
ARIAの不適切な使用がアクセシビリティを悪化させる5つの誤りパターンと、正しい実装方法を解説するガイド。
Structure, Code, and Accessibility: Building with Purpose 構造、コード、アクセシビリティ：目的を持った構築
記事 海外
ウェブ開発において明確で構造化されたコードを基盤に、アクセシビリティを実現する設計思想と実装方法を解説した記事。
Creating Initial Requirements for an Accessible Navigation Component アクセシブルなナビゲーションコンポーネントの初期要件定義
記事 海外
Reactのナビゲーションコンポーネントをアクセシブルに設計するための初期要件整理。WAI-ARIAとキーボード操作仕様に基づいた系統的な要件定義アプローチ。
ゲーム・ボードゲームUIのアクセシビリティについて、ARIA属性よりも座標同期による実装が有効である理由と具体的な実装手法を解説。
WENDY FIRESIDE – HTML Accessibility WENDY FIRESIDE – HTMLアクセシビリティ
記事 海外
HTML標準におけるネイティブアクセシビリティ機能の実装詳解。セマンティックマークアップとWAI-ARIAの相互関係を含め、アクセシブルなHTML開発の原則を網羅的に解説。
Next.js Link as a Button Next.js Link をボタンとして扱う
記事 海外
Next.jsのLinkコンポーネントをボタンとして扱う実装方法を解説している。セマンティックHTMLとアクセシビリティを考慮した設計が主題。
Accessible Accordions and Tabs: The Two Patterns Everyone Confuses アクセシブルなアコーディオンとタブ：よく混同される2つのUIパターン
記事 海外
ビジュアルは似ているが異なるUIパターンであるAccordionとTabの違いを解説。WAI-ARIAに基づいた正確な実装方法とベストプラクティスを提示している。
ARIA Roles Explained: A Practical Guide for Web Developers ARIAロール解説: ウェブ開発者向け実践ガイド
記事 海外
WAI-ARIAロールの正しい使用方法を解説したガイド。ウェブ開発者向けに、スクリーンリーダーなどの支援技術がHTML要素の構造と役割を理解するメカニズムを説明する。
Hunting for an Accessible React Navigation Component Reactでアクセシブルなナビゲーションコンポーネントを探す
記事 海外
Reactでアクセシブルなナビゲーションコンポーネント実装の課題を探索。既存ライブラリの検討から実装までのプロセスを通じ、開発者が直面する実践的な選択肢を提示する。
WAI‑ARIA Explained: A Guide to Accessible Rich Internet Applications WAI-ARIA解説：アクセシブルなリッチインターネットアプリケーション入門
記事 海外
WAI-ARIAの基礎から実装方法、よくある誤りの回避方法までを解説するガイド。スクリーンリーダーとの連携によるWebアプリケーションのアクセシビリティ向上について。
Accessible faux-nested interactive controls :: Aaron Gustafson アクセシブルな擬似ネストインタラクティブコントロール
記事 海外
Web UIにおけるネストされたインタラクティブコントロールのアクセシブルな実装方法とベストプラクティスを解説。
How to Build Accessible Custom Dropdowns (Comboboxes) That Actually Work 機能するアクセシブルなカスタムドロップダウン（コンボボックス）の構築方法
記事 海外
WAI-ARIAを用いたカスタムドロップダウン・コンボボックスのアクセシブル実装方法を解説。フォーム操作の改善技法。
🚀 Just Published: ReactTailwindAccessKit React Tailwind アクセシビリティキット
記事 海外
React と Tailwind CSS を使用したアクセシブルな UI コンポーネントライブラリ。モダンで視覚的に優れた UI を構築する際のアクセシビリティ実装手法を解説する。
How to Add Skip Links to Any WordPress Theme WordPressのどのテーマにもスキップリンクを追加する方法
記事 海外
スキップリンクはアクセシビリティの基本機能でありながら見落とされやすい。WordPressテーマへの実装方法を解説している。
Gerard does Fireside – HTML Accessibility Gerardのファイアサイド – HTMLアクセシビリティ
記事 海外
HTMLセマンティック要素とアクセシビリティ属性の関係を実装例で解説。見出し、ランドマーク、ARIA属性の使用方法を中心に扱う。
divではなく正しいHTMLセマンティクスを使うべき、ARIAは最後の手段という実装原則について、具体例を交えて解説した記事。
モダンCSSの活用によるWebアクセシビリティ対応の実装テクニック3選を、実例を交えて解説した実践的な記事。
HTMLランドマーク要素を見た目ではなく意味的構造に基づいて実装し、スクリーンリーダーユーザーの情報移動を支援する設計方法を解説。
The accessibility tree is the new API アクセシビリティツリーが新たなAPI
記事 海外
AIエージェントはウェブサイトを見ずアクセシビリティツリーを読む。スクリーンリーダー向けに構築された同じ構造がAI向けAPIとして機能する現実を指摘。
Accessible Modals: How to Build Dialogs That Don't Trap, Confuse, or Exclude Users アクセシブルなモーダル：トラップ・混乱・除外を避けるダイアログの構築方法
記事 海外
モーダルダイアログのアクセシビリティ設計を解説。ユーザーをトラップせず、混乱させず、除外しないUIパターンを紹介している。
WebUIにおけるボタンとリンクの使い分けの判断基準をアクセシビリティの視点から言語化した記事。セマンティックHTML実装が支援技術の正確な動作に不可欠であることを説いている。
NVDAとVoiceOverの挙動差を例に、スクリーンリーダー検証で実装と操作方法を切り分けることの重要性を解説。視覚障害者向けのテスト方法を共有。
old advice – Hiding Content Has No Effect on Accessible Name or Description Calculation – HTML Accessibility 旧情報 – コンテンツを非表示にしてもアクセシブルな名前・説明の計算には影響しない – HTML Accessibility
記事 海外
CSSで視覚的に非表示にした要素でも、WAI-ARIAの属性がアクセシブル名・説明計算に影響することを、スクリーンリーダーの実例で解説した技術記事である。
Locked Out: Why OTP and 2FA Often Fail Users with Disabilities - Sheri Byrne-Haber's Blog 締め出される：OTPと2FAが障害のあるユーザーの期待に応えられない理由 - Sheri Byrne-Haberのブログ
記事 海外
ワンタイムパスワードと二要素認証がスクリーンリーダーユーザーや聴覚・視覚・認知障害のあるユーザーを排除する問題と、その解決策（複数認証方法、ARIA対応等）を分析した記事。
February 2026 Baseline monthly digest | Blog | web.dev 2026年2月 Baselineマンスリーダイジェスト | ブログ | web.dev
記事 海外
2026年2月にブラウザ間で対応されたWeb API機能の月次レポート。RTL/LTRのテキスト方向自動キャプチャが改善され、支援技術の処理精度が向上。
Heading Anchors with Eleventy EleventyによるHeading Anchorsの実装
記事 海外
見出しにアンカーリンクを自動生成するEleventy実装パターン。cherioライブラリを用いたビルドタイム変換で、サーバーサイドに見出しIDに対応するアンカーを自動挿入し、クライアント側JavaScriptを削減する設計を解説。
トースト通知のアクセシビリティ問題を指摘し、ARIAライブリージョンの実装方法や認知アクセシビリティの視点から改善策を提案した技術記事だ。
HTML仕様の再学習を通じて得た気づきをまとめた第2弾。セマンティック要素の正確な使い方とアクセシビリティに関連するHTML仕様の理解を深める内容だ。
Highlighting Footnotes 脚注のハイライト表示
記事 海外
脚注のアクセシビリティを向上させる実装方法。HTML/CSS による脚注表示の最適化手法とキーボード・スクリーンリーダー対応を解説。
AIエージェントがWebを読む時代において、セマンティックHTMLとアクセシビリティ対応の有効性を論じた記事だ。
heydon fireside 2 – can’t shut the fucker up – HTML Accessibility ヘイドン・ファイヤーサイド第2弾：語り続ける男
記事 海外
HTML5 AccessibilityがHeydon Pickering氏と共にWebアクセシビリティの現状と指針について率直に対話するファイヤーサイドチャット第2弾。
セマンティックHTML、ARIA属性、フォーム設計、Dialog、ダークパターン回避など、Web開発の現場で頻出するアクセシビリティ課題を実践的に解説する。
APG Patterns Examples APG パターン実装例集
記事 海外
WAI-ARIA APGのデザインパターンをReact・Vue・Svelte・Astroで実装したアクセシブルコンポーネントの実例集だ。
HTMLタグのセマンティックな使用法の重要性を再学習する過程で得られた実践的気づきをまとめ、スクリーンリーダーへの情報伝達におけるセマンティック要素の役割を具体例で解説している。
NuxtアプリでSPA遷移時の動的コンテンツ変更をスクリーンリーダーに伝えるNuxtAnnouncerモジュールの仕組みと実装方法を、ARIAライブリージョンの応用例とともに解説している。
ARIA Labels and Accessible Names: A Developer’s Guide ARIAラベルとアクセシブルな名前：開発者ガイド
記事 海外
ARIAラベルとアクセシブルな名前が支援技術にどう解釈されるかを解説した開発者向けガイド。正しい実装方法とよくある実装ミスを具体例で説明している。
ロービングタブインデックスUIの実装を簡潔にするfocusgroup属性について、ブラウザサポート状況と実装方法を解説する。
WCAGの『堅牢』原則を交通系ICカードの改札機残高表示の曖昧さを例に、支援技術が確実に情報を解釈できる実装の重要性を解説した記事。
Karl stokes the Fireside – HTML Accessibility ファイヤーサイドチャット：Karl氏とHTMLアクセシビリティを語る
記事 海外
HTMLアクセシビリティの知見を持つKarlがHTML5 Accessibilityのファイヤーサイドチャットで、自身の経験と考え方を率直に語るインタビュー対談である。
Accessibility Assistant for Figma v52 :: Aaron Gustafson Figma用Accessibility Assistant v52 :: Aaron Gustafson
記事 海外
FigmaのアクセシビリティアシスタントがWAI-ARIAロール拡張・アノテーション刷新・UI統合を含むv52へアップデート。デザイン段階での検証精度が向上し、アクセシビリティシフトレフトが実現した。
Ctrl+F全文検索にもヒットするアクセシブルなタブコンポーネントの実装方法。WAI-ARIAとキーボード操作・スクリーンリーダー対応を含む最新実装例。
Here’s how to instruct a LLM to reference the ARIA Authoring Practices Guide LLMにARIAオーサリングプラクティスガイドを参照させる方法
記事 海外
LLMにARIAオーサリングプラクティスガイドを正しく参照させるプロンプト手法を解説し、AIがアクセシビリティのベストプラクティスを正確に扱える課題を論じている。
Talking with Heydon Pickering – HTML Accessibility Heydon Pickeringとの対話 — HTML Accessibility
記事 海外
アクセシビリティ著作で知られるHeydon PickeringへのインタビューをHTML5 Accessibilityが収録したもので、HTMLアクセシビリティへの実践的見解が語られている。
Able Player 4.8.0 and Able Player for WordPress 2.3.0 Released - Joe Dolson Web Accessibility Able Player 4.8.0 & WordPress版 2.3.0 リリース
記事 海外
アクセシブルなメディアプレーヤー「Able Player」v4.8.0とWordPress向けプラグイン2.3.0が同時リリース。変更点の詳細を解説。
You Know What? Just Don’t Split Words into Letters いっそのこと、単語を文字に分割するのはやめよう
記事 海外
ARIA属性を使用したリンク実装時に、テキストを文字単位で分割することがスクリーンリーダーユーザーに与える問題を詳述し、10年以上前からの落とし穴を改めて明示している。
Accessible building blocks for web: form fields ウェブのアクセシブルな構成要素：フォームフィールド
YouTube 海外
スクリーンリーダーやキーボード操作ユーザーを含むすべての利用者にとって入力しやすいウェブフォームの設計・実装方法を解説する。
Accessible building blocks for web: form fields (British Sign Language version) ウェブのアクセシブルな構成要素：フォームフィールド（英国手話版）
YouTube 海外
すべての利用者にとって入力しやすいウェブフォームの設計原則を、イギリス手話で解説するTetraLogicalのシリーズ動画。
Accessible building blocks for web: buttons ウェブのアクセシブルな構成要素：ボタン
YouTube 海外
スクリーンリーダーやキーボード操作ユーザーを含むすべての利用者にとって使いやすいボタン設計と実装方法を解説する。
How an accessibility designer adds keyboard shortcuts to a web app a11yデザイナーがWebアプリにキーボードショートカットを追加する方法
記事 海外
Webアプリへのキーボードショートカット実装時に、アクセシビリティデザイナーが考慮すべき設計アプローチと影響を解説している。
Barriers from Links with ARIA ARIAを使ったリンクによるバリア
記事 海外
ARIAを使用したリンク実装におけるセマンティックおよびアクセシビリティ上の課題を検討し、異なる実装方法の等価性を比較する。
My Calendar 3.7.0 & My Calendar Pro 3.3.0 released - Joe Dolson Web Accessibility My Calendar 3.7.0 & Pro 3.3.0 リリース
記事 海外
WordPressカレンダープラグインの新バージョンで、ナビゲーション要素をボタンに変更し、キーボード操作とスクリーンリーダー対応を改善した。
Accessible Faux-nested Interactive Controls アクセシブルな疑似ネスト型インタラクティブコントロール
記事 海外
WAI-ARIA パターンを用いて、ネストのように見えながらもアクセシブルなインタラクティブコントロール実装を解説。
Live Region Support ライブリージョンのサポート状況
記事 海外
ライブリージョン（ARIA live regions）がスクリーンリーダーユーザーに提示される仕組みと、正確な実装方法を技術的に詳細解説した記事。
Leveraging The Super Keyword In Custom Elements カスタム要素におけるsuperキーワードの活用
記事 海外
アクセシビリティ専門家Heydon Pickeringによる、カスタム要素継承パターンを活用した再利用可能でアクセシブルなWeb Components構築方法の解説。
How To Dynamically Install Custom Elements カスタム要素を動的にインストールする方法
記事 海外
Web Componentsのカスタム要素を動的に読み込むアクセシブルな実装パターン。再利用可能な手法を解説する。
Fullscreen Video and Iframes Made Easy :: Aaron Gustafson フルスクリーン動画とiframeを手軽に実装する
記事 海外
動画やiframe要素のフルスクリーン化をアクセシブルに実装するWeb Componentパターン。フォーカス管理を両立する手法を紹介する。
フロントエンドエンジニアが陥りがちなアクセシビリティの3つの誤解を、UXエンジニアの視点から解説した記事だ。WAI-ARIAやキーボード操作などの実践的な基本知識をわかりやすく紹介している。
ぐるなびウエディングのリニューアル事例で、カレンダーコンポーネントのキーボード操作対応とWAI-ARIA実装の工夫を、デザイナーとの協力プロセスを交えて解説している。
Next.js/Reactでキーボード操作のみで使用可能なログインフォームを実装しながら、WAI-ARIAによるフォーカス管理とエラー通知の実装方法を詳しく解説している。
Creating a more accessible web with ARIA Notify :: Aaron Gustafson ARIA Notifyでよりアクセシブルなウェブを作る :: Aaron Gustafson
記事 海外
スクリーンリーダーへの通知機能 ARIA Notify を活用したアクセシビリティ向上方法を解説している。
複雑な日付ピッカーUIをアクセシブルに実装するJavaScriptコンポーネント「Pikaday」。フォーム入力時のキーボード操作とスクリーンリーダー対応を強化し、ユーザー体験改善を目指した技術実装ガイド。
CSS to speech: alternative text for CSS-generated content CSSで生成したコンテンツの代替テキスト
記事 海外
CSSの疑似要素で生成されたコンテンツをスクリーンリーダーが認識させる方法を解説。aria-labelやCSS speechプロパティを活用した代替テキスト提供の実装を紹介。
Web Accessibilityの20レシピから、見出し・カラーコントラスト・キーボード操作など実装のコツを紹介した感想記事だ。
CSS-only scrollspy effect using scroll-marker-group and :target-current CSSのみで実現するスクロールスパイ：scroll-marker-groupと:target-currentの活用
記事 海外
CSS Overflow Module Level 5の新機能を使いJSなしでスクロールスパイを実装する方法を解説し、スクリーンリーダー対応のために`aria-current`属性の自動付与が必要であることを指摘している。
Best practices for Accessibility in Vue / Nuxt Vue / Nuxtにおけるアクセシビリティのベストプラクティス
記事
Vue/Nuxtアプリにおけるアクセシビリティのベストプラクティスを解説した記事。セマンティックHTML、ARIAラベル、キーボード操作、カラーコントラストなど実装レベルの指針を紹介。
WebAIM: Up and Coming ARIA WebAIM: 注目の新しいARIA
記事 海外
ARIA 1.3で追加予定の新属性・ロールについて、ブラウザや支援技術のサポート状況とともに解説した記事。
HTML標準要素とWAI-ARIA属性を組み合わせたアクセシビリティ対応チェックボックスのコピペ可能な実装パターンを紹介している。
Are 'CSS Carousels' accessible? CSSカルーセルはアクセシブルか？
記事 海外
CSSのみで実装するカルーセルがスクリーンリーダーやキーボード操作に対してアクセシブルかどうかを検証・考察した記事。
The canvas element Canvas要素
記事 海外
HTML canvas要素のアクセシブルな実装方法とベストプラクティスを解説した非公式ガイド。支援技術での利用を想定した設計手法を提示する。
ARIA属性とキーボード操作に対応したアクセシブルなタブUIの実装方法を、コピペで使えるコード例付きで紹介している。
Popping preconceived popover ponderings | scottohara.me popoverに関する先入観を覆す考察 | scottohara.me
記事 海外
HTMLのpopover属性のアクセシビリティ実装における課題を、キーボード操作とスクリーンリーダー対応の観点からW3C仕様策定の専門家が検証・考察した記事。
WAI-ARIAの重要概念「アクセシブルネーム」について、その定義とスクリーンリーダーによる読み上げへの影響をわかりやすく解説している。
Spoiler Alert: it needs to be accessible | scottohara.me スポイラー機能はアクセシブルである必要がある
記事 海外
ウェブサイトのスポイラー・ネタバレ回避機能をアクセシブルに実装するための設計方法と、専用HTML要素の必要性を論じた実装ガイド。
Web Accessibility Cookbook Webアクセシビリティ・クックブック
技術書 海外
フロントエンド開発者向けに、キーボード操作・スクリーンリーダー対応・ARIAの実装方法をレシピ形式で解説した実践的技術書。
Best intention barriers (ARIA edition) 良い意図のバリア（ARIA編）
記事 海外
ARIAの実装における良い意図だが実際には利用者にバリアを生じさせている実装パターンを監査経験から解説。支援技術との互換性を損なう事例から学ぶ。
popover accessibility | scottohara.me Popover要素のアクセシビリティ
記事 海外
HTML5 popover属性のアクセシビリティプロパティとセマンティクスについて、実装例を示しながら解説した技術記事。WAI-ARIAとの相互作用も含む。
Accessible notifications with ARIA Live Regions (Part 2) ARIA Live Regionsを使ったアクセシブル通知（第2部）
記事 海外
スクリーンリーダーユーザーに動的な通知を伝える手法であるWAI-ARIA Live Regionsの実装方法を解説する。
Accessible notifications with ARIA Live Regions (Part 1) ARIA Live Regionsを使ったアクセシブル通知（第1部）
記事 海外
スクリーンリーダーユーザーに動的な通知を伝える手法であるWAI-ARIA Live Regionsの実装方法を解説する。
Designing Inclusive Web Applications with Accessibility in Mind アクセシビリティを考慮したインクルーシブなウェブアプリケーション設計
論文 海外
セマンティックHTML・ARIA・カラーコントラスト・キーボードナビゲーション等の実装技術を解説し、WCAG準拠の重要性をビジネス・法的・倫理的観点から論じた論文。
ARIA e Interactive Access: projetando chatbots para idosos ARIAとInteractive Access：高齢者向けチャットボットの設計
論文 海外
加齢による認知・身体的制限を踏まえ、アクセシブルなチャットボット「ARIA」と設計ガイドライン「Interactive Access」を開発しヒューリスティクス評価で検証した論文。
AI-Powered Real-time Accessibility Enhancement: A Solution for Web Content Accessibility Issues AI駆動型リアルタイムアクセシビリティ向上：Webコンテンツの自動改善ソリューション
論文 海外
WCAG非準拠のWebコンテンツ（ARIA欠落・見出し構造エラー等）をAI技術で自動検出・改善するソリューションを提案した論文。
Contextual form errors and ARIA コンテキストフォームエラーとWAI-ARIA
記事 海外
Webフォームのエラー表示のアクセシビリティをWAI-ARIAを用いて改善する方法を解説。コンテキスト情報を含むエラーメッセージの実装パターンを実例で示す。
Visually hidden content is a hack that needs to be resolved, not enshrined | scottohara.me スクリーン外に隠されたコンテンツについて
記事 海外
スクリーンリーダーユーザー向けにテキストを視覚的に隠す実装パターンの問題点を指摘し、真のアクセシビリティ実装のあり方を論じている。
WebアプリケーションのアクセシビリティをHTMLとWAI-ARIAの基礎から実践的改善手法まで体系的に解説した技術書。フォーム・モーダル等の複雑なUIパターンへの対応と組織での推進ノウハウも網羅する。
Use the dialog element (reasonably) | scottohara.me dialog要素の(適切な)使用方法
記事 海外
HTML dialog要素の仕様変更と適切な使用方法についての解説記事。複数年の議論を経て決定された仕様の詳細と実装のベストプラクティスを解説している。
Web accessibility trends and implementation in dynamic web applications ウェブアクセシビリティのトレンドと動的ウェブアプリケーションでの実装
論文 海外
動的ウェブアプリケーションにおけるアクセシビリティ実装のトレンド分析。NASA天文学データシステムなど実例を通じて、WAI-ARIAの活用と実装課題を検証する。
freee社のアクセシビリティガイドライン(Ver. 202201.0)の更新内容を紹介する記事。マークアップやスクリーンリーダー対応など、設計・実装指針の改善を解説。
Content-visibility and Accessible Semantics コンテンツ可視性とアクセシブルセマンティクス
記事 海外
CSSのcontent-visibilityプロパティがセマンティックなHTMLとアクセシビリティに与える影響を解説した記事。Webアクセシビリティ実装における重要な考慮点をまとめている。
SaIL: Saliency-Driven Injection of ARIA Landmarks 顕著性駆動型ARIA ランドマーク自動挿入システム
論文 海外
スクリーンリーダーユーザーのWebナビゲーション向上を目的とした ARIA ランドマークの自動挿入手法を提案。
WordPress accessibility team member, Gutenberg contributor - Marco's Accessibility Blog WordPressアクセシビリティチームメンバー、Gutenberg貢献者
記事 海外
WordPressエディタGutenbergのアクセシビリティ向上に関わる実践的知見。支援技術との互換性強化とウェブエディタのアクセシビリティ実装事例を述べた記事。
Call to action: HTML needs more native rich widgets - Marco's Accessibility Blog コールトゥアクション：HTMLはより多くのネイティブリッチウィジェットが必要
記事 海外
ウェブプラットフォームに不足するネイティブリッチウィジェット機能の拡張を提唱する記事。カスタムウィジェット開発時のアクセシビリティ実装負担を軽減し、保守性を向上させるHTML仕様強化の必要性を論じる。
Design Guidelines forWeb Interfacesof Home Automation SystemsAccessible via Screen Reader スクリーンリーダーでアクセス可能なホームオートメーションシステムのWebインターフェース設計ガイドライン
論文 海外
視覚障害者がスクリーンリーダーでホームオートメーションシステムのWebインターフェースを操作するための設計ガイドラインを提案した研究。
WAI-ARIAの基礎知識を再学習し、スクリーンリーダーなどの支援技術がどのようにセマンティック情報を活用してアクセスを実現するかを解説する
A Web for Everyone: Designing Accessible User Experiences すべての人のためのウェブ：アクセシブルなユーザー体験のデザイン
技術書 海外
Webサイトのユーザー体験・開発・戦略に関わる全員向けの総合ガイド。アクセシビリティを損なわずに革新的なデザインを実現する方法を解説。
Form Design Patterns フォームデザインパターン
技術書 海外
視覚障害者や運動障害のあるキーボードユーザーにも対応したアクセシブルなフォームデザインのパターンを実装例とともに解説した技術書だ。
HTML5 Accessibility HTML5 アクセシビリティ
技術書 海外
スクリーンリーダーをはじめとする支援技術との互換性を高めるため、HTML5要素の使い方を体系的に解説した技術書だ。