Javascript 删除“；角色=横幅“；从反应组件的HTML？_Javascript_Html_Reactjs_Header_Accessibility

Javascript 删除“；角色=横幅“；从反应组件的HTML？

javascript html reactjs

Javascript 删除“；角色=横幅“；从反应组件的HTML？,javascript,html,reactjs,header,accessibility,Javascript,Html,Reactjs,Header,Accessibility,我得到一个可访问性错误，它告诉我“横幅地标包含在另一个地标中”。在我的例子中，它位于标题中，看起来像这样： return ( <header role="banner"> ... 但是，此标题从名为PageHeader的导入react组件呈现，其返回方法如下所示： return ( <header role="banner"> ... 返回( ... 仅仅通过修改我使用组件的JavaScript就可以阻止横幅的呈现吗？我认为我无法更

我得到一个可访问性错误，它告诉我“横幅地标包含在另一个地标中”。在我的例子中，它位于标题中，看起来像这样：

return (
    <header role="banner">
    ...

但是，此标题从名为

PageHeader

的导入react组件呈现，其返回方法如下所示：

return (
    <header role="banner">
    ...

返回(
...

仅仅通过修改我使用组件的JavaScript就可以阻止横幅的呈现吗？我认为我无法更改实际的组件

e、我可以在这里添加一些删除“role=banner”HTML属性的内容吗

    return (
      <PageHeader
      />

返回(

规范规定，如果您有嵌套的

文档

（或

应用程序

）子部分，则可以有多个

横幅

元素：

由于

document

和

application

元素可以嵌套在DOM中，因此它们可能有多个

banner

元素作为DOM子体，假设每个元素都通过DOM嵌套（例如

document

中的

document

节点）与不同的

document

节点相关联或者使用

aria拥有

属性

因此，您可以将react组件插入嵌套的

文档

标记中

<body>
 <header role="banner" class="pf-c-page__header">...</header>
 <div role="document">
    <header role="banner">...</header>
 </div>
</body>


...
...

这并不意味着您用于测试可访问性的工具将正确处理它。

您将此标题放在哪里

如果你把它放在另一个地标中（例如

或

），这就可以解释错误。你可以把

放在

中，但你只能对站点范围内的内容使用

角色class='banner'

，并且

将始终包含特定于给定页面的内容

或者标题本身被视为一个地标？向语义元素添加一个地标角色属性通常是不正确的。在某些情况下，

被视为地标角色

横幅

，如下所示：

辅助技术可以向用户传达标题的语义元素。此信息可以提供有关内容类型的提示元素，在本例中是“banner”，可以通过屏幕宣布当用户导航到标题元素时，读卡器软件 作用域为body元素。用户代理还可以提供导航到范围为body元素的header元素

（我的重点）

因此，

的语义可能与

横幅

角色的语义相同。因此，如果您的

的范围是页面（而不是页面中的一个部分），

角色=横幅

是不必要的，应该省略

相反，如果标题的范围是页面中的部分，则它（根据定义）不是“站点范围内的内容”，因此
横幅
角色也不应该存在
因此，在任何
元素上使用
role=banner
是不正确的。您可以联系组件的作者并指出这一点
使用
removeAttribute
，您可以动态删除属性-在Internet Explorer中使用此方法有一些注意事项-在删除属性之前，您可能必须将属性设置为“”
但是，一般来说，设置角色属性后不要乱动它们更安全。如果这样做，辅助技术可能会感到困惑。可能有一种方法可以在渲染之前从react中的元素中删除属性。这是最好的方法
如果您仍然希望在元素渲染后使用javaScript删除属性，我建议您在渲染后尽快删除，并在所有目标平台和辅助技术上进行正确测试

更好的办法是，联系组件的作者，并询问他们为什么他们总是把这个角色放在第一位。
只有在组件有一个API来公开它的情况下。
role=document
永远不会是另一个
文档的直接后代-ARIA规范指出应该在小部件或应用程序角色的上下文，因为它的主要功能是让屏幕阅读器切换（返回）当“应用程序模式”打开时，切换到“浏览模式”。很难想象任何嵌套文档都需要站点范围内的内容，尽管我认为这是可能的。@Brennayoung切换浏览模式时谈论的内容很有用，这不是这里的问题。嵌套文档的简单用例是iframe 或web co这是这里的问题。