accrefs

Webアクセシビリティの参考資料まとめ

カラーモード

代替テキスト・alt

WPDS - Alt text

ワシントンポストのデザインシステムで規定されている alt テキストのルール。img 要素や svg 要素での実装例だけでなく、どんな時に alt= が良いのか、キャプションと alt の違い、画像の種類別の alt の書き方、リンク、絵文字、句読点、ハッシュタグなど、細かに説明されている。

UXライターが挑戦！画像のALT即興ライティング大会

SmartHR 社の UX ライター 3 人が、出されたお題（画像）の alt 属性値を即興で考える様子を配信した動画。お題は 3 つあり、1 つ終わるごとに同社のアクセシビリティスペシャリストによる講評が行われた。

alt属性をよくわかっていなかった私が代替テキストを書けるようになった話

alt 属性は HTML の img 要素に付随して、代替テキストを提供する。代替テキストを適切に設定することで、画像が読み込めない場合やスクリーンリーダーで利用される場合にアクセシビリティを向上できる。代替テキストを書く際には、画像がなくても文意が同等であり、読み上げ時に内容が通じるように心がけることが大切だ。

altは入ってれば良い訳じゃない！？alt勉強会を開催

note のデザイナー沢登氏がアクセシビリティ勉強会を開催し、画像の alt 属性について共有している。今回の勉強会では、エンジニア・デザイナー向けに alt 属性の正しい使い方を学び、適切な alt を選ぶ方法や注意点を共有した。社員への意識の浸透が求められ、アクセシビリティ向上を目指していく。

コンテンツ作成時のアクセシビリティのチェックポイント〜だれでも読みやすい記事への道

記事の音声読み上げ機能が理解できないことにショックを受け、note ではアクセシビリティ研修を企画している。研修では、画像の alt テキスト設定、リンクの工夫、タイトル・見出し・映像・PDF の配慮が重要だ。アクセシビリティは障害者や高齢者だけでなく、すべての人のためのものである。

STUDIOを使って、アクセシブルなWebサイトを作ってみた：その3。STUDIO PARTNERSとaltテキスト編｜いっちゃの雑記｜note

STUDIO を使ったアクセシブルな Web サイト制作において、alt テキストの設定が重要であることを説明している。alt テキストは、画像を視覚的に見ることができない人や環境に対応するための「代替テキスト」として、スクリーンリーダーなどの支援技術を利用するユーザーにとって必要不可欠なものであるとされている。

代替テキスト決定ツリーの使い方

2019 年 6 月 1 日に開催された「CSS Nite LP62『Web アクセシビリティの学校』特別授業」のセッションの 1 つ、澤田望氏の『代替テキスト決定ツリーの使い方』のフォローアップ。スライドと動画が公開されており、代替テキストには多様性があることの発表に対してさまざまな意見が寄せられたとのこと。岡山の勉強会「リーダブルな夜」の紹介も書かれている。

地図の代替テキストを考える

「冗長な alt テキストは過分であり、意味がある画像に空の alt テキストは不充分、その間を探らないといけない」をテーマにしたツイートのまとめ。画像付近に画像を説明する十分なキャプションがある場合でも、画像の alt 属性値は空にしない方がいいのかどうか、当事者の声も一緒にまとめられている興味深い一本。

グラフや図解の説明テキスト — Accessible & Usable

グラフや図解の alt 属性値は情報量が多くなり認知負荷が高くなる恐れがあること、構造化されたテキストを提供することが望ましいこと、セマンティックな説明をグラフや図解に隣接して配置し、必要に応じて折り畳んで展開できるようにすることが推奨されている。

altはつけるだけじゃなくて

2003 年に公開と古いものながら 2020 年に加筆修正され、多くの人がいまなお参照している、alt の考え方を示す日本語テキストの原典的な存在。