WCAG が装飾的な画像を支援技術から隠してよいとする扱いを、使いすぎだと指摘する記事。画像が見る人の理解や印象に影響しうるため、支援技術から隠す前に、画像が何を加えているかを考えるべきだとする。
シェアックリップ
シェアされたアックリップです。
そのほかの #代替テキスト・alt ピックアップ
企業のSNSで写真に付ける代替テキストの書き方を3つのポイントで解説する記事。写真の主役と動作を書くこと、写真の意味が伝わる情報を加えること、SEO向けのキーワードを詰め込まないことを挙げる。
HTMLのimg要素を、alt属性がない、空白だけ、文字がある、の3つに分け、人が確認すべき候補を出すNode.jsの最小例を紹介する。適合の判定ではなく、装飾画像では空のaltが適切な場合もあると注意する。
ランディングページの画像について、alt属性の付け方を1分で点検する手順を示す記事。情報を伝える画像には内容を、装飾の画像には空のalt属性を付けるよう説明し、属性がない画像はスクリーンリーダーがファイル名を読み上げることがあると述べる。
noteの画像で、キャプションと代替テキスト(ALT)をどう使い分けるかを、売れ筋の有料記事371本の調査をもとに説明する記事。見える人への補足はキャプション、画像の代わりは代替テキストに書くという分け方を示す。
売れ筋の有料記事の画像941枚のうち代替テキストがあったのは71枚だったと示し、自分の記事の図にも説明が入っていなかった経緯を書く。公開前に説明を書いて数字を突き合わせ、公開後に空を数える5つの手順を紹介する。
noteの記事の図や写真に付ける代替テキストを、Claude Codeとスクリプトで調べた記録である。売れ筋の有料記事371本の画像941枚のうち、代替テキストがあったのは71枚だった。書くべきは図で伝えたい結論だと説明する。
そのほかの #WCAG ピックアップ
(引用)アクセシビリティを、デザインの基本に。 本書は、年齢や障害の有無、利用環境にかかわらず、あらゆるユーザーが必要な情報や体験を得られるよう、「アクセシビリティ」をデザインの初期段階から組み込むための考え方と実践を学べるハンドブックです。 日本でもデジタル庁がウェブアクセシビリティの導入を推進し、「誰一人取り残されない、人に優しいデジタル化」が目指されています。アクセシビリティは、一部の人のための特別…
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
イスラエルの障害者平等権規則と規格 IS 5568 AA(WCAG 2.1 AA 準拠)への適合を、ブラウザ上で動く JavaScript により自動的に確かめる方法を解説する記事。代替テキスト・見出し構造・コントラスト・言語と文字方向の確認項目を示す。
スマートフォンなどで押し間違えやすいボタンの大きさを扱った記事である。操作対象は 24×24 CSS px 以上にし、主要な操作では 44×44 CSS px を目安にすると説明する。アイコンの大きさは変えず、押せる範囲に余白を足す方法を示す。
会員登録フォームで自動入力が効くかを1分で確かめる方法を解説する記事。入力欄に autocomplete の値を付けて入力目的を伝える意味を、WCAG 達成基準1.3.5(入力目的の特定)の解説をもとに示す。
AIがアクセシビリティをレビューできる範囲は、ソースコードだけを読むか、実行中のブラウザーやaxe-coreの結果まで受け取れるかによって変わると整理する。WCAG適合と自動テストの合格は同じではないことも説明する。