为动态加载的内容设置屏幕阅读器

Question

我有一个包含邮政编码测试框的表单。当我在文本框中输入邮政编码时，它会呈现一个包含城市建议的下拉列表（例如 90005 应该给出两个城市的列表）。当我打开屏幕阅读器并在文本框中输入邮政编码时，它会公布邮政编码，但不会自动从下拉列表中公布城市建议。我使用 aria-live 来实现这一点，但它不起作用。 ProgressIcon 中的 aria-label 也没有公布。这是我到目前为止所拥有的。 CityError 正在发布。但是，ShowSelection、ProgressIcon 和 DropdownOptions 尚未公布。

<>
  <ProgressIcon
    isDisplay={showFetchProgress}
    aria-live={'assertive'}
    aria-label={'City and State are being fetched.'}
  >
    <LoadingIcon size={'small'} />
  </ProgressIcon>
  <CitySuggestionWrapper
    isOpen={showSuggestions}
    aria-live={'assertive'}
    error={error}
  >
    <DropdownOptionsWrapper
      aria-expanded={showSuggestions}
      error={error}
    >
      {cityStates &&
        cityStates.map((item: any) => {
          return (
            <DropdownOptions
              key={item.city}
              id={item.city}
              onMouseDown={() => selectItem(item, dispatch)}
            >
              <a
                role={'button'}
                tabIndex={0}
                onKeyDown={(event) => keyPressSelectItem(event, item)}
              >
                {displayCityAddress(item)}
              </a>
            </DropdownOptions>
          );
        })}
    </DropdownOptionsWrapper>
    {error && (
      <CityError
        data-test={DataTestAttributes.CITY_ERROR}
        role={'alert'}
        aria-live={'polite'}
      >
        {getCityValidationText(cityField)}
      </CityError>
    )}
  </CitySuggestionWrapper>
  <ShowSelection
    isShow={showAddress}
    aria-live={'assertive'}
  >
    {displayCityAddress(selectedCity)}
  </ShowSelection>
</>

Answer 1

您尝试在此处实现的模式是一个 具有列表自动完成功能的可编辑组合框。

任何交互式组件都需要向用户（和屏幕阅读器）传达其如何工作。例如，一旦你开始打字，事情就会发生。

这是通过提供ARIA角色（如

combobox

）和属性（如

aria-autocomplete="list"

）来实现的。

aria-autocomplete

属性

指示输入文本是否可以触发显示用户对

combobox

、

searchbox

或

textbox

的预期值的一个或多个预测，并指定如果进行预测，将如何呈现预测。

尚不清楚问题中的组件使用哪些角色、属性和状态。必要的都在模式的描述中解释了。

A Live Region 更适合与用户操作不直接相关的公告。它无意或无法管理对组件行为的期望。它能够宣布所包含组件的状态变化。