Wird mit reinem HTML-Checkbox Pass Zugänglichkeit

Question

Probe hier

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

und css Akkordeon

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

es sicher

andere als das ist dieser Satz freundlich für Zugänglichkeit 'tabindex' fehlt ?

Answer 1

Haben Sie bereits die WAI-ARIA Authoring Practices konsultiert? Es hat einen Abschnitt für das Akkordeon. Wenn Sie Abschnitte haben, die sich erweitern und reduzieren (was normalerweise bei einem Akkordeon der Fall ist), müssen Sie aria-expanded = true/false verfolgen. Und Sie brauchen Rolle = Tabliste für die Header und Rolle = Tab-Panel für den Inhalt. Und natürlich die Tastaturnavigation.