手风琴将与纯html复选框传递可访问性

Question

这里的样本

<!--http://codepen.io/CesarGabriel/pen/tLDwH-->

            <div>
            <input type="checkbox" id="check-1" />
            <label for="check-1">Option 1</label>
            <article>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, odit, quia hic ipsam laboriosam dignissimos suscipit eligendi! Aspernatur, ad, suscipit officiis repellat consequuntur quod quibusdam sint nobis magnam voluptates veritatis?</p>
            </article>
        </div>

和css

input:checked ~ article {
    border-bottom-left-radius: .25em;
    border-bottom-right-radius: .25em;
    height: auto;
    margin-bottom: .125em;
}

肯定缺少'tabindex'

除此之外，这套设置对于辅助功能是否友好？

Answer 1

您是否已咨询WAI-ARIA Authoring Practices？它有一个手风琴部分。如果你要扩展和折叠的部分（这通常是手风琴的作用），你需要跟踪aria-expanded = true / false。并且您需要用于标题的role = tablist和用于内容的role = tabpanel。当然还要处理键盘导航。