按钮上的角色="presentation" 在 Firefox 和 Internet Explorer 中不起作用

Question

我有下面的html结构

<ul role="presentation" >
  <li>
    <button aria-hidden="true" role="presentation" ng-click="onButtonClick()"> Edit</button>
  </li>
</ul>

即使属性 role="presentation" 存在，屏幕 reader 仍然能够读取 Firefox 和 Internet Explorer 中的编辑按钮。不过 Google Chrome 没问题。请说出上面的 HTML 片段有什么问题。

Answer 1

我认为它的阅读是因为它对 reader 可见。您是否在按钮中尝试过 aria-hidden="true"？

Answer 2

现在更多的是评论而不是答案，因为它不包含解决方案。

我会说 Firefox 和 IE 是正确的，因为规范说

If an element with a role of presentation is focusable, user agents MUST ignore the normal effect of the role and expose the element with implicit native semantics

另外2.4 Fourth rule of ARIA use:

Do not use role="presentation" or aria-hidden="true" on a visible focusable element .

Using either of these on a visible focusable element will result in some users focusing on 'nothing'.

Do not do this:
<button role=presentation>press me</button>
Do not do this:
 <button aria-hidden="true">press me</button>
Note: If an interactive element cannot be seen or interacted with, then you can apply aria-hidden, for example:
  button {visibility:hidden}

  <button aria-hidden="true">press me</button>

按钮上的角色="presentation" 在 Firefox 和 Internet Explorer 中不起作用

role="presentation" on button not working in firefox and internet explorer

html

screen-readers

wai-aria