可访问表单

标签

每个表单字段都应该有其自己的显式标签。label 标签通过 for 属性解决了这个问题，该属性将其与 form 元素相关联。

<form>
    <label for="yourName">Your Name</label>
    <input name="yourName" id="yourName">
    <!-- etc. -->

标签还有一个额外的好处是，视觉浏览器会渲染这些标签本身可点击，从而将焦点放在关联的表单字段上。

字段集和图例

您可以使用 fieldset 标签对字段进行分组，例如姓名（名、姓、中间名、称谓等）或地址（地址行 1、地址行 2、区、国家、邮政编码、国家等）。

在字段集中，您可以使用 legend 标签设置一个标题。

<form action="somescript.php" >
    <fieldset>
        <legend>Name</legend>
        <p>First name <input name="firstName"></p>
        <p>Last name <input name="lastName"></p>
    </fieldset>
    <fieldset>
        <legend>Address</legend>
        <p>Address <textarea name="address"></textarea></p>
        <p>Postal code <input name="postcode"></p>
    </fieldset>
    <!-- etc. -->

选项组

optgroup 元素将选项组合在一个选择框中。它需要一个 label 属性，该属性的值将显示为视觉浏览器下拉列表中的一个不可选的伪标题，位于该组之前。

<select name="country">
    <optgroup label="Africa">
        <option value="gam">Gambia</option>
        <option value="mad">Madagascar</option>
        <option value="nam">Namibia</option>
    </optgroup>
    <optgroup label="Europe">
        <option value="fra">France</option>
        <option value="rus">Russia</option>
        <option value="uk">UK</option>
    </optgroup>
    <optgroup label="North America">
        <option value="can">Canada</option>
        <option value="mex">Mexico</option>
        <option value="usa">USA</option>
    </optgroup>
</select>

导航字段

与链接一样，表单字段（和字段集）需要能够通过非指向设备（如鼠标）进行导航。用于简化链接导航的相同方法可以应用于表单元素——制表符停靠和访问键。

accesskey 和 tabindex 属性可以添加到单个表单标签（如 input）以及 legend 标签。

<input name="firstName" accesskey="f" tabindex="1">

有关更多信息，请参阅 可访问链接页面。