辅助功能：使用触发按钮向下拉菜单添加视觉标签
Accessibility: adding visual labelling to a dropdown menu with a trigger button
我正在构建一个包含日期输入字段和时间下拉选择器的用户表单。它需要可访问并符合 WCAG。
我认为如果我们有一个视觉标签来伴随表单控件，对于有视力的用户来说会更直观。
为了让屏幕 reader 用户能够访问视觉标签中的内容，我需要明确 link 表单控件的标签。
由于下拉菜单不是搜索字段下拉菜单，它只有一个触发按钮。
代码沙箱：
https://codesandbox.io/s/competent-solomon-3nm8pe?file=/src/App.js:394-1066
期望的行为：
使用屏幕 reader，用户将导航到开始时间下拉菜单，屏幕 reader 将宣布：'菜单按钮，子菜单，开始时间，12:00 PM' 或类似的内容。我们希望获得视觉标签以及下拉菜单的当前值。
问题：
当按钮包含文本内容时，NVDA 等屏幕 reader 不需要任何进一步的标签，因为通常没有必要。添加更多标签，导致屏幕 reader 公告不按预期运行。比如读取了aria-label或者aria-labelledby的内容，不读取按钮里面的内容。对于按钮角色，屏幕 readers 似乎不支持这种行为。
示例：
{/* works: start time, edit field, blank */}
<label id="form-label-4">Start date</label>
<input type="date" aria-labelledby="form-label-4"></input>
{/* does not work: start time, button */}
<label id="form-label-2">Start time</label>
<button aria-labelledby="form-label-2">12:00 PM</button>
{/* works, but not the desired effect: button, 13:00 PM. end time */}
<label id="form-label-3">End time</label>
<button aria-describedby="form-label-3">13:00 PM</button>
{/* does not work: button, start time */}
<button aria-label="Start time">13:00 PM</button>
怎样才能达到预期的效果？
问题是您试图为按钮组件分配标签和值，但这不是按钮的设计目的 - 它意味着有标签和可能的状态（例如，用于切换按钮）。您已经创建了一个按钮菜单，其行为类似于 select-only 组合框，但在语义上不是组合框。
在我看来，你有两个选择：
Re-write 开始时间和结束时间按钮菜单作为 select-only 组合框。您可以参考 WAI-ARIA Practices example 以了解此组件在屏幕 reader 上的行为方式 reader。
您可以将第二个 non-visible 标签添加到带有所选时间的按钮，然后 link 使用 aria-describedby 将其添加到按钮。这将按您想要的顺序公布标签、角色和值：
<label id="form-label-2">Start time</label>
<label id="form-label-3">12:00 PM<label>
<button aria-labelledby="form-label-2" aria-describedby="form-label-3">12:00 PM</button>
我正在构建一个包含日期输入字段和时间下拉选择器的用户表单。它需要可访问并符合 WCAG。 我认为如果我们有一个视觉标签来伴随表单控件，对于有视力的用户来说会更直观。 为了让屏幕 reader 用户能够访问视觉标签中的内容，我需要明确 link 表单控件的标签。
由于下拉菜单不是搜索字段下拉菜单，它只有一个触发按钮。
代码沙箱： https://codesandbox.io/s/competent-solomon-3nm8pe?file=/src/App.js:394-1066
期望的行为：
使用屏幕 reader，用户将导航到开始时间下拉菜单，屏幕 reader 将宣布：'菜单按钮，子菜单，开始时间，12:00 PM' 或类似的内容。我们希望获得视觉标签以及下拉菜单的当前值。
问题：
当按钮包含文本内容时，NVDA 等屏幕 reader 不需要任何进一步的标签，因为通常没有必要。添加更多标签，导致屏幕 reader 公告不按预期运行。比如读取了aria-label或者aria-labelledby的内容，不读取按钮里面的内容。对于按钮角色，屏幕 readers 似乎不支持这种行为。
示例：
{/* works: start time, edit field, blank */}
<label id="form-label-4">Start date</label>
<input type="date" aria-labelledby="form-label-4"></input>
{/* does not work: start time, button */}
<label id="form-label-2">Start time</label>
<button aria-labelledby="form-label-2">12:00 PM</button>
{/* works, but not the desired effect: button, 13:00 PM. end time */}
<label id="form-label-3">End time</label>
<button aria-describedby="form-label-3">13:00 PM</button>
{/* does not work: button, start time */}
<button aria-label="Start time">13:00 PM</button>
怎样才能达到预期的效果？
问题是您试图为按钮组件分配标签和值，但这不是按钮的设计目的 - 它意味着有标签和可能的状态（例如，用于切换按钮）。您已经创建了一个按钮菜单，其行为类似于 select-only 组合框，但在语义上不是组合框。
在我看来，你有两个选择：
Re-write 开始时间和结束时间按钮菜单作为 select-only 组合框。您可以参考 WAI-ARIA Practices example 以了解此组件在屏幕 reader 上的行为方式 reader。
您可以将第二个 non-visible 标签添加到带有所选时间的按钮，然后 link 使用
aria-describedby将其添加到按钮。这将按您想要的顺序公布标签、角色和值：
<label id="form-label-2">Start time</label>
<label id="form-label-3">12:00 PM<label>
<button aria-labelledby="form-label-2" aria-describedby="form-label-3">12:00 PM</button>