Valt een accordion zonder een aria-expanded attribuut onder 4.1.3?

[JuliaZjochova]

Een accordion heeft geen aria-expanded attribuut. Na het openen van de accordion gaat de focus niet naar de eerste tekst binnen de accordion, maar gaat meteen door naar het volgende interactieve element (de volgende accordion knop). Is dit een statusbericht?

[rianrietveld]

Een accordion geen aria-expanded attribuut.

Is dit een HTML-details/summery constructie? Dan verzorgen de browser/screen reader zelf al het uitspreken van de status. Anders is het een ovetreding van 4.1.2 role name value. Omdat de waarde van de status (het open/dicht zijn van de accordion) niet wordt doorgegeven.

Na het openen van de accordion gaat de focus niet naar de eerste tekst binnen de accordion.

Dit is denk ik verwacht gedrag. Alleen als er een focusable itlem zoals een link in de tekst staat moet daar de focus naar toegaan. ZIe voor een codepen met demo van native HYML details/summary.

[JuliaZjochova]

Nee, het is geen details/summary. Er kunnen meerdere SC worden afgekeurd. Ik wil graag specifiek weten over 4.1.3.

In de meeste accordions zie ik dat de focus naar de volgende trigger gaat en de tekstuele inhoud in de opengeklapte sectie overslaat. Is dit ook fout onder 4.1.3 als er geen aria-expanded op de accordion knop zit?

<div id="accordionGroup" class="accordion">
  <h3>
    <button>
        Personal Information
    </button>
  </h3>
  <div class="accordion-panel">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  <div>
   <h3>
    <button>
        General Information
    </button>
    </h3>
    <div class="accordion-panel">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <div>
  </div>

[rianrietveld]

Nee, dit is geen statusbericht, maar het niet vermelden van de state van een element (open/dicht). Dus het valt onder 4.1.2. Of de onderstaande div open of dicht is, is een state van de property aria-expanded.

Een statusbericht is echt een melding over zichtbare berichten, voor alle gebruikers: Is een formulier succesvol verzonden, zijn er fouten, hoeveel zoekresultaten zijn er, is de tijdslimiet bijna verstreken?

En de focus is echt verwacht gedrag. Als de div open is kan de screenreadergebruiker het gewoon gaan lezen. Maar dan moet wel gemeld worden dat de accordion open is met aria-expanded :-) Check wel of als er een link of een knop in de div staat of deze wel toestenbordfocus krijgt (anders fail voor 2.1.1)

[cstrobbe]

Ik sluit me aan bij Rian Rietveld. Het ontbreken van aria-expanded is het ontbreken van een "state" in de zin van SC 4.1.2 en heeft niets met statusberichten te maken (SC 4.1.3).

[rianrietveld]

Hoi @JuliaZjochova is deze vraag voldoende beantwoord of heb je een andere mening?