ウェブデザイン技能検定にてコード、タグの代替えの可否について問題が出されていることがあります。
以前の記事JIS (JIS X 8341-3)ウェブアクセシビリティの四つの原則について【ウェブデザイン技能検定 1級学科範囲】の内容に沿って、コードの意味を一つ一つ理解していれば間違えることがないかと思いますが、確認用として似た用途で使用されるコード例を紹介します。
label 要素
label 要素は、フォームコントロールに対するラベルを提供します。
アクセシビリティの観点から非常に重要でありスクリーンリーダーがフォームコントロールを識別しやすくする役割を持っています。
label要素の特徴
- スクリーンリーダーが読み上げることで、視覚障害者がフォームコントロールを理解しやすくします。
- フォームコントロールをクリック可能にし、ラベルをクリックすると対応する入力フィールドにフォーカスが移動します。
使用例:
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username">placeholder 属性
placeholder 属性は、入力フィールドの中に表示される短いヒントテキストを指定します。
これは、ユーザーがフィールドに何を入力すべきかを示すためのものです。
placeholder 属性の特徴
placeholder属性は、フィールドにフォーカスが当たると消え、ユーザーが入力を始めると完全に見えなくなるため、長期的なラベルとしては不適当です。- スクリーンリーダーでは、
placeholderテキストは必ずしもラベルの代わりに読み上げられないため、アクセシビリティが低下します。
正しい使用例:
<input type="text" id="username" name="username" placeholder="ユーザー名を入力してください">その他の似たような用途のタグ
aria-label 属性
説明: aria-label 属性は、アクセシビリティのために要素にラベルを提供します。スクリーンリーダーが読み上げる非表示のラベルとして機能します。
特徴: aria-label 属性は視覚的には表示されませんが、スクリーンリーダーが使用するため、視覚的なラベルとは異なります。
使用例:
<input type="text" id="username" name="username" aria-label="ユーザー名">title 属性
説明: title 属性は、要素に補足情報を提供し、マウスホバー時にツールチップとして表示されます。
特徴: title 属性は、ホバー時にのみ表示され、フォーカスを当てたときには表示されないため、ラベルとしては不適当です。
使用例:
<input type="text" id="username" name="username" title="ユーザー名を入力してください">画像周りでの alt 属性
説明: alt 属性は、画像 (<img>) タグに対して代替テキストを提供します。このテキストは、画像が表示できない場合や、視覚障害者がスクリーンリーダーを使用してウェブページを閲覧する場合に表示されます。
alt 属性の特徴
alt属性は画像が読み込まれない場合や、ユーザーが画像を表示しない設定にしている場合に、代替テキストとして表示されます。- スクリーンリーダーは
altテキストを読み上げるため、視覚障害者が画像の内容を理解できるようになります。
正しい使用例:
<img src="image.jpg" alt="これはサンプル画像です">まとめ
label要素は、フォームコントロールのラベルとして使用され、スクリーンリーダーのアクセシビリティを向上させます。
ラベルをクリックすることで対応する入力フィールドにフォーカスを移動させる機能もあります。placeholder属性は、入力フィールド内に短いヒントを表示するために使用されますが、長期的なラベルとしては不適当です。aria-label属性やtitle属性は、補足的な情報を提供するために使用されますが、label要素の代替としては適していません。- 画像周りでは、
alt属性を使用して代替テキストを提供し、視覚障害者が画像の内容を理解できるようにします。
これらのタグや属性を適切に使用することで、アクセシビリティの高いウェブコンテンツを作成することができます。
またウェブデザイン技能検定で出題されるだけでなく、使用用途に適したコードにすることで検索エンジンからも気に入られて順位が上がりやすくなったり、コンバージョンが上がりやすくもなりますので、知識としてもっておいて損はないでしょう。
