Accessible and Functional Quantity Spinbutton Pattern アクセシブルで機能的な数量スピンボタンパターン
記事 海外
WAI-ARIA spinbutton パターンのアクセシブル実装方法とベストプラクティスを解説する技術ガイド。
#キーボード操作
90件
Dictate ディクテーション
YouTube 海外
音声による入力機能。手を使わないテキスト作成により、肢体不自由者やタイピング疲労を削減。複数の障害や状況に対応するハンズフリーワークフローを実現する。
Focus indicators that fail WCAG 1.4.11: real cases and exact fixes WCAG 1.4.11 に違反するフォーカスインジケータ: 実例と修正方法
記事 海外
フォーカスインジケータの実装パターンとWCAG 1.4.11違反ケース、具体的な修正方法を実例とともに解説。
Focus indicators failing WCAG 1.4.11: real cases and exact fixes WCAG 1.4.11におけるフォーカスインジケータの失敗例と修正方法
記事 海外
フォーカスインジケータのWCAG 1.4.11視覚的フォーカス表示基準への違反事例と修正方法を解説。キーボード操作ユーザーにとって必須となる機能の実装ガイドを具体的に紹介する。
macOS VoiceOverにおける文字入力時のカーソル移動コマンドの基本的な使い方を解説する初級向けチュートリアル動画。文全体や行の先頭・末尾への移動方法を具体的に紹介している。
Date Pickers Are the Most Common Accessibility Failure on Booking Sites — Here's Why 予約サイトのデートピッカーがアクセシビリティの主要課題である理由
記事 海外
予約サイトのカレンダーピッカーにおけるアクセシビリティバリアを実例で解説。スクリーンリーダー対応やキーボード操作の問題と対策を提示。
Keyboard traps: what they are, how to reproduce them, and how to fix them キーボードトラップ: 定義、再現方法、修正方法
記事 海外
キーボード操作でフォーカスが移動できなくなる「キーボードトラップ」の定義、再現方法、修正方法を解説した技術記事。WCAG 2.1 SC 2.1.2 に基づく。
Web Accessibility (a11y) Guide for Developers: WCAG 2.2 in Practice 開発者向けWebアクセシビリティガイド：WCAG 2.2実践編
記事 海外
WCAG 2.2に基づき、セマンティックHTML・ARIA・キーボード操作・スクリーンリーダーテスト・カラーコントラスト・CI/CDでの自動化を実践的に解説。
Microsoft Office の『アクティブ化キーボード操作』機能の設定方法を紹介。キーボード操作による業務効率化の実装ガイド。
Fluent UI 2を用いたアクセシビリティ実装の実践ガイド。キーボード操作、スクリーンリーダー対応、WCAG 2.1準拠の具体的実装方法を紹介する。
WCAG 2.1.1について、キーボード操作のみですべての機能を使えるようにするルールと実装方法を解説。視覚障害や肢体不自由など、マウス操作が困難なユーザー向けの配慮。
WCAG 2.1.4について、文字キー単独のショートカットによる予期しない機能の誤作動を防ぐ設計ルール・実装方法を解説。音声入力ユーザーへの配慮。
WCAG 2.1.2について、キーボード操作でページ内の特定エリア（モーダル・プレイヤー等）から抜け出せなくなるキーボードトラップを防ぐ設計ルール・実装方法を解説。
Sisyphus would have loved Skip Links & Page Structure | Trusted Tester Study Group 6 シジフスはスキップリンクとページ構造を愛したはず
記事 海外
ウェブアクセシビリティ認定試験対策として、スキップリンクとページ構造の重要性を実践的に解説した学習資料。
Creating Initial Requirements for an Accessible Navigation Component アクセシブルなナビゲーションコンポーネントの初期要件定義
記事 海外
Reactのナビゲーションコンポーネントをアクセシブルに設計するための初期要件整理。WAI-ARIAとキーボード操作仕様に基づいた系統的な要件定義アプローチ。
Next.js Link as a Button Next.js Link をボタンとして扱う
記事 海外
Next.jsのLinkコンポーネントをボタンとして扱う実装方法を解説している。セマンティックHTMLとアクセシビリティを考慮した設計が主題。
ショートカットやマクロをフローティングパネルから呼び出せるmacOS向けツール。プリセットのドラッグ並べ替えと5個の新プリセット追加が主な改善点。
Sticky Header Accessibility: The Skip Link, Focus, and Reflow Problems Most Sites Miss スティッキーヘッダーのアクセシビリティ：スキップリンク、フォーカス、リフロー問題
記事 海外
スティッキーヘッダーが引き起こすWCAG違反3つ（フォーカス隠蔽、スキップリンク破損、320pxリフロー）の対策を解説。多くのサイトが見落とすアクセシビリティバグ。
More Accessible Focus Indicators with Compose Composeでよりアクセシブルなフォーカスインジケータを実装する
記事 海外
Composeでアクセシブルなフォーカスインジケータを実装する方法について。キーボード操作とスクリーンリーダー利用者を考慮したインターフェース設計パターンを解説する。
keyboard testing with the POWER OF AI! – HTML Accessibility AIの力を使ったキーボードテスト！
記事 海外
キーボード操作テストをAIの力を活用することで効率化・自動化する方法について論じた、HTML Accessibilityによる記事。
Making keyboard navigation effortless :: Aaron Gustafson キーボードナビゲーションを容易にする方法
記事 海外
キーボードナビゲーションの実装を容易にするための手法と設計パターンについて解説した記事。ユーザーの操作体験を中心に据えたアプローチを探究。
Squarespace Looks Accessible Until You Tab Through It. Here Are the 5 Blocks That Break. Squarespace のアクセシビリティ問題: キーボード操作で浮き彫りになる5つのブロック
記事 海外
Squarespacee のデフォルトブロックに組み込まれた5つのアクセシビリティ問題を指摘。キーボードナビゲーション検証で明らかになる落とし穴と自動ツールの検出限界を解説。
スクリーンリーダーユーザーがChatGPTの操作性課題に取り組み、テンキーによる拡張を自作。視覚障害当事者による実践的なアクセシビリティ改善の事例と開発過程を記述。
MacのVoiceOverを使用してアプリ一覧からDockへアプリを追加する手順を解説したチュートリアル動画。キーボード操作の注意点も含めて説明。
WCAGの達成基準1.4.13について、ホバーやフォーカスで表示されるツールチップやメニューが邪魔にならず簡単に消せるようにするルール解説である。
ヤンデックスのAIアシスタント「Alice AI」を視覚障害者向けに大幅改善。スクリーンリーダー対応とキーボード操作の最適化により、視覚障害者の利用を支援する技術実装。
WCAG 2.2の成功基準2.4.1「ブロックスキップ」をわかりやすく解説。キーボード操作ユーザーが繰り返しナビゲーションをスキップする方法と実装方法を紹介する。
Keyboard Navigation Testing: A Developer Complete Guide to WCAG Operability キーボードナビゲーションテスト：WCAG操作性の開発者完全ガイド
記事 海外
キーボード操作によるウェブアクセシビリティ実装方法の開発者向け完全ガイド。運動障害者を含む2.5百万人以上のアメリカ人にとって重要な技術を解説。
How to Add Skip Links to Any WordPress Theme WordPressのどのテーマにもスキップリンクを追加する方法
記事 海外
スキップリンクはアクセシビリティの基本機能でありながら見落とされやすい。WordPressテーマへの実装方法を解説している。
We Audited Provia's AI Shopping Chat. Here's What the Before Looks Like. Provia AI ショッピングチャット：アクセシビリティ監査レポート
記事 海外
AI ショッピングチャットのアクセシビリティ監査レポート。naked divs、キーボードナビゲーション不可のカード、入力ラベル欠損など実際の問題を指摘。
Web制作者向けアクセシビリティ入門ガイド。スクリーンリーダー対応、色覚特性への配慮、キーボード操作など実装方法とビジネス効果を解説。
フォーカス管理の重要性と実装の落とし穴を解説。視認性とキーボード操作性を兼ねた実装判断軸を提示する技術記事。
キーボード操作テストの重要性を解説。Tabキーの移動やフォーカス表示の問題がアクセシビリティの基本を示す指標であることを、実務での体験から説明する。
スクリーンリーダーやキーボード操作に対応した、意味のあるフォーム設計の原則と実装手法を解説。アクセシビリティを最初から組み込むアプローチ。
mablのJavaScriptスニペットを使い、Webアプリのタブオーダーをキーボード操作で自動検証する手法を解説している。
Keyboard Navigation Testing: The 20-Minute Audit Any Developer Can Run キーボード操作テストの20分監査―開発者なら誰でも実行できる方法
記事 海外
キーボード操作によるアクセシビリティ監査を20分で実施する手順を、開発者向けに実践的に解説している。
WebUIにおけるボタンとリンクの使い分けの判断基準をアクセシビリティの視点から言語化した記事。セマンティックHTML実装が支援技術の正確な動作に不可欠であることを説いている。
I Gave My AI Agent a UX Audit Superpower: CLI + MCP in 5 Minutes AIエージェントにUX監査の超能力を与えた：CLI + MCPで5分で実現
記事 海外
AI エージェント（Claude等）にアクセシビリティ検証機能を統合する方法を紹介。CLIツール＋MCPプロトコルを組み合わせ、WCAG準拠性・キーボード操作・代替テキストを自動検査する
A compelling title that is cryptic enough to get you to take action on it 行動を促すほど謎めいた、思わずクリックしたくなるタイトル
記事 海外
セマンティックHTMLとスキップリンク、段階的情報構造によるアクセシビリティ対応Webページ設計を解説。キーボード操作と読み上げに対応した実装手法が学べる。
An Interactive Cover Component インタラクティブなカバーコンポーネント
記事 海外
ゲーム関連ウェブサイト向けインタラクティブカバーコンポーネントのアクセシビリティ実装を解説。キーボードナビゲーションとスクリーンリーダー対応の具体的課題と解決策が学べる。
🎧¿Aún no usas Atajos en iPhone？ Crea tu primer acceso directo con VoiceOver (Tutorial rápido).
YouTube
VoiceOverを使ってiPhoneのショートカット機能を効率的に作成する方法を、初心者向けに段階的に解説するチュートリアル。
Six Tips for Managing the New Outlook Calendar with JAWS JAWSで新しいOutlookカレンダーを操作する6つのヒント
YouTube 海外
新しいOutlookカレンダーをスクリーンリーダーJAWSで効率的に操作するための6つの実践的なヒント。視覚障害者向けの具体的な操作方法を紹介。
Chrome拡張「Shortkeys」はブラウザ操作にカスタムショートカットキーを割り当てることで、キーボードのみで完全に操作可能にするツール。運動機能に制限のあるユーザーに有用である。
Astro + Vercel 構成の自社サイトで実施したアクセシビリティ改善の実践記録。WCAG 基準に基づくスキップリンク・モーション・コントラスト比の修正内容と判断根拠を詳しく解説している。
CSS のみで実装できるアクセシビリティ改善テクニック 3 つを紹介。フォーカススタイルやカラーコントラスト調整など、コーディングにすぐ活かせる実践的な解説である。
Windowsに標準搭載されているアクセシビリティ機能を3カテゴリで体系的に整理した解説で、支援技術の全体像を把握したい開発者・支援者に役立つ内容である。
WCAGの『操作可能』原則を、けがや持病など誰にでも起こりうる身体的制約の観点から、平時の備えとしてのWeb設計を考察し、アクセシビリティの本質を問う。
Microsoft TeamsでEnterキーの挙動がカスタマイズ可能に。改行と送信を使い分けられるようになり、キーボード操作ユーザーの誤送信防止とストレス軽減を実現。
Keyboard Navigation: Complete Web Accessibility Guide キーボードナビゲーション：ウェブアクセシビリティ完全ガイド
記事 海外
キーボードナビゲーション（フォーカス指標・タブ順序・トラップ対応）をWCAG基準に基づいて解説し、テスト方法までカバーする網羅的ガイド。
Ctrl+F全文検索にもヒットするアクセシブルなタブコンポーネントの実装方法。WAI-ARIAとキーボード操作・スクリーンリーダー対応を含む最新実装例。
Windows操作の効率化に向けた時短ショートカットキーの活用方法だ。キーボード操作とマウスの切り替えによる時間ロスを軽減するテクニックを紹介する。
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が同時リリース。変更点の詳細を解説。
右鎖骨骨折で一時的に片手不自由になった開発者の体験記。上肢障害のバリアを実感し、キーボード操作やUIアクセシビリティの重要性を認識する。
ADCanvas: Accessible and Conversational Audio Description Authoring for Blind and Low Vision Creators ADCanvas：視覚障害・弱視クリエイター向けアクセシブルな会話型音声解説制作システム
論文 海外
視覚障害のあるクリエイターがキーボード・スクリーンリーダー対応のAIシステムで、動画の音声解説を効率的に制作できるツール。
You probably shouldn’t be annotating focus order フォーカス順序はアノテーションしなくていい（たぶん）
記事 海外
デザインアノテーションでフォーカス順序を明示することの問題を指摘し、自然なDOM読み順に委ねることの重要性を主張する。
How an Acessibility Designer Adds Keyboard Shortcuts to a Web App アクセシビリティデザイナーがWebアプリにキーボードショートカットを追加する方法
記事 海外
アクセシビリティデザイナーの視点から、Webアプリにキーボードショートカットを安全に実装する設計手法を解説している。
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 海外
スクリーンリーダーやキーボード操作ユーザーを含むすべての利用者にとって使いやすいボタン設計と実装方法を解説する。
Accessible building blocks for web: buttons (British Sign Language version) ウェブのアクセシブルな構成要素：ボタン（英国手話版）
YouTube 海外
スクリーンリーダーやキーボード操作ユーザーを含むすべての利用者にとって使いやすいボタン設計をイギリス手話で解説する。
How an accessibility designer adds keyboard shortcuts to a web app a11yデザイナーがWebアプリにキーボードショートカットを追加する方法
記事 海外
Webアプリへのキーボードショートカット実装時に、アクセシビリティデザイナーが考慮すべき設計アプローチと影響を解説している。
Accessible building blocks for web: links (British Sign Language version) ウェブのアクセシブルな構成要素：リンク（英国手話版）
YouTube 海外
キーボードと支援技術ユーザーにとってわかりやすいウェブリンク設計を、英国手話（BSL）で解説したアクセシビリティ入門動画である。
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カレンダープラグインの新バージョンで、ナビゲーション要素をボタンに変更し、キーボード操作とスクリーンリーダー対応を改善した。
Brief Note on Application Keyboard Shortcuts アプリケーションキーボードショートカットに関する覚書
記事 海外
アプリケーションのキーボードショートカット実装は国際化の課題でもある。a11yと多言語対応の交差点を解説する。
フロントエンドエンジニアが陥りがちなアクセシビリティの3つの誤解を、UXエンジニアの視点から解説した記事だ。WAI-ARIAやキーボード操作などの実践的な基本知識をわかりやすく紹介している。
ぐるなびウエディングのリニューアル事例で、カレンダーコンポーネントのキーボード操作対応とWAI-ARIA実装の工夫を、デザイナーとの協力プロセスを交えて解説している。
Next.js/Reactでキーボード操作のみで使用可能なログインフォームを実装しながら、WAI-ARIAによるフォーカス管理とエラー通知の実装方法を詳しく解説している。
複雑な日付ピッカーUIをアクセシブルに実装するJavaScriptコンポーネント「Pikaday」。フォーム入力時のキーボード操作とスクリーンリーダー対応を強化し、ユーザー体験改善を目指した技術実装ガイド。
Grade 4 learner at St. Oda helps new classmate master keyboard skills 💻✨ #PeerLearning St. Odaの4年生が新しいクラスメートのキーボードスキル習得を支援 💻✨ #PeerLearning
YouTube 海外
ケニアのインクルーシブ教育現場で、障害のある児童が仲間からキーボード操作を習うピアラーニングの実践例。包括的教育環境の構築事例。
Web Accessibilityの20レシピから、見出し・カラーコントラスト・キーボード操作など実装のコツを紹介した感想記事だ。
Best practices for Accessibility in Vue / Nuxt Vue / Nuxtにおけるアクセシビリティのベストプラクティス
記事
Vue/Nuxtアプリにおけるアクセシビリティのベストプラクティスを解説した記事。セマンティックHTML、ARIAラベル、キーボード操作、カラーコントラストなど実装レベルの指針を紹介。
LowKeyEMG: Electromyographic typing with a reduced keyset LowKeyEMG：削減キーセットによる筋電図タイピング
論文 海外
運動機能障害者向けに、筋電図センサーで7種のジェスチャーを解読し片手でリアルタイム文字入力を実現するLowKeyEMGを提案する研究だ。
CSSの各プロパティとアクセシビリティの関係を実践的に解説し、日常のCSS実装でアクセシビリティを意識する方法を紹介した記事だ。
Task Mode: Dynamic Filtering for Task-Specific Web Navigation using LLMs Task Mode：タスク固有のウェブナビゲーションのためのLLMによる動的フィルタリング
論文 海外
LLMがタスク目標と無関係なウェブ要素を動的にフィルタリングする「Task Mode」を提案し、スクリーンリーダー利用者のナビゲーション効率化を図る研究だ。
HTML標準要素とWAI-ARIA属性を組み合わせたアクセシビリティ対応チェックボックスのコピペ可能な実装パターンを紹介している。
Are 'CSS Carousels' accessible? CSSカルーセルはアクセシブルか？
記事 海外
CSSのみで実装するカルーセルがスクリーンリーダーやキーボード操作に対してアクセシブルかどうかを検証・考察した記事。
Keyboard Navigation & Focus Order in A11Y Testing | Accessibility Basics A11Yテストにおけるキーボードナビゲーションとフォーカス順序 | アクセシビリティ基礎
YouTube 海外
アクセシビリティテストにおけるキーボードナビゲーションとフォーカス順序の確認方法を、実践的な手順とともに解説した動画。
ARIA属性とキーボード操作に対応したアクセシブルなタブUIの実装方法を、コピペで使えるコード例付きで紹介している。
Popping preconceived popover ponderings | scottohara.me popoverに関する先入観を覆す考察 | scottohara.me
記事 海外
HTMLのpopover属性のアクセシビリティ実装における課題を、キーボード操作とスクリーンリーダー対応の観点からW3C仕様策定の専門家が検証・考察した記事。
The button element button 要素
記事 海外
HTML button 要素の実装とアクセシビリティ対応をカバーした非公式ガイド。フォームコントロール、キーボード操作、スクリーンリーダー対応が主焦点。
Web Accessibility Cookbook Webアクセシビリティ・クックブック
海外
フロントエンド開発者向けに、キーボード操作・スクリーンリーダー対応・ARIAの実装方法をレシピ形式で解説した実践的技術書。
Designing Inclusive Web Applications with Accessibility in Mind アクセシビリティを考慮したインクルーシブなウェブアプリケーション設計
論文 海外
セマンティックHTML・ARIA・カラーコントラスト・キーボードナビゲーション等の実装技術を解説し、WCAG準拠の重要性をビジネス・法的・倫理的観点から論じた論文。
Data Navigator: An accessibility-centered data navigation toolkit データナビゲーター：アクセシビリティ対応データナビゲーションツールキット
論文 海外
データビジュアライゼーションをスクリーンリーダーやキーボード操作で利用可能にするツールキット。複数の入力モードとテキストベースの代替表現を提供する。
In Quest of Search 検索を求めて
記事 海外
Webアプリケーションのアクセシブルな検索UI実装について、インクルーシブデザイン観点から解説した記事。キーボード操作と支援技術対応を含む。
A guide to designing accessible, WCAG-conformant focus indicators アクセシブルで WCAG 準拠なフォーカスインジケータの設計ガイド
記事 海外
WCAG準拠のアクセシブルなフォーカスインジケータをデザインするガイド。キーボードナビゲーション利用者の操作性を向上させるための実装方法を詳説する。
A few quick tips on Gutenberg on mobile devices - Marco's Accessibility Blog モバイルデバイス上での Gutenberg 利用時のアクセシビリティTips
記事 海外
WordPressのブロックエディタGutenbergをモバイルデバイスで効果的に利用するためのアクセシビリティTips。キーボード操作やスクリーンリーダー対応を含む実践的な利用方法を提示する。
Improving the keyboard accessibility of Embedded CodePens - Manuel Matuzovic 埋め込みCodePenのキーボードアクセシビリティ向上
記事 海外
CodePenの埋め込みコンテンツ使用時のキーボード操作性を向上させるための実装テクニック（フォーカス管理とスキップリンク）を解説。
I Threw Away my Mouse - Manuel Matuzovic マウスを捨てた
記事 海外
フロントエンドデベロッパーがマウスを使わずにWebアプリケーションを操作する中で気づいた、キーボードアクセシビリティの重要性と実装方法を解説。
Form Design Patterns フォームデザインパターン
海外
視覚障害者や運動障害のあるキーボードユーザーにも対応したアクセシブルなフォームデザインのパターンを実装例とともに解説した技術書だ。
Inclusive Design Patterns —Coding Web Accessibility Into Web Design インクルーシブデザインパターン — ウェブアクセシビリティをウェブデザインに実装する
海外
視覚障害や運動障害のあるユーザーも使えるウェブサイト実装パターンを、豊富なコード例で紹介した書籍だ。