离子按钮如何向屏幕阅读器宣布？

Question

目前，在使用 Cypress 编写端到端测试时，使用测试库，我注意到应用程序中通过 ionic 的

ion-button

呈现的一些按钮在按钮角色下找不到。

查看 DOM，我没有看到

role="button"

、

tabindex="0"

或其他任何内容表明应将其告知屏幕阅读器。在 Chrome 的辅助功能检查器中，按钮也没有显示名称（尽管按钮有文本内容）。

我也看不到使用

aria-live="polite"

将任何元素插入到 DOM 中，这是我所知道的强制向屏幕阅读器宣布某些内容的默认技巧。

综上所述，我本以为该按钮不会向屏幕阅读器显示，但事实确实如此。使用 Orca 进行测试，该按钮被正确地宣布为按钮，其名称为其文本内容。

所以这是怎么回事？ Ionic 是如何实现这一目标的？

Answer 1

来自文档：

按钮组件呈现原生按钮元素，这允许它 利用本机按钮提供的功能。

（强调我的）

...所以，你不应该期望在任何地方都能找到

role=button

和

tabindex=0

。这些属性是不必要的。如果您使用本机按钮元素，它们会自动设置。自动可访问性检查通常会用警告甚至错误来标记多余的角色和 tabindex 属性。

此外，本机按钮元素在获得焦点时将正确响应 ENTER/SPACE（生成单击事件），而如果使用 aria，您可能必须考虑监听特定的按键，然后生成合成单击事件，或者只是直接从按键事件处理程序调用点击处理程序。

关于名称，按钮与大多数 UI 控件一样，从其内部的文本节点派生出其可访问名称（包括与用作标签的

img

关联的替代文本）。否则，名称可以取自适当的 aria 属性，例如

aria-label

或

aria-labelledby

。

因此，原生按钮（例如

ion-button

的“胆量”提供的按钮）可以“免费”为您提供大量可访问性，而使用 aria 按钮角色则需要额外的工作。