Типовые элементы интерфейса — HTML — семантика и доступность

<div class="banner-container">
  <section
    class="promo-carousel"
    role="region"
    aria-roledescription="carousel"
    aria-label="Промо-блок"
  >
    <div class="banner-slider" data-carousel-track>
      <article class="slide" data-carousel-slide data-active="true" aria-hidden="false">
        <h2>Заголовок слайда</h2>
        <p>Краткое описание предложения.</p>
        <a class="button button--primary" href="#">Подробнее</a>
      </article>
      <article class="slide" data-carousel-slide data-active="false" aria-hidden="true">
        <!-- второй слайд -->
      </article>
    </div>

    <button type="button" class="nav-btn prev" data-carousel-prev aria-label="Предыдущий слайд">‹</button>
    <button type="button" class="nav-btn next" data-carousel-next aria-label="Следующий слайд">›</button>
    <div class="slide-indicators" data-carousel-indicators></div>
  </section>
</div>