在React条件渲染中添加role=“alert”的最佳实践

Question

我正在编写一个通知面板，我的辅助功能团队警告我必须为屏幕阅读器添加 role="alert"。

我的代码构造大致是这样的。

export const RootDialog: React.FC = (mode) => {
    return <Dialog footer ={
        <>
            {mode === "normal" && <SomeComponent someprop={mode}>}
            {mode === "success" && <NotificationSuccess someprop={mode}>}
            {mode === "error" && <NotificationError someprop=mode>}
        </>
    }></Dialog>
}

打开此对话框时，会根据模式添加组件。
我想知道哪一个对屏幕阅读器来说更好。

<div role="alert">
    {mode === "normal" && <SomeComponent someprop={mode}>}
    {mode === "success" && <NotificationSuccess someprop={mode}>}
    {mode === "error" && <NotificationError someprop=mode>}
</div>

或

<>
    {mode === "normal" && <div role="alert"><SomeComponent someprop={mode}></div>}
    {mode === "success" && <div role="alert"><NotificationSuccess someprop={mode}></div>}
    {mode === "error" && <div role="alert"><NotificationError someprop=mode></div>}
</>

首先，这个 RootDialog 不需要 mode="alert" 吗？

我在网上发现了关于这个问题的不同意见。 如果您碰巧知道可靠的文章或源代码示例，请告诉我。 任何建议将被认真考虑。预先感谢。

Answer 1

辅助功能团队警告我，某些屏幕阅读器无法读出渲染后添加了 role=alert 的 div

您的无障碍团队是正确的。屏幕阅读器通常不会支持动态添加具有

aria-live

的 DOM 元素或具有隐式 aria-live 的角色。您必须将新的 DOM 元素添加到现有的活动区域。

请参阅我在这两个问题中关于向实时区域添加内容的答案：

• 为什么 role="status" 属性无法正常工作？
• NVDA Chrome 在显示时会读取隐藏 div 内的锚文本两次