这里的解决方案取决于操作应该做什么。
重构触发转换的动作
由于此操作将用户带到新路线,因此它应该是链接元素,<a>
而不是按钮。这为辅助技术/屏幕阅读器用户提供了一个线索,即交互会将他们带到应用程序中的某个新位置。
这可以重构为 Ember 中的链接,它将内容包装在<a>
:
{{#link-to someRoute}}
<div> more content </div>
{{/link-to}}
someRoute
如果需要通过多条数据通知它,它可能是一个计算属性。否则,它可能是一个字符串。
重构让您保持在同一页面上的交互
如果该操作没有将您带到其他页面,则使用<button>
. 这方面的一个示例是展开可折叠容器或切换设置的按钮。但是,w3 验证器告诉我们不能将 div 放在按钮内。您可以使用非交互式的短语内容,例如。<span>
<button class="some-class" onclick={{action "toggleSomething"}}>
<span> more content </span>
</button>
学到更多
要在应用程序中发现更多可访问性问题,请尝试使用ember-a11y-testing来审核您的应用程序的问题并为您提供如何解决问题的报告。
这个问题作为“我可以问一个问题”第 2 季第 3 集的一部分得到了回答。如果您希望看到我们完整地讨论这个答案,您可以在此处观看视频:https ://youtu.be/nQsG1zjl8H4