Were you aware of different aria role buckets 異なるARIA ロールのバケットについて
ARIA ロールの異なるカテゴリとそれぞれの特性・使い分けについて解説するビデオ。WAI-ARIA の正確な理解と実装方法を学べる。
ARIA ロールの異なるカテゴリとそれぞれの特性・使い分けについて解説するビデオ。WAI-ARIA の正確な理解と実装方法を学べる。
WAI-ARIA spinbutton パターンのアクセシブル実装方法とベストプラクティスを解説する技術ガイド。
スピナーやスケルトン画面などの待機表示がスクリーンリーダーに対応していない問題と、その解決方法を解説する。
WAI-ARIAの aria-controls と aria-owns 属性の使い分けをモーダルUIで簡潔に解説する開発向け教材。属性の役割と違いを実装例で明示。
Reactでアクセシブルなメインナビゲーションコンポーネントを開発するアプローチ。基盤となるベースコンポーネントの正しい設計と実装で、プロダクト全体のアクセシビリティ向上を実現する方法を解説。
HTMLのアクセシビリティについてのコンテンツ。セマンティックHTMLとWAI-ARIAの適切な使用方法、実装上の考慮点について詳しく解説。
WAI-ARIAの役割・状態・プロパティを使ってスクリーンリーダーなどの支援技術が動的インターフェースを理解できるようにする方法を解説。よくある誤りも指摘。
ARIAの不適切な使用がアクセシビリティを悪化させる5つの誤りパターンと、正しい実装方法を解説するガイド。
ウェブ開発において明確で構造化されたコードを基盤に、アクセシビリティを実現する設計思想と実装方法を解説した記事。
Reactのナビゲーションコンポーネントをアクセシブルに設計するための初期要件整理。WAI-ARIAとキーボード操作仕様に基づいた系統的な要件定義アプローチ。
ゲーム・ボードゲームUIのアクセシビリティについて、ARIA属性よりも座標同期による実装が有効である理由と具体的な実装手法を解説。
HTML標準におけるネイティブアクセシビリティ機能の実装詳解。セマンティックマークアップとWAI-ARIAの相互関係を含め、アクセシブルなHTML開発の原則を網羅的に解説。
Next.jsのLinkコンポーネントをボタンとして扱う実装方法を解説している。セマンティックHTMLとアクセシビリティを考慮した設計が主題。
ビジュアルは似ているが異なるUIパターンであるAccordionとTabの違いを解説。WAI-ARIAに基づいた正確な実装方法とベストプラクティスを提示している。
WAI-ARIAロールの正しい使用方法を解説したガイド。ウェブ開発者向けに、スクリーンリーダーなどの支援技術がHTML要素の構造と役割を理解するメカニズムを説明する。
Reactでアクセシブルなナビゲーションコンポーネント実装の課題を探索。既存ライブラリの検討から実装までのプロセスを通じ、開発者が直面する実践的な選択肢を提示する。
WAI-ARIAの基礎から実装方法、よくある誤りの回避方法までを解説するガイド。スクリーンリーダーとの連携によるWebアプリケーションのアクセシビリティ向上について。
Web UIにおけるネストされたインタラクティブコントロールのアクセシブルな実装方法とベストプラクティスを解説。
WAI-ARIAを用いたカスタムドロップダウン・コンボボックスのアクセシブル実装方法を解説。フォーム操作の改善技法。
React と Tailwind CSS を使用したアクセシブルな UI コンポーネントライブラリ。モダンで視覚的に優れた UI を構築する際のアクセシビリティ実装手法を解説する。
スキップリンクはアクセシビリティの基本機能でありながら見落とされやすい。WordPressテーマへの実装方法を解説している。
HTMLセマンティック要素とアクセシビリティ属性の関係を実装例で解説。見出し、ランドマーク、ARIA属性の使用方法を中心に扱う。
divではなく正しいHTMLセマンティクスを使うべき、ARIAは最後の手段という実装原則について、具体例を交えて解説した記事。
モダンCSSの活用によるWebアクセシビリティ対応の実装テクニック3選を、実例を交えて解説した実践的な記事。
HTMLランドマーク要素を見た目ではなく意味的構造に基づいて実装し、スクリーンリーダーユーザーの情報移動を支援する設計方法を解説。
AIエージェントはウェブサイトを見ずアクセシビリティツリーを読む。スクリーンリーダー向けに構築された同じ構造がAI向けAPIとして機能する現実を指摘。
モーダルダイアログのアクセシビリティ設計を解説。ユーザーをトラップせず、混乱させず、除外しないUIパターンを紹介している。
WebUIにおけるボタンとリンクの使い分けの判断基準をアクセシビリティの視点から言語化した記事。セマンティックHTML実装が支援技術の正確な動作に不可欠であることを説いている。
NVDAとVoiceOverの挙動差を例に、スクリーンリーダー検証で実装と操作方法を切り分けることの重要性を解説。視覚障害者向けのテスト方法を共有。
CSSで視覚的に非表示にした要素でも、WAI-ARIAの属性がアクセシブル名・説明計算に影響することを、スクリーンリーダーの実例で解説した技術記事である。
ワンタイムパスワードと二要素認証がスクリーンリーダーユーザーや聴覚・視覚・認知障害のあるユーザーを排除する問題と、その解決策(複数認証方法、ARIA対応等)を分析した記事。
2026年2月にブラウザ間で対応されたWeb API機能の月次レポート。RTL/LTRのテキスト方向自動キャプチャが改善され、支援技術の処理精度が向上。
見出しにアンカーリンクを自動生成するEleventy実装パターン。cherioライブラリを用いたビルドタイム変換で、サーバーサイドに見出しIDに対応するアンカーを自動挿入し、クライアント側JavaScriptを削減する設計を解説。
トースト通知のアクセシビリティ問題を指摘し、ARIAライブリージョンの実装方法や認知アクセシビリティの視点から改善策を提案した技術記事だ。
HTML仕様の再学習を通じて得た気づきをまとめた第2弾。セマンティック要素の正確な使い方とアクセシビリティに関連するHTML仕様の理解を深める内容だ。
AIエージェントがWebを読む時代において、セマンティックHTMLとアクセシビリティ対応の有効性を論じた記事だ。
HTML5 AccessibilityがHeydon Pickering氏と共にWebアクセシビリティの現状と指針について率直に対話するファイヤーサイドチャット第2弾。
セマンティックHTML、ARIA属性、フォーム設計、Dialog、ダークパターン回避など、Web開発の現場で頻出するアクセシビリティ課題を実践的に解説する。
WAI-ARIA APGのデザインパターンをReact・Vue・Svelte・Astroで実装したアクセシブルコンポーネントの実例集だ。
HTMLタグのセマンティックな使用法の重要性を再学習する過程で得られた実践的気づきをまとめ、スクリーンリーダーへの情報伝達におけるセマンティック要素の役割を具体例で解説している。
NuxtアプリでSPA遷移時の動的コンテンツ変更をスクリーンリーダーに伝えるNuxtAnnouncerモジュールの仕組みと実装方法を、ARIAライブリージョンの応用例とともに解説している。
ARIAラベルとアクセシブルな名前が支援技術にどう解釈されるかを解説した開発者向けガイド。正しい実装方法とよくある実装ミスを具体例で説明している。
WCAGの『堅牢』原則を交通系ICカードの改札機残高表示の曖昧さを例に、支援技術が確実に情報を解釈できる実装の重要性を解説した記事。
HTMLアクセシビリティの知見を持つKarlがHTML5 Accessibilityのファイヤーサイドチャットで、自身の経験と考え方を率直に語るインタビュー対談である。
FigmaのアクセシビリティアシスタントがWAI-ARIAロール拡張・アノテーション刷新・UI統合を含むv52へアップデート。デザイン段階での検証精度が向上し、アクセシビリティシフトレフトが実現した。
Ctrl+F全文検索にもヒットするアクセシブルなタブコンポーネントの実装方法。WAI-ARIAとキーボード操作・スクリーンリーダー対応を含む最新実装例。
LLMにARIAオーサリングプラクティスガイドを正しく参照させるプロンプト手法を解説し、AIがアクセシビリティのベストプラクティスを正確に扱える課題を論じている。
アクセシビリティ著作で知られるHeydon PickeringへのインタビューをHTML5 Accessibilityが収録したもので、HTMLアクセシビリティへの実践的見解が語られている。
アクセシブルなメディアプレーヤー「Able Player」v4.8.0とWordPress向けプラグイン2.3.0が同時リリース。変更点の詳細を解説。
ARIA属性を使用したリンク実装時に、テキストを文字単位で分割することがスクリーンリーダーユーザーに与える問題を詳述し、10年以上前からの落とし穴を改めて明示している。
スクリーンリーダーやキーボード操作ユーザーを含むすべての利用者にとって入力しやすいウェブフォームの設計・実装方法を解説する。
すべての利用者にとって入力しやすいウェブフォームの設計原則を、イギリス手話で解説するTetraLogicalのシリーズ動画。
スクリーンリーダーやキーボード操作ユーザーを含むすべての利用者にとって使いやすいボタン設計と実装方法を解説する。
Webアプリへのキーボードショートカット実装時に、アクセシビリティデザイナーが考慮すべき設計アプローチと影響を解説している。
ARIAを使用したリンク実装におけるセマンティックおよびアクセシビリティ上の課題を検討し、異なる実装方法の等価性を比較する。
WordPressカレンダープラグインの新バージョンで、ナビゲーション要素をボタンに変更し、キーボード操作とスクリーンリーダー対応を改善した。
WAI-ARIA パターンを用いて、ネストのように見えながらもアクセシブルなインタラクティブコントロール実装を解説。
ライブリージョン(ARIA live regions)がスクリーンリーダーユーザーに提示される仕組みと、正確な実装方法を技術的に詳細解説した記事。
アクセシビリティ専門家Heydon Pickeringによる、カスタム要素継承パターンを活用した再利用可能でアクセシブルなWeb Components構築方法の解説。
Web Componentsのカスタム要素を動的に読み込むアクセシブルな実装パターン。再利用可能な手法を解説する。
動画やiframe要素のフルスクリーン化をアクセシブルに実装するWeb Componentパターン。フォーカス管理を両立する手法を紹介する。
フロントエンドエンジニアが陥りがちなアクセシビリティの3つの誤解を、UXエンジニアの視点から解説した記事だ。WAI-ARIAやキーボード操作などの実践的な基本知識をわかりやすく紹介している。
ぐるなびウエディングのリニューアル事例で、カレンダーコンポーネントのキーボード操作対応とWAI-ARIA実装の工夫を、デザイナーとの協力プロセスを交えて解説している。
Next.js/Reactでキーボード操作のみで使用可能なログインフォームを実装しながら、WAI-ARIAによるフォーカス管理とエラー通知の実装方法を詳しく解説している。
スクリーンリーダーへの通知機能 ARIA Notify を活用したアクセシビリティ向上方法を解説している。
複雑な日付ピッカーUIをアクセシブルに実装するJavaScriptコンポーネント「Pikaday」。フォーム入力時のキーボード操作とスクリーンリーダー対応を強化し、ユーザー体験改善を目指した技術実装ガイド。
CSSの疑似要素で生成されたコンテンツをスクリーンリーダーが認識させる方法を解説。aria-labelやCSS speechプロパティを活用した代替テキスト提供の実装を紹介。
Web Accessibilityの20レシピから、見出し・カラーコントラスト・キーボード操作など実装のコツを紹介した感想記事だ。
CSS Overflow Module Level 5の新機能を使いJSなしでスクロールスパイを実装する方法を解説し、スクリーンリーダー対応のために`aria-current`属性の自動付与が必要であることを指摘している。
Vue/Nuxtアプリにおけるアクセシビリティのベストプラクティスを解説した記事。セマンティックHTML、ARIAラベル、キーボード操作、カラーコントラストなど実装レベルの指針を紹介。
ARIA 1.3で追加予定の新属性・ロールについて、ブラウザや支援技術のサポート状況とともに解説した記事。
HTML標準要素とWAI-ARIA属性を組み合わせたアクセシビリティ対応チェックボックスのコピペ可能な実装パターンを紹介している。
CSSのみで実装するカルーセルがスクリーンリーダーやキーボード操作に対してアクセシブルかどうかを検証・考察した記事。
ARIA属性とキーボード操作に対応したアクセシブルなタブUIの実装方法を、コピペで使えるコード例付きで紹介している。
HTMLのpopover属性のアクセシビリティ実装における課題を、キーボード操作とスクリーンリーダー対応の観点からW3C仕様策定の専門家が検証・考察した記事。
WAI-ARIAの重要概念「アクセシブルネーム」について、その定義とスクリーンリーダーによる読み上げへの影響をわかりやすく解説している。
ウェブサイトのスポイラー・ネタバレ回避機能をアクセシブルに実装するための設計方法と、専用HTML要素の必要性を論じた実装ガイド。
フロントエンド開発者向けに、キーボード操作・スクリーンリーダー対応・ARIAの実装方法をレシピ形式で解説した実践的技術書。
ARIAの実装における良い意図だが実際には利用者にバリアを生じさせている実装パターンを監査経験から解説。支援技術との互換性を損なう事例から学ぶ。
HTML5 popover属性のアクセシビリティプロパティとセマンティクスについて、実装例を示しながら解説した技術記事。WAI-ARIAとの相互作用も含む。
スクリーンリーダーユーザーに動的な通知を伝える手法であるWAI-ARIA Live Regionsの実装方法を解説する。
スクリーンリーダーユーザーに動的な通知を伝える手法であるWAI-ARIA Live Regionsの実装方法を解説する。
セマンティックHTML・ARIA・カラーコントラスト・キーボードナビゲーション等の実装技術を解説し、WCAG準拠の重要性をビジネス・法的・倫理的観点から論じた論文。
加齢による認知・身体的制限を踏まえ、アクセシブルなチャットボット「ARIA」と設計ガイドライン「Interactive Access」を開発しヒューリスティクス評価で検証した論文。
Webフォームのエラー表示のアクセシビリティをWAI-ARIAを用いて改善する方法を解説。コンテキスト情報を含むエラーメッセージの実装パターンを実例で示す。
スクリーンリーダーユーザー向けにテキストを視覚的に隠す実装パターンの問題点を指摘し、真のアクセシビリティ実装のあり方を論じている。
WebアプリケーションのアクセシビリティをHTMLとWAI-ARIAの基礎から実践的改善手法まで体系的に解説した技術書。フォーム・モーダル等の複雑なUIパターンへの対応と組織での推進ノウハウも網羅する。
HTML dialog要素の仕様変更と適切な使用方法についての解説記事。複数年の議論を経て決定された仕様の詳細と実装のベストプラクティスを解説している。
動的ウェブアプリケーションにおけるアクセシビリティ実装のトレンド分析。NASA天文学データシステムなど実例を通じて、WAI-ARIAの活用と実装課題を検証する。
CSSのcontent-visibilityプロパティがセマンティックなHTMLとアクセシビリティに与える影響を解説した記事。Webアクセシビリティ実装における重要な考慮点をまとめている。
WordPressエディタGutenbergのアクセシビリティ向上に関わる実践的知見。支援技術との互換性強化とウェブエディタのアクセシビリティ実装事例を述べた記事。
ウェブプラットフォームに不足するネイティブリッチウィジェット機能の拡張を提唱する記事。カスタムウィジェット開発時のアクセシビリティ実装負担を軽減し、保守性を向上させるHTML仕様強化の必要性を論じる。
視覚障害者がスクリーンリーダーでホームオートメーションシステムのWebインターフェースを操作するための設計ガイドラインを提案した研究。
WAI-ARIAの基礎知識を再学習し、スクリーンリーダーなどの支援技術がどのようにセマンティック情報を活用してアクセスを実現するかを解説する
Webサイトのユーザー体験・開発・戦略に関わる全員向けの総合ガイド。アクセシビリティを損なわずに革新的なデザインを実現する方法を解説。
視覚障害者や運動障害のあるキーボードユーザーにも対応したアクセシブルなフォームデザインのパターンを実装例とともに解説した技術書だ。
スクリーンリーダーをはじめとする支援技術との互換性を高めるため、HTML5要素の使い方を体系的に解説した技術書だ。