reactjs - 如何使用下拉选项在选择组件上正确设置 aria-labels

Question

我正在尝试在“选择”下拉列表中设置 aria-labels 和辅助功能设置

我有一个通过选项映射的选择组件。对如何设置咏叹调标签并以正确的方式连接它们有点困惑。他们需要互相指出吗？喜欢下拉菜单本身及其替代方案吗？

<StyledSelect
        key={JSON.stringify(eventTypes)}
        data-attr="eventType"
        error={item.errors && item.errors.noEvent && item.errors.noEvent[0]}
        onChange={e => onChange(e, item)}
        placeholder={intl.formatMessage(generalMessages.incident)}
        value={`${item.updates.eventType || ''}`}
        formatValue={val => eventTypes.find(type => type.id === val)
        && i18nFormat.membersEventTypes
          .getNameForType(intl, eventTypes.find(type => type.id === val))}
        variant="round"
      >
        {eventTypes
          .map(type => (
            <Option key={`${type.name}_${type.id}`} value={`${type.id}`}>{i18nFormat.membersEventTypes.getNameForType(intl, type)}</Option>
            // <Divider key=sch{`${key}_divider`} />
          ))}
      </StyledSelect>

所以我需要在组件内使用 aria-labels，但是我需要指向/引用父级吗？

Answer 1

为了让事情变得更清楚，辅助技术需要对您的选择进行标记。但如果有多种方法可以实现此目的，您应该仅使用其中一种。

使用 more 不会使你的 DOM 无效，因为它不会破坏你的应用程序，但这有点像试图同时朝两个方向转动轮子，我不确定屏幕阅读器如何处理那个。

实现此目的的第一种方法是简单地使用 label 元素。
我个人喜欢这个，因为它的优点是可以让有视力的用户轻松识别选择目的，并且可以根据需要使用图标和文本的组合。

<label htmlFor="my-select">Colors</label>
<SelectComponent id="my-select" value="red">
  <option key="color_red">Red</option>
  <option key="color_green">Green</option>
  <option key="color_blue">Blue</option>
  <option key="color_yellow">Yellow</option>
</SelectComponent>

在标签内带有select的变体:

<label>
  Colors
  <SelectComponent value="red">
    <option key="color_red">Red</option>
    <option key="color_green">Green</option>
    <option key="color_blue">Blue</option>
    <option key="color_yellow">Yellow</option>
  </SelectComponent>
</label>

Safari 上的 VoiceOver 会这样读取:

如果您不想使用无关元素，只需使用 aria-label 属性即可。请注意，如果附近没有上下文，可能很难知道 select 指的是什么。

<SelectComponent aria-label="Basic colors" value="red">
  <option key="color_red">Red</option>
  <option key="color_green">Green</option>
  <option key="color_blue">Blue</option>
  <option key="color_yellow">Yellow</option>
</SelectComponent>

最后，您可以将元素引用为标签。

<span id="my-element">Colors</span>
<SelectComponent aria-labelledby="my-element">
  <option key="color_red">Red</option>
  <option key="color_green">Green</option>
  <option key="color_blue">Blue</option>
  <option key="color_yellow">Yellow</option>
</SelectComponent>

虽然如果您的 DOM 中已有相关元素并且您不想创建无关元素，这会很方便，但我不会将其用于表单元素。

表单标签具有预期的行为(例如，单击时聚焦相关元素)，您需要在元素上重新实现这些行为，这是一项繁琐的任务。

当我有一个 div role="region" 且其中包含有意义的 header 时，我倾向于使用此选项。