我应该如何更改 Create React App 的 <div id="root"></div> 以增加 Web 可访问性？

Question

使用 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>通过了eslintjsx-a11y/strict插件的验证，但是VSCode Web Accessibility plugin suggests replacing <div> with a Semantic HTML, or assigning a WAI-ARIA role attribute to it (Btw, Lighthouse also has a flags the original setup for not including a landmark region, heading or skiplink).

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

Answer 1

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

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

请注意，您 link 使用的 VS Code 扩展似乎旨在测试静态 HTML。它对使用 client-side JS 生成的页面没有用处。

Answer 2

扩展之前的答案并澄清：在我的例子中，我根本没有使用 'main' 标签。

我的应用程序在 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`[...]`

我应该如何更改 Create React App 的 <div id="root"></div> 以增加 Web 可访问性？

How should I change <div id="root"></div> of CreateReactApp to increase Web Accessibility?

html

accessibility

wai-aria

reactjs

create-react-app