#reactjs #react-native #modal-dialog #accessibility
#reactjs #реагировать-родной #модальный диалог #Специальные возможности
Вопрос:
В настоящее время я получаю эту ошибку от axe:
Document does not have one main landmark.
Затем я помещаю основной ориентир туда, где он необходим, а затем axe говорит:
Document has more than one main landmark.
Это структура:
<main>
<p> some text </>
</main>
<form>
<PopupModalFromBootstrap isVisible={isVisible} />
</form>
Проблема с тегом main возникает только тогда, когда модальный виден.
Когда модальный не виден, я не получаю эту ошибку.
Я попытался поместить тег буквально во все возможные места кода, и всякий раз, когда модальный виден, я продолжаю получать одно из обоих сообщений об ошибках. Есть какие-нибудь предложения? Спасибо.
Комментарии:
1. что такое выводимый HTML, трудно помочь, не видя, что я боюсь.
Ответ №1:
Я не эксперт в этом, поэтому прошу прощения, если я ввожу вас в заблуждение, но, согласно статье Университета Dequeue, чтобы помочь программам чтения с экрана в обработке страницы, базовая структура должна быть следующей.
<header role="banner">
<p>Put company logo, etc. here.</p>
</header>
<nav role="navigation">
<ul>
<li>Put navigation here</li>
</ul>
</nav>
<main role="main">
<p>Put main content here.</p>
</main>
<footer role="contentinfo">
<p>Put copyright, etc. here.</p>
</footer>
Итак, разметка, которую вы включили выше, должна выглядеть примерно так.
<main role="main">
<p> some text </>
<form>
<PopupModalFromBootstrap isVisible={isVisible} />
</form>
</main>
Кажется довольно излишним добавлять role="main"
<main>
тег, и в этой статье говорится, что на данный момент это просто подход с поясом и фигурными скобками, и что в будущих рекомендациях по доступности это не понадобится.