我应该如何更改 CreateReactApp 的 <div id="root"></div> 以增加 Web Accessibility？答案

【问题标题】：How should I change <div id="root"></div> of CreateReactApp to increase Web Accessibility?我应该如何更改 CreateReactApp 的 <div id="root"></div> 以增加 Web Accessibility？
【发布时间】：2020-08-03 14:50:24
【问题描述】：

使用create-react-app创建React App时，会生成public/index.html文件如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- <meta>, <link>, <title> here -->
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div> <!-- Can this be made more accessible? -->
  </body>
</html>

<div id="root"></div> 行通过了 eslint jsx-a11y/strict 插件的验证，但VSCode Web Accessibility plugin 建议用Semantic HTML 替换<div>，或者为其分配WAI-ARIA role 属性（顺便说一句，Lighthouse 也有将原始设置标记为不包含 landmark region, heading or skiplink)。

简而言之，我想我是否应该修改此文件中的<div id="root"></div> 行以方便访问。如果是，我应该使用哪个语义 HTML 标记或角色？

【问题讨论】：

lighthouse 不应标记您的应用程序，这可能与您的问题中的根 div 问题无关，因为 lighthouse 检查呈现的页面。你有一个公共 URL，所以我可以帮助你完成这部分吗？就容器而言，昆汀的回答是正确的，可以保留为 div，假设您的应用程序的其余部分正确使用语义元素，它不会影响可访问性。
@GrahamRitchie 虽然它没有完全运行，但tafalk.com 是我运行 Lighthouse 报告的地方，并以The page does not contain a heading, skip link, or landmark region 的身份获得审计，详细信息为Failing elements: html。如果有帮助，源代码位于：github.com/tafalk/tafalk-web
是的，所以这是一个单独的问题，您需要一个跳过链接 (webaim.org/techniques/skipnav) 并且您需要在顶层实现标志性区域，例如标题 (developer.mozilla.org/en-US/docs/Web/HTML/Element/header)、主要 (@987654330 @) 和页脚 (developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) 等。请参阅 developer.mozilla.org/en-US/docs/Web/HTML/Element“内容分段”标题。这些必须是顶级的（所以你的<div="root"> 的直接子级。
@GrahamRitchie 非常感谢，应用skiplink 和main 地标是真正的交易；无需更改生成的代码。

标签： html reactjs accessibility create-react-app wai-aria

【解决方案1】：

你不应该改变它。请记住，自动化测试工具是愚蠢的。他们可以看到你有一个 div 并猜测它应该是具有语义意义的东西，但他们不能确定。

据推测，React 代码将使用语义元素（例如 nav 和 main）填充该 div。这将提供可访问性的语义需求。

请注意，您链接到的 VS Code 扩展似乎旨在测试静态 HTML。它对使用客户端 JS 生成的页面没有用处。

【讨论】：

【解决方案2】：

扩展上一个答案并澄清一下：就我而言，我根本没有使用“主”标签。

我的应用程序在 TopNav 和 Footer 组件之间使用了一个样式化的 div 作为 AppContainer。

<Router>
    <TopNav />
    <SideBar />
    <AppContainer>
        <Switch>
            <Route exact path="/" component={HomePage} />
        </Switch>
    </AppContainer>
    <Footer />
</Router>

我只是不得不改变

const AppContainer = styled.div`[...]`

到

const AppContainer = styled.main`[...]`

【讨论】：

【解决方案3】：

您可以尝试使用 main 标签而不是 div 并检查它是否解决了您的问题。

【讨论】：

main 应该仅保存页面的主要内容，而不是所有内容。如果它应该包含所有内容，那么它就没有必要存在了，因为我们已经有了body。