[1.1.1]代替テキストの付け方の説明を追加する

[tokimari]

https://openameba.github.io/a11y-guidelines/1/1/1/ に、代替テキストの付け方の説明のセクションを追加します。

• alt はつけるだけじゃなくて: https://web.archive.org/web/20190519044449/http://yuugop.com/articles/practicalaccessiblehtml/pah01.html
• 代替テキスト決定木: https://www.w3.org/WAI/tutorials/images/decision-tree/
  • 和訳: https://www.w3.org/WAI/tutorials/images/decision-tree/ja

これが参考になりそうです

[tokimari]

現行の

代替テキストの考え方について、altはつけるだけじゃなくて | 実践アクセシブルHTML 第一回という記事が参考になる。
広告の代替テキストについて

部分も追加するセクションに含む形でよさそう

[tokimari]

https://developer.apple.com/videos/play/wwdc2019/254/ このセッションも参考になるかもしれません。

[tokimari]

https://sawada-std-design.com/works/readable-na/readable-na-alt-decision-tree-20181105.pdf こちらもわかりやすいですね。

[tokimari]

#141 で @syasuda90 さんが決定木ツリー案を作成してくださってたんですが（そしてそっとclose）、確かにAmebaで参照するにはちょっとパターンが多すぎて実用のイメージが湧かないなというのもありありで・・再考したいなと思っています。

画像サンプルと設定例が一覧になって表示されているのがよさそうです。
リンクテキストのサンプルで、ものは違うんですがイメージはこれ。
https://smarthr.design/accessibility/link-text/#h3-0
めちゃくちゃわかりやすいです。

---

ここからはざっくり案でアレなんですが、Amebaでよくあるパターンに絞って書き起こすのはどうでしょうか。 @syasuda90 @itsminadesu @herablog 相談したいです！！！
あるいは、入稿用途、UI用途別に分けると利用者はわかりやすいかもしれません。

メモ程度にざっと思いつくのを挙げておきます。

1. 入稿でよくあるパターン

• バナー画像
• 画像＋テキスト
• 画像＋タイトル＋テキスト
• アイコン画像＋テキスト

これの見せ方イメージ：（esaに入稿レギュレーションの例があるんですが、slackの通知のコメントに貼りますw）

タイプ	イメージ	設定例
バナー画像	イメージ画像	バナー画像に書かれているテキスト
画像＋テキスト	イメージ画像	バナー画像に書かれているテキスト
アイコン画像＋テキスト	イメージ画像	必要なし

2. スタブロ、ヘルプでよくあるパターン

• 操作手順を伝える画像
• カバー画像
• バナー
• ...

2. UIでよくあるパターン

汎用的なもの

（Component化されがちなやつ・・語彙力・・）

• アイコン
• アイコン＋機能名
• 投稿画像＋タイトル＋テキスト
• 投稿画像＋タイトル
• ユーザー画像＋ユーザー名
• ユーザー画像のみ
• ...

グラフィック的なもの

（LPとか操作イメージとか、component化されないやつ・・語彙力・・（））

• 操作手順を伝える画像、アニメーション
• イメージ画像
• モーショングラフィック
• ...