使用 TABS 使 dom-repeat 可访问

Question

我有一个简单的元素，顶部有一个搜索字段，底部有一个 dom-repeat。当用户点击一个项目时，它将运行 _selected.

我的问题是这个元素现在必须用鼠标来使用。即使我拦截了 ENTER，我也注意到我无法使用 TAB 键访问项目。

你通常是怎么做的？

    <div class="card">
      <paper-input name="search" value="{{search}}"></paper-input>
      <hot-network manage-errors>
        <hot-ajax-paging from=0 per-page="10" pager-data="{{pagerData}}" current-page="{{currentPage}}">
          <iron-ajax id="aj" url="/stores/contacts?search={{search}}&{{queryParamsString}}" handle-as="json" last-response="{{data}}"></iron-ajax>
        </hot-ajax-paging>

        <template is="dom-repeat" items="{{data}}">
          <span on-tap="_selected" class="caption">{{item.firstName}} {{item.lastName}} {{item._joinCompanyName}} {{item.companyName}}</span>
          <hr/>
        </template>
      </hot-network>
      <hot-pager pager-data="{{pagerData}}" page="{{currentPage}}"></hot-pager>
    </div>
  </div>

Answer 1

看起来tabIndex是你需要的。

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

The tabindex global attribute indicates if its element can be focused, and if/where it participates in sequential keyboard navigation (usually with the Tab key, hence the name). It accepts an integer as a value, with different results depending on the integer's value:

Answer 2

正如@cnvzmxcvmcx 提到的，tabindex 将允许键盘用户导航到您的对象，但这不会自动允许您的对象上的键盘事件以便可以选择它。为此，您需要一个事件处理程序。听起来你正计划通过处理 ENTER 键。

另请注意，如果您使用 tabindex，则仅使用值 0 和 -1。由于您希望焦点移动到您的对象，请使用 0。不要使用大于 0 的值，因为这会打乱 Tab 键顺序。

如果您不使用原生 html，您还需要在您的对象上放置一个适当的 role。这将使屏幕 reader 知道它是什么类型的对象以及如何与之交互。它是按钮、复选框还是输入字段？（我猜是后者，因为你说的是搜索。）

您还需要一个与您的对象关联的适当标签，以便屏幕 reader 用户知道该字段的用途。在本机 html 中，对于输入字段，这是使用 <label for="id"> 元素完成的。对于自定义组件，您可能需要 aria-label.

使用 TABS 使 dom-repeat 可访问

Make dom-repeat reachable with TABS

javascript

css

polymer

accessibility

polymer-2.x