Будет аккордеон с чистой HTML CheckBox прохода доступностью

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-extended = true/false. И вам понадобится роль = tablist для заголовков и role = tabpanel для содержимого. И, конечно же, ручку навигации на клавиатуре.