アックリップ

#WAI-ARIA

79件

old advice – Hiding Content Has No Effect on Accessible Name or Description Calculation – HTML Accessibility 旧情報 – コンテンツを非表示にしてもアクセシブルな名前・説明の計算には影響しない – HTML Accessibility

記事 海外
HTML5 Accessibility

CSSやHTML属性で隠しコンテンツは視覚的には見えなくなるが、aria-labelledbyやaria-describedbyで参照されるとスクリーンリーダーユーザーには依然として読み込まれる点を説明。アクセシブル名・説明の計算におけるW3C仕様と実装上のベストプラクティス。

old advice – Hiding Content Has No Effect on Accessible Name or Description Calculation – HTML Accessibility 旧情報 – コンテンツを非表示にしてもアクセシブルな名前・説明の計算には影響しない – HTML Accessibility

記事 海外
HTML5 Accessibility

CSSで視覚的に非表示にした要素でも、aria-labelledbyやaria-describedbyを通じてアクセシブル名・説明の計算に使われることを、スクリーンリーダー向けの実例で解説している。

February 2026 Baseline monthly digest  |  Blog  |  web.dev 2026年2月 Baselineマンスリーダイジェスト | ブログ | web.dev

記事 海外
web.dev

2026年2月にブラウザ間で対応されたWeb API機能の月次レポート。多言語サポートにおいて、RTL/LTRのテキスト方向を自動キャプチャするdirname属性が新たに広く利用可能になり、スクリーンリーダー等の支援技術の正確な処理が改善された。

Heading Anchors with Eleventy EleventyによるHeading Anchorsの実装

記事 海外
Kitty Giraudel

EleventyのビルドプロセスでWebページの見出しにアクセシブルなアンカーリンクを自動生成する実装方法。スクリーンリーダー対応（visually-hidden、aria-hidden属性）とCSS Anchor Positioningを活用し、ランタイムJavaScript依存を排除したベストプラクティスを解説。

Heading Anchors with Eleventy EleventyによるHeading Anchorsの実装

記事 海外
Kitty Giraudel

見出しにアンカーリンクを自動的に挿入するEleventy実装パターン。ビルドタイム変換とcherioライブラリで見出しIDに対応するアンカーをサーバーサイド生成し、クライアント側JavaScriptを削減する設計について解説。

APG Patterns Examples APG パターン実装例集

記事 海外
はてなブックマーク

WAI-ARIA APGのデザインパターンをReact・Vue・Svelte・Astroで実装したアクセシブルコンポーネントの実例集だ。

Karl stokes the Fireside – HTML Accessibility ファイヤーサイドチャット：Karl氏とHTMLアクセシビリティを語る

記事 海外
HTML5 Accessibility

HTML5 Accessibilityによるファイヤーサイドチャットインタビューシリーズの一篇で、KarlがHTMLアクセシビリティへの知見・経験・考え方を率直に語る対談だ。

Here’s how to instruct a LLM to reference the ARIA Authoring Practices Guide LLMにARIAオーサリングプラクティスガイドを参照させる方法

記事 海外
Eric Bailey

LLMにARIAオーサリングプラクティスガイド（APG）を正しく参照させるプロンプト手法を解説した記事だ。AIがアクセシビリティのベストプラクティスを正確に扱えるかという根本的な課題を論じている。

Talking with Heydon Pickering – HTML Accessibility Heydon Pickeringとの対話 — HTML Accessibility

記事 海外
HTML5 Accessibility

アクセシビリティ著作で知られるHeydon PickeringへのインタビューをHTML5 Accessibilityが収録したもので、HTMLアクセシビリティへの実践的な見解が語られている。

How an accessibility designer adds keyboard shortcuts to a web app a11yデザイナーがWebアプリにキーボードショートカットを追加する方法

記事 海外
Eric Bailey

アクセシビリティデザイナーがWebアプリにキーボードショートカットを実装するアプローチを解説。ショートカット設計がアクセシビリティに与える影響を丁寧に考慮した実装方法を紹介している。

Barriers from Links with ARIA ARIAを使ったリンクによるバリア

記事 海外
Adrian Roselli

Today Temani Afif asked a question: Are the below codes equivalent if we consider all the aspects? (a11y, semantic, something else maybe?) If not, what is missing (or should be changed) in the second

Live Region Support ライブリージョンのサポート状況

記事 海外
Adrian Roselli

This post does not discuss whether live regions are good, nor is it a post about the best way to use them. This post only covers how they are exposed to the audience who experiences them — screen read

How To Dynamically Install Custom Elements カスタム要素を動的にインストールする方法

記事 海外
Heydon Pickering

Webアクセシビリティの第一人者Heydon Pickeringによる、カスタム要素（Web Components）を動的に読み込む再利用可能なパターン解説。アクセシブルなカスタム要素を効率よく組み込む実装手法を紹介している。

キーボード操作でも快適に！ウエディングサイトリニューアルで実践したカレンダーのアクセシビリティ対応 - ぐるなびをちょっと良くするエンジニアブログ

記事
はてなブックマーク

ぐるなびウエディングのリニューアルで実践したカレンダーコンポーネントのアクセシビリティ対応事例。キーボード操作への対応において、デザイナーと協力しながら行った細かな実装の工夫を解説している。

CSS-only scrollspy effect using scroll-marker-group and :target-current scroll-marker-groupと:target-currentを使ったCSSのみのスクロールスパイ効果

記事 海外
Sara Soueidan

