屏幕 reader：让他们在关注表单的一部分时阅读说明的最佳做法

Question

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

创建 <div tabindex="0"> 似乎不是“好”方法。

我有一个包含不同部分的大表格，所有内容都在一个站点上（没有 wizzard 或其他东西）。我猜屏幕 reader 的用户只是使用 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>

屏幕 reader：让他们在关注表单的一部分时阅读说明的最佳做法

Screen reader: best practice to make them read descriptions when focus a section of a form

html

accessibility

wai-aria

screen-readers