Блог

В настоящее время я получаю эту ошибку от 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 возникает только тогда, когда модальный виден.
Когда модальный не виден, я не получаю эту ошибку.

Я попытался поместить тег буквально во все возможные места кода, и всякий раз, когда модальный виден, я продолжаю получать одно из обоих сообщений об ошибках. Есть какие-нибудь предложения? Спасибо.

Я не эксперт в этом, поэтому прошу прощения, если я ввожу вас в заблуждение, но, согласно статье Университета 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> тег, и в этой статье говорится, что на данный момент это просто подход с поясом и фигурными скобками, и что в будущих рекомендациях по доступности это не понадобится.