屏幕阅读器：让他们在关注表单的某个部分时阅读说明的最佳实践

Question

标记表单一部分的最佳做法是什么？

创建一个

<div tabindex="0">

似乎不是“好”方法。

我有一个包含不同部分的大表单，所有内容都在一个站点上（没有向导或其他东西）。

我猜使用屏幕阅读器的用户只是使用 TAB 在不同的输入之间导航，一旦他们到达表单的不同区域，我想解释一下它的含义。

有点像标记一个

div

，一旦他们到达该 div 中的输入 -> 读取一些内容。

只是一个简化的例子：

<form>
    <!-- some inputs about the company -->
    <h2>Company</h2>
    <div>
        <label for="company-name-input">Company Name</label>
        <input type="text" id="company-name-input">
    </div>
    <div>
        <label for="company-address-input">Company Address</label>
        <input type="text" id="company-address-input">
    </div>

    <h2>Contact Partners</h2>
    <!-- here are inputs about important person you can contact -->
    <!-- how do I notify users about this fact, when they just tab thought the form
         I read it's no good to add a tabindex="0" to the headline
     -->
    <div>
        <!-- person one -->
        <label for="person-email-1">E-Mail</label>
        <!--
            I could make a aria-label="Here is the email of your first person"
            but in case someone tabs here from below they might miss that..
            and always have a "Person nr X before each input might be strange as well
        -->
        <input type="email" id="person-email-1">

        <!-- all the other persons -->

        <button>Add Partner</button>
    </div>
</form>

当用户将输入集中在某个区域而不在每个输入中重复该信息时，让用户意识到他们正在为联系人编辑字段的最佳实践是什么？

Answer 1

<fieldset>

元素用于对表单中的相关数据进行分组。

<legend>

元素定义

<fieldset>

元素的标题。

<form>
    <!-- some inputs about the company -->
    <fieldset>
        <legend>Company</legend>
        <div>
            <label for="company-name-input">Company Name</label>
            <input type="text" id="company-name-input">
        </div>
        <div>
            <label for="company-address-input">Company Address</label>
            <input type="text" id="company-address-input">
        </div>
    </fieldset>
    <fieldset>
        <legend>Contact Partners</legend>
        <!-- here are inputs about important person you can contact -->
        <!-- how do I notify users about this fact, when they just tab thought the form
             I read it's no good to add a tabindex="0" to the headline
         -->
        <div>
            <!-- person one -->
            <label for="person-email-1">E-Mail</label>
            <!--
                I could make a aria-label="Here is the email of your first person"
                but in case someone tabs here from below they might miss that..
                and always have a "Person nr X before each input might be strange as well
            -->
            <input type="email" id="person-email-1">

            <!-- all the other persons -->

            <button>Add Partner</button>
        </div>
    </fieldset>
</form>