Как мне изменить </div> CreateReactApp для повышения доступности Интернета? - PullRequest
Новая
       78

Как мне изменить </div> CreateReactApp для повышения доступности Интернета?

0 голосов
/ 03 августа 2020

При создании приложения React с помощью create-response-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 предлагает заменить <div> на Semanti c HTML или назначить роль WAI-ARIA атрибут к нему (кстати, у Lighthouse также есть флаги исходной настройки, чтобы не включать область ориентира, заголовок или skiplink ).

Короче, мне интересно, следует ли мне изменить <div id="root"></div> в этом файле для удобства. Если да, то какой тег или роль Semanti c HTML мне следует использовать?

Ответы [ 2 ]

1 голос
/ 03 августа 2020

Вы не должны его менять. Помните, что инструменты автоматического тестирования тупые . Они могут видеть, что у вас есть div, и предполагать, что это должно быть что-то со значением semanti c, но они не могут быть уверены.

Предположительно, код React заполнит этот div семантами c элементы (например, nav и main). Это обеспечит semanti c, необходимые для доступности.

Обратите внимание, что расширение VS Code, на которое вы ссылаетесь, похоже, предназначено для проверки состояния c HTML. Это не будет полезно для страницы, созданной на стороне клиента JS.

0 голосов
/ 03 августа 2020

Вы можете попробовать основной тег вместо div и проверить, решает ли он вашу проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...