Birden Çok Bölgeyi aria-label ile Adlandırma
Kullanıcıların hangisi olduğunu bilmesi için iki nav öğesini birbirinden ayırın.
Birden Çok Bölgeyi aria-label ile Adlandırma, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 3. 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.
Two Navs, One Problem
Many pages have a main menu and a footer menu. Both are nav landmarks, and without names they sound identical to a screen reader.
Name a Region
Add aria-label to give a landmark a short, spoken name. Now the screen reader can tell your two navs apart.
<nav aria-label="Main">...</nav>
<nav aria-label="Footer">...</nav>Keep Labels Short
An aria-label should be a couple of words, like Main or Breadcrumb. Users hear it announced, so brevity respects their time.
Do Not Repeat the Role
Write Footer, not Footer navigation. The screen reader already says navigation, so adding it again is just noise.
<nav aria-label="Footer">...</nav>Reuse a Visible Heading
If a region already has a visible heading, point to it with aria-labelledby instead of typing the name twice.
<nav aria-labelledby="more">
<h2 id="more">More links</h2>
</nav>label vs labelledby
Use aria-label when there is no visible text, and aria-labelledby when a heading or text on screen can serve as the name.
It Works on Any Landmark
Naming is not just for nav. Label an aside or a section so users know what each region holds.
<aside aria-label="Related">...</aside>One Region, Skip the Label
If a page has only a single nav, it needs no label. Naming matters most when two regions share the same role.
Distinct Names Matter
Give each region a distinct name. Two navs both labeled Menu defeats the purpose, since users still cannot tell them apart.
Hear the Difference
With names in place, the landmark list reads Main navigation and Footer navigation, so users pick the right one instantly. 🔊
Labels Are Not Visible
An aria-label is announced but never shown on screen, so it changes nothing visually while helping every screen reader user.
Quick Check
You have two nav regions. What is the best label for the bottom one?
Recap: Name Your Regions
You learned to label repeated landmarks with aria-label or aria-labelledby, keeping names short, distinct, and role-free. 🙌
Sıkça Sorulan Sorular
“Birden Çok Bölgeyi aria-label ile Adlandırma” dersi ücretsiz mi?
Evet — “Birden Çok Bölgeyi aria-label ile Adlandırma” 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.
“Birden Çok Bölgeyi aria-label ile Adlandırma” dersinde ne öğreneceğim?
Kullanıcıların hangisi olduğunu bilmesi için iki nav öğesini birbirinden ayırın. 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 3. dersidir.
“Birden Çok Bölgeyi aria-label ile Adlandırma” 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
- header, nav, main, footer: Dört Büyük Bölge
- İçeriği main İçine Koyma ve Yalnızca Bir main Kullanma
- Birden Çok Bölgeyi aria-label ile Adlandırma
- Belirteç Gezinmesi: Kullanıcılar Nasıl Atlama Yapar