html - 这种 wai aria 实践结构是否正确？

Question

这是代码：

<div class="carousel tab-bar">
<div class="carousel-container">
    <div class="carousel-wrapper" role="tablist">
        <div class="carousel-slide carousel-slide--active" role="group" aria-label="1 of 3">
            <button class="tab tab--active" role="tab" aria-selected="true" tabindex="0" id="tab-1">
                <span class="tab-content">
                    <span class="tab-text-label">Favorites</span>
                </span>
            </button>
        </div>
        <div class="carousel-slide" role="group" aria-label="2 of 3">
            <button class="tab" role="tab" aria-selected="false" tabindex="-1">
                <span class="tab-content">
                    <span class="tab-text-label">Favorites</span>
                </span>
            </button>
        </div>
        <div class="carousel-slide" role="group" aria-label="3 of 3">
            <button class="tab" role="tab" aria-selected="false" tabindex="-1">
                <span class="tab-content">
                    <span class="tab-text-label">Favorites</span>
                </span>
            </button>
        </div>
    </div>
</div>

我在同一代码中使用轮播和选项卡列表的问题。

我不确定我应该在哪里添加role="tablist"以及是否可以role="group"用作role="tab"

标签： htmlwai-aria