Как лучше сделать доступную Яндекс Карту?

Question

[ZipZaper]

<article class="map">
        <div class="container">
            <h2 class="visually-hidden">Map</h2>
            <button aria-label="Load map." class="ymap-container">
                <div class="loader loader-default"></div>
                <div id="map-yandex"></div>
            </button>
        </div>
</article>

Есть такая вот карта, в целях оптимизации она грузится только при клике и из-за этого человек с клавиатуры изначально не мог загрузить ее. Я обернул ее кнопкой, но потом узнал что нельзя вкладывать div в button :). И теперь я вижу только два варианта: 1) Заменить див на спан и добавить д:блок (в чем разница конечно хз) 2) сделать из дива кнопку. Подскажите как лучше поступить?

Comments

[Lynn «Кофеман»]

Что мешает не вкладывать карту в кнопку, а положить рядом?
Или даже наоборот, положить кнопку в див для карты и удалить скриптом когда на неё нажмут и загружить карту.

[freeExec]

А зачем размещать карту в кнопке?

[ZipZaper]

Lynn «Кофеман», Рядом положить кнопку дизайн не позволяет. Если в див засунуть, то у .ymap-container стоит overflow:h. и не видно outline у кнопки. А если его убрать, то появляется неприятный блик из-за прелоудера

[ZipZaper]

freeExec, Карта подгружается при клике на контейнер, и чтобы можно было сфокусироваться на карту через клавиатуру(tab), то надо какой нибудь интерактивный эл. использовать

[freeExec]

ZipZaper, Вы объясняете зачем нужна кнопка, но не рассказываете зачем одно всовывать в другое.