如何使用下拉选项在选择组件上正确设置 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

为了澄清一些事情，辅助技术需要给你select贴上标签。但如果有多种方法可以实现这一目标，则应该只使用其中一种。

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

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

<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：

<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请注意，如果附近没有上下文，可能很难知道 the 所指的是什么。

<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"当我有一个内部有有意义的标题时，我倾向于使用它。