使表的行或单元格被表读取为可单击的 [英] Make table row or cell be read by a table as clickable

问题描述

我正在处理一个我想提高其可访问性的表，但事实是，该表是使用具有"onClick"字样的表行创建的.属性，并使用诸如VoiceOver，NVDA或JAWS之类的屏幕阅读器读取单元格和表格时，该行不会读取为可点击行，也不会显示任何告诉用户单击该行将其转到另一页的符号.

Hi i'm working on a table that i want to improve it's accesibility, but the thing is that it was created with the table rows having the "onClick" attribute and when reading the cells and table with a screen reader such as VoiceOver, NVDA or JAWS it doesn't read the row as clickable or any sign that would tell the user that clicking that row would take him to another page.

该表是由JQuery Datatables动态创建的，该表的片段如下所示:

The table is created dynamically by JQuery Datatables and a snippet of the table is like this:

<div id="DataTables_Table_1_wrapper" class="dataTables_wrapper" role="grid">
  <table
    class="list lista table table-bordered table-hover dlaList component-editable dataTable"
    data-editable-id="dla28475"
    style="width: 900px"
    id="DataTables_Table_1"
  >
    <thead>
      <tr role="row">
        <th
          class="sorting"
          tabindex="0"
          rowspan="1"
          colspan="1"
          style="width: 230px"
        >
          Activities
        </th>
        <th
          class="sorting_asc"
          tabindex="0"
          rowspan="1"
          colspan="1"
          style="width: 570px"
          aria-sort="ascending"
        >
          Description
        </th>
        <th
          class="sorting"
          tabindex="0"
          rowspan="1"
          colspan="1"
          style="width: 100px"
        >
          Status
        </th>
      </tr>
    </thead>
    <tbody role="alert" aria-live="polite" aria-relevant="all">
      <tr class="odd" onclick="functionForEvent();">
        <td class="">
          <div class="input-sm" status_id="undefined">Blah Blah</div>
        </td>
        <td class="sorting_1">
          <div class="input-sm" status_id="undefined">Blah blah</div>
        </td>
        <td class="">
          <div class="input-sm" status_id="undefined">blah blah</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

我目前创建的解决方案是添加一个< a</a> 围绕每个< td> ，因此使屏幕阅读器说链接"但我看到其他表格说可点击"不需要链接，但是我不知道它们是如何通过查看HTML来实现的，它们似乎只是带有onClick on tr元素的常规表.

The solution that i created for the moment is to add an<a></a> sorrounding each <td> therefore making the screen reader say "link" but i have seen other tables saying "clickable" without needing a link, but i don't know how they did it by looking at the HTML, they just seem to be regular tables with onClick on tr elements.

这里的一个坏兆头可能是角色".属性破坏了我已阅读的语义，该表不是我创建的，因此我不知道是否可能.

A bad sign here could be the "role" attribute breaking the semantics as i have read, the table wasn't created by me so therefore i don't know if that could be the case.

推荐答案

前言

向OP致歉如果该行旨在将人们带到另一个页面，则此答案中可能有一些误导之处.

Preword

Apologies to OP there are a few things in this answer that may be misleading if the row is meant to take people to another page.

首先对于选项1和2 ，将< button> s替换为< a> .不需要事件监听器或 onclick ，因为锚可以完成所需的所有操作.

Firstly for options 1 and 2 below swap <button>s for <a>. There is no need for an event listener or onclick as anchors do everything that is needed.

对于选项3 ，我将在解释该内容的文本上添加一些额外的内容.

For option 3 I would add a little extra bit to the text that explains this takes you to a new page.

如果您选择将列文本用作可访问文本(即不要用 aria-label 覆盖)，则应添加 aria- describeby 并添加一个，单击以在新页面中打开"的段落.

