CODEWITHSUNDEEP
htmlaccessibilityaccordion
Seeliang
Seeliang

Reputation: 2949

Will accordion with pure html checkbox pass accessibility

sample here 

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

and css

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

it is missing 'tabindex' for sure

other than that is this set friendly for accessibility?

Upvotes: 0

Views: 1106

Answers (1)

slugolicious
slugolicious

Reputation: 17535

Have you already consulted the WAI-ARIA Authoring Practices? It has a section for the accordion. If you're going to have sections that expand and collapse (which is typically what an accordion does), you'll need to track aria-expanded=true/false. And you'll need role=tablist for the headers and role=tabpanel for the contents. And handle keyboard navigation, of course.

Upvotes: 3

Related Questions