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

user_4636715 0
Viewed 3237

When creating a React App with create-react-app, it generates the public/index.html file as follows:

<!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>

The line <div id="root"></div> passes the validation of eslint jsx-a11y/strict plugin, but a 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).

In short, I wonder if I should modify <div id="root"></div> line in this file for the sake of accessibility. If yes, which Semantic HTML tag or role should I use?

create-react-app reactjs wai-aria accessibility html
3 Answers

You shouldn't change it. Remember that automated testing tools are dumb. They can see that you have a div and guess that it should be something with semantic meaning, but they can't be sure.

Presumably, the React code will populate that div with semantic elements (such as nav and main). That will provide the semantic needs for accessibility.

Note that the VS Code extension you link to appears to be designed to test static HTML. It isn't going to be useful for a page generated with client-side JS.

Dorward_190680

Try to change the div tag to the main tag in the index.html file like this

<main id="root"></main>

and then you can run google lighthouse test and see the accessibility metric

user_143503330

To expand upon the previous answer and for clarification: In my case, I had not used a 'main' tag at all.

My application was using a styled div as AppContainer, between the TopNav and Footer components.

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

I simply had to change

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

to

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