AIにReactのUIを生成させるとき、ロール・キーボード操作・コントラストの3項目を必ず答えさせるプロンプトの書き方を紹介する記事。ネイティブ要素を優先させることや、コントラスト比を数値で示させることなどを挙げる。
シェアックリップ
シェアされたアックリップです。
そのほかの #生成AI ピックアップ
【「おこ助AI」実演デモ】プロ向け字幕・音声ガイド制作ツール機能説明会（無料）
イベント 開催予定
MASC がリリースしたバリアフリー字幕・音声ガイド制作ソフト「おこ助AI」の機能説明会と実演デモ。AI による自動文字起こし、ハコ割・原稿整形、自動スポッティングなど、制作効率化の機能を紹介。字幕・音声ガイド制作に携わる映像制作者・放送事業者向け。
AIに画像の代替テキストを頼むときは、見た目を列挙するのではなく、その図で補いたい内容を渡すことを説明した記事。リンクから記事への矢印を説明文に残し、実際の操作結果ではないと本文で注記した例を挙げている。
画像の代替テキストは、写っているものを書く前に、情報・飾り・リンクのどの役割を担っているかを考えるべきだと説明した記事。空の代替テキストを使う場面や、AIへ依頼するときに役割を伝える方法も扱っている。
生成AIが作るフォーム部品のアクセシビリティを、モデル・指示文・評価の測り方の違いで比べた研究（PACE）を、著者が紹介する。自動チェックでは分からない、ラベルの意味やキーボード操作、エラーからの回復を確かめる必要を論じる。
Microsoft Teams のアクセシビリティ・アーキテクトで、ろう者である人物が、Copilot を使って利用者の体験から得た知見をコードの改善に結びつける様子を紹介する。本人によれば、数日かかっていた作業が10〜15分で済むようになったという。
そのほかの #React ピックアップ
React の単体テストに axe-core を組み込んで a11y を自動検査する方法を解説する記事。アイコンフォントの文字が名前とみなされて、名前の無いボタンが標準ルールで検出されないため、独自ルールで補っている。
メール送信後の状態（送信中・受付済み・期限切れなど）を、色に頼らず画面読み上げソフトにも伝わるようReactで実装する方法を解説する記事。状態を1つの値で管理し、通知の強さを使い分けることを示す。
テスト用の一時受信箱のような一覧にReactで検索と未読フィルタを付けるとき、アクセシブルに作る方法を解説する。読み込み中・該当なし・エラーの状態を分けて設計することや、件数の伝え方、フォーカスの保ち方を扱う。
自分のアプリの紹介サイトに置いた四つのアニメーション付きデモのコードを振り返り、同じ遅延処理が繰り返されている点や、動きを減らす設定（reduced motion）の確認を行っていない点を解説している。
Reactのフォーム部品の設計を、ラベルやメッセージ行などの共通の構造、react-hook-form と zod への接続、スマートフォンでの操作の3点から解説する。例には作者が開発するUIライブラリを使っている。
Fluent UIのReact v9とWeb Componentsが、Shadow DOMやPortal、ダイアログでフォーカスやキーボード操作をどう扱っているかを、公式ドキュメントとソースで確かめながら論じる記事である。UIライブラリの設計判断が主題である。
そのほかの #WAI-ARIA ピックアップ
マウスでは問題なく操作できるWebページが、キーボードでは使えなくなる典型的な箇所を解説する記事。クリックにしか反応しないdiv、フォーカスの枠の削除、固定ヘッダーの陰に隠れるフォーカス、ダイアログのフォーカス管理を扱う。
Four form components hold every form in our app, and writing this post found the one bug in them
記事 海外
アプリ「Nakodo」のフォーム部品の設計を解説する記事。失敗の通知と成功の通知で role を使い分ける理由と、入力欄の補足（ヒント）が入力欄に関連付けられておらず、スクリーンリーダーで読まれない不具合を扱う。
WordPressのヒーロースライダーで、画像をWebPに変換するだけでなく、優先読み込み・遅延読み込み・レイアウト確保を組み合わせ、表示されていないスライドをaria-hiddenで読み上げ対象から外す手法を解説する記事。
WordPressのヒーロースライダーの画像を、PNGからWebPに変えて合計約7.8MBから約316KBへ軽くした手順を解説する。あわせて、非表示のスライドを aria-hidden で読み上げの対象から外す方法と、Playwright による自動確認を紹介する。
モーダルダイアログのフォーカス管理を解説する記事。フォーカスをダイアログ内に閉じ込める実装と、閉じたあとに元の要素へ戻す挙動を扱う。HTML の dialog 要素を使えば、背景の操作を止める処理を自前で書かずに済むとする。
Fluent UIのReact v9とWeb Componentsが、Shadow DOMやPortal、ダイアログでフォーカスやキーボード操作をどう扱っているかを、公式ドキュメントとソースで確かめながら論じる記事である。UIライブラリの設計判断が主題である。
そのほかの #キーボード操作 ピックアップ
サロンなどサービス業の予約サイトを、情報設計・モバイル対応・予約フォーム・アクセシビリティなどの観点から解説する記事。アクセシビリティでは、セマンティックなHTMLとキーボードで操作できる部品を取り上げている。
ホームページのトップで自動的に切り替わる画像について、読む人が止めたり前の案内に戻ったりできるように見直す方法を解説する。停止やキーボード操作の確認手順、見学会などの重要な案内をスライドの外にも置く考え方を含む。
テスト用の一時受信箱のような一覧にReactで検索と未読フィルタを付けるとき、アクセシブルに作る方法を解説する。読み込み中・該当なし・エラーの状態を分けて設計することや、件数の伝え方、フォーカスの保ち方を扱う。
視神経萎縮などで見えにくさのある人がスクリーンリーダー・拡大表示・キーボード操作を使う前提で、開発者が最初に押さえたい基本をまとめた記事である。意味のあるHTML、ラベル、フォーカス管理、変化の知らせ方、テストの方法を扱う。
マウスでは問題なく操作できるWebページが、キーボードでは使えなくなる典型的な箇所を解説する記事。クリックにしか反応しないdiv、フォーカスの枠の削除、固定ヘッダーの陰に隠れるフォーカス、ダイアログのフォーカス管理を扱う。
クリックできる要素が <button> で作られているか、<div> などで代わりに作られていないかを確かめる方法を解説する記事である。<div> は、自分で補わない限り、Tab キーで移動できず、スクリーンリーダーにもボタンとして伝わらない。
そのほかの #カラーコントラスト ピックアップ
（引用）アクセシビリティを、デザインの基本に。 本書は、年齢や障害の有無、利用環境にかかわらず、あらゆるユーザーが必要な情報や体験を得られるよう、「アクセシビリティ」をデザインの初期段階から組み込むための考え方と実践を学べるハンドブックです。 日本でもデジタル庁がウェブアクセシビリティの導入を推進し、「誰一人取り残されない、人に優しいデジタル化」が目指されています。アクセシビリティは、一部の人のための特別…
HSLの明度が色相によって知覚的に揃わない問題を示し、sRGBの色をOKLCH色空間へ変換する関数と、WCAG 2.1のコントラスト比を計算して4.5:1を満たす明るさに自動で調整する関数をJavaScriptで解説する記事。
研修資料の文字と背景の色の組み合わせを、WebAIM Contrast Checkerで一組ずつ測る方法を解説する。入力の手順と、コントラスト比をWCAG AAの通常文字の基準に照らして読む方法を、架空の文例で示す。
色のコントラストを測る2つの方式、WCAG 2 のコントラスト比と APCA（Lc 値）の違いを解説する記事。WCAG 2 の計算の手順、達成基準ごとに必要な比率、WCAG 2 の限界と APCA の位置づけを扱う。法律や規格で使われているのは WCAG 2 のコントラスト比だと書いている。
デジタル庁のデザインシステム（DADS）を参考に、小さい文字やコントラスト比をウェブサイトで点検するAIエージェント向けスキルを紹介する記事。Pythonで候補を拾い、ブラウザで確かめ、人が判断する二段階の点検を解説する。
テキストと背景のコントラスト比が基準を下回ったときに、色相と彩度を保ったまま明度だけを二分探索で調整して補正候補色を求める方法を、WCAG 2.2の計算式とJavaScriptの実装で解説する。