屏幕阅读器：让他们在关注表单的一部分时阅读描述的最佳实践答案

【问题标题】：Screen reader: best practice to make them read descriptions when focus a section of a form屏幕阅读器：让他们在关注表单的一部分时阅读描述的最佳实践
【发布时间】：2021-05-20 07:17:42
【问题描述】：

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

创建<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>

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

【问题讨论】：

标签： html accessibility wai-aria screen-readers

【解决方案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>

【讨论】：