带有纯 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。 headers 需要 role=tablist，内容需要 role=tabpanel。当然还有键盘导航。

带有纯 html 复选框的手风琴会通过可访问性吗

Will accordion with pure html checkbox pass accessibility

html

accessibility

accordion