勉強記録#2 2023.5.13(土)

今日学んだこと

• アクセシビリティについて

• 見出しの構造をわかりやすく、つながりを意識する

• CSS 画像のalt設定のポイントについて

アクセシビリティについて

アクセシビリティ：「アクセスのしやすさ」のこと
Webサイトの見やすさや使い勝手など、幅広い要素を含んだ言葉です。
全ての人が（不自由な人も含め）閲覧しやすいWebサイト作りが必要です。

ポイント

1. 見出しの構造をわかりやすく、つながりを意識する

2. 画像のaltを適切に設定する

1.見出しの構造をわかりやすく、つながりを意識する

”コンテンツ情報がわかりやすくなり、閲覧の導線を明確にすることで、ユーザーがアクセスしやすくなる。”ことが目的です。

ポイントは、見出しに紐づく情報（見出し）の階層を意識する！
→情報の重要度を考える

例えば、<h1>→<h3>の構造はつながりがないため✖️
<h1>→<h2>と段階を踏んで見出しをつけることが重要です。

確認ツールは2つ！
・Markup Validation Service
・Heading Map

The W3C Markup Validation Service

HeadingsMap

Heading Mapでは、HPの見出しのHTMLドキュメントの「HTML5アウトライン」や「見出し構造」のナビゲートマップを表示してくれるものです。
これで、見出し構造を確認します。

いろんな企業のHPやサービスのHPなど、Headig Mapで見てみると面白いと思います！

2.画像のalt属性を適切に設定する

alt属性とは、HTMLのimg要素やinput要素で画像・写真を表示させる際、その画像の代替テキストを指定するための属性です。

代替テキストを指定することで、画像が表示できないブラウザなどでアクセスした際に、画像の代わりにテキストで内容が表示されます。

alt属性を設定することで得られるユーザーのメリット

• ユーザーが音声読み上げ機能を使用した際に読み上げられる

• 通信状態が悪い場合に画像の内容を補完できる

この2つがメリットとして挙げられます。
視覚障害を持っている方や高齢者の方は、Webページの内容を理解するために音声読み上げ機能を利用します。

しかしながら、テキストを読み上げることができたとしても、画像の内容までは詳細に伝えられません。画面を見るのが困難な人にとっては、画像内容を理解するのは難しいと言えます。

そこで役立つのが、alt属性の画像をテキストに代替する役割です。alt属性を記述すればテキストを音声で読み上げることができるので、ユーザーが画像内容を理解する手助けになります。

引用：https://www.willgate.co.jp/promonista/alt/#altSEO

alt属性を記述するメリットとは？SEO効果や記述のコツを解説 | ウィルゲート

alt属性の設定のポイント

• altは基本必須

altは基本必須の設定で、説明しなくてもいい場合でも
alt=""と設定する必要があります。

• 画像の説明ではなく、機能を説明する場合もある

【ロゴにホームにつながるリンクがある場合】
alt="ロゴ"　　🙅‍♂️
alt="ホーム"　🙆‍♀️

• 存在しない英単語は使わない

造語は禁止！

• 隣接する説明文（テキスト）と意味が重複する場合は空タグで良い

alt=""でよい

• 会社名、サービスの名称等は適切に設定する

例えば、
Twitter　　　🙆‍♀️　→　twitter　　　🙅‍♂️　
Facebook　   🙆‍♀️　→　facebook　   🙅‍♂️
Sony　　　　🙆‍♀️　→　SONY　　　🙅‍♂️　（サービス名は大文字）
Sonyは特に勘違いしがちですが、実はSONYではないんです！
会社名は厳密に定められているため、正規の表記を従う必要があります。

終わりに

このように、alt属性の設定にはアクセシビリティを高めるために、
適切にaltを設定することや見出しを正しく設定することが重要です。

今まで、altを意識することや見出しの構造を意識することはありませんでしたが、全ての人に閲覧してもらいやすいWebサイト作成が重要だということを学びました！