时间戳

首页 > 解决方案 > 从反应组件的 HTML 中删除“role=banner”？

javascript - 从反应组件的 HTML 中删除“role=banner”？

问题描述

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

<header role="banner" class="pf-c-page__header">

但是，此标头从一个名为 的导入反应组件呈现PageHeader，其返回方法如下所示：

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

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

例如，我可以在此处添加一些可以删除“role=banner”HTML 属性的内容吗？

    return (
      <PageHeader
      />

标签： javascripthtmlreactjsheaderaccessibility

解决方案

role="banner"的规范规定，假设您有嵌套（或）小节，您可以拥有多个banner元素：documentapplication

因为documentandapplication元素可以嵌套在 DOM 中，所以它们可能有多个banner元素作为 DOM 后代，假设每个元素都与不同的document节点相关联，或者通过 DOM 嵌套（例如，documentwithin document）或通过使用aria-owns属性。

所以你可以在嵌套document标签中插入你的反应组件

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

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

推荐阅读