1.1.1 について調べたことのアウトプット。
筆者はアクセシビリティー勉強中ですので、内容については WCAG などを当たって確認してください。

達成基準 1.1.1 非テキストコンテンツ

利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている。ただし、次の場合は除く:
コントロール、入力
非テキストコンテンツが、コントロール又は利用者の入力を受け付けるものであるとき、その目的を説明する名前 (name) を提供している。(コントロール及び利用者の入力を受け入れるコンテンツに関するその他の要件は、Success Criterion 4.1.2 を参照。)
時間依存メディア
非テキストコンテンツが、時間に依存したメディアであるとき、テキストによる代替は、少なくとも、その非テキストコンテンツを識別できる説明を提供している。(メディアに関するその他の要件は、ガイドライン 1.2 を参照。)
テスト
非テキストコンテンツが、テキストで提示されると無効になるテスト又は演習のとき、テキストによる代替は、少なくともその非テキストコンテンツを識別できる説明を提供している。
感覚的
非テキストコンテンツが、特定の感覚的体験を創り出すことを主に意図しているとき、テキストによる代替は、少なくともその非テキストコンテンツを識別できる説明を提供している。
CAPTCHA
非テキストコンテンツが、コンピュータではなく人間がコンテンツにアクセスしていることを確認する目的で用いられているとき、テキストによる代替は、その非テキストコンテンツの目的を特定し、説明している。なおかつ、他の感覚による知覚に対応して出力する CAPTCHA の代替形式を提供することで、様々な障害に対応している。
装飾、整形、非表示
非テキストコンテンツが、純粋な装飾である、見た目の整形のためだけに用いられている、又は利用者に提供されるものではないとき、支援技術が無視できるように実装されている。

用語を理解する

非テキストコンテンツ

プログラムによる解釈が可能な文字の並びではないコンテンツ。
画像、コントロール、音声、動画、絵文字や AA、顔文字など

コントロール・入力

ボタンやフォーム要素（テキストフィールド、チェックボックス、ラジオボタンなど）

時間依存メディア

動画、オーディオ、ライブストリーミング、アニメーション(GIFなど)、スライドショーなど、時間の経過に依存して内容を理解できるメディアのこと。

テスト

ヒアリングテスト、視覚テストなど

感覚的

特定の感覚的な体験 = 楽器の演奏や芸術など感覚に訴えるようなコンテンツ
特定の感覚的な体験 (specific sensory experience)

CHAPTHA

コンピュータと人間を区別するためのテストのこと
歪んだ文字を表示して入力したりするやつ

装飾、整形、非表示

装飾用のボーダー画像や、デザインを調整するための透明な画像など情報を提供せず、機能性も備えていないもの。
純粋な装飾 (pure decoration)

達成するメリット

テキストは要求に合わせて様々な方法で表現できる。聴覚に異常がある場合、テキストにより内容を理解出来、視覚に異常がある場合は音声による読み上げたり、点字に変換することができる。

達成するには

画像に alt 属性をつけて代替のテキストを用意する

img 要素の alt 属性を使用する

はるさめ.dev と記載されたロゴ画像の場合

<img src=“./logo.png” alt="はるさめ.dev”>

なお alt に「ロゴ」や「logo.png」のようなファイル名などでは有意義な情報を提供できず、代替のテキストとはならないことに注意
達成基準 1.1.1 及び達成基準 1.2.1 の失敗例－代替ではないテキストによる代替を使用している (ファイル名、プレースホルダーテキストなど)

他

コントロール・入力の除外

コントロールではアクセシブルな名前を提供することが求められている。(達成基準 3.3.2 ラベル又は説明)
名前が設定されている場合、代替のテキストを設定する必要はない。

以下の例では input と label を紐づけて input に名前を与えている。
また送信ボタンには画像を使っているので代替テキストを設定することでボタンに名前がつく。

```
<label for=“name-input">
  名前
</label>
<input id=“name-input” />
<button>
  <img src=“./save-icon.png” alt=“保存">
</button>

時間依存メディアの除外

時間依存メディアには映像もしくは音声の代替コンテンツを提供することが求められている。(ガイドライン 1.2 時間依存メディア)
代替コンテンツを利用するかを利用者が選択するので、メディアのタイトルを示すテキストを提供する。

<video aria-label=“アプリの操作説明動画” src=“./operation-instructions.mov” controls>
</video>

1.1.1 非テキストコンテンツを理解する(レベルA)について調べてみた