H91：HTMLのフォームコントロール及びリンクを使用する

概要

HTMLのフォームコントロールおよびリンクを使用して、すべてのユーザーがキーボードを使用してウェブコンテンツのすべての機能にアクセスできるようにすることを目指しています。このガイドラインは、特に障害を持つユーザーやマウスを使用できない状況でのアクセシビリティを向上させるために重要です。

このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。

適用（対象）

こちらは、次の達成基準に関連する達成方法です。

• 2.1.1 キーボード
• 4.1.2 名前（name）・役割（role）及び値（value）

実践的な方法

<a href="about.html">About Us</a>

<button type="submit">Submit</button>

<input type="button" value="Click Me">
<input type="submit" value="Save">
<input type="reset" value="Reset">

<label for="fruit">Type of fruit:</label>
<input type="text" id="fruit" name="fruit" value="bananas">

<label for="cheese">Cheese</label>
<input type="checkbox" id="cheese" name="cheese" checked>

<label for="option1">Option 1</label>
<input type="radio" id="option1" name="options" value="1" checked="checked">

<label for="option2">Option 2</label>
<input type="radio" id="option2" name="options" value="2">

<label for="numbers">Numbers</label>
<select id="numbers" name="numbers">
  <option value="one">One</option>
  <option value="two" selected="selected">Two</option>
  <option value="three">Three</option>
</select>

<label for="speech">Type your speech here:</label>
<textarea id="speech" name="speech" rows="4" cols="50">Four score and seven years ago</textarea>

<fieldset>
  <legend>Personal Information</legend>
  <label for="fname">First Name:</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name:</label>
  <input type="text" id="lname" name="lname">
</fieldset>

まとめ

H91は、HTMLのフォームコントロールおよびリンクを適切に使用することで、すべてのユーザーがキーボードを使用してウェブコンテンツのすべての機能にアクセスできるようにすることを目指しています。適切なHTMLタグの使用、ラベルの関連付け、リンクテキストの明確化、アクセスキーの設定を行うことで、アクセシビリティを向上させることができます。