固定フッターがキーボード操作のフォーカスを隠す問題の検証ツール。ResizeObserver で要素の高さを追跡し、WCAG 2.4.11 の達成基準を参考に改善方法を示す。
#キーボード操作
「キーボード操作」に関するアクセシビリティ関連情報を自動収集して掲載しています。
ランディングページのキーボードアクセシビリティチェック。フォーカスリングの表示確認方法、:focus-visible による CSS 実装例、Tab キーで行う手動確認フローを解説。
ChatGPTの画面更新によるスクリーンリーダー対応の低下を報告。見出し削除、リスト構造喪失、キー操作の変化など、スクリーンリーダー利用者に影響する具体的な問題を述べ、Webサイト変更時にはスクリーンリーダーでの操作確認の必要性を主張。
アクセシブルな Web チェックリストツールの構築方法を解説。ネイティブな HTML コントロール、ローカルストレージ、キーボード操作、プリント対応による、フレームワーク不要のシンプルな実装を紹介。
ネイティブダイアログ要素でモーダル閉じ込めとフォーカス移動を検証するためのテストフィクスチャとテスト方法を解説。フォーカスリーク防止と複数ブラウザでの検証の重要性を説明している。
業務システムのマウス操作による手首の負担を、キーボード操作で解決した経験から、アクセシビリティの本質を考える。相手の困りごとに寄り添い、摩擦を減らす設計思想の重要性について述べる。
ストリーム型のAI生成UIにおいて、キャンセル操作時にフォーカスを失い、古い状態の通知がスクリーンリーダーで宣言される問題を分析。WAI-ARIAのライブリージョンとフォーカス管理の実装パターンと、デバッグ手法を具体的に解説している。
インタラクティブ動画プレイヤー hihaho の9月アップデート。キーボード操作で再生・字幕・スキップができ、スクリーンリーダーで状態と結果が読み上げられるように対応。画像代替テキスト機能も追加。
キーボード操作でウェブサイトを点検する実践ガイド。マウスなしで問い合わせページまで進められるか、フォーカス指標が見えるかを確認し、困った場所を具体的に担当者へ報告する方法を説明。
React でメールフォームを実装する際に、フォーカス管理とアクセシビリティを両立させる方法。フォーム状態（読み込み中、成功、エラー）の変化を WAI-ARIA で通知しながら、キーボード操作とスクリーンリーダーに対応。エラー時のフォーカス復帰の実装方法を解説。
モーダルダイアログの開閉時のキーボードフォーカス管理について。フォーカスをダイアログ内に留める方法、Escapeキーでの閉じ方、クローズ後のフォーカス戻り先の実装パターンを解説している。
アイコンの見た目の大きさと実際のクリック領域（ターゲットサイズ）の違いについて。WCAG 2.2の24×24ピクセル基準を満たすための実装パターンと検証方法を解説している。
VIN入力フォームのアクセシビリティ実装について。ラベル、エラーメッセージの表示、live regionsによるスクリーンリーダー対応、フォーカス管理の具体的なコードパターンを解説している。
JavaScript で実装されたナビゲーション（button onClick）では AI クローラーにリンクが見つけられない問題と、HTML anchor タグで href を使った正しい実装方法について。
カスタム要素を使ったタビングインターフェースの実装方法を紹介。ARIAロール、キーボード操作（矢印キー・Home/End・Enter/Space）、フラグメント識別子による初期状態設定など、アクセシビリティを考慮した設計を詳しく解説する。
AIが生成するアコーディオン実装がキーボード操作やスクリーンリーダー対応を見落とす理由と、aria-expanded属性で状態を正しく管理することの重要性を、実装例を示しながら解説する。見た目だけでなく状態を属性で持たせることが、アクセシビリティと実装精度の両立につながることを論じる。
日本語のIME入力中のキーボードハンドラバグを3つのパターンに分類し、各修正方法を提示。15のOSSプロジェクトでのマージ実例を紹介するWeb開発者向け記事。
Vimiumの f とFluent SearchのScreen Searchの操作感の違いと仕組みを比較。画面上にキーボードラベルを表示して入力で操作する手法、UI Automationと画像認識による候補検出エンジン、マウス操作パターンを解説。
キーボード操作でUIのボタンに到達できない問題をAIに相談する際の、効果的な報告記録の作成方法。観察と希望を分けた具体的な報告書の書き方を手順とともに説明。
20年のJAWS利用経験から、開発者が見落とすアクセシビリティ問題を指摘。ボタン・フィールド無名化、CAPTCHA、再設計による喪失など、実際のバリアと修正方法を解説。
デジタル庁ガイドブック第3章「非干渉」基準を解説。自動再生音声の制御、キーボードトラップ回避、光の点滅制限、自動コンテンツ切り替え禁止の4つの基準について、リリース前に必ず対応する必要性と改修方法を述べる。
デザインシステムがキーボード操作とフォーカス移動を一貫して管理するメカニズムを解説。フォーカストラップ・ARIA・イベントハンドリングの実装と、アプリ側のオーバーライドが破壊する事例を紹介。
フォーカスインジケータの役割とWCAG 2.2での要件を解説。キーボード操作ユーザー・ロービジョンユーザーの利用を想定し、実装方法と CSS :focus-visible の使用を推奨。
Reactのフォーム実装で非同期処理（API呼び出し）の進捗状態をアクセシビリティ対応で管理する方法を、メール検証を例に解説。aria-live、aria-invalid、aria-describedbyなどの属性を使い、キーボードユーザーやスクリーンリーダー利用者にも状態変化が分かりやすく伝わる実装を示す。
Reactの非同期フォーム検証でフォーカス管理が重要であることを解説。フォーカスを無用に移動させず、検証結果をテキストで伝える実装パターンを示す。
WCAG 2.2 AAをReact Nativeで実装するためのガイド。APIプロップの対応、新基準、テストレイヤーを示す。ADA Title IIとEuropean Accessibility Actの現在の期限も記載。
WCAG 2.2 Level AA準拠のReact Nativeアプリ開発ガイド。ラベル付け、状態管理、コントラスト、タップターゲットサイズなどの実装方法をコード例で示す。
アンチアクセシビリティ
記事
聴衆を交えながら、スクリーンリーダーとキーボード操作でコンピューターを制御する方法を実演。ブラインドタッチ、ディスプレイが壊れたときの対応など、視覚に依存しない操作の実践的な重要性を示す。
Windows アプリの操作を画面上のキーボードラベルで選ぶ Fluent Search の Screen Search 機能を解説。UI Automation と画像認識を使い分け、ブラウザのみでなくデスクトップアプリ全般に対応する実装方法。
ローカルAI（Gemma 3 4B）を用いてWeb要素のアクセシブル名を自動提案し、キーボード操作を補完するChrome拡張機能。スクリーンリーダー対応で、ブラウザ側のみで動作。
トーストノーティフィケーション（操作結果を伝える一時的な画面上メッセージ）をアクセシブルに設計するための実践的な指針。キーボード・スクリーンリーダーでのテスト方法、フォーカス管理、メッセージの文脈、重要アクションのページ内配置など。
MCP Appsはクライアント内にUIをレンダリングする。アクセシビリティ対策を欠くと機能が利用できなくなり、テキスト説明は機能を代替できない。ウェブアプリと異なるテスト上の課題を解説する。
A 3D-printed, miniature keyboard — small enough to use lying in bed — built for one purpose: talking
YouTube 海外
寝たままコンピュータと対話するために、3D プリント技術で製作された小型キーボードを紹介する。
Windows 11の拡大鏡に追加されたコントラストテーマ機能。従来の色反転と異なり、写真や動画の色を保ったままUI要素のコントラストを高める。複数のテーマから選択でき、ツールバーから素早く切り替え可能。長時間ディスプレイ作業での眼精疲労軽減に対応。
WCAGレベルAA達成のための初心者向けガイド。alt属性・コントラスト比・見出しタグ・ラベル・キーボード操作・字幕・リンクテキストの7つのポイントと、WAVE・Lighthouse・axeなどの検査ツールを解説する。
視覚障害のあるスクリーンリーダーユーザーが、NVDA の効率的なキーボード操作を紹介。見出しナビゲーション、単語検索、フォーム要素への移動の3つの操作で、ウェブ閲覧の時間を短縮する方法を解説する。
Windows 11 の音声アクセス機能の実体験。「アプリを開く」「スクロール」といった音声コマンドで操作でき、手がふさがっているときや疲れているときに有用。完璧さを求めず、手と声を柔軟に使い分け、画面番号の音声選択によって「指差しのような方法」が増えることを述べている。
React 19 の useFormStatus フック使用時のキーボードユーザー向けフォーカス喪失問題と修正方法を解説。aria-disabled の活用と複数サブミットボタン対応を実装例で示す。
モバイルメニューをdialog要素とshowModal()で実装し、フォーカス移動・Escapeキー・背景操作禁止などの制御をブラウザに任せる手法。CSS・JavaScriptコード例を示す。
accessible な interactive Card UI の構築方法。static と complex の実装パターン。semantic HTML・ARIA・keyboard accessibility の重要性。
Lighthouse の accessibility score が実際に何を測り、何を測らないか。100点でも manual testing が必要。自動テストの限界と manual checks が必要な10項目の解説。
ロシア語の詩を読み・聞き・タイピングで学ぶHTMLソフト。見えにくい人向けに読み上げ・大文字表示・キーボード操作のみでの使用に対応している。
スクリーンリーダーテストの7つの実践スキル解説。BrowseモードvsFocusMode、ページ構造、コンポーネント状態、フォーストラッキング、動的更新、不具合報告、ユーザージャーニーテスト。
削除ダイアログの設計原則。削除対象と影響範囲を明確に説明し、W3C モーダルパターンに従いキーボード操作・フォーカス管理でアクセシブルな危険操作インターフェースを実現する方法。
React で自作するモーダルコンポーネントで、フォーカストラップ・初期フォーカス設定・フォーカス復元を WAI-ARIA に沿って実装する手順。キーボード操作とスクリーンリーダー対応をコード例で具体的に解説する。
隠されたテキストを削除してスクリーンリーダー互換性を改善した過程で発見された、自動チェッカーでは見つからない障壁（ポップアップのフォーカス管理、結果の告知、ボタン配線、絵文字の読み上げ）と実装例を紹介している。
ネイティブな`<dialog>`とカスタムフォーカストラップ実装を比較。モーダル内容が動的に更新される場合の違いを通じて、キーボードアクセシビリティとブラウザネイティブ要素の重要性を示す。
ネイティブな`<dialog>`とカスタムフォーカストラップ実装を比較。モーダル内容が動的に更新される場合の違いを通じて、キーボードアクセシビリティとブラウザネイティブ要素の重要性を示す。
国情報検索アプリを例に、Reactのアーキテクチャ段階からアクセシビリティを組み込む実装パターンを紹介。キーボード操作やフォーカス管理など、ユーザーインタラクションの設計手法を解説する。
デザインシステムにおけるキーボードフォーカス管理の実装方法を解説する。モーダルやポップオーバーでのフォーカストラップ、フォーカス喪失、ネストされたコンポーネントでのフォーカス管理など、複雑な UI でよくあるバグと回避方法を紹介。
Wix・STUDIO・Framer・Readdy のノーコード/AI ツール4つについて、公式ドキュメントに記載されたアクセシビリティ対応項目を比較分析。代替テキスト・ARIA・コントラスト・キーボード操作等の実装状況を横並びでまとめる。
SaaS のファイルアップロード UI における、対応形式・サイズ制限の事前明示、処理状況の可視化、エラーメッセージ設計を統合したアクセシビリティとUX のベストプラクティス。キーボード・スクリーンリーダー対応を含む。
開発者自身の身体を基準に作られた UI が、テキスト拡大・高齢化・身体機能の多様性の中でいかに壊れるかを詩的に描き、本質的なアクセシビリティ設計の必要性を問う。
ストリーミングチャットUIでリトライ時、アクセシビリティツリーの古いテキストがスクリーンリーダーで混ざって読み上げられる問題と、generationカウンタで修正する方法を解説する。
HTMLの<dialog>要素を使ったアクセシブルなモーダルダイアログ実装法。ブラウザのネイティブ機能を活用してキーボード操作とフォーカス管理を実現する設計原則を解説。
モーダルダイアログのキーボード操作とフォーカス管理を、JavaScript の手書き実装ではなく HTML `<dialog>` 要素のプラットフォーム実装で実現する方法を解説する。
数量選択（スピンボタン）UIパターンのアクセシビリティ実装ガイド。キーボード操作（矢印キー、Home/End）とスクリーンリーダー（NVDA、VoiceOver）での動作を詳述し、WAI-ARIAに準拠した実装方法を解説している。
SaaS価格ページでプラン選択を実装するときに、ネイティブなラジオボタンとfieldset/legendを使って、キーボード操作とスクリーンリーダー対応を確保する方法を解説する記事。
AIエージェント時代において、セマンティックHTMLとキーボード操作といったアクセシビリティの基礎が改めて重要になることを論じる。支援技術とAI双方が依存する設計原則から、ウェブ構造の在り方を考察する。
Manuel Matuzović / 19½ Things You Didn’t Know about Accessibility in HTML and CSS #id24 2026
YouTube 海外
Popover API、キーボード操作、ARIAなど、HTMLとCSSに組み込まれたアクセシビリティ機構の実装技術について、フロントエンド開発者向けに詳解する講演。
ストリーミングレスポンスが無音で接続を閉じる場合、UIは停止状態だが支援技術に通知されない問題。キーボード操作と支援技術が状態を認識するため、フォーカス可能な診断パネルを含めた状態設計が必要。
Webアクセシビリティの基礎を、WCAGの4つの原則で解説。知覚可能・操作可能・理解可能・堅牢それぞれについて、よくある実装の穴と修正方法を具体例で示す。
tabindex="-1"とaria-activedescendantを使ったカスタムウィジェット実装時の注意点。キーボード操作・スクリーンリーダー対応を支えるブラウザのフォーカス管理の仕組みと、よくある実装ミスを解説する。
規制対象業界（医療・金融・アルコール等）のe-commerce製品ページにおいて、複雑な製品情報を効率的に伝える設計方法を解説。重要情報を最優先で配置し、ビジュアル階層を整理し、JavaScriptの背後に情報を隠さないキーボード操作・スクリーンリーダー対応の実装パターンを提示している。
Accessible by Default
記事 海外
アクセシビリティを最終ポーランシュではなく設計の構成要素として位置づけ、フォーカス状態・ラベル・コントラスト・予測可能なナビゲーションが注意分散下や不慣れな環境でも経験を明確にすることを述べる。キーボードとスクリーンリーダーでの直接検証の重要性を強調。
ブラウザ内AIエージェントの同意確認ダイアログがキーボード・スクリーンリーダーユーザーに非表示になっていた事例を基に、フォーカス管理と状態機械の設計でアクセス可能な同意ゲートを実装する方法を解説。タブ順序・aria-live・ユーザー操作の状態遷移を詳細に検討。
セマンティックHTMLの正しい要素を選び、JavaScriptの多重実装を避けてアクセシブルなフォームを実装。ネイティブ要素の役割とキーボード操作を優先し、必要な場合のみARIAで補足する方法を解説。
フォーム送信エラー時のフォーカス管理とメッセージ配置がアクセシビリティに影響する。Reactでアクセシブルなフォーム実装方法と、キーボード・スクリーンリーダー利用者の体験を改善するコード例を紹介する。
カスタムドロップダウン実装の制限と問題点、およびCSS仕様 `appearance: base-select` による解決方法を解説。キーボード操作・スクリーンリーダー対応を含むアクセシビリティを復活させる。
AI チャット UI でタブが非表示になるとストリーミング状態が更新されず、キーボード操作と スクリーンリーダー利用が中断される問題を技術的に解説。Page Lifecycle API による適切な状態管理を提案。
自動化されたインテリジェント・ガイド・テストが、キーボード操作やフォーカス動作など手動では時間を要するテストを自動化。開発者が数秒で結果を確認でき、AIの判定を人間が検証・修正することで、テスト効率を劇的に向上させる。
キーボードユーザーがナビゲーション部分をスキップしてメインコンテンツへ直接アクセスできるスキップリンク機能の実装方法とテスト手法を解説。WCAG 2.4.1準拠のための基本的なアクセシビリティ実装。
AI 生成テキストをストリーミング表示する際、未完成の Markdown 構造が不正な見出しやリンクになり、スクリーンリーダー・キーボード利用者に虚偽の情報を伝える問題を分析。状態管理と ARIA 属性による解決法を提示。
状態管理のバグがキーボード操作とスクリーンリーダーユーザーに異なる影響をもたらす仕組みと、デバッグの順序を解説。実装時に状態遷移表を作成することの重要性を示す。
CSSのreading-flowプロパティを使い、flexboxやgridで視覚順序が変わった際のフォーカス順序と視覚の乖離を解決。キーボード操作とスクリーンリーダー対応を同時に実現する方法を解説。
同じHTMLを異なるCSSリセットで実装した3パターンを比較。:focusでアウトラインを削除するCSSリセットがキーボードユーザーのフォーカス追跡を不可能にする問題と、:focus-visibleによる解決法を実装で検証している。
同じHTMLを異なるCSSリセットで実装した3パターンを比較。:focusでアウトラインを削除するCSSリセットがキーボードユーザーのフォーカス追跡を不可能にする問題と、:focus-visibleによる解決法を実装で検証している。
AIチャットの応答遅延時に、何も起きていない状態がキーボード・スクリーンリーダーユーザーに伝わらない問題を指摘。フォーカス消失や live region 更新の不備を具体的に説明し、待機・ストリーミング・スタール等の状態遷移を accessible name と live region で通知する実装例を解説。
長文記事にナビゲーション機能を加える際、本文へのアクセスを阻害しない設計原則。キーボード操作・スクリーンリーダー対応・フォーカス表示など複数の利用方法を前提とした実装パターンと確認方法を解説している。
`opacity: 0`ではキーボード操作に対応できず、`visibility: hidden`を使うべき理由と、トランジション中のfocus()失敗という罠を、実装テストに基づいて解説したJavaScriptコンポーネント設計ガイド。
ブラウザゲームにおいて、複数の操作方法と状態表現を組み合わせてアクセシビリティを確保する方法を、Astro と React Islands で実装。
ブラウザゲーム開発の実装事例。視覚的スケーリングゲームをAstro（静的）とReact Island（インタラクティブ）で構築し、キーボード・ポインタ・タッチに対応。テスト可能な設計を解説。
スクリーンリーダー NVDA を 7 年使い熟達した視覚障害のある人による省察。操作の工夫で対応できるようになったことが、サイト設計側の課題を覆い隠していないか。熟達するほど「アクセシブルであること」と「ユーザーの工夫で使える状態」の違いが見えなくなる危険性を指摘。
チャットUIのストリーミング完了時のアクセシビリティバグの詳細解説。完了時にUIがリマウントされるとキーボードフォーカスが消える問題を状態遷移設計で防ぐ方法を提案。VoiceOver等スクリーンリーダー利用時の課題と再現コード付き。
ネイティブ<input type="checkbox">を保ちながらカスタムスタイリングする方法。キーボード操作とスクリーンリーダー対応をデフォルトで獲得し、複数の支援技術に対応する責任あるチェックボックスの実装パターンを解説。
AIコーディング支援ツールのStop Generatingボタンの実装バグ。複数リクエスト管理時にabort制御が誤り、キーボード操作やスクリーンリーダーユーザーの体験が損なわれる問題を分析。
脳梗塞後の右手運動機能障害でキーボード操作が困難になった著者が、テンキーを左側に配置、マクロキーを活用するなど工夫した試行錯誤の記録。固有受容覚の障害について詳しく解説。
ウェブサイトのキーボードナビゲーション障害を自動検出するツール。スクリーンリーダー利用者が実際の操作で遭遇するフォーカス移動や状態変化への対応障害を見つけるアルゴリズムを提案する。
Web制作の卒業制作をWCAG 2.2に沿ってセルフチェック。LightHouse、キーボード操作、代替テキストの3点から、具体的な問題点と対策を実例で解説。
Astroで外部リンクと内部リンクを自動判定し、新しいタブで開く際に支援技術対応を行うコンポーネント実装。URL APIの origin比較とnoopener属性・支援技術向けテキストの自動付与を解説。
スクリーンリーダーがアクセシビリティツリーを通じてWebページを読む仕組みと、alt欠落・ARIA誤用などよくある実装エラーの修正法を解説する。
HTML/CSS初心者向けのWebアクセシビリティ入門。意味のあるHTML、キーボード操作、フォーム、代替テキスト、コントラストの5点から始める基本を解説。
よく使うARIA属性10個とUI別（アイコンボタン・アコーディオン・フォーム等）の実装サンプルを通じて、HTMLだけでは伝わりにくい情報を支援技術へ補足する方法を解説。
モーダルのキーボードトラップは意図的には正しいが、逃げ出し方がないとバグになる。ネイティブ<dialog>要素での実装方法を解説。
AI 業界の警告・懸念の真意に関する議論と分析。また iOS 27 ベータの Siri AI の初期体験、Windows/Mac 環境でのスクリーンリーダー（JAWS/NVDA）の操作性比較。
Reactコンポーネントを別プロジェクトで再利用する際、スキップリンクと見出しのアクセシビリティ関係が壊れる問題を取り上げ。コンポーネント間の契約を明示的に定義することで異なる構成モデル下でもアクセシビリティを保つ設計方法を解説。
Reactのフォーム検証UIで視覚的なレイアウトシフトを避けるための設計と実装。aria-liveやaria-invalidなどのWAI-ARIA属性を活用し、キーボードとスクリーンリーダーユーザーの両方にアクセシブな非同期処理フロー。
AIチャット機能でローカルサーバーからリモートサーバーへのフェイルオーバー時に、キーボードユーザーとスクリーンリーダーユーザーのアクセスが途絶える実装バグの分析。状態管理とアクセシビリティの関連を通じた問題特定と解決方法を論じた技術記事。
パフォーマンス・アクセシビリティ・セキュリティ・SEO・コード品質を含む2026年のWeb開発ベストプラクティス。Core Web Vitals、セマンティックHTML、キーボード操作、色コントラスト、代替テキストなど実装ガイドを提供する。
生成AIチャット応答のストリーム切断時に、キーボード・スクリーンリーダーユーザーが復旧できないUIデザインの問題を診断し、ARIAと状態管理による解決方法を解説。
Reactでメンション形式（@ユーザー名等）の複数chip入力をcontenteditable不使用で実装する方法。テキスト・chipが交互に並ぶセグメント配列パターンと、キーボード操作でのState/DOMフォーカス管理を解説。
メールバリデーション時に複数の状態を明示し、aria-liveでアナウンスするReactパターン。レイアウトシフトを防ぎ、キーボードユーザーが手がかりを失わない実装を解説する。
AIエージェントが生成したコンポーネント状態をデザインシステムに導入する前に、タブ順序とフォーカス可視化の証拠を確保すべき。キーボードユーザーの操作経路を明示的に検証するプロトコルを提示する。
AI エージェント UI でツール確認がトーストで表示されるのにキーボードフォーカスはコンポーザーに残り、Enter キーで意図しないツール実行が起きる仕組み。フォーカスロック + ダイアログで防ぐ実装を検証する。
チャット agent の tool 実行確認 UI が focus に入らず auto-allow で勝手に実行される問題を、blocking dialog で解決。focus・tab order・screen reader 検証の必要性を解説。
視覚障害者によるSlackのキーボード操作ガイド。スクリーンリーダーNVDAを使用した場合の具体的なショートカット操作と、毎日の仕事の中での工夫を紹介する。
ストリーミング停止時に、キーボード・スクリーンリーダーユーザーだけが異なる UI 状態を経験する不具合。視覚的に停止して見えるが、フォーカス・ネットワークは継続する状態をデバッグする技術記事である。
AI エージェントが navigation 要素を書き換える際の検証ゲート。決定カード・シナリオ・エビデンスの4段階で、キーボード操作と skip path が機能することを確認した上で人間が承認する手法を提案。可逆性（復帰経路）を必須条件とする。
La Ligaの20クラブサイトについて、自動ツールと手動テストでアクセシビリティを監査した結果。自動ツールは高スコアでも実際にはスクリーンリーダーやキーボード操作に課題があるケースが多く、企業事例とテスト方法を示す。
タイムゲーム・認知測定ツールをアクセシブルにする方法。モーター操作と認知を分離し、色覚多様性に対応し、動作軽減設定を尊重。反応時間測定時のアクセシビリティの根本的な制約と、透明性のあるトレードオフの解決策を論ずる。
チャットUIで再試行時に古いStop ボタンが残り、キーボード・スクリーンリーダーユーザーが混同する状態管理バグを、状態テーブルで分析して修正方法を提案。
スクリーンリーダー利用者がChrome拡張OCRツール開発を通じて、コードレビューと実機テストの差異を考察。コード上は問題なくても、操作フロー・音声フィードバック・キー入力の応答でのみ見える不具合が存在することを実例で解説。
YouTubeの「質問する」ボタンを使った動画の要約と質問機能を、VoiceOverユーザー向けに解説する初級ガイド。
ストリーミング生成UIで、ツール呼び出しが最初に来たときにUIフェーズの不足により正確な状態表示ができない問題と、ステートテーブルを描画してから実装する解決方法を説明している。
入力フォームのアクセシビリティ向上に必要なCSS実装解説。ラベルとの関係を見やすくし、フォーカス状態を可視化し、スマートフォンでも使いやすいデザインへ整える具体的な手法を紹介する。
ストリーミング生成中のUI制御タイミングが、キーボードユーザーとスクリーンリーダーユーザーに及ぼす影響を検証。aria-busy、live region、コンポーネント出現のタイミングを正確に設計する重要性。
キーボード操作でキャンセル後にリトライする際、既に中止済みのAbortSignalが再利用されてリクエストが開始しない問題を検証。UI状態設計の重要性を示す。
見出し要素内の改行がVoiceOverの読み上げに与える影響と、aria-labelの使用またはCSS工夫による対策を解説している。
ポートフォリオサイトのアクセシビリティをツールと手動テストで検査し、キーボード操作が効かない投稿カードを Link 要素で修正した経験と方法を紹介する。
スクロールトップボタンのアクセシビリティ課題と解決方法を、WCAG基準を交えて詳しく解説。
Windows環境でIMEの状態をテキスト入力欄の横に表示する常駐ツール。入力時の状態変化を視覚的にフィードバック。
医療情報サイト（耳鳴りを例に）のWebアクセシビリティ実装方法6項を解説。構造・シンプルなUI・文脈的リンク・アクセシビリティ（コントラスト・キーボード・代替テキスト等）・医療情報としての責任・パフォーマンス。
カードUIの実装で、役割に応じて<a>と<button>を出し分けた経験記。HTMLの要素選択がアクセシビリティの第一歩であり、正しい要素を選ぶことで、JavaScriptの振る舞い追加よりシンプルな実装が実現できることを示す。
Hacker News の注目記事をキュレーションして紹介。GUI はキーボード操作で完全に制御できるべき、というアクセシビリティと利便性を両立させる設計の重要性、スマートデバイスにおけるユーザー主権、シンプルな Web 開発などの話題。
スクリーンリーダー利用者の視点から、オンライン会議での参加や操作はできるが、マイク状態の確認やスライド資料の内容把握など生じる具体的な困難を詳細に解説。
キーボード操作時のフォーカス指標をCSS :focus-visible で適切に実装する方法。outline: none の問題、WCAG 2.4.7 への適合、フォーム要素での扱い。
マウス故障時の完全なキーボード操作対応はアクセシビリティ施策でなく、すべてのユーザーにとって必要なUX。セマンティックHTMLで実装は難しくないと論じた記事。
説明的なリンクテキストのベストプラクティス。WCAG 2.4.4『リンク目的』に基づき、曖昧な表現を避け、目的地を明確に示すリンク設計の実装例を紹介。
自動テストツール（axe、Lightouseなど）が検出できないアクセシビリティの問題を指摘。キーボード操作・スクリーンリーダー・ARIAの手動検証の必要性と、自動テストと手動テストを組み合わせたアプローチを提唱している。
Shopify 店舗が直面する ADA 訴訟の傾向と対策。テーマの見出しタグ使用法、サードパーティアプリのマークアップ、AJAX パターンなど、問題となる WCAG 違反 6 パターンと修正コード例を解説。
From Cart to Checkout: Optimizing E-Commerce Web Accessibility for Every Shopper | Accessible Web
YouTube 海外
オンラインストアの各段階（フォーム・フィルタ・チェックアウト）をスクリーンリーダーやキーボード操作に対応させ、すべての購買客にアクセス可能にする実践的戦略。
opacity: 0 では見た目を隠してもリンクはクリック可能な状態が残る。pointer-events: none を併せることでポインター操作を止められるが、キーボードのタブ移動は別に制御が必要。実装パターンを解説する。
WCAG 2.1.1「キーボード」は、キーボード操作可能であることだけでなく、個々のキー入力に特定のタイミングを要求しないことも定めている。短時間での連続入力や、一定時間キーを押し続ける操作などが該当する。この重要な条件は、簡略化されたWCAG解説では見落とされがちである。
デートピッカーのキーボードアクセシビリティ問題について。見た目は大丈夫だが、キーボード操作ができない`<div>`実装の失敗パターンと、`<button>`への修正方法を解説。AIエージェントも同じ構造的な問題に直面する。
AIチャットが無料モデルの利用制限に直面したときのフォールバック設計。次のモデルに自動切り替えする際、ユーザーへの通知、フォーカス管理、キーボード操作の確保が重要。Live regionで切り替え情報をアナウンスする実装例を示している。
Blind people can't direct touch type. Or can they? Stephen Scott says it's impossible. Shaun Preece
YouTube 海外
視覚障害のある人がタッチタイピングできるかについて、異なる見解を持つ専門家が議論する。
重要導線を手動でテストし、キーボード操作の問題を優先順位付けする方法。自動検査の警告ではなく実使用を止める障害を見分け、制作者への修正依頼まで完結するプロンプト集。
sticky ヘッダ下でのページ内アンカー着地問題を、CSS の scroll-margin-top と :target 疑似クラスで解決する実装方法を解説した技術記事である
モバイルファーストで開発するとhover状態が見落とされやすく、同時にフォーカスリングも実装忘れになりやすいという経験記。確認デバイスが片方だけでは、存在しない状態を発見できないリスク、および:focus-visibleなど最新CSSの活用を示す。
モーダルダイアログ開時のキーボード操作とフォーカストラップの問題。キーボード単独テストの実践例から学ぶアクセシビリティ課題と対応
WCAG の POUR 原則に基づきながら、セマンティック HTML・alt 属性・見出し構造・フォーム label など、アクセシビリティ対応コーディングの具体例をコード付きで解説。スクリーンリーダーや自動ツールでの確認方法も紹介する。
Your audit report says 2.1.1 fails on every element. Here is how to tell whether that is real.
記事 海外
WCAG 2.1.1 Keyboard の監査で「全要素が失敗」と報告された場合、それが正当な指摘か見分けるポイント。監査ツールの過剰検出を見分け、実際のキーボード操作要件を正しく理解するテクニック。
Ionic Framework 9のリリースに伴う主要な変更5つを紹介。Selectのリッチコンテンツ対応、Font Icon対応、HTMLネイティブ要素への移行など、コンポーネント拡張とアクセシビリティの向上を図った。
肢体不自由のある人が使用する支援技術と入力デバイスを理解したWebデザイン。キーボード操作対応と代替入力への実装方法を解説
自動テストツールが検出できないアクセシビリティの課題（キーボード操作、フォーカス管理、スクリーンリーダー対応など）を実例で紹介し、人間による手動テストと自動化の効果的な組み合わせ方を説明。
ラベル・フォーカス管理・エラーハンドリングなど、アクセシブルなフォーム実装の方法論。実装時の課題と解決策を詳解。
メール入力時のヘルプテキストとエラーメッセージを、フォーカス移動やレイアウトシフトなく表示するReactとCSSのパターン実装。キーボード操作とスクリーンリーダー利用者の両方に対応。
視覚障害のある開発者がMac上でアクセシブルにWindowsを実行するための仮想マシンAVMを紹介。スクリーンリーダー対応、キーボード操作、AIツール活用による開発方法を解説。
WCAG 2.2達成基準2.5.7「ドラッグ動作」について、細かい指の動きが必要なドラッグ操作が手の震えや肢体不自由のある人にとって困難である理由を解説。
キーボード操作可能なストリームテスターの構築と無料サーバーへのデプロイ方法を解説する技術記事。
WCAG 2.2 達成基準 2.5.6 の解説。キーボード・マウス・タッチなど複数の入力メカニズムを同時対応すべき理由を、タブレット環境での実例を交えて平易に説明する。
モーダル・引き出し・日付ピッカーなど、UIコンポーネントで業界を問わず見られる共通のアクセシビリティバグ。原因と対策を解説。
CSSツールチップの7つの実装パターンをキーボード操作・閉じる機能・WCAG 1.4.13に照らして検証。CSS単独では解決できない理由と対策
カスタムUIコンポーネントのキーボード操作・フォーカス管理は複雑で危険。実装の実践的テクニック、陥りやすい落とし穴、効果的なデバッグ方法
ダイアログの外クリックやEscキーでの閉じ動作について、ユーザータスクの必須度と操作意図の文脈に応じた3つの実装パターンを分析。アクセスの適切なUI実装を説く。
視覚障害のあるユーザーが航空会社のウェブサイトで予約・座席選択する際の一般的なアクセシビリティバリアと改善方法を解説した実装ガイド。
VoiceOverを使用したMacのメールアプリでメール送信する方法を、基本操作から詳しく解説する初級チュートリアル。
ツールチップUIコンポーネントのアクセシビリティ上の間違いと修正方法を解説する記事。キーボード操作とスクリーンリーダー対応の実装を中心に扱う。
Core Web Vitalsダッシュボードに表示されやすいアクセシビリティ修正。フォーカス表示、キーボード応答性、モーダルの位置固定に注目し、計測可能な改善の優先度付けを実例で解説。
Can you type directly on a touchscreen without looking? One listener says impossible. Another says t
YouTube 海外
タッチスクリーン上で視覚なしにキーボード入力できるかについて扱う。
WCAG 2.2のガイドライン2.1「キーボードアクセス可能」について達成方法を読み合い、参加者で気づきを共有する勉強会。
キーボードのみで操作可能なストリーミングチャットUIの設計を型付き状態機械で実装する手法。実際のユーザーテストを通じたアクセシビリティの検証と改善。
Reactでのサインアップフォームとメール検証の実装において、フォーカス移動・エラーメッセージ・キーボード操作を損なわないテスト手法を解説。
HTMLテーブルのアクセシビリティ対応方法をARIA、キーボード操作、スクリーンリーダー対応を含めて解説する実践ガイド。
スティッキーヘッダーによってTab／Shift-Tabでのフォーカス移動位置がズレてWCAG 2.4.11の失敗につながる問題をブラウザ動作から分析する。
Webアプリケーションのチャットダイアログコンポーネントにおけるキーボード操作とフォーカス管理のベストプラクティス。kintoneの刷新を通じたアクセシビリティ対応の実例。
macOS のメールアプリで Gmail アカウントを VoiceOver（スクリーンリーダー）を使用して設定する手順を解説した初級編ガイド。
全盲またはロービジョンのテック利用者向けポッドキャスト。Android アクセシビリティやスクリーンリーダーの使い方、キーボード操作、アクセシブルなハードウェア利用についての実践的な情報を扱っている
VoiceOverを使ったWAIガイドラインのアクセシビリティ評価の実践講座。キーボード操作による検証、タビング順序の確認、フォーカス表示の検証など、学んだVoiceOver技術を組み合わせた実際のサイト検証デモンストレーション。
Noisy Sliders Are an Accessibility Nightmare
YouTube 海外
キーボード操作テストだけではスクリーンリーダー利用者の体験は分からない。スライダーなどのコンポーネント設計におけるWAI-ARIA属性の問題を指摘。
Product Image Zoom and Lightbox Galleries: The Accessibility Trap in Almost Every Online Store
記事 海外
オンラインストアの画像ズーム・ライトボックス機能がキーボードユーザーをトラップする問題を解説し、テスト方法と開発者への対策を提供する。
Why four companies rebuilt the same accessibility fix for their CLIs, and what I built instead
記事 海外
AnthropicやGoogleなど複数の技術企業がCLIで同じアクセシビリティ修正を個別に再構築していた課題に対し、著者が開発した汎用的なソリューションを紹介している。
ビフォーアフタースライダーがWCAG 2.2で新たに違反対象となった理由と、アクセシビリティ準拠の実装方法を解説する記事。
パンくずナビゲーション実装の最適パターンを、セマンティックHTML・キーボード対応・アクセシビリティの観点から解説。
セマンティックHTML・フォーカス管理・キーボードナビゲーションを用いた、開発ツールナビゲータのアクセシブル実装を紹介。
ソーシャルログインボタンがスクリーンリーダーやキーボード操作のユーザーをロックアウトする実例と対策を解説。認証UIにおける一般的なアクセシビリティの落とし穴を指摘する。
タスク管理フロー（計画・承認・キャンセル・復旧）をキーボード操作とスクリーンリーダーで検証するマトリックス。ユーザーフローのアクセシビリティ確認方法。
ブラウザのネイティブフォーカスリング実装とUAごとの差異。カスタムスタイリングのアクセシビリティ上のトレードオフと、フォーカス関連問題のデバッグ方法。
自動テストでは検出できない手動アクセシビリティテストの必要性と、実践的なテスト方法を解説。キーボード操作、スクリーンリーダー、見出し構造などの具体的な試験方法を紹介。
Flutter WebViewでキーボードナビゲーションを実装してWCAG準拠を実現する方法を解説。肢体不自由など手操作が困難なユーザーの操作性を確保する設計手法を示している。
ドラッグ操作でのみ実装された価格スライダーがキーボードユーザーとスクリーンリーダーユーザーを排除する設計問題と改善法を解説。
VoiceOverのModifier Key（VO Key）の基本的な使い方と、要素ごとのナビゲーション方法を実践的に解説している。
AI処理中の緊急停止ボタンをキーボード操作で実装する方法。停止・実行中・復帰の各状態を明示的に設計し、キーボードユーザーのアクセシビリティを確保する実装パターン。
aria-modalダイアログのキーボードフォーカス逃出現象とaxe検査ツールの検出精度を検証。aria-hidden属性とinert属性による修正方法を実装・測定。
フロントエンドの楽観的UI更新で失敗時にキーボードフォーカス・音声通知・サーバー状態を一貫させるアクセシブルなトグル実装パターンを解説。
オープンソースのナビゲーションバーコンポーネントをアクセシビリティ対応させた実装事例。キーボード操作・スクリーンリーダー対応の改善方法を解説。
Webエディタにおけるタブキー動作の問題と解決方法を調査。フォーム入力時のキーボード操作の利便性とアクセシビリティの両立を探索する。
3D場面表示に隣接するアクセシブルなイベントリストを実装するフロントエンドパターン。キーボード操作、スクリーンリーダー、モーション制限ユーザーへの対応を解説。
Tabキー操作を可視化してスクリーンリーダーユーザーのWebナビゲーション経験をシミュレートするツール。キーボード操作のフォーカス順序問題を発見・改善するテスト手法。
アコーディオンコンポーネントのフォーカス管理をRAMPの監査ツールを使って検証する手法。ウェブサイト実装の事例をベースとした実践的な解説。
Reactでメール検証フローを実装する際、フォーカス管理の詳細でフローが壊れることを解説。適切なキーボード操作体験を実現する実装方法。
ChatGPTの検索機能をアクセシビリティ観点からテストするための基準マトリックスを提案。キーボード操作とスクリーンリーダー対応の両軸から、実装すべき要件を明確に定義する。
Claude Codeのターミナル画面でスクリーンリーダーを使用するための3つの有効化方法と、それぞれの仕組みを詳しく解説。VoiceOverやNVDAなど複数のリーダーに対応した操作方法を紹介。
10,000行超のグリッド表示で、スクロール時にキーボードフォーカスが失われる問題の解決方法を解説。仮想化されたDOM構造でも安定したキーボード操作を実現する実装パターン。
アクセシブルなモーダルダイアログの実装方法。フォーカス復元、キーボード操作対応、WAI-ARIAロール設計の実践例をフロントエンド面接での説明ポイントまで網羅する。
AIクラウドエージェントによるアクセシビリティ修復の信頼性検証。モーダルのキーボードフォーカスが壊れないか、実行可能な回帰テストで自動修正を評価する。
スクリーンショット入力で動作するAIコーディング支援ツールのアクセシビリティ監査。テキスト代替、キーボード入力、音声フィードバック、視覚支援技術なしの操作フロー検証を解説する。
SaaS アプリケーションのアクセシビリティ監査。キーボード操作とスクリーンリーダーユーザーが並列タスク実行時に状態変化に対応できるか、フォーカス管理とイベント処理を検証。
GitHub Copilot for JetBrains におけるキーボード操作とスクリーンリーダー対応を検証する、プロバイダ駆動型モデル選択マトリックスについて解説している。
Most voice apps assume you can tap a button to activate the microphone. But what if tapping isn't po
YouTube 海外
音声コマンドでマイクをアクティベートする設計例。タップが困難な場合の音声操作による代替手段を紹介。
ダイアログにキーボードショートカットを追加する際、Tab/Escape等の標準操作やフォーカス管理を損なわない実装手法を解説。開発者向けの技術ガイド。
Chrome 150で予定されていたfocusgroup属性の仕様検証が、property gateで保留中となった経緯を記録。キーボードナビゲーション実装の未来標準に関する技術報告。
“Clicks Power Keyboard Brings Compact Typing to iPhone” — Accessibility Tested, Android Communicator
YouTube 海外
iPhone向けの物理キーボード『Clicks Power Keyboard』のVoiceOver対応状況と、視覚障害のあるテクノロジーユーザーによる実使用レビュー。Android端末『Clicks Communicator』についても言及。
スマートグラスやAIサービスのサブスクリプションをめぐる議論のあと、ゲストのRachel Ramosが、視覚障害のある人のモバイル入力のために作られた磁気式のClicks Power Keyboardの使用感を語る。VoiceOverでの設定や、Android端末Clicks Communicatorにも触れる。
Reactを使ったシングルページアプリケーション（SPA）のアクセシビリティ設計について、フォーカス管理、ライブアナウンス、状態管理など具体的な実装方法を解説。
フレームワークレベルでのキーボード・フォーカス管理の実装方法。ダイアログやドロワー、ページ遷移時にユーザーを置き去りにしないための設計と実装パターンを解説。
HTMLネイティブのpopover要素を用いたアクセシブルなナビゲーション実装。前版のARIA・disclosure widget との比較を通じ、最新ウェブ標準に対応した実装手法を解説。
Chrome 150がfocusgroup属性をサポート。複合ウィジェット（リストボックス、タブリスト等）で、JavaScriptなしに矢印キーによるroving focusが実現できる
Accessibility Testing Reveals How Zerodha is Potentially Losing ₹7,000 Crore | Here's Why
YouTube 海外
インド大手証券プラットフォームZerodhaの実アクセシビリティ監査。axeDevTools・ANDI・キーボード操作の3層監査法でWCAG基準と実装の問題点を解説する。
Focusgroup Tests
記事 海外
Chrome 150でサポートされたfocusgroup機能の実装と、HTMLでの採用状況を解説。キーボード操作とフォーカス管理の標準化動向。
ドロップダウンメニューのアクセシビリティ実装における共通の誤りと改善方法を解説する技術記事。フォーカス管理やキーボード操作への対応など、実装時に必要な配慮を紹介している。
スクリーンリーダーユーザー向けのGoogle Chromeキーボードショートカットチュートリアル。NVDA、JAWS、VoiceOverなど複数のスクリーンリーダーに対応した実用的なブラウジング技法を解説。
ライブラリなしでスクラッチからアクセシブルなオートコンプリート機能を実装する方法。キーボード操作とスクリーンリーダー対応の設計指針を解説。
DataTableをキーボード操作に完全対応させる実装方法。フォーカストラップ制御と矢印キーイベントによる行再整列の設計を解説。
キーボードやアシスティブスイッチのみでWebを操作する利用者を想定したアクセシビリティ実装。フォーカス指示器、タブオーダー、キーボードトラップ防止を解説するウェビナー。
HTML focusgroup属性を使ったキーボードナビゲーション実装を解説。Chrome 150以降で、JavaScriptの roving tabindex パターンを宣言的に実装できる新機能を紹介。
キーボード操作を妨げるCSSの実装パターンと、実際のアクセシビリティ監査で頻出する問題を解説。具体的な事例に基づいた改善方法を紹介。
モーダルダイアログ実装のアクセシビリティ要件を解説。フォーカストラップ、キーボード操作（Escキー）、スクロールロック等の技術的実装方法を詳細に紹介している。
視覚障害・ロービジョンユーザー向けのAI搭載テキストエディタ。HTML・Markdown・音声命令に対応し、OpenAI・Claude等と統合。プロファイルで初心者から開発者向けまで柔軟に設定可能。
スクリーンリーダーJAWSを使ってPowerPointのスライドショーをキーボード操作で開始・制御する方法。視覚障害者のプレゼンテーション環境構築。
Edit PowerPoint Slide Content with JAWS
YouTube 海外
スクリーンリーダーJAWSを用いてPowerPointスライド内のテキスト・プレースホルダー・箇条書きを編集・確認するキーボード技法。視覚障害者の文書制作効率化。
スクリーンリーダーJAWSを使って新規PowerPointプレゼンテーションを作成。スライドレイアウト・プレースホルダーの操作とキーボード活用方法を解説したチュートリアル。
JAWSスクリーンリーダーを用いてPowerPointプレゼンテーションをキーボード操作のみで開く方法やファイル検索・ダイアログナビゲーション技法を示す動画。
React ナビゲーションコンポーネント構築における垂直方向スタイリング時のアクセシビリティパリティ実装方法を解説。キーボード操作と視覚デザインの一貫性を両立する手法を紹介。
JAWSを用いたキーボード操作で、PowerPointへの画像・動画挿入方法とアクセシビリティ上の考慮点を解説する。
PowerPointのスピーカーノート機能をJAWSでキーボード操作で効率的に扱う方法とワークフローを紹介する。
PowerPointの最重要ナビゲーション機能であるサムネイルペインをJAWSで操作し、スライド間の移動と位置確認の方法を解説する。
PowerPointでスライドを複製して再利用し、複数人での協働作業をJAWSによるキーボード操作で効率化するワークフローを紹介する。
Windows の音声制御ツール Speaking Access の紹介。視覚障害のあるスクリーンリーダーユーザーが、350以上のキーボードショートカットを覚えずに、音声コマンドで Windows、NVDA、ブラウザなどを操作できるようにする。
React 19のフォーカス管理実装でSPA ルーティングのアクセシビリティギャップを解決し、WCAG 2.1準拠を実現する手法を解説する。
Fluent UIのSliderコンポーネント設計。キーボード操作やWAI-ARIAの実装、Inputとの使い分けを通じてアクセシブルなUI設計手法を解説。
Fluent UI 2のラジオボタンコンポーネントのアクセシビリティ実装とBlazor 5との比較・使い分けを解説。ラジオボタンの正しいa11y設計を学べる。
ウェブサイト構築時にアクセシビリティを最優先する実践的フレームワーク。WCAG、セマンティックHTML、キーボード操作、テストツールについて解説。
開発者向けアクセシビリティ基礎入門。WCAG、セマンティックHTML、キーボード操作、テストツールなど、すべてのユーザーに対応したウェブ体験の構築方法を学ぶ。
固定ヘッダーやスティッキーなナビゲーション配下でアンカーリンク先が隠れる問題を、CSS の scroll-margin と scroll-padding で設計的に解決するテクニック。
React でアクセシブルなメインナビゲーション開発における、フォーカス管理の課題と改善手法、最適化のプラクティスを解説。
フォーカストラップ・スクロール制御・トグルロジックなどのUI実装パターンをブラウザの標準機能で実装する方法。ヘッドレスUIコンポーネント設計のベストプラクティス。
多くのウェブアプリケーションやブラウザで機能しないキーボードショートカットを列挙し、その設計課題を検証した記事。
Oxygen Builderで構築されたWordPressサイトの実例から、アクセシビリティ改善のプロセスを解説。メガメニュー、自動スライダー、曖昧なリンクテキストなど、実装時の具体的課題と対策を紹介する。
UIコンポーネント実装時に必要なアクセシビリティ基準をコンポーネント単位で整理したカタログ。キーボード操作可能性、支援技術対応、WCAG達成基準の適用方法を具体例とともに解説。
視線入力とアクセシビリティスイッチを使用して見守りカメラと水鉄砲を操作する利用者の実例を示す動画。支援技術の実用例を記録している。
MacのVoiceOverでSafariのフォーム要素やボタンを効率的に操作する方法。ローター機能やキーボードショートカットを活用し、検索・ログイン・ショッピング操作を快適に行うチュートリアル。
macOS環境でVoiceOverを使ったSafari操作の基本。ページの概要把握、検索機能、項目セレクタなど、効率よくブラウジングするための操作方法を初級レベルで解説。
Navigating With Tabs
記事 海外
Reactで完全にアクセシブルなタブナビゲーションコンポーネントの実装方法。キーボード操作とWAI-ARIAの適用を解説。
ARIAの基礎と実装方法をタブやダイアログなどのコンポーネント例で解説。ロール・ステート・プロパティの役割と、ネイティブHTML優先の設計思想を実践的に紹介。
macOS の VoiceOver で Safari を使う基本操作ガイド。キーボード活用やクイックナビゲーション、ローターなど効率的な読み上げ方法を初級向けに解説。
UIコンポーネントのアクセシビリティ対応を自動化するコード生成パイプラインの開発手法。スクリーンリーダー対応やキーボード操作、コントラスト比調整を含む実装の効率化を実現。
React でキーボード操作に完全対応したアクセシブルなナビゲーションコンポーネント実装の方法を解説。キーボードユーザーとスクリーンリーダーユーザーへの対応。
CSSの `scroll-padding` を使って、スクロール時に固定バナーがコンテンツを隠す問題を回避する実装方法を解説。キーボード操作ユーザーのアクセシビリティ向上技法。
Community-Powered Accessible Apps You Need to Try & Soundscape Comes To Android - With Double Tap
YouTube 海外
視覚障害ユーザー向けのナビゲーション・メール・操作ツール等、コミュニティが開発したアクセシビリティアプリを紹介する番組。
モダンフロントエンドフレームワークでも、セマンティックHTMLを保つことが重要。ボタン等のインタラクティブ要素に適切なHTML要素の使用を強調。
VoiceOverユーザー向けにSpotlight検索とクイックルックの使い方を解説した初級編。macOSでのキーボード操作でファイルやアプリを素早く開く方法を紹介する。
macOS Finderの基本的なファイル操作をVoiceOverで実行する方法を解説。ファイルを開く、コピー・移動する、複数ファイルを選択するなどのキーボード操作を初級レベルで詳しく説明する。
（引用）『デザイニングWebアクセシビリティ』の増補改訂版が登場！アクセシビリティって何？ 何をしたらよいの？ デザイン性も両立したい！Web制作でアクセシビリティに対応することになった時に最初に読みたい入門書。今すぐ対応しなくても、Web制作に携わる全ての人に読んでほしい一冊です。
VoiceOverを使ってmacOSのFinder（ファイル管理アプリ）を操作する初級解説。ショートカットキーと表示切り替え方法を習得できる。
Axe DevTools 拡張機能の AI ベース自動テスト機能のデモ。タブ操作の自動追跡、フォーカス指示の検出、キーボードトラップの判定、ロール検証、コントラスト確認などを自動化し、キーボード操作アクセシビリティのテスト効率を向上させる。
Auditing a product carousel for accessibility — role, reflow, zoom, and more | Accessible Web Audit
YouTube 海外
Global Accessibility Day 2026でのライブ監査セッション。e-commerceカルーセルコンポーネントをアクセシビリティ観点から検査し、キーボード操作、name/role/value、リフロー、ズーム、ラベル、コントラストなどの課題を実演。
視覚障害のあるテックユーザーの日常を描き、スマートTVの課題、キーボード操作の工夫、MacのVoiceOver活用法などを議論するポッドキャスト。
260516NYさん-ピエゾセンサーや視線でMaBeee Control Eyeアプリに入力してMaBeeeを内蔵した乾電池式オモチャ犬を年少者の所まで歩かせる20260527_#1082
YouTube
視線入力やピエゾセンサーなど複数の入力方式を組み合わせて電動おもちゃを制御するシステムの実装例を紹介。支援技術を活用したアクセス方法の多様性を示す。
Keyboard accessibility testing on a navigation sidebar — tab nav, focus, and more | Accessible Web
YouTube 海外
ナビゲーションサイドバーのキーボードアクセシビリティをRAMPガイド付き監査ツールでテストする実演。タブキー操作とフォーカス管理の具体例を示す。
キーボード操作・カラーコントラスト・スクリーンリーダー対応など、機能テストでは保証されないアクセシビリティ品質を標準準拠と人間中心の2軸で検証する方法を解説する。
ARIAウィジェットはセマンティクスを通知するがキーボード動作を提供しない。開発チーム向けのカスタムコンポーネント実装ガイド。
Auditing an accordion for accessibility — focus, contrast, headings, and more | Accessible Web
YouTube 海外
RAMP監査ツールを使ってアコーディオン（UIコンポーネント）のアクセシビリティを実装レベルで検査するセッション。フォーカス管理、キーボード操作、WAI-ARIA、見出し構造といったアクセシビリティ要件を、実装監査で確認する方法を示す。
キーボード操作とフォーム設計のアクセシビリティ向上について。タブ順序、スキップリンク、エラー・成功通知の配置などUIパターンの実装と継続改善の仕組み化を論じる。
研修プレゼンテーションでは役員から称賛を受けたが、Tabキー操作によるテストでアクセシビリティの重大な不備が明らかに。開発者の目覚めと改善への道
Auditing a navigation sidebar: keyboard, contrast, code inspection, zoom testing, and more
YouTube 海外
ナビゲーションバーのアクセシビリティ手動監査。キーボード操作、フォーカス管理、見出し構造、コントラスト、順応可能性など複数の軸を検証するセッション。
Reactでアクセシブルなナビゲーションコンポーネントを開発する際の、キーボード操作とフォーカス管理の実装パターンと工夫を詳細に解説。
Lighthouse等の自動アクセシビリティ監査ツールが図表や複雑なUIコンポーネントを正確に評価できない理由を解説。キーボード操作の制限など実際のアクセシビリティの問題を事例で示す。
VoiceOverを使うユーザーが、Macの日本語入力でカタカナやひらがなに変換するショートカットを学べる初級編の解説動画だ。
マウスなしでChromeをキーボード操作のみで完全に操作できる拡張機能。キーボード操作フローの実装例を詳しく紹介。
MacでVoiceOverを使った文字編集の基本操作を解説。カット、コピー、ペースト、削除、undo/redoなどの使い方を初級レベルで紹介する。
Studioのユーザーに向けたWebアクセシビリティの番組で、今回のテーマはキーボード操作である。Webサイトをキーボード操作で閲覧できるようにする利点を、アクセシビリティの観点から解説する。
フォーカスインジケータの実装パターンとWCAG 1.4.11違反ケース、具体的な修正方法を実例とともに解説。
フォーカスインジケータのWCAG 1.4.11視覚的フォーカス表示基準への違反事例と修正方法を解説。キーボード操作ユーザーにとって必須となる機能の実装ガイドを具体的に紹介する。
Mac で文字入力をする際の VoiceOver カーソル移動コマンドの基本。文全体や行の先頭・末尾への移動方法を初級レベルで解説。
予約サイトのカレンダーピッカーにおけるアクセシビリティバリアを実例で解説。スクリーンリーダー対応やキーボード操作の問題と対策を提示。
キーボード操作でフォーカスが移動できなくなる「キーボードトラップ」の定義、再現方法、修正方法を解説した技術記事。WCAG 2.1 SC 2.1.2 に基づく。
Microsoft Office の『アクティブ化キーボード操作』機能の設定方法を紹介。キーボード操作による業務効率化の実装ガイド。
Eleventyを使ったアクセシブルなブログ検索機能の実装方法を実装例で解説。WAI-ARIAとキーボード操作対応を含む。
Fluent UI 2を用いたアクセシビリティ実装の実践ガイド。キーボード操作、スクリーンリーダー対応、WCAG 2.1準拠の具体的実装方法を紹介する。
WCAG 2.1.1について、キーボード操作のみですべての機能を使えるようにするルールと実装方法を解説。視覚障害や肢体不自由など、マウス操作が困難なユーザー向けの配慮。
WCAG 2.1.4について、文字キー単独のショートカットによる予期しない機能の誤作動を防ぐ設計ルール・実装方法を解説。音声入力ユーザーへの配慮。
WCAG 2.1.2について、キーボード操作でページ内の特定エリア（モーダル・プレイヤー等）から抜け出せなくなるキーボードトラップを防ぐ設計ルール・実装方法を解説。
ウェブアクセシビリティ認定試験対策として、スキップリンクとページ構造の重要性を実践的に解説した学習資料。
Reactのナビゲーションコンポーネントをアクセシブルに設計するための初期要件整理。WAI-ARIAとキーボード操作仕様に基づいた系統的な要件定義アプローチ。
Next.js Link as a Button
記事 海外
Next.jsのLinkコンポーネントをボタンとして扱う実装方法を解説している。セマンティックHTMLとアクセシビリティを考慮した設計が主題。
ショートカットやマクロをフローティングパネルから呼び出せるmacOS向けツール。プリセットのドラッグ並べ替えと5個の新プリセット追加が主な改善点。
スティッキーヘッダーが引き起こすWCAG違反3つ（フォーカス隠蔽、スキップリンク破損、320pxリフロー）の対策を解説。多くのサイトが見落とすアクセシビリティバグ。
Composeでアクセシブルなフォーカスインジケータを実装する方法について。キーボード操作とスクリーンリーダー利用者を考慮したインターフェース設計パターンを解説する。
キーボード操作テストをAIの力を活用することで効率化・自動化する方法について論じた、HTML Accessibilityによる記事。
Squarespacee のデフォルトブロックに組み込まれた5つのアクセシビリティ問題を指摘。キーボードナビゲーション検証で明らかになる落とし穴と自動ツールの検出限界を解説。
キーボードナビゲーションの実装を容易にするための手法と設計パターンについて解説した記事。ユーザーの操作体験を中心に据えたアプローチを探究。
VoiceOverを使うMacユーザーがアプリを効率的に切り替える方法を解説。Mission ControlとMacの仮想デスクトップの概念、トラックパッド操作を中級レベルで紹介。
視線入力でWindowsアプリを操作する実演を示した動画。福岡県小郡市のミルキーウェイキッズで撮影、本人・保護者の同意取得済み。
スクリーンリーダーユーザーがChatGPTの操作性課題に取り組み、テンキーによる拡張を自作。視覚障害者による実践的なアクセシビリティ改善の事例と開発過程を記述。
スクリーンリーダーとキーボード操作に完全対応した、オーディオブック専用デスクトップアプリケーション。再生位置の自動保存、可変速再生、A-Bループなど利用者のニーズに応えた機能を備えている。
MacのVoiceOver使用時にアプリ一覧からDockにアプリを追加する操作方法。初級者向けチュートリアル。
WCAGの達成基準1.4.13について、ホバーやフォーカスで表示されるツールチップやメニューが邪魔にならず簡単に消せるようにするルール解説である。
ヤンデックスのAIアシスタント「Alice AI」を視覚障害者向けに大幅改善。スクリーンリーダー対応とキーボード操作の最適化により、視覚障害者の利用を支援する技術実装。
WCAG 2.2の成功基準2.4.1「ブロックスキップ」をわかりやすく解説。キーボード操作ユーザーが繰り返しナビゲーションをスキップする方法と実装方法を紹介する。
視覚障害のある開発者がElgato Stream Deckをスクリーンリーダー対応に改善。オープンソースの Open Deck プロジェクトへの貢献により、キーボード操作でのセットアップが可能に。
キーボード操作によるウェブアクセシビリティ実装方法の開発者向け完全ガイド。運動障害者を含む2.5百万人以上のアメリカ人にとって重要な技術を解説。
VoiceOverユーザー向けのMac文字入力操作ガイド。Windowsキー操作に慣れたユーザーが快適に文字を確定させるための設定変更方法を解説する。
Mac の VoiceOver でのテキスト入力時、ライブ変換のオン・オフによる挙動の違いと矢印キーなどの操作のコツ。
スキップリンクはアクセシビリティの基本機能でありながら見落とされやすい。WordPressテーマへの実装方法を解説している。
AI ショッピングチャットのアクセシビリティ監査レポート。naked divs、キーボードナビゲーション不可のカード、入力ラベル欠損など実際の問題を指摘。
MacのVoiceOverを使った日本語入力の基本的な操作方法を解説。ライブ変換と連文節変換の仕組みと実際の使い方を実演する。
Web制作者向けアクセシビリティ入門ガイド。スクリーンリーダー対応、色覚特性への配慮、キーボード操作など実装方法とビジネス効果を解説。
MacのVoiceOverを細かく制御できる設定画面「VoiceOverユーティリティ」の各項目を初心者向けに詳しく解説。スピーチ・点字・ナビゲーション・コマンドなど、実際の操作画面で設定項目を紹介する動画。
フォーカス管理の重要性と実装の落とし穴を解説。視認性とキーボード操作性を兼ねた実装判断軸を提示する技術記事。
キーボード操作テストの重要性を解説。Tabキーの移動やフォーカス表示の問題がアクセシビリティの基本を示す指標であることを、実務での体験から説明する。
MacのDockで使えるショートカットキーをVoiceOverユーザー向けに解説。文字キーでのアプリ選択、表示切り替え、コンテキストメニュー、並び順変更などキーボード操作を紹介する。
スクリーンリーダーやキーボード操作に対応した、意味のあるフォーム設計の原則と実装手法を解説。アクセシビリティを最初から組み込むアプローチ。
自動スキャナで検出できない60%のアクセシビリティ問題を見つけるための手動テスト方法。キーボード操作・スクリーンリーダー・ページ構造などを初心者向けに解説。
mablのJavaScriptスニペットを使い、Webアプリのタブオーダーをキーボード操作で自動検証する手法を解説している。
キーボード操作によるアクセシビリティ監査を20分で実施する手順を、開発者向けに実践的に解説している。
スマートフォンなど複数のデバイスに対応した操作方法の設計原則。異なる入力方式に対応するUIデザインの重要性をWAICが詳説している。
MacのVoiceOver使用者向けの実践的なTips。メール添付管理、WhatsApp操作、Safari、カスタムキーボードショートカット、パスワード管理などを解説。
MacのVoiceOverスクリーンリーダーのコマンド・ショートカットキー操作を解説する初級向けガイド。ヘルプコマンドとサウンドヘルプの使い方を体系的に学べる。
WebUIにおけるボタンとリンクの使い分けの判断基準をアクセシビリティの視点から言語化した記事。セマンティックHTML実装が支援技術の正確な動作に不可欠であることを説いている。
AI エージェント（Claude等）にアクセシビリティ検証機能を統合する方法を紹介。CLIツール＋MCPプロトコルを組み合わせ、WCAG準拠性・キーボード操作・代替テキストを自動検査する
セマンティックHTMLとスキップリンク、段階的情報構造によるアクセシビリティ対応Webページ設計を解説。キーボード操作と読み上げに対応した実装手法が学べる。
ゲーム関連ウェブサイト向けインタラクティブカバーコンポーネントのアクセシビリティ実装を解説。キーボードナビゲーションとスクリーンリーダー対応の具体的課題と解決策が学べる。
カルーセル（スライダー）のアクセシビリティ上の課題と実装の工夫、代替案を解説。障害のある利用者にとって実用的なデザイン選択肢を提示。
GoogleフォームをNVDAでテストし、フォーム設計のアクセシビリティ要素を検証。ラベル・キーボード操作・色覚コントラスト・200%ズームなど、フォーム実装時のベストプラクティスを解説。
260329MRさん-視線でMaBeee Control Eye.exeアプリに入力してMaBeeeを内蔵した乾電池式ロボット掃除機で部屋を掃除する20260404_#1070
YouTube
視線入力デバイスMaBeeeとロボット掃除機を組み合わせて室内清掃を自動化する実例。オープンソースアプリMaBeee_Control_Eye.exeを用いた操作方法を実演し、上肢障害のある人の生活を支援する支援技術の活用を示す。
🎧¿Aún no usas Atajos en iPhone？ Crea tu primer acceso directo con VoiceOver (Tutorial rápido).
YouTube
VoiceOverを使ってiPhoneのショートカット機能を効率的に作成する方法を、初心者向けに段階的に解説するチュートリアル。
Webサイトのアクセシビリティを手動でテストする方法と重要性を解説。自動テストでは検出できない問題を捕捉する手動評価の手法をWCAG成功基準と合わせて紹介。
特別支援学級に在籍する小学5年男児がマイクロスイッチ入力で支援技術を遠隔操作する様子を記録した動画。本人・保護者の了解のもと撮影されたもの。
Windows 11 設定画面でスライダーが正しくレンダリングされない問題を報告。フォームコントロールの機能不全がユーザーインターフェースに与える影響を検証。
Shopify ストアのカスタマイズはアクセシビリティを脆弱にする。キーボード操作とスクリーンリーダー対応を維持し、アクセシビリティスコアをモニタリングする方法を解説する。
macOSのスクリーンリーダーVoiceOverでナビゲートするための基本操作を学習するチュートリアル。メニューバー・Dock・通知・コントロールセンター・キーボードヘルプの操作方法を初級レベルで解説。
Mac の VoiceOver チュートリアルで基本操作を学ぶ。修飾キー、ナビゲーション、読み上げ速度調整などの基本を初級者向けに解説する。
MacBook Neoを初めて使うVoiceOverユーザー向けの入門動画。外観とキーボード配置、トラックパッドの操作方法を解説する。
Chrome拡張「Shortkeys」はブラウザ操作にカスタムショートカットキーを割り当てることで、キーボードのみで完全に操作可能にするツール。運動機能に制限のあるユーザーに有用である。
Highlighting Footnotes
記事 海外
脚注のアクセシビリティを向上させる実装方法。HTML/CSS による脚注表示の最適化手法とキーボード・スクリーンリーダー対応を解説。
Astro + Vercel 構成の自社サイトで実施したアクセシビリティ改善の実践記録。WCAG 基準に基づくスキップリンク・モーション・コントラスト比の修正内容と判断根拠を詳しく解説している。
CSS のみで実装できるアクセシビリティ改善テクニック 3 つを紹介。フォーカススタイルやカラーコントラスト調整など、コーディングにすぐ活かせる実践的な解説である。
Windowsに標準搭載されているアクセシビリティ機能を3カテゴリで体系的に整理した解説で、支援技術の全体像を把握したい開発者・支援者に役立つ内容である。
ロービングタブインデックスUIの実装を簡潔にするfocusgroup属性について、ブラウザサポート状況と実装方法を解説する。
WCAGの『操作可能』原則を、けがや持病など誰にでも起こりうる身体的制約の観点から、平時の備えとしてのWeb設計を考察し、アクセシビリティの本質を問う。
Press a shortcut and a colleague can move around your desktop and describe what’s happening
YouTube 海外
3キーショートカットで同僚がリアルタイムに画面を説明・操作。シンプル設計がアクセシビリティの実装を実現。
Microsoft TeamsでEnterキーの挙動がカスタマイズ可能に。改行と送信を使い分けられるようになり、キーボード操作ユーザーの誤送信防止とストレス軽減を実現。
キーボードナビゲーション（フォーカス指標・タブ順序・トラップ対応）をWCAG基準に基づいて解説し、テスト方法までカバーする網羅的ガイド。
Ctrl+F全文検索にもヒットするアクセシブルなタブコンポーネントの実装方法。WAI-ARIAとキーボード操作・スクリーンリーダー対応を含む最新実装例。
Lighthouseが100点でも、キーボード操作やスクリーンリーダー利用時に実際には使いづらい可能性があり、自動テストだけでなく実際のユーザーテストが必要。
Windows操作の効率化に向けた時短ショートカットキーの活用方法だ。キーボード操作とマウスの切り替えによる時間ロスを軽減するテクニックを紹介する。
右鎖骨骨折で一時的に片手不自由になった開発者の体験記。上肢障害のバリアを実感し、キーボード操作やUIアクセシビリティの重要性を認識する。
アクセシブルなメディアプレーヤー「Able Player」v4.8.0とWordPress向けプラグイン2.3.0が同時リリース。変更点の詳細を解説。
視覚障害のあるクリエイターがキーボード・スクリーンリーダー対応のAIシステムで、動画の音声解説を効率的に制作できるツール。
フォーカス順序のアノテーションが常に必要とは限らず、設計判断によっては省略する方が適切な場合を論じたアクセシビリティ設計の知見。
ウェブデザインのアノテーション作業でフォーカスオーダーをあえて記載しない理由を解説。セマンティックHTML要素を正しく使用すれば、フォーカス順序は自動的に読み順に従うため、多くの場合アノテーションで指定する必要がないことを説明する。
アクセシビリティデザイナーの視点から、Webアプリにキーボードショートカットを安全に実装する設計手法を解説している。
視線入力やポインティングデバイスでスマートホーム家電を操作できる Windows アプリの使い方チュートリアル。マウス操作が困難な人向けの代替入力方法を紹介している。
スクリーンリーダーやキーボード操作ユーザーを含むすべての利用者にとって入力しやすいウェブフォームの設計・実装方法を解説する。
すべての利用者にとって入力しやすいウェブフォームの設計原則を、イギリス手話で解説するTetraLogicalのシリーズ動画。
Accessible building blocks for web: buttons
YouTube 海外
スクリーンリーダーやキーボード操作ユーザーを含むすべての利用者にとって使いやすいボタン設計と実装方法を解説する。
スクリーンリーダーやキーボード操作ユーザーを含むすべての利用者にとって使いやすいボタン設計をイギリス手話で解説する。
Windowsフリースクリーンリーダーのnvdaについて、add-ons（Favourite Links、Audio Manager、YouTube Downloader）やキーボードカスタマイズ、numpad設定を実践的に解説。JAWSとの比較も含む。
Webアプリへのキーボードショートカット実装時に、アクセシビリティデザイナーが考慮すべき設計アプローチと影響を解説している。
キーボードと支援技術ユーザーにとってわかりやすいウェブリンク設計を、英国手話（BSL）で解説したアクセシビリティ入門動画である。
Accessible building blocks for web: links
YouTube 海外
リンクのアクセシビリティ実装を解説するビデオ。キーボード操作や支援技術利用者が使いやすく識別しやすいリンクの作り方を学べる。
WordPressテーマのアクセシビリティ対応テストプロセスを、スキップリンク、ランドマーク、キーボード操作、色コントラストなど検査項目ごとに段階的に解説する動画。
視覚障害者向けの RSS リーダー Blind RSS を紹介。AI による vibe coding での開発方法、フルテキスト記事やキーボード操作などのアクセシビリティ機能を解説。
WordPressカレンダープラグインの新バージョンで、ナビゲーション要素をボタンに変更し、キーボード操作とスクリーンリーダー対応を改善した。
実装・監査では WCAG 2.2 のすべての Success Criteria を等しく扱うのではなく、実際にユーザーの行動を阻害しやすい基準から優先的にテストすることで、アクセシビリティ改善の効率を高める手法を解説する。
アプリケーションのキーボードショートカット実装は国際化の課題でもある。a11yと多言語対応の交差点を解説する。
視覚障害ユーザーの視点からインドネシアの主要ニュースサイト3つをWCAG 2.2に基づいて評価し、キーボード操作・代替テキスト・カラーコントラストの問題を指摘した調査報告書。
フロントエンドエンジニアが陥りがちなアクセシビリティの3つの誤解を、UXエンジニアの視点から解説した記事だ。WAI-ARIAやキーボード操作などの実践的な基本知識をわかりやすく紹介している。
ぐるなびウエディングのリニューアル事例で、カレンダーコンポーネントのキーボード操作対応とWAI-ARIA実装の工夫を、デザイナーとの協力プロセスを交えて解説している。
Next.js/Reactでキーボード操作のみで使用可能なログインフォームを実装しながら、WAI-ARIAによるフォーカス管理とエラー通知の実装方法を詳しく解説している。
視覚障害のあるテック愛好家による、日常生活・支援技術・独立性についての対話番組。Logitech MX Keys と Keychron B6 Pro の比較、Windows 11 のセットアップ、白杖とガイドドッグの役割などを扱う。
視覚障害者向けのアクセシビリティテックについて、NVDA、キーボード、ヘッドフォンなどのツールの実用的な活用法を紹介する。
Background images read as content.
YouTube 海外
背景画像の読み込み、フォーカストラップ、フォーム不完成などの Web アクセシビリティの具体的な問題と、視覚障害ユーザーのログイン阻害
視線入力とアクセシビリティスイッチを用いてPowerPointを操作し、正月飾りをデコレーションする実例を記録した動画。支援技術の実際の使用例を示している。
複雑な日付ピッカーUIをアクセシブルに実装するJavaScriptコンポーネント「Pikaday」。フォーム入力時のキーボード操作とスクリーンリーダー対応を強化し、ユーザー体験改善を目指した技術実装ガイド。
NVDAとJAWSなどのスクリーンリーダーに完全対応した、アクセシブルなタイピング練習ソフト。盲・ロービジョンの人向けに設計され、音声フィードバックで習熟度を確認しながら練習できる。
スクリーンリーダー JAWS/ZoomText/Fusion の新機能「Page Explorer」を紹介。キーボード操作でウェブページのレイアウト・コンテンツ・リンクを自動把握し、ページ理解を支援する。
視覚障害のある人がGmailのキーボード操作やAiraのビジュアルインタープリティングを活用し、オンライン・実店舗での買い物を独立して実行する実例紹介。
VoiceOverスクリーンリーダーを用いた実践的なアクセシビリティテスト手法を、WCAG 2.2の実例で学ぶ。キーボード操作・達成基準・一般的な失敗パターンを動画デモで解説。
iOS 26のクリップボード機能強化をVoiceOverで操作する方法を初級レベルで解説。複数項目のコピペに対応し、効率的な文字入力が実現した。
肢体不自由のある成人男性が、マイクロスイッチに入力して乾電池式玩具機関車を動かし、ビールサーバーのレバーを操作する様子を記録した動画。Bluetooth対応スイッチインターフェイスなどの支援技術を活用した実装例を示しており、身体機能に関わらず環境と相互作用する可能性を開く。
Web Accessibilityの20レシピから、見出し・カラーコントラスト・キーボード操作など実装のコツを紹介した感想記事だ。
Vue/Nuxtアプリにおけるアクセシビリティのベストプラクティスを解説した記事。セマンティックHTML、ARIAラベル、キーボード操作、カラーコントラストなど実装レベルの指針を紹介。
運動機能障害者向けに、筋電図センサーで7種のジェスチャーを解読し片手でリアルタイム文字入力を実現するLowKeyEMGを提案する研究だ。
CSSの各プロパティとアクセシビリティの関係を実践的に解説し、日常のCSS実装でアクセシビリティを意識する方法を紹介した記事だ。
LLMがタスク目標と無関係なウェブ要素を動的にフィルタリングする「Task Mode」を提案し、スクリーンリーダー利用者のナビゲーション効率化を図る研究だ。
VoiceOver環境でiPhoneにマイナンバーカードを登録する手順をステップバイステップで解説。顔認証と暗証番号入力のポイントを実演。
HTML標準要素とWAI-ARIA属性を組み合わせたアクセシビリティ対応チェックボックスのコピペ可能な実装パターンを紹介している。
CSSのみで実装するカルーセルがスクリーンリーダーやキーボード操作に対してアクセシブルかどうかを検証・考察した記事。
ARIA属性とキーボード操作に対応したアクセシブルなタブUIの実装方法を、コピペで使えるコード例付きで紹介している。
HTMLのpopover属性のアクセシビリティ実装における課題を、キーボード操作とスクリーンリーダー対応の観点からW3C仕様策定の専門家が検証・考察した記事。
オープンソーススクリーンリーダーNVDAの建築設計とAPI、ARIA、代替テキスト、キーボード操作を通じて、視覚障害のある人のデジタルリソースへのアクセス方法を探究する。
The button element
記事 海外
HTML button 要素の実装とアクセシビリティ対応をカバーした非公式ガイド。フォームコントロール、キーボード操作、スクリーンリーダー対応が主焦点。
iPhone の VoiceOver ローター機能の使い方を初心者向けに解説。片手ピースと両手親指フリックの操作方法、読み上げ単位の切替を段階的に紹介。
Web Accessibility Cookbook
技術書 海外
フロントエンド開発者向けに、キーボード操作・スクリーンリーダー対応・ARIAの実装方法をレシピ形式で解説した実践的技術書。
2024年のWeb制作で推奨されるHTML・CSS・JavaScriptの実装方法を解説。新要素の活用、アクセシビリティ対応、WAI-ARIAの実装例を含む50個の書き方を紹介している。
セマンティックHTML・ARIA・カラーコントラスト・キーボードナビゲーション等の実装技術を解説し、WCAG準拠の重要性をビジネス・法的・倫理的観点から論じた論文。
データビジュアライゼーションをスクリーンリーダーやキーボード操作で利用可能にするツールキット。複数の入力モードとテキストベースの代替表現を提供する。
Webアクセシビリティの基本と、エンジニアが対応できる9つの実装項目を解説。キーボード操作対応、代替テキスト、スクリーンリーダー対応、コントラスト比確保、ページタイトルの整備など、実装例とともに紹介する実践ガイド。
ウェブアクセシビリティの国家規格 JIS X 8341-3 について、障害の有無に関わらず誰もがウェブ情報を得やすくするための設計方法を解説。企業に対する義務化と達成基準のレベルA・AAについて説明する。
視覚障害者である筆者がキーボード操作のみでウェブサイトを利用する実例を通じ、キーボード操作対応の重要性と実装方法を解説する連載である。
In Quest of Search
記事 海外
Webアプリケーションのアクセシブルな検索UI実装について、インクルーシブデザイン観点から解説した記事。キーボード操作と支援技術対応を含む。
WCAG準拠のアクセシブルなフォーカスインジケータをデザインするガイド。キーボードナビゲーション利用者の操作性を向上させるための実装方法を詳説する。
WordPressのブロックエディタGutenbergをモバイルデバイスで効果的に利用するためのアクセシビリティTips。キーボード操作やスクリーンリーダー対応を含む実践的な利用方法を提示する。
CodePenの埋め込みコンテンツ使用時のキーボード操作性を向上させるための実装テクニック（フォーカス管理とスキップリンク）を解説。
フロントエンドデベロッパーがマウスを使わずにWebアプリケーションを操作する中で気づいた、キーボードアクセシビリティの重要性と実装方法を解説。
Windows 7 の標準アクセシビリティ機能を解説した記事。拡大、画面読み上げ、キーボード操作など多様な支援機能をカバーする。
スクリーンリーダーJAWS 11におけるARIA drag & dropの実装サポートについて技術検証。キーボード操作の対応を含む。
Twitterアプリケーションのアクセシビリティ実装ガイド。スクリーンリーダー対応とキーボード操作を含む検証方法を解説。
Form Design Patterns
技術書 海外
視覚障害者や運動障害のあるキーボードユーザーにも対応したアクセシブルなフォームデザインのパターンを実装例とともに解説した技術書だ。
視覚障害や運動障害のあるユーザーも使えるウェブサイト実装パターンを、豊富なコード例で紹介した書籍だ。