If you opt for using the column text as the accessible text (i.e. don't override with aria-label) then you should add aria-describedby and add a paragraph that says ", click to open in new page".

<p id="newPageText" class="visually-hidden">(new page)</a>

<tr class="odd" tabindex="0" aria-describedby="newPageText">
        <td class="">
          <div class="input-sm" status_id="undefined">Blah Blah</div>
        </td>
        <td class="sorting_1">
          <div class="input-sm" status_id="undefined">Blah blah</div>
        </td>
        <td class="">
          <div class="input-sm" status_id="undefined">blah blah</div>
        </td>
      </tr>

然后将其显示为"Blah Blah，Blah Blah，Blah Blah，单击以在新页面中打开"适用于屏幕阅读器.然后，这将填充屏幕阅读器由于无法使用锚点而将以语义(我们丢失)读出的信息

This would then read "Blah Blah, Blah Blah, Blah Blah, click to open in new page" for screen readers. This then fills in the information that a screen reader would read out with semantics (that we lose) by not being able to use an anchor

您没有听到任何通知的原因是您的行不清晰.

The reason your aren't hearing any announcement is that your rows are not focusable.

项目必须是可聚焦的，以便发出点击通知.

An item must be focusable in order for there to be a click announcement.

添加 tabindex ="0" 将为键盘用户解决此问题，对于鼠标用户，您应添加 cursor:pointer 和 .tr:hover {} 规则添加到您的CSS.

Adding tabindex="0" will fix this issue for keyboard users, for mouse users you should add cursor: pointer and .tr:hover{} rules to your CSS.

不过，还有更好的选择，如下所述.

However there are better options as detailed below.

让整行都可点击不是最好的主意.

Having a whole row clickable is not the best idea.

但是，它仍然比我在不要做的事情" 部分中详细介绍的一些其他选项更为可取，因此我将其作为下面的第三个选项.

However it would still be preferable to some other options that I detail in "what NOT to do" section so I have included it as the third option below.

从预期的行为和可访问性与实施时间的角度来看，这里有从最佳到最坏的几种选择(第二种选择是最佳选择，但可能需要花费很多精力来实现).

Here are a few options from best to worst in terms of expected behaviour and accessibility vs time to implement (the second option is the optimal one but may take a lot of effort to implement).

在该行的开头(或更合适的话，在其末尾)添加一列，并在该列中添加< button> 来执行操作.

Add a column to the start (or end if more appropriate) of the row and add <button> into that column to perform the action.

删除该行上的点击处理程序，并将其附加到< button> 上(也将其更改为JavaScript中的事件监听器，而不是内联的 onclick 使维护更容易).

Remove your click handler on the row and attach it to the <button> (also change it to an event listener in your JavaScript rather than an inline onclick to make maintainability easier).

在此按钮内，我们为屏幕阅读器用户/仅文本浏览器用户添加了一些视觉上隐藏的文本，以使行关联清除.

Within this button we add some visually hidden text for screen reader users / text only browser users to make the row association clear.

我建议视觉上隐藏的文本，因为它仍然是

I recommend Visually hidden text as it is still far more robust than aria-label sadly (although things are getting better!) and has the added benefit of working all the way back to ie6 (although if your site works in IE6 you are better than me! :-) )!

您可以在服务器上可见的< span> 中构建字符串，也可以通过JavaScript进行构建.

You can build the string within the visually hidden <span> on the server or build it via JavaScript.

如果有一个特定的列具有唯一性/描述性足以知道您正在编辑的内容，则不需要包含所有行信息.由于不知道您的数据，我仅在示例中添加了所有三列的文本.

It does not need to contain all of the row information if there is a particular column that is unique / descriptive enough to know what you are editing. I have only added all 3 columns' text to the example as I do not know your data.

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<table>
<tbody>
      <tr class="odd">
       <td>
           <button>
               Perform Action
               <span class="visually-hidden">
                   Column 1, Column 2, Column 3
               </span>
           </button>
       </td>
        <td class="">
          <div class="input-sm" status_id="undefined">Column 1</div>
        </td>
        <td class="sorting_1">
          <div class="input-sm" status_id="undefined">Column 2</div>
        </td>
        <td class="">
          <div class="input-sm" status_id="undefined">Column 3</div>
        </td>
      </tr>
    </tbody>
    </table>

这是所有设备上最可靠的方法，并且易于实现，这就是为什么它是最高推荐的原因，但是它增加了很多制表符，如果您有时间实现网格，那么它不是最佳选择模式

使用 role =" grid" 并遵循网格模式.

Use role="grid" and follow the grid pattern.

role ="grid" 具有良好的屏幕阅读器支持，并且在语义上最合适.

role="grid" has good screen reader support and is the most semantically appropriate role.

这里需要做更多的事情，因为您需要启用键盘控制，例如使用箭头键等.

There is a lot more required here as you need to enable keyboard controls such as the use of arrow keys etc.

然后，您将在页面上添加一个视觉上隐藏的段落，其中显示单击以编辑".并为其指定一个 id (例如 id ="editedit" ).

You would then add a visually hidden paragraph on the page that says "click to edit" and give this an id (e.g. id="editText").

然后在每个< td> 上添加 aria- describeby ="editText" ，以便< td> 阅读其内容，然后点击单击以进行编辑".

Then on each <td> you would add aria-describedby="editText" so that the <td> would read it's contents followed by "click to edit".

这时，您只需在JavaScript中添加事件监听器即可监听点击(而不是具有内联的 onclick 属性.)

At this point you just add an event listener in your JavaScript to listen for clicks (rather than having inline onclick attributes.) This answer should give you an idea of how to add an event listener to each <td> if you are unsure.

W3C示例