CSS Overflow Module Level 5の新しいプロパティを活用したJavaScriptなしのスクロールスパイ実装ガイド。aria-current属性を用いてWCAG 1.3.1に準拠した、スクリーンリーダーユーザー対応のアクセシブルなナビゲーション効果を実現する方法を解説。

CSS-only scrollspy effect using scroll-marker-group and :target-current scroll-marker-groupと:target-currentを使ったCSSのみのスクロールスパイ効果

記事 海外
Sara Soueidan

CSS Overflow Module Level 5の`scroll-target-group`と`:target-current`を使ってJavaScriptなしでスクロールスパイ効果を実装する方法。スクリーンリーダー対応に`aria-current`属性の自動付与が必要であることを指摘し、WCAG基準との関連を論述。

Best practices for Accessibility in Vue / Nuxt

記事
X（Twitter）

Vue / Nuxtアプリケーションにおけるアクセシビリティのベストプラクティスを解説した記事。セマンティックHTML、ARIAラベル、キーボード操作、カラーコントラストなど実装レベルの具体的な指針を紹介している。

The col element col要素

記事 海外
Heydon Pickering

An unofficial guide to the HTML col element

The canvas element canvas要素

記事 海外
Heydon Pickering

An unofficial guide to the HTML canvas element

Popping preconceived popover ponderings | scottohara.me popoverに関する先入観を覆す考察 | scottohara.me

記事 海外
Scott O'Hara

HTMLの新しいpopover属性のアクセシビリティ実装上の課題と検証方法についての考察。W3C仕様策定過程で見えてきたキーボード操作やスクリーンリーダー対応のポイントについてアクセシビリティ専門家Scott O'Haraがまとめた記事。

Paragraphs | scottohara.me 段落 | scottohara.me

記事 海外
Scott O'Hara

HTMLにおける段落要素のセマンティクスについて、VoiceOver・NVDA・JAWSなど複数のスクリーンリーダーの実装テストに基づいて解説。ARIA paragraph ロールの実装上の必要性と、セマンティックなマークアップの実ユーザー体験への影響について考察した実践ガイド。

Spoiler Alert: it needs to be accessible | scottohara.me スポイラー警告：それはアクセシブルでなければならない | scottohara.me

記事 海外
Scott O'Hara

スポイラーコンポーネントのアクセシブルな実装について、WCAGとWAI-ARIAの観点から考察した技術記事であり、スクリーンリーダー利用者を考慮した設計例が示されている。

Web Accessibility Cookbook ウェブアクセシビリティ・クックブック

海外
Manuel Matuzovic

フロントエンド開発者向けに、実践的なレシピ形式でWebアクセシビリティの実装方法を解説した技術書。キーボード操作、スクリーンリーダー対応、ARIAの使い方など幅広いトピックをカバーしている。

Best intention barriers (ARIA edition) 善意の障壁（ARIA編）

記事 海外
Marcus Herrmann

良い意図で実装されながら新たなバリアを生むARIAの誤用パターン3例を分析し、aria-labelの誤用やrole属性の機能的誤解などを通じて正しい実装の重要性を指摘している。

Designing Inclusive Web Applications with Accessibility in Mind アクセシビリティを考慮したインクルーシブなウェブアプリケーション設計

論文 海外
Semantic Scholar

セマンティックHTML・ARIA・カラーコントラスト・キーボードナビゲーション等のウェブアクセシビリティ実装技術を解説し、WCAG準拠がビジネス・法的・倫理的観点でも重要である理由を論じた論文。

ARIA e Interactive Access: projetando chatbots para idosos ARIA と Interactive Access：高齢者向けチャットボット設計

論文 海外
Semantic Scholar

高齢者のデジタル疎外や加齢による認知・身体的制限を踏まえ、アクセシブルなチャットボット「ARIA」と設計ガイドライン「Interactive Access」を開発し、ニールセンのヒューリスティクスで検証した研究。

Webアプリケーションアクセシビリティ──今日から始める現場からの改善

伊原 力也/小林 大輔/桝田 草一/山本 伶

WebアプリケーションにおけるアクセシビリティをHTMLとWAI-ARIAの基礎から実践的な改善手法まで体系的に解説した技術書。フォーム・モーダル・通知など複雑なUIパターンへの対応や、組織でのアクセシビリティ推進ノウハウも網羅する。

Use the dialog element (reasonably) | scottohara.me dialog要素を（適切に）使う

記事 海外
Scott O'Hara

Today, the HTML specification landed a very important change to the dialog element. One that resolves a multi-year discussion on how the dialog element shou...

Apps For All: Coding Accessible Web Applications すべての人のためのアプリ：アクセシブルなウェブアプリケーションのコーディング

海外
発行年不明 Heydon Pickering

Web accessibility is quite a large topic — far too large to fit into a small book. So, what will this book cover? Though we shall encounter visual design challenges, deal with performance issues, and

HTML5 Accessibility HTML5 アクセシビリティ

海外
発行年不明 Joshue O Connor

視覚障害者向けスクリーンリーダーをはじめ、支援技術との互換性を高めるためのHTML5要素の使い方を体系的に解説した技術書だ。

Pro HTML5 Accessibility プロのためのHTML5アクセシビリティ

海外
発行年不明 Joshue O Connor

Pro HTML5 Accessibility helps designers come to grips with building exciting, accessible and usable web sites and applications with HTML5. The book covers how to use HTML5 in order to serve the needs