画像の代替テキスト見直し

[yasuda-shin]

概要

画像に対してalt指定を追加の対応をしている際にOK例やNG例は不要だったりと一部altの内容を見直す必要がありそうだったため対応しました。

対応箇所

• 1.3.3 感覚的な特徴だけで説明しない
• 1.4.1 色だけで伝えない
• 1.4.8 テキストの可読性を担保する
• 2.2.2 動く、自動更新するコンテンツに配慮する
• 2.2.4 コンテンツの更新を中断または延期できる
• 2.4.2 ページの主題がわかるタイトルを設定する
• 2.4.4 リンクの目的を理解できるようにする
• 2.4.8 現在位置を確認することができる
• 2.5.5 ターゲットのサイズを理解する
• 3.2.4 一貫した識別性を持たせる
• 3.3.5 状況に応じたヘルプが利用できる
• 3.3.5 HTMLの要素や属性を正しい役割で使用する

確認項目

• [x] コミットは適切にまとめられているか
• [x] Pull Requestの概要を適切に書いたか
• [x] レビュワーの指定をしているか
• [x] textlintを実行しエラーが出ていないか
• [x] Accessibility
  • [x] altは適切に設定したか(参考(1.1.1 画像に代替テキストを提供する))

参考リンク

Axess Lab | Alt-texts: The Ultimate Guide Alt-text - Stacks 代替テキストの付け方ガイド。参考までに。

[reg-suit[bot]]

reg-suit detected visual differences.

Check this report, and review them.

:red_circle::red_circle::red_circle::red_circle::red_circle:

:large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle:

What do the circles mean?

The number of circles represent the number of changed images.
:red_circle: : Changed items, :white_circle: : New items, :black_circle: : Deleted items, and :large_blue_circle: Passed items

How can I change the check status?

If reviewers approve this PR, the reg context status will be green automatically.

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit b8d2624):

https://ameba-a11y-guidelines--pr355-feature-image-alt-g3o58eni.web.app

_{(expires Fri, 16 Sep 2022 03:45:32 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[itsminadesu]

画像を全て貼るherablogさん、とてつもなくホスピーだ... 🙏🏻 （すみません、見ます）

[herablog]

自分で見るためでもありますが、Hera AIに作ってもらいました💪 (役立つならぜひ)