HTML Academy · Oppitunti

aria-expanded ja aria-controls vaihtopainikkeille

Rakenna saavutettavia avattavia komponentteja ja haitarivalikoita ARIAlla

Oppitunti 1/413 vaihetta

aria-expanded ja aria-controls vaihtopainikkeille on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Toggle-mallin yleiskatsaus

Toggle-komponentit (haitarit, avattavat luettelot ja valikot) tarvitsevat ARIA-määritteitä ilmoittaakseen avoimen tai suljetun tilansa:

aria-expanded — ilmaisee ohjaimen avoimen tai suljetun tilan
aria-controls — yhdistää ohjaimen sen hallitsemaan elementtiin

aria-expanded

aria-expanded ilmoittaa, onko hallittu elementti laajennettu vai kutistettu:

<button aria-expanded="false" aria-controls="menu">
  Menu
</button>
<ul id="menu" hidden>
  <li><a href="/">Home</a></li>
</ul>
<script>
btn.addEventListener('click', () => {
  const expanded = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', !expanded);
  menu.hidden = expanded;
});
</script>

aria-controls

aria-controls viittaa hallittavan elementin id-tunnukseen:

<button
  id="details-btn"
  aria-expanded="false"
  aria-controls="details-panel"
>
  Show Details
</button>
<div id="details-panel" hidden>
  <p>Additional details go here...</p>
</div>
<!-- Screen reader: 'Show Details, button, collapsed'
     After click: 'Show Details, button, expanded' -->

Haitarimalli

Saavutettava haitari, jossa käytetään aria-expanded-määritettä:

<div class="accordion">
  <h3>
    <button
      aria-expanded="false"
      aria-controls="panel-1"
    >Section 1</button>
  </h3>
  <div id="panel-1" hidden>
    <p>Panel 1 content...</p>
  </div>

  <h3>
    <button
      aria-expanded="false"
      aria-controls="panel-2"
    >Section 2</button>
  </h3>
  <div id="panel-2" hidden>
    <p>Panel 2 content...</p>
  </div>
</div>

Avattavan valikon malli

Saavutettava navigoinnin avattava valikko:

<nav>
  <button
    aria-expanded="false"
    aria-haspopup="true"
    aria-controls="products-menu"
  >Products</button>

  <ul id="products-menu" role="menu" hidden>
    <li role="menuitem"><a href="/widget">Widget</a></li>
    <li role="menuitem"><a href="/gadget">Gadget</a></li>
  </ul>
</nav>

aria-haspopup

aria-haspopup vihjaa, että ohjaimen aktivointi avaa ponnahdusikkunan:

<button aria-haspopup="menu">File</button>
<!-- Values: true (menu), menu, listbox, tree, grid, dialog -->
<!-- Screen reader: 'File, button, has popup' -->

<!-- Note: aria-haspopup="true" is equivalent to "menu" -->
<!-- Use specific values when the popup type matters -->

Details/summary-ARIA-täydennys

Natiivi details/summary ilmoittaa jo laajennustilan — ARIAa ei tarvita:

<details>
  <summary>FAQ Question</summary>
  <p>Answer goes here.</p>
</details>
<!-- Browser automatically provides aria-expanded
     and the disclosure widget semantics -->
<!-- No need to add aria-expanded manually to summary -->

CSS aria-expanded-tilaa varten

Käyttäkää aria-expanded-määritettä CSS-koukkuna:

/* Panel hidden by default: */
[aria-controls] + [hidden] {
  display: none;
}

/* Or using aria-expanded on the button: */
[aria-expanded="false"] + .panel {
  display: none;
}

[aria-expanded="true"] + .panel {
  display: block;
}

/* Rotate arrow icon: */
[aria-expanded="true"] .arrow {
  transform: rotate(180deg);
}

Toggle-komponenttien näppäimistövaatimukset

Toggle-komponenttien on tuettava näppäimistökäyttöä:

Enter tai Space — aktivoi toggle-painikkeen
Escape — sulkee avattavan luettelon tai valikon
Arrow keys — siirtyy avoimen valikon sisällä

Kohdistuksen hallinta toggle-toiminnon jälkeen

Kun sisältöä vaihdetaan, kohdistusta on hallittava asianmukaisesti:

// Accordion: focus stays on the button (usually OK)
// Dropdown menu: move focus to first menu item on open

button.addEventListener('click', () => {
  const expanded = button.getAttribute('aria-expanded') === 'true';
  button.setAttribute('aria-expanded', !expanded);
  panel.hidden = expanded;

  if (!expanded) {
    // Opening a dropdown: focus first item
    panel.querySelector('a, button, [tabindex]')?.focus();
  }
});

Mobiililaitteita koskevat huomioitavat asiat

Toggle-komponentit mobiililaitteissa:

Kosketuskohteiden on oltava vähintään 44×44px (WCAG 2.5.5)
Mobiililaitteiden ruudunlukijat tukevat aria-expanded-määritettä (iOS VoiceOver, Android TalkBack)
Pyyhkäisyeleet eivät korvaa näppäimistö- tai painikeaktivointia

Pikakysymys

Mikä arvo aria-expanded-määritteellä tulee olla, kun hallittu osio on piilotettu?

Vastaa interaktiivisessa oppitunnissa

Kertaus: aria-expanded ja aria-controls

Toggle-toimintojen ARIA-perusteet:

aria-expanded="true/false" — ohjaimen avoin tai suljettu tila
aria-controls="id" — yhdistää ohjaimen sen paneeliin
aria-haspopup — vihjaa ponnahdusikkunan olevan käytettävissä
Päivittäkää aria-expanded jokaisen vaihdon yhteydessä
Siirtäkää kohdistus avattuun valikkoon ja palauttakaa se käynnistimeen suljettaessa

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”aria-expanded ja aria-controls vaihtopainikkeille” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “aria-expanded ja aria-controls vaihtopainikkeille”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”aria-expanded ja aria-controls vaihtopainikkeille”?

Rakenna saavutettavia avattavia komponentteja ja haitarivalikoita ARIAlla Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”aria-expanded ja aria-controls vaihtopainikkeille”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?

Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

aria-expanded ja aria-controls vaihtopainikkeille
aria-selected ja välilehtikuviot
Live-alueet: aria-live, aria-atomic ja aria-relevant
Testaus ruudunlukijoilla

← Takaisin: HTML Academy