いいから黙って代替テキストは入れておけ
2023/12/01
ygkn.icon
代替テキスト？
あ〜 <img alt="これ" > でしょ
もう書いてるよ！
本当にその代替テキスト合ってますか？
何に代替テキストをつけるか
なぜ代替テキストをつけるか
どんな代替テキストをつけるか
どうやって代替テキストをつけるか
こんなものにも代替テキスト
何に代替テキストをつけるか
非テキストコンテンツすべて
テキスト以外のメディア
写真 <img>、 <canvas>
動画 <video>、 <iframe>
音声 <audio>
グラフ <svg>
UI
アイコン <svg>、 <img>（<i>： <svg> や<img>にしませんか）
入力欄 <input>
ボタン<button>
リンク <a>
ページ <title>、 <iframe>、 <frame>
その他埋め込み <iframe>、<embed>、<object>
アニメーション <svg>（ <div>、<span>）
記号として使われている文字（必須を意味する *、空欄を意味する-）
そもそも記号を使わないことも考える
文字画像
そもそも文字でできないか考える
https://gyazo.com/2b4b7441caef1795e2fd1b7884dbe0b2
例外
テスト
リスニング試験
Q. Answer name: 🍎
感覚的体験を作り出すことを主な目的とするコンテンツ
インスト曲
絵画、彫刻
CAPTCHA
装飾的なもの
なぜ代替テキストをつけるか
→テキストはもっとも機械が読みやすい（マシンリーダビリティが高い）形式だから
マシンリーダビリティが高いので…
支援技術が使える！
スクリーンリーダー
点字ディスプレイ
対応していないブラウザで使える
昔のブラウザ
テキストブラウザ
検索が容易に
SEO
ドキュメントが読み込まれてたら読み込まれてるので
フォールバックになる
どんな代替テキストをつけるか
いいから黙ってまずは「代替テキスト決定ツリー」を見ておけ
よくない例
ファイル名
【⚙ 設定】の⚙に「歯車」、【+ 追加】の + に「プラス」と書いてある
【⚙ 設定】の⚙に「設定」、【+ 追加】の + に「追加」と書いてある
長すぎる代替テキスト
どうやって代替テキストをつけるか
img
<img alt="代替テキスト" />
<img alt="" />（無視する場合）
video、audio など
子要素。ダウンロードリンクを表示することも
code:html
<video controls width="250">
<source src="/media/cc0-videos/flower.webm" type="video/webm" />
<source src="/media/cc0-videos/flower.mp4" type="video/mp4" />
Download the
<a href="/media/cc0-videos/flower.webm">WEBM</a>
or
<a href="/media/cc0-videos/flower.mp4">MP4</a>
video.
</video>
<svg>
code:html
<svg role="img" aria-label="代替テキスト">...
<svg aria-hidden="true">... <!--無視する場合-->
<iframe>
code:html
インプット要素
<label class="visually-hidden" for="q">検索</label> <input type="text" name="q" id="q">
ページネーション
code:html
<nav aria-label="ページネーション"> <!-- メイン以外の nav には 名前が必要 -->
<ul class="pagination">
<li><a href=""><span role="img" aria-label="前のページへ">«</span></a></li>
<li><a href=""><span class="visuallyhidden">ページ</span>1</a><span class="visuallyhidden">へ</span></li>
<li aria-hidden="true">...</li> <!-- AOMから隠す -->
<li><a href=""><span class="visuallyhidden">ページ</span>98</a><span class="visuallyhidden">へ</span></li>
<li><a href="" aria-current="page"><span class="visuallyhidden">ページ</span>99</a><span class="visuallyhidden">へ</span></li>
<li><a href=""><span class="visuallyhidden">ページ</span>100</a><span class="visuallyhidden">へ</span></li>
<li><a href=""><span role="img" aria-label="次のページへ">»</span></a></li>
</ul>
</nav>
こんなものにも代替テキスト
X
記事
Markdown
Qiita
GitHub
note
Webは本質的にアクセシブルなものであり、アクセシブルにしなきゃいけないものです！
Web開発もWeb制作もポストも投稿もWebコンテンツオーサリングです！！！！
代替テキストを適切につけてWebをアクセシブルにしていきましょう！
もっと詳しく！
多分第2, 4章あたり
フォローアップ
table:視覚と支援技術
支援技術から見える 支援技術から見えない
視覚的に見える 普通の文字 aria-hidden="true" （装飾用のものなど）
視覚的に見えない visually-hidden (sr-only とも)（視覚では十分にわかるものなど） 要素が無い、display: none
みてみてね（参考資料）