Combobox ve Otomatik Tamamlamayı Doğru Oluşturma
Ekran okuyucuların anlayacağı aranabilir bir seçim alanı oluşturun.
Combobox ve Otomatik Tamamlamayı Doğru Oluşturma, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web Accessibility Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
What a Combobox Is
A combobox is an input paired with a popup of suggestions. Think search boxes that drop down matching results as you type. 🔍
Two Parts Working Together
A combobox has a text input the user types into and a separate popup listbox of options. ARIA wires the two so screen readers connect them.
Role on the Input
You put role="combobox" on the text input itself. This tells assistive tech that typing here will reveal a list of choices.
<input role="combobox" aria-expanded="false"
aria-controls="results" type="text">Point to the Popup
Use aria-controls on the input, set to the id of the popup. It links the field to the listbox it opens and closes.
Announce Open or Closed
Toggle aria-expanded to true when the list shows and false when it hides. Screen readers announce the popup state from this attribute.
The Popup Is a Listbox
The suggestions container takes role="listbox" and each suggestion is role="option". This gives users a familiar, navigable list.
<ul id="results" role="listbox">
<li role="option" id="o1">Apple</li>
</ul>Focus Stays in the Input
The trick: keyboard focus never leaves the input. The user keeps typing while arrow keys move a highlight through the options.
aria-activedescendant
Point aria-activedescendant on the input at the id of the highlighted option. That is how a screen reader reads the active choice without moving real focus.
<input role="combobox"
aria-activedescendant="o1">The Expected Keys
Down and Up Arrow move through options, Enter selects the active one, and Escape closes the popup. These keys come straight from the APG.
Mark the Chosen Option
Set aria-selected="true" on the highlighted option and false on the rest. Only one option should be selected at a time in a single-select combobox.
Autocomplete Behavior
Use aria-autocomplete to describe how suggestions appear: "list" for a filtered menu or "both" when text is also completed inline.
Quick Check
The user arrows down through your combobox suggestions. Which attribute tells the screen reader which option is active?
Recap
A combobox is an input plus a listbox: wire them with aria-controls and aria-expanded, keep focus in the field, and track the active option with aria-activedescendant. ✅
Sıkça Sorulan Sorular
“Combobox ve Otomatik Tamamlamayı Doğru Oluşturma” dersi ücretsiz mi?
Evet — “Combobox ve Otomatik Tamamlamayı Doğru Oluşturma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web Accessibility Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
“Combobox ve Otomatik Tamamlamayı Doğru Oluşturma” dersinde ne öğreneceğim?
Ekran okuyucuların anlayacağı aranabilir bir seçim alanı oluşturun. Web Accessibility Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Web Accessibility Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Web Accessibility Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Combobox ve Otomatik Tamamlamayı Doğru Oluşturma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Web Accessibility Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Web Accessibility Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- APG'yi Okuma: Kalıplar, Tuşlar ve Örnekler
- Combobox ve Otomatik Tamamlamayı Doğru Oluşturma
- Menü, Menubar ve Menü Düğmesi
- Treegrid ve Diğer Gelişmiş Kalıplar