您可以简单地切换元素的顺序,如下所示
阅读-页面加载一些文本,然后单击“否”,而不是“
<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直观地交换按钮,
您的帖子被标记为nvda
和accessibility
标签,那么可访问性是您所关心的。
如果网页可以顺序导航,并且导航顺序影响含义或操作,则可聚焦组件将以保留含义和可操作性的顺序获得焦点。
您必须创建一个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>
您可以简单地切换元素的顺序,如下所示
没有其他解决方案,只是交换两个按钮,如DILEEP THOMAS所建议。
如果按钮将通过tab
而不是箭头导航,则可以使用tabindex
进行相应排序。