读取div的最后一个元素,而不是通过箭头键可访问性的第一个元素

问题描述 投票:0回答:4

阅读-页面加载一些文本,然后单击“否”,而不是“

<div>
    <div role="alert" aria-live="assertive"> Some text on page load</div>
    <div>
        <button> Yes</button>
        <button> No</button>
    </div>
</div>

阅读-页面加载一些文本,然后用No代替Yes

页面加载一些文本

您可以简单地切换元素的顺序,如下所示

<div>
<div role="alert" aria-live="assertive"> Some text on page load</div>
<div>
<button> No</button>
<button> Yes</button>
</div>
</div>

没有其他解决方案,只是交换两个按钮,如DILEEP THOMAS所建议。

屏幕阅读器的文档/浏览/虚拟光标始终按照可访问性树的顺序来读取内容,该树与DOM树大致相同。无法更改阅读顺序。如果要按特定顺序读取内容,则它必须以该顺序出现在树中。期间。

如果未以正确的顺序显示视觉上

,那么您有责任修复CSS以使其看起来像您想要的样子。但是,在这样做之前,请三思:为什么屏幕阅读器用户应该先阅读“否”,然后阅读“是”,而普通用户应该先在“否”之前看到“是”?

[通常,这是不良设计的信号,对所有用户而言都是不良设计的信号(无论您是否有眼光。)

还请注意,如果您使用CSS直观地交换按钮,

  • 取决于所使用的确切代码,某些屏幕阅读器会将您的CSS考虑在内,而其他屏幕阅读器则不会。大多数不会,但是您永远不能100%地确定。
  • 部分视障人士和仅使用键盘的用户仍然会遇到问题,因为制表符的顺序将是意外/不合逻辑的顺序,即西方文化的人们希望制表符的顺序从上到下,从左到右,而您的CSS代码必然意味着相反。对于最后一点,为tabindex使用0和-1之外的其他值是一个非常糟糕的主意(请对此问题我投反对票)。有关为什么的详细信息已经在网络上的许多地方讨论过。

您不能。

您的帖子被标记为nvdaaccessibility标签,那么可访问性是您所关心的。

WCAG guideline 2.4.3指出

如果网页可以顺序导航,并且导航顺序影响含义或操作,则可聚焦组件将以保留含义和可操作性的顺序获得焦点。

您必须创建一个logical tab order,这意味着如果您的语言阅读顺序​​是ltr(从左到右)。左边的元素应该放在右边的元素之前。

对于rtl(从右到左)语言,您必须按照从上到下,从右到左的顺序将元素放置在DOM中的顺序,并定义dir="rtl"属性。] >

如果按钮将通过tab而不是箭头导航,则可以使用tabindex进行相应排序。

<div>
<div role="alert" aria-live="assertive"> Some text on page load</div>
<div>
<button tabindex="2"> Yes</button>
<button tabindex="1"> No</button>
</div>
</div>
javascript html angular accessibility nvda
4个回答
0
投票

您可以简单地切换元素的顺序,如下所示


0
投票

没有其他解决方案,只是交换两个按钮,如DILEEP THOMAS所建议。


0
投票

您不能。


-1
投票

如果按钮将通过tab而不是箭头导航,则可以使用tabindex进行相应排序。

© www.soinside.com 2019 - 2024. All rights reserved.