問い合わせフォームのアクセシビリティ監査で見つかった問題を、セマンティックHTMLの書き方で直した過程を記した記事である。label と input の結び付け、fieldset と legend によるグループ分け、画像の alt の付け方を扱っている。
シェアックリップ
シェアされたアックリップです。
そのほかの #フォーム ピックアップ
読み込み中の表示でレイアウトを動かさず、次に何をすべきか、失敗したときにどうするかを伝える方法を React で示す記事。aria-busy や role の使い分けも解説する。
Liquitousが2026年10月に行ったアクセシビリティ向上の取り組みを報告する。フォーム部品をデザインシステムの部品に置き換えたこと、読み上げ用の文言の多言語対応、入稿画面にコンテンツのチェック機能を組み込んだことなどが書かれている。
フォームの入力エラーで、どの欄をどう直すかを案内する方法を、申込みフォームを例に解説している。エラー文から該当欄へ移れること、直す以外の入力を残すことを挙げ、WCAG 2.2のエラー特定と修正の提案に触れている。
JIS X 8341-3の改正でベースとなる規格がWCAG 2.2へ移る予定を受け、タップ領域やフォーム入力、フォーカス表示など追加される達成基準の要点を整理した記事。縦書きや改行、IME入力など日本語特有の配慮も扱う。
スクリーンリーダーを使う視覚障害のある筆者が、支払い方法の登録フォームで遭う障壁をまとめた記事。有効期限の入力欄、請求先住所の選択、既定のカードの設定の3点で、読み上げが合わず操作できない例を挙げる。
Webサイトのアクセシビリティを検証する7つの観点を示した記事である。キーボード操作、セマンティックなHTML、コントラストとズーム、フォーム、代替テキスト、動的なコンポーネント、自動チェックと手動QAの併用を扱う。
そのほかの #代替テキスト・alt ピックアップ
W3Cの資料をもとに、画像の役割を決めてから代替テキストを考える方法を解説している。絵本の紹介に添える画像を例に、AIに画像と前後の文章を渡して代替テキストの案を作ってもらう相談文も示している。
READMEやドキュメントに載るアニメーションGIFや短い動画の代替テキストの書き方を解説する。アニメーションが示す結果を書き、画面上に表示される文字を含める。装飾的な動きには空の代替テキストを付ける。
Webサイトのアクセシビリティを検証する7つの観点を示した記事である。キーボード操作、セマンティックなHTML、コントラストとズーム、フォーム、代替テキスト、動的なコンポーネント、自動チェックと手動QAの併用を扱う。
ソフトウェアのドキュメントに載せるスクリーンショットの代替テキストの書き方を解説する記事である。画像の目的から書き始め、画面の状態を書くこと、手順の情報を画像の中だけに置かないこと、装飾的な画像には空の代替テキストを使うことを扱う。
AIで作ったLPを公開する前に確かめる7項目を紹介する記事。W3C WAIのEasy Checksを基に、ページのタイトル・代替テキスト・見出し・コントラスト・文字の拡大・キーボード操作・フォームを点検する。
画像を見ることが難しい人に内容を伝える代替テキストを、AIに文案として頼む前に、そのページで伝えたい意味を一行で決めておく方法を紹介する。装飾画像に空のalt属性を使う判断にも触れている。
そのほかの #スクリーンリーダー ピックアップ
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
フロントエンド入門連載の一回で、セマンティックなHTMLが支援技術に意味を伝える仕組みと、キーボードだけで操作できるかをPlaywrightで点検する方法を、Vueのコード例で解説する。
スクリーンリーダーを使う筆者が、タスクを断念させられた3つのバリアを紹介する。銀行の口座一覧で情報が読まれないこと、オンライン診療の操作ボタンが見つからないこと、チャットの入力欄が読み取り専用のまま動かないことが例に挙がる。
サイトワールド2026で行われた、NVDAと役立つアドオン・AI活用術をテーマにしたイベントの音声を公開したことを伝えている。視聴後のアンケートへの協力を呼びかけている。
Windows用の無料のスクリーンリーダーNVDAの日本語版2026.3jpのリリースを伝えている。処理速度の改善や点字ディスプレイの修正など、本家版と日本語版の主な変更点を挙げている。
WAI-ARIAのロールをJavaScriptで動的に変えても、スクリーンリーダーが更新を読み上げないことがある理由を解説する。アクセシビリティツリーの更新が非同期に行われる仕組みを説明し、ライブリージョンやフォーカス移動による対策を示す。