What is the best way to make an accessible Yandex Map?

Question

css

<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>

There is such a map, for optimization purposes it is loaded only when clicked, and because of this, a person from the keyboard could not initially load it. I wrapped it with a button, but then I found out that you can't nest a div in a button :). And now I see only two options: 1) Replace the div with a span and add a d:block (what's the difference of course xs) 2) make a button out of the div. Tell me how best to do it?