aria-autocomplete

Käyttötilanteet

Mukautetussa role="combobox"- tai role="textbox"-säätimessä, joka tarjoaa ehdotuksia käyttäjän kirjoittaessa. Attribuutti kertoo avustavalle teknologialle, millaista automaattisen täydennyksen toimintatapaa odottaa, jotta käyttäjä voi ennakoida, katsotaanko ehdotuksia itse syötteestä, ponnahduslistasta vai molemmista.

Älä aseta sitä tavalliselle natiivielle <input type="text">-elementille, jolla ei ole ehdotusmekanismia — ilmoitettavaa ei ole.

Tämä attribuutti sekoitetaan usein HTML:n autocomplete-attribuuttiin. Ne ovat erillisiä. HTML:n autocomplete ("email", "current-password", "street-address" …) kertoo selaimelle, kuinka täyttää kenttä. aria-autocomplete kertoo avustavalle teknologialle, minkä käyttöliittymämallin kehittäjä on toteuttanut. Molemmat voivat esiintyä samassa syötteessä, eivätkä ne ole ristiriidassa.

Toimintaperiaate

Hyväksyy neljä tunnusarvoa:

• "none" — oletusarvo. Tekstikenttä ei automaattitäydennä. Tätä ei yleensä tarvitse asettaa erikseen.
• "inline" — käyttäjän kirjoittaessa ehdotettu teksti lisätään itse syötteeseen, tyypillisesti valittuna, jotta seuraava näppäinpainallus voi ylikirjoittaa sen.
• "list" — ehdotukset näkyvät erillisessä ponnahduksessa (yleensä role="listbox"). Syötteen arvo ei muutu automaattisesti.
• "both" — molemmat yhtä aikaa: ponnahdusluettelo on näkyvissä ja paras ehdotus on sisäänrakennettu syötteeseen.

Käytä arvoa, joka vastaa toteutuksesi toimintaa. Jos komboboxisi näyttää pudotusvalikon vaihtoehtoja mutta ei muokkaa syötettä käyttäjän kirjoittaessa, se on "list", ei "both".

Yleiset virheet

• Sekoittaminen HTML:n autocomplete-attribuuttiin. Ne näyttävät samanlaisilta mutta tekevät eri asioita, ja yleensä tarvitaan molemmat.
• aria-autocomplete="list" asettaminen ilman aria-controls-attribuuttia, joka osoittaa listboxiin, ja aria-expanded-attribuuttia, joka seuraa avoin/suljettu-tilaa.
• aria-autocomplete="both" asettaminen, kun syöte ei koskaan automaattitäydennä. Käyttäjä kuulee toimintatavan ja odottaa sisäistä ehdotusta, joka ei koskaan tule.
• aria-autocomplete asettaminen säätimeen, joka ei ole tekstikenttä tai kombobox — esimerkiksi painikkeelle. Attribuutti jätetään huomiotta.
• aria-activedescendant-attribuutin hallitsematta jättäminen korostetun vaihtoehdon osalta listassa. Käyttäjä kuulee, että ehdotuksia on, mutta ei tiedä, mikä on tällä hetkellä aktiivinen.
• aria-autocomplete="list" kovakoodaus tarkistamatta ruudunlukuohjelman tulostetta. Monilla avustavilla teknologioilla on epäjohdonmukaisia ilmoitusmalleja, ja väärä tunnus tuottaa hämmentävää muotoilua.

Esimerkki

<label for="city">Kaupunki</label>
<input
  id="city"
  role="combobox"
  type="text"
  autocomplete="address-level2"
  aria-autocomplete="list"
  aria-controls="city-listbox"
  aria-expanded="true"
  aria-activedescendant="city-opt-3"
>
<ul id="city-listbox" role="listbox">
  <li id="city-opt-1" role="option">Bristol</li>
  <li id="city-opt-2" role="option">Birmingham</li>
  <li id="city-opt-3" role="option">Brighton</li>
</ul>