# Erişilebilir Web Sayfaları Oluşturma ![Erişilebilirlik Hakkında Her Şey](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.tr.png) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey title Your Accessibility Learning Adventure section Foundation Understanding Users: 5: You Testing Tools: 4: You POUR Principles: 5: You section Build Skills Semantic HTML: 4: You Visual Design: 5: You ARIA Techniques: 4: You section Master Practice Keyboard Navigation: 5: You Form Accessibility: 4: You Real-world Testing: 5: You ``` ## Ders Öncesi Quiz [Ders öncesi quiz](https://ff-quizzes.netlify.app/web/) > Web'in gücü evrenselliğinde yatar. Engellilik durumuna bakılmaksızın herkesin erişimi temel bir unsurdur. > > \- Sir Timothy Berners-Lee, W3C Direktörü ve World Wide Web'in mucidi Sizi şaşırtabilecek bir şey: erişilebilir web siteleri oluşturduğunuzda, sadece engelli insanlara yardımcı olmuyorsunuz—aslında web'i herkes için daha iyi hale getiriyorsunuz! Sokak köşelerindeki kaldırım rampalarını fark ettiniz mi? Başlangıçta tekerlekli sandalyeler için tasarlandılar, ancak şimdi bebek arabası kullananlar, teslimat çalışanları, valiz taşıyan yolcular ve bisikletçiler için de faydalı. Erişilebilir web tasarımı tam olarak böyle çalışır—bir gruba yardımcı olan çözümler genellikle herkes için faydalı olur. Harika, değil mi? Bu derste, web'i nasıl herkes için çalışır hale getirebileceğimizi keşfedeceğiz. Web standartlarına zaten entegre edilmiş pratik teknikleri öğrenecek, test araçlarını kullanacak ve erişilebilirliğin sitelerinizi tüm kullanıcılar için nasıl daha kullanışlı hale getirdiğini göreceksiniz. Dersin sonunda, erişilebilirliği geliştirme sürecinizin doğal bir parçası haline getirme konusunda kendinize güveneceksiniz. Düşünceli tasarım seçimlerinin web'i milyarlarca kullanıcıya nasıl açabileceğini keşfetmeye hazır mısınız? Haydi başlayalım! ```mermaid mindmap root((Web Accessibility)) Users Screen readers Keyboard navigation Voice control Magnification Technologies HTML semantics ARIA attributes CSS focus indicators Keyboard events Benefits Wider audience Better SEO Legal compliance Universal design Testing Automated tools Manual testing User feedback Real assistive tech ``` > Bu dersi [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) üzerinden alabilirsiniz! ## Yardımcı Teknolojileri Anlamak Kodlamaya başlamadan önce, farklı yeteneklere sahip insanların web'i nasıl deneyimlediğini anlamak için biraz zaman ayıralım. Bu sadece teori değil—bu gerçek dünya gezinme modellerini anlamak sizi çok daha iyi bir geliştirici yapacak! Yardımcı teknolojiler, engelli insanların web siteleriyle etkileşim kurmasına yardımcı olan oldukça etkileyici araçlardır. Bu teknolojilerin nasıl çalıştığını kavradığınızda, erişilebilir web deneyimleri oluşturmak çok daha sezgisel hale gelir. Kodunuzu başkasının gözünden görmeyi öğrenmek gibi bir şey. ### Ekran okuyucular [Ekran okuyucular](https://en.wikipedia.org/wiki/Screen_reader), dijital metni konuşma veya braille çıktısına dönüştüren oldukça sofistike teknolojilerdir. Genellikle görme engelli kişiler tarafından kullanılsa da, disleksi gibi öğrenme güçlükleri olan kullanıcılar için de oldukça faydalıdır. Bir ekran okuyucuyu, size bir kitabı çok akıllı bir anlatıcının okuması gibi düşünebilirsiniz. İçeriği mantıklı bir sırayla sesli olarak okur, "buton" veya "link" gibi etkileşimli öğeleri duyurur ve bir sayfada gezinmek için klavye kısayolları sağlar. Ancak işin püf noktası şu—ekran okuyucular yalnızca web sitelerini doğru yapı ve anlamlı içerikle oluşturduğumuzda sihirlerini gerçekleştirebilir. İşte burada devreye siz geliştiriciler giriyorsunuz! **Platformlar arası popüler ekran okuyucular:** - **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (ücretsiz ve en popüler), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (yerleşik) - **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (yerleşik ve oldukça yetenekli) - **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (yerleşik) - **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (ücretsiz ve açık kaynak) **Ekran okuyucuların web içeriğinde gezinme yöntemleri:** Ekran okuyucular, deneyimli kullanıcılar için gezinmeyi verimli hale getiren çeşitli yöntemler sunar: - **Sıralı okuma**: İçeriği yukarıdan aşağıya doğru okur, tıpkı bir kitabı takip eder gibi - **Dönüm noktası navigasyonu**: Sayfa bölümleri arasında geçiş yapar (başlık, navigasyon, ana içerik, alt bilgi) - **Başlık navigasyonu**: Sayfa yapısını anlamak için başlıklar arasında geçiş yapar - **Bağlantı listeleri**: Hızlı erişim için tüm bağlantıların bir listesini oluşturur - **Form kontrolleri**: Giriş alanları ve butonlar arasında doğrudan gezinir > 💡 **Beni şaşırtan bir şey**: Ekran okuyucu kullanıcılarının %68'i öncelikle başlıklarla gezinir ([WebAIM Anketi](https://webaim.org/projects/screenreadersurvey9/#finding)). Bu, başlık yapınızın kullanıcılar için bir yol haritası gibi olduğu anlamına gelir—doğru yaptığınızda, insanların içeriğinizde daha hızlı yol almasına gerçekten yardımcı oluyorsunuz! ### Test iş akışınızı oluşturma İyi haber—etkili erişilebilirlik testi göz korkutucu olmak zorunda değil! Otomatik araçları (açık sorunları yakalamakta harikalar) biraz manuel testle birleştirmek isteyeceksiniz. İşte en fazla sorunu yakalayan ve tüm gününüzü harcamayan sistematik bir yaklaşım: **Temel manuel test iş akışı:** ```mermaid flowchart TD A[🚀 Start Testing] --> B{⌨️ Keyboard Navigation} B --> C[Tab through all interactive elements] C --> D{🎧 Screen Reader Testing} D --> E[Test with NVDA/VoiceOver] E --> F{🔍 Zoom Testing} F --> G[Zoom to 200% and test functionality] G --> H{🎨 Color/Contrast Check} H --> I[Verify all text meets contrast ratios] I --> J{👁️ Focus Management} J --> K[Ensure focus indicators are visible] K --> L[✅ Testing Complete] style A fill:#e3f2fd style L fill:#e8f5e8 style B fill:#fff3e0 style D fill:#f3e5f5 style F fill:#e0f2f1 style H fill:#fce4ec style J fill:#e8eaf6 ``` **Adım adım test kontrol listesi:** 1. **Klavyeyle gezinme**: Sadece Tab, Shift+Tab, Enter, Space ve Ok tuşlarını kullanın 2. **Ekran okuyucu testi**: NVDA, VoiceOver veya Narrator'ı etkinleştirin ve gözleriniz kapalı gezin 3. **Yakınlaştırma testi**: %200 ve %400 yakınlaştırma seviyelerinde test yapın 4. **Renk kontrastı doğrulama**: Tüm metin ve kullanıcı arayüzü bileşenlerini kontrol edin 5. **Odak göstergesi testi**: Tüm etkileşimli öğelerin görünür odak durumlarına sahip olduğundan emin olun ✅ **Lighthouse ile başlayın**: Tarayıcınızın Geliştirici Araçlarını açın, bir Lighthouse erişilebilirlik denetimi çalıştırın ve ardından sonuçları manuel test odak alanlarınızı yönlendirmek için kullanın. ### Yakınlaştırma ve büyütme araçları Telefonunuzda metin çok küçük olduğunda yakınlaştırma hareketi yaptığınız veya parlak güneş ışığında dizüstü bilgisayar ekranınıza gözlerinizi kısarak baktığınız zamanları hatırlıyor musunuz? Birçok kullanıcı, içeriği her gün okunabilir hale getirmek için büyütme araçlarına güveniyor. Buna düşük görme yetisine sahip kişiler, yaşlı yetişkinler ve dışarıda bir web sitesini okumaya çalışan herkes dahildir. Modern yakınlaştırma teknolojileri, sadece şeyleri büyütmekten çok daha fazlasını sunar. Bu araçların nasıl çalıştığını anlamak, her büyütme seviyesinde işlevsel ve çekici kalan duyarlı tasarımlar oluşturmanıza yardımcı olacaktır. **Modern tarayıcı yakınlaştırma özellikleri:** - **Sayfa yakınlaştırma**: Tüm içeriği orantılı olarak ölçeklendirir (metin, resimler, düzen) - tercih edilen yöntem budur - **Sadece metin yakınlaştırma**: Yazı tipi boyutunu artırır, ancak orijinal düzeni korur - **Yakınlaştırma hareketi**: Geçici büyütme için mobil cihazlarda hareket desteği - **Tarayıcı desteği**: Tüm modern tarayıcılar, işlevselliği bozmadan %500'e kadar yakınlaştırmayı destekler **Özel büyütme yazılımları:** - **Windows**: [Büyüteç](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (yerleşik), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) - **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (yerleşik ve gelişmiş özelliklerle) > ⚠️ **Tasarım Düşüncesi**: WCAG, içeriğin %200 oranında yakınlaştırıldığında işlevsel kalmasını gerektirir. Bu seviyede yatay kaydırma minimumda olmalı ve tüm etkileşimli öğeler erişilebilir kalmalıdır. ✅ **Duyarlı tasarımınızı test edin**: Tarayıcınızı %200 ve %400 oranında yakınlaştırın. Düzeniniz zarif bir şekilde uyum sağlıyor mu? Aşırı kaydırma olmadan tüm işlevlere hala erişebiliyor musunuz? ## Modern Erişilebilirlik Test Araçları Artık insanların yardımcı teknolojilerle web'de nasıl gezindiğini anladığınıza göre, erişilebilir web siteleri oluşturmanıza ve test etmenize yardımcı olacak araçları keşfedelim. Bunu şöyle düşünün: otomatik araçlar açık sorunları yakalamakta harikadır (örneğin eksik alt metin), manuel testler ise sitenizin gerçek dünyada kullanımı iyi hissettirdiğinden emin olmanıza yardımcı olur. Birlikte, sitelerinizin herkes için çalıştığına dair güven verirler. ### Renk kontrastı testi İyi haber: renk kontrastı en yaygın erişilebilirlik sorunlarından biridir, ancak düzeltmesi en kolay olanlardan biridir. İyi kontrast, görme engelli kullanıcılardan plajda telefonlarını okumaya çalışan insanlara kadar herkese fayda sağlar. **WCAG kontrast gereksinimleri:** | Metin Türü | WCAG AA (Minimum) | WCAG AAA (Gelişmiş) | |------------|-------------------|---------------------| | **Normal metin** (18pt altında) | 4.5:1 kontrast oranı | 7:1 kontrast oranı | | **Büyük metin** (18pt+ veya 14pt+ kalın) | 3:1 kontrast oranı | 4.5:1 kontrast oranı | | **UI bileşenleri** (butonlar, form kenarları) | 3:1 kontrast oranı | 3:1 kontrast oranı | **Temel test araçları:** - [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Renk seçici ile masaüstü uygulaması - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Anında geri bildirim sağlayan web tabanlı araç - [Stark](https://www.getstark.co/) - Figma, Sketch, Adobe XD için tasarım aracı eklentisi - [Accessible Colors](https://accessible-colors.com/) - Erişilebilir renk paletleri bulun ✅ **Daha iyi renk paletleri oluşturun**: Marka renklerinizle başlayın ve erişilebilir varyasyonlar oluşturmak için kontrast kontrol araçlarını kullanın. Bunları tasarım sisteminizin erişilebilir renk belirteçleri olarak belgeleyin. ### Kapsamlı erişilebilirlik denetimi En etkili erişilebilirlik testi, birden fazla yaklaşımı birleştirir. Tek bir araç her şeyi yakalamaz, bu yüzden çeşitli yöntemlerle bir test rutini oluşturmak kapsamlı bir kapsama alanı sağlar. **Tarayıcı tabanlı test (Geliştirici Araçlarına entegre):** - **Chrome/Edge**: Lighthouse erişilebilirlik denetimi + Erişilebilirlik paneli - **Firefox**: Ayrıntılı ağaç görünümü ile Erişilebilirlik Denetleyicisi - **Safari**: Web Denetleyicisi'ndeki Denetim sekmesi ile VoiceOver simülasyonu **Profesyonel test uzantıları:** - [axe DevTools](https://www.deque.com/axe/devtools/) - Endüstri standardı otomatik test - [WAVE](https://wave.webaim.org/extension/) - Hata vurgulama ile görsel geri bildirim - [Accessibility Insights](https://accessibilityinsights.io/) - Microsoft'un kapsamlı test paketi **Komut satırı ve CI/CD entegrasyonu:** - [axe-core](https://github.com/dequelabs/axe-core) - Otomatik test için JavaScript kütüphanesi - [Pa11y](https://pa11y.org/) - Komut satırı erişilebilirlik test aracı - [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Otomatik erişilebilirlik puanlama > 🎯 **Test Hedefi**: Lighthouse erişilebilirlik puanınızı 95+ olarak belirleyin. Unutmayın, otomatik araçlar erişilebilirlik sorunlarının yalnızca %30-40'ını yakalar—manuel test hala gereklidir! ### 🧠 **Test Becerileri Kontrolü: Sorunları Bulmaya Hazır mısınız?** **Erişilebilirlik testi hakkında nasıl hissediyorsunuz:** - Şu anda size en uygun test yöntemi hangisi gibi görünüyor? - Bir gün boyunca sadece klavye ile gezinmeyi hayal edebiliyor musunuz? - Çevrimiçi olarak kişisel olarak yaşadığınız bir erişilebilirlik engeli nedir? ```mermaid pie title "Accessibility Issues Caught by Different Methods" "Automated Tools" : 35 "Manual Testing" : 40 "User Feedback" : 25 ``` > **Güven artırıcı**: Profesyonel erişilebilirlik test uzmanları tam olarak bu yöntem kombinasyonunu kullanır. Endüstri standartlarını öğreniyorsunuz! ## Erişilebilirliği Baştan İtibaren İnşa Etmek Erişilebilirlik başarısının anahtarı, bunu en baştan itibaren temelinizin bir parçası haline getirmektir. "Erişilebilirliği sonra eklerim" diye düşünmek cazip gelebilir, ancak bu, bir ev inşa edildikten sonra bir rampa eklemeye çalışmak gibidir. Mümkün mü? Evet. Kolay mı? Pek değil. Erişilebilirliği bir ev planlamak gibi düşünün—tekerlekli sandalye erişimini ilk mimari planlarınıza dahil etmek, her şeyi sonradan uyarlamaktan çok daha kolaydır. ### POUR prensipleri: Erişilebilirlik temeliniz Web İçeriği Erişilebilirlik Yönergeleri (WCAG), POUR olarak adlandırılan dört temel prensip etrafında şekillenir. Endişelenmeyin—bunlar sıkıcı akademik kavramlar değil! Aslında herkes için çalışan içerikler oluşturmak için pratik rehberlerdir. POUR'u kavradığınızda, erişilebilirlik kararları almak çok daha sezgisel hale gelir. Tasarım seçimlerinizi yönlendiren zihinsel bir kontrol listesi gibi. Haydi bunu parçalayalım: ```mermaid flowchart LR A[🔍 PERCEIVABLE
Can users sense it?] --> B[🎮 OPERABLE
Can users use it?] B --> C[📖 UNDERSTANDABLE
Can users get it?] C --> D[💪 ROBUST
Does it work everywhere?] A1[Alt text
Captions
Contrast] --> A B1[Keyboard access
No seizures
Time limits] --> B C1[Clear language
Predictable
Error help] --> C D1[Valid code
Compatible
Future-proof] --> D style A fill:#e1f5fe style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 ``` **🔍 Algılanabilir**: Bilgi, kullanıcıların mevcut duyularıyla algılayabileceği şekilde sunulmalıdır - Metin olmayan içerik için metin alternatifleri sağlayın (resimler, videolar, ses) - Tüm metin ve kullanıcı arayüzü bileşenleri için yeterli renk kontrastı sağlayın - Multimedya içerik için altyazılar ve transkriptler sunun - %200'e kadar yeniden boyutlandırıldığında işlevsel kalan içerik tasarlayın - Bilgi iletmek için sadece renk değil, birden fazla duyusal özellik kullanın **🎮 İşlenebilir**: Tüm arayüz bileşenleri mevcut giriş yöntemleriyle işlenebilir olmalıdır - Tüm işlevselliği klavye navigasyonu ile erişilebilir hale getirin - Kullanıcılara içeriği okumak ve etkileşimde bulunmak için yeterli zaman sağlayın - Nöbet veya vestibüler bozukluklara neden olan içerikten kaçının - Kullanıcılara net yapı ve dönüm noktaları ile verimli bir şekilde gezinmelerine yardımcı olun - Etkileşimli öğelerin yeterli hedef boyutlarına sahip olduğundan emin olun (minimum 44px) **📖 Anlaşılabilir**: Bilgi ve kullanıcı arayüzü işlemleri açık ve anlaşılır olmalıdır - Hedef kitlenize uygun açık, basit bir dil kullanın - İçeriğin öngörülebilir, tutarlı şekillerde görünmesini ve çalışmasını sağlayın - Kullanıcı girişleri için net talimatlar ve hata mesajları sağlayın - Kullanıcıların formlarda hataları anlamalarına ve düzeltmelerine yardımcı olun - İçeriği mantıksal okuma sırası ve bilgi hiyerarşisi ile düzenleyin **💪 Sağlam**: İçerik, farklı teknolojiler ve yardımcı cihazlar arasında güvenilir şekilde çalışmalıdır - **Geçerli, semantik HTML'yi temeliniz olarak kullanın** - **Mevcut ve gelecekteki yardımcı teknolojilerle uyumluluğu sağlayın** - **İşaretleme için web standartlarını ve en iyi uygulamaları takip edin** - **Farklı tarayıcılar, cihazlar ve yardımcı araçlar üzerinde test yapın** - **İçeriği, gelişmiş özellikler desteklenmediğinde sorunsuz çalışacak şekilde yapılandırın** ### 🎯 **POUR İlkeleri Kontrolü: Akılda Kalıcı Hale Getirme** **Temel prensipler üzerine hızlı bir düşünce:** - Her bir POUR ilkesini ihlal eden bir web sitesi özelliği düşünebiliyor musunuz? - Geliştirici olarak size en doğal gelen ilke hangisi? - Bu ilkeler, yalnızca engelli kullanıcılar için değil, herkes için tasarımı nasıl iyileştirebilir? ```mermaid quadrantChart title POUR Principles Impact Matrix x-axis Low Effort --> High Effort y-axis Low Impact --> High Impact quadrant-1 Quick Wins quadrant-2 Major Projects quadrant-3 Consider Later quadrant-4 Strategic Focus Alt Text: [0.2, 0.9] Color Contrast: [0.3, 0.8] Semantic HTML: [0.4, 0.9] Keyboard Nav: [0.6, 0.8] ARIA Complex: [0.8, 0.7] Screen Reader Testing: [0.7, 0.6] ``` > **Unutmayın**: Yüksek etkili, düşük çaba gerektiren iyileştirmelerle başlayın. Semantik HTML ve alt metin, en az çabayla en büyük erişilebilirlik avantajını sağlar! ## Erişilebilir Görsel Tasarım Oluşturma İyi görsel tasarım ve erişilebilirlik birbiriyle uyumludur. Erişilebilirlik düşünülerek tasarım yapıldığında, genellikle bu kısıtlamalar daha temiz ve zarif çözümler ortaya çıkarır ve tüm kullanıcılar için faydalı olur. Herkes için, görsel yeteneklerinden veya içeriğin görüntülendiği koşullardan bağımsız olarak çalışan görsel olarak çekici tasarımlar oluşturmayı keşfedelim. ### Renk ve görsel erişilebilirlik stratejileri Renk, iletişim için güçlü bir araçtır, ancak önemli bilgileri iletmek için asla tek başına kullanılmamalıdır. Rengin ötesinde tasarım yapmak, daha sağlam ve kapsayıcı deneyimler yaratır. **Renk görme farklılıklarına göre tasarım yapın:** Yaklaşık %8 erkek ve %0.5 kadın, bir tür renk görme farklılığına sahiptir (genellikle "renk körlüğü" olarak adlandırılır). En yaygın türler: - **Deuteranopi**: Kırmızı ve yeşili ayırt etmede zorluk - **Protanopi**: Kırmızı daha soluk görünür - **Tritanopi**: Mavi ve sarıyı ayırt etmede zorluk (nadir) **Kapsayıcı renk stratejileri:** ```css /* ❌ Bad: Using only color to indicate status */ .error { color: red; } .success { color: green; } /* ✅ Good: Color plus icons and context */ .error { color: #d32f2f; border-left: 4px solid #d32f2f; } .error::before { content: "⚠️"; margin-right: 8px; } .success { color: #2e7d32; border-left: 4px solid #2e7d32; } .success::before { content: "✅"; margin-right: 8px; } ``` **Temel kontrast gereksinimlerinin ötesinde:** - Renk seçimlerinizi renk körlüğü simülatörleriyle test edin - Renk kodlamanın yanında desenler, dokular veya şekiller kullanın - Etkileşimli durumların renk olmadan da ayırt edilebilir olmasını sağlayın - Tasarımınızın yüksek kontrast modunda nasıl göründüğünü düşünün ✅ **Renk erişilebilirliğinizi test edin**: Sitenizin farklı renk görme türlerine sahip kullanıcılar için nasıl göründüğünü görmek için [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) gibi araçları kullanın. ### Odak göstergeleri ve etkileşim tasarımı Odak göstergeleri, dijital dünyada bir imleç gibidir—klavye kullanıcılarına sayfada nerede olduklarını gösterir. İyi tasarlanmış odak göstergeleri, etkileşimleri net ve tahmin edilebilir hale getirerek herkes için deneyimi geliştirir. **Modern odak göstergesi en iyi uygulamaları:** ```css /* Enhanced focus styles that work across browsers */ button:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25); } /* Remove focus outline for mouse users, preserve for keyboard users */ button:focus:not(:focus-visible) { outline: none; } /* Focus-within for complex components */ .card:focus-within { box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5); border-color: #4A90A4; } /* Ensure focus indicators meet contrast requirements */ .custom-focus:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 6px #000000; } ``` **Odak göstergesi gereksinimleri:** - **Görünürlük**: Çevresindeki öğelerle en az 3:1 kontrast oranına sahip olmalı - **Genişlik**: Tüm öğe etrafında minimum 2px kalınlık - **Süreklilik**: Odak başka bir yere taşınana kadar görünür kalmalı - **Ayırt edilebilirlik**: Diğer UI durumlarından görsel olarak farklı olmalı > 💡 **Tasarım İpucu**: Harika odak göstergeleri genellikle görünürlüğü artırmak için kontur, kutu gölgesi ve renk değişikliklerinin bir kombinasyonunu kullanır. ✅ **Odak göstergelerini denetleyin**: Web sitenizde sekme tuşuyla gezinerek hangi öğelerin net odak göstergelerine sahip olduğunu not edin. Görülmesi zor veya tamamen eksik olan var mı? ### Semantik HTML: Erişilebilirliğin Temeli Semantik HTML, yardımcı teknolojilere web siteniz için bir GPS sistemi vermek gibidir. HTML öğelerini amaçlarına uygun şekilde kullandığınızda, ekran okuyucular, klavyeler ve diğer araçlara kullanıcıların etkili bir şekilde gezinmesine yardımcı olacak ayrıntılı bir yol haritası sağlamış olursunuz. Bunu gerçekten anlamamı sağlayan bir benzetme: Semantik HTML, net kategoriler ve yardımcı işaretlerle düzenlenmiş bir kütüphane ile kitapların rastgele dağıtıldığı bir depo arasındaki fark gibidir. Her iki yerde de aynı kitaplar var, ama hangisinde bir şey bulmaya çalışmayı tercih edersiniz? Aynen öyle! ```mermaid flowchart TD A[🏠 HTML Document] --> B[📰 header] A --> C[🧭 nav] A --> D[📄 main] A --> E[📋 footer] B --> B1[h1: Site Name
Logo & branding] C --> C1[ul: Navigation
Primary links] D --> D1[article: Content
section: Subsections] D --> D2[aside: Sidebar
Related content] E --> E1[nav: Footer links
Copyright info] D1 --> D1a[h1: Page title
h2: Major sections
h3: Subsections] style A fill:#e3f2fd style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 style E fill:#e0f2f1 ``` **Erişilebilir sayfa yapısının yapı taşları:** ```html

Your Site Name

Article Title

Published on

First Section

Content that relates to this section...

Second Section

More related content...

``` **Semantik HTML'nin erişilebilirliği nasıl dönüştürdüğü:** | Semantik Eleman | Amaç | Ekran Okuyucu Faydası | |------------------|---------|----------------------| | `
` | Sayfa veya bölüm başlığı | "Banner landmark" - hızlıca en üste gitme | | `