Were you aware of different aria role buckets 異なるARIA ロールのバケットについて

YouTube 海外
Skills Singh

ARIA ロールの異なるカテゴリとそれぞれの特性・使い分けについて解説するビデオ。WAI-ARIA の正確な理解と実装方法を学べる。

Simple decision modal to choose aria controls or aria owns 1 aria-controls と aria-owns を選ぶシンプルな判定モーダル

YouTube 海外
Skills Singh

WAI-ARIAの aria-controls と aria-owns 属性の使い分けをモーダルUIで簡潔に解説する開発向け教材。属性の役割と違いを実装例で明示。

Foundational Accessibility Begins with the Base Components 基盤コンポーネントから始まるアクセシビリティ:Reactナビゲーション実装

記事 海外
DEV Community

Reactでアクセシブルなメインナビゲーションコンポーネントを開発するアプローチ。基盤となるベースコンポーネントの正しい設計と実装で、プロダクト全体のアクセシビリティ向上を実現する方法を解説。

Amy Warms to the Fireside – HTML Accessibility エイミーのファイアサイド - HTMLアクセシビリティ

記事 海外
HTML5 Accessibility

HTMLのアクセシビリティについてのコンテンツ。セマンティックHTMLとWAI-ARIAの適切な使用方法、実装上の考慮点について詳しく解説。

WENDY FIRESIDE – HTML Accessibility WENDY FIRESIDE – HTMLアクセシビリティ

記事 海外
HTML5 Accessibility

HTML標準におけるネイティブアクセシビリティ機能の実装詳解。セマンティックマークアップとWAI-ARIAの相互関係を含め、アクセシブルなHTML開発の原則を網羅的に解説。

Next.js Link as a Button Next.js Link をボタンとして扱う

記事 海外
Kitty Giraudel

Next.jsのLinkコンポーネントをボタンとして扱う実装方法を解説している。セマンティックHTMLとアクセシビリティを考慮した設計が主題。

ARIA Roles Explained: A Practical Guide for Web Developers ARIAロール解説: ウェブ開発者向け実践ガイド

記事 海外
Level Access

WAI-ARIAロールの正しい使用方法を解説したガイド。ウェブ開発者向けに、スクリーンリーダーなどの支援技術がHTML要素の構造と役割を理解するメカニズムを説明する。

Hunting for an Accessible React Navigation Component Reactでアクセシブルなナビゲーションコンポーネントを探す

記事 海外
DEV Community

Reactでアクセシブルなナビゲーションコンポーネント実装の課題を探索。既存ライブラリの検討から実装までのプロセスを通じ、開発者が直面する実践的な選択肢を提示する。

🚀 Just Published: ReactTailwindAccessKit React Tailwind アクセシビリティキット

記事 海外
DEV Community

React と Tailwind CSS を使用したアクセシブルな UI コンポーネントライブラリ。モダンで視覚的に優れた UI を構築する際のアクセシビリティ実装手法を解説する。

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

記事 海外
HTML5 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のブログ

記事 海外
Sheri Byrne-Haber

ワンタイムパスワードと二要素認証がスクリーンリーダーユーザーや聴覚・視覚・認知障害のあるユーザーを排除する問題と、その解決策(複数認証方法、ARIA対応等)を分析した記事。

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

記事 海外
Kitty Giraudel

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

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

記事 海外
HTML5 Accessibility

HTMLアクセシビリティの知見を持つKarlがHTML5 Accessibilityのファイヤーサイドチャットで、自身の経験と考え方を率直に語るインタビュー対談である。

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

記事 海外
Adrian Roselli

ARIAを使用したリンク実装におけるセマンティックおよびアクセシビリティ上の課題を検討し、異なる実装方法の等価性を比較する。

Accessible Faux-nested Interactive Controls アクセシブルな疑似ネスト型インタラクティブコントロール

記事 海外
A11y Weekly

WAI-ARIA パターンを用いて、ネストのように見えながらもアクセシブルなインタラクティブコントロール実装を解説。

はてなブックマーク

ぐるなびウエディングのリニューアル事例で、カレンダーコンポーネントのキーボード操作対応とWAI-ARIA実装の工夫を、デザイナーとの協力プロセスを交えて解説している。

CSS-only scrollspy effect using scroll-marker-group and :target-current CSSのみで実現するスクロールスパイ:scroll-marker-groupと:target-currentの活用

記事 海外
Sara Soueidan

CSS Overflow Module Level 5の新機能を使いJSなしでスクロールスパイを実装する方法を解説し、スクリーンリーダー対応のために`aria-current`属性の自動付与が必要であることを指摘している。

Spoiler Alert: it needs to be accessible | scottohara.me スポイラー機能はアクセシブルである必要がある

記事 海外
Scott O'Hara

ウェブサイトのスポイラー・ネタバレ回避機能をアクセシブルに実装するための設計方法と、専用HTML要素の必要性を論じた実装ガイド。

Best intention barriers (ARIA edition) 良い意図のバリア(ARIA編)

記事 海外
Marcus Herrmann

ARIAの実装における良い意図だが実際には利用者にバリアを生じさせている実装パターンを監査経験から解説。支援技術との互換性を損なう事例から学ぶ。

popover accessibility | scottohara.me Popover要素のアクセシビリティ

記事 海外
Scott O'Hara

HTML5 popover属性のアクセシビリティプロパティとセマンティクスについて、実装例を示しながら解説した技術記事。WAI-ARIAとの相互作用も含む。

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

論文 海外
Semantic Scholar

セマンティックHTML・ARIA・カラーコントラスト・キーボードナビゲーション等の実装技術を解説し、WCAG準拠の重要性をビジネス・法的・倫理的観点から論じた論文。

Contextual form errors and ARIA コンテキストフォームエラーとWAI-ARIA

記事 海外
Marcus Herrmann

Webフォームのエラー表示のアクセシビリティをWAI-ARIAを用いて改善する方法を解説。コンテキスト情報を含むエラーメッセージの実装パターンを実例で示す。

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

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

Web accessibility trends and implementation in dynamic web applications ウェブアクセシビリティのトレンドと動的ウェブアプリケーションでの実装

論文 海外
arXiv

動的ウェブアプリケーションにおけるアクセシビリティ実装のトレンド分析。NASA天文学データシステムなど実例を通じて、WAI-ARIAの活用と実装課題を検証する。

Content-visibility and Accessible Semantics コンテンツ可視性とアクセシブルセマンティクス

記事 海外
Marcy Sutton

CSSのcontent-visibilityプロパティがセマンティックなHTMLとアクセシビリティに与える影響を解説した記事。Webアクセシビリティ実装における重要な考慮点をまとめている。

Call to action: HTML needs more native rich widgets - Marco's Accessibility Blog コールトゥアクション:HTMLはより多くのネイティブリッチウィジェットが必要

記事 海外
Marco Zehe

ウェブプラットフォームに不足するネイティブリッチウィジェット機能の拡張を提唱する記事。カスタムウィジェット開発時のアクセシビリティ実装負担を軽減し、保守性を向上させるHTML仕様強化の必要性を論じる。

Design Guidelines forWeb Interfacesof Home Automation SystemsAccessible via Screen Reader スクリーンリーダーでアクセス可能なホームオートメーションシステムのWebインターフェース設計ガイドライン

論文 海外
Semantic Scholar

視覚障害者がスクリーンリーダーでホームオートメーションシステムのWebインターフェースを操作するための設計ガイドラインを提案した研究。

Form Design Patterns フォームデザインパターン

海外
発行年不明 Adam Silver

視覚障害者や運動障害のあるキーボードユーザーにも対応したアクセシブルなフォームデザインのパターンを実装例とともに解説した技術書だ。