AI向けブラウザツールやWebMCPで、Webのセマンティクスが直接利用される流れを追いながら、AI時代に構造化・アクセシブルなWebを設計する価値を論じる。
シェアックリップ
シェアされたアックリップです。
そのほかの #WCAG ピックアップ
（引用）アクセシビリティを、デザインの基本に。 本書は、年齢や障害の有無、利用環境にかかわらず、あらゆるユーザーが必要な情報や体験を得られるよう、「アクセシビリティ」をデザインの初期段階から組み込むための考え方と実践を学べるハンドブックです。 日本でもデジタル庁がウェブアクセシビリティの導入を推進し、「誰一人取り残されない、人に優しいデジタル化」が目指されています。アクセシビリティは、一部の人のための特別…
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
WCAG 2.2 もくもく会 #13 ～ ガイドライン 4.1 互換性 ～
イベント 開催予定
WCAG 2.2 のガイドライン 4.1 互換性を読み合い、学んだことを共有する勉強会。毎月第3木曜日はオフライン交流会も開催される。
改正JIS X 8341-3とWCAG 2.1・2.2の追加基準26個を、アクセシビリティエキスパートが全3回で徹底解説するウェビナー。第2回は操作可能の達成基準を扱う。
EU域内でWebサービス・アプリを提供する企業が対応すべきアクセシビリティ関連法制（EAA・WAD・雇用平等指令）と、WCAG基づく実装方法、EU主要国の罰則・執行事例を解説。AI画面開発におけるアクセシビリティ要件化の必要性も論じる。
モバイル表示で幅広いテーブルがページ横スクロールを引き起こす問題。テーブルをスクロール可能なコンテナで包み、キーボード利用者が操作できる実装方法を説明。
そのほかの #WAI-ARIA ピックアップ
モバイル表示で幅広いテーブルがページ横スクロールを引き起こす問題。テーブルをスクロール可能なコンテナで包み、キーボード利用者が操作できる実装方法を説明。
React で FAQ の答えを state でマウント解除する実装と、`<details>` 要素で常に DOM に保持する実装を比較。マウント解除すると find-in-page 検索が失敗し、トランジション不可になるほか、client component 化を強いる。ネイティブ実装なら同じ見た目でこれらの制約がない。
React Modal コンポーネント（oks-ui）の実装ガイド。role="dialog"・aria-modal="true"・accessible name・フォーカス管理・キーボード操作をカバー。複数ブラウザで動作確認済み。
GitHubCopilotやFluentUIといったAIやコンポーネントライブラリが個別実装を支援しても、アクセシビリティや業務要件といった品質判断は設計者に残ることを述べ、AI時代のフロントエンド設計における実装と品質判断の役割分担を整理する
インタラクティブリストがWebの標準パターンであるにもかかわらずプラットフォームでサポートされていない問題を指摘。アクセシビリティ関連の最新記事・ガイドライン・ツールをキュレーション。
CSSで生成されたアイコンはスクリーンリーダーに無視されるため、アイコンのみのボタンには必ず名前が必要。alternative-text構文で名前を供給する実装手法を説明。
そのほかの #テスト・検証 ピックアップ
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
全国810大学を対象にウェブアクセシビリティを自動診断した大規模調査。99.1%に問題が検出。国立大学は画像の代替テキスト欠落、私立大学はUIの役割・キーボード操作の問題が多く、設置区分によって課題が異なることが明らかに。
minimalist-uiスキルのモーション規則をCSSに実装する具体的な方法。translateY・opacityアニメーション、時間差表示、cubic-bezierのタイミング関数、そしてprefers-reduced-motionへの対応を実装例で解説。
Webレター・パーソナルメッセージの品質保証フロー。コンテンツファースト、キーボード操作可能性、見出し構造の正確性、画像の代替テキスト、prefers-reduced-motion対応、音声の操作性を含むチェックリスト。
ポートフォリオサイトのアクセシビリティ監査。セマンティックHTML要素（header、nav、main）の採用、見出し階層の一貫性、キーボード操作を想定したリンク記述の改善を具体例で解説。
ウェブサイトの文字を拡大したときに、説明が隠れたり重なったりしていないか確認する方法を解説。設定の手順から、相談する際のメモの取り方まで、HP運営者向けの実践ガイド。
そのほかの #生成AI ピックアップ
【「おこ助AI」実演デモ】プロ向け字幕・音声ガイド制作ツール機能説明会（無料）
イベント 開催予定
MASC がリリースしたバリアフリー字幕・音声ガイド制作ソフト「おこ助AI」の機能説明会と実演デモ。AI による自動文字起こし、ハコ割・原稿整形、自動スポッティングなど、制作効率化の機能を紹介。字幕・音声ガイド制作に携わる映像制作者・放送事業者向け。
EU域内でWebサービス・アプリを提供する企業が対応すべきアクセシビリティ関連法制（EAA・WAD・雇用平等指令）と、WCAG基づく実装方法、EU主要国の罰則・執行事例を解説。AI画面開発におけるアクセシビリティ要件化の必要性も論じる。
聴覚障害がある著者が、AIとの音声会話を通じて思考を整理し、記事を執筆する方法について述べている。発音練習と自己表現の両立、AIとの関係性（主導権は自分にある）、事実とフィクションの境界を大切にすることについて。
視覚に障害のある著者が Claude Code と協働してスクリーンリーディングアプリを開発した過程と、AI による支援技術開発の可能性を述べる。
医療ラベルの読みやすさ問題を検証。指示文を読める人でも投与量を計測できない。AI が生成した図解が投与量を数え間違える問題を複数モデルのチェック（Concord）で解決。70言語対応。
世界のアクセシビリティ・支援技術トレンド。AI活用とプライバシー保護の課題、障害者が主導する設計への転換、新しい支援ガジェットなど、複数のニュースをキュレーション。