没有我的例子，因为这种方法需要的工作量超出了Stack Overflow答案所能证明的范围！呵呵.但是，如果您可以使其成为可重用的组件，则是在整个站点上重用的一种很好的模式.它的主要优点是仅引入了一个制表位.

将 tabindex ="0" 添加到< tr> .

这将使行成为可聚焦的，然后宣布可点击".当用户通过键盘将行聚焦时.

This will make the row focusable and then announce "clickable" when the user focuses the row via keyboard.

对于使用屏幕阅读器的鼠标用户，仍然不会有任何点击通知，但这就是 cursor:指针和 .tr:hover {} 的用途(更改光标，并确保在视觉上清楚可见，这是在鼠标悬停时带有一些可见指示器的区域，这是一个可点击的区域.

For mouse users who use a screen reader there will still be no click announcement but that is what cursor: pointer and .tr:hover{} are for (change the cursor and also ensure visually it is clear this is a clickable region when hovering with the mouse with some visible indicator).

聚焦时，所有行列都将被逐行读取为文本，这可能不合适，因此您可能希望添加 aria-label 作为浏览器中的替代支持它.

All the row columns will get read out one after the other as the text when it is focused, this may not be appropriate so you might want to add an aria-label as an override in browsers that support it.

请确保您将 tr:focus 指示器的样式设置为可见并清除(如果这样做).

Make sure you style your tr:focus indicator to be visible and clear if doing this.

tr:hover{
   cursor: pointer;
   background-color: #cccccc;
}
tr:focus{
   border: none;
   outline: 2px solid #333;
   outline-offset: 2px;
}

<table
    class="list lista table table-bordered table-hover dlaList component-editable dataTable"
    data-editable-id="dla28475"
    style="width: 900px"
    id="DataTables_Table_1"
  >

    <tbody>
      <tr class="odd" tabindex="0">
        <td class="">
          <div class="input-sm" status_id="undefined">Blah Blah</div>
        </td>
        <td class="sorting_1">
          <div class="input-sm" status_id="undefined">Blah blah</div>
        </td>
        <td class="">
          <div class="input-sm" status_id="undefined">blah blah</div>
        </td>
      </tr>
    </tbody>
  </table>

以上是最简单的修复程序，但由于引入了许多制表位，因此从可访问性的角度来看并不理想.虽然在只有几行的表上仍然可以使用.

从语义上讲，这不是正确的和无效的HTML.这会导致某些屏幕阅读器出现问题.

This is not semantically correct and invalid HTML anyway. It would cause issues with some screen readers.

如果您试图警告屏幕阅读器表格中的更改，请询问另一个问题，详细说明您要宣布的更改，我将为您提供帮助.

If you are attempting to alert screen readers to changes in a table ask another question detailing what changes you are trying to announce and I will help you with that.

此刻，它将开始在页面加载时以及进行任何更改时读取表.即使您仅添加一行等，它也会再次读取整个表，并且可能会在每次应用过滤器时读取整个表.您可以想象，对于屏幕阅读器用户来说，这将成为一场噩梦！

At the moment it will start reading the table on page load and with every change. It will also read the whole table again even if you just add a row etc. and will probably read the whole table every time you apply a filter. As you can imagine for a screen reader user this would become a nightmare!

对于依赖 Tab 键进行导航的键盘用户(即非屏幕阅读器用户)，这将是一场噩梦.

This would be a nightmare for keyboard users who rely on the Tab key to navigate (i.e. non screen reader users).

您添加了太多不必要的制表位，因此页面可能无法使用.

You add so many unnecessary tab stops the page may become unusable.

1. 如果表很长，而您最终使用选项1或3(为每行添加一个制表位)，请确保在表之前有一个 skip链接.
如前所述，
2. 删除 role =" alert" 和 aria-live =" polite" .
3. 使用可排序的列标题，最好在触发排序功能的< th> 内添加< button> 内置等状态.
4. 从< div> 删除 role =" grid" -如果您选择的是< table> 使用该模式(我给的选项2).
5. 使用事件处理程序代替 onclick 属性-只是有关性能和可维护性的一般提示-与可访问性无关！

1. If the table is very long and you end up using option 1 or 3 (adding a tab stop for each row) make sure there is a skip link before the table.
2. Remove role="alert" and aria-live="polite" as mentioned earlier.
3. with your sortable column headers you would be better adding a <button> within the <th> that triggers the sort function, it comes with all your focus states built in etc.
4. Remove role="grid" from the <div> - this should sit on the <table> instead if you use that pattern (option 2 I gave).
5. Use event handlers instead of onclick attribute - just a general tip for performance and maintainability - nothing to do with accessibility!

这篇关于使表的行或单元格被表读取为可单击的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！