From 4bbf040143c275e1b7d381ad2d628ade76f506c8 Mon Sep 17 00:00:00 2001 From: Furkan <85369831+NorthLight15@users.noreply.github.com> Date: Mon, 28 Nov 2022 14:12:51 +0300 Subject: [PATCH] Turkish translation for accessibility --- .../3-accessibility/translations/README.tr.md | 231 ++++++++++++++++++ 1 file changed, 231 insertions(+) create mode 100644 1-getting-started-lessons/3-accessibility/translations/README.tr.md diff --git a/1-getting-started-lessons/3-accessibility/translations/README.tr.md b/1-getting-started-lessons/3-accessibility/translations/README.tr.md new file mode 100644 index 00000000..da51ef26 --- /dev/null +++ b/1-getting-started-lessons/3-accessibility/translations/README.tr.md @@ -0,0 +1,231 @@ +# Erişilebilir Web Sayfaları Oluşturma + +![Erişilebilirlik Hakkında Her Şey](/sketchnotes/webdev101-a11y.png) +> [Tomomi Imura] tarafından hazırlanan Sketchnote(https://twitter.com/girlie_mac) + +## Ders Öncesi Sınav +[Ders öncesi sınav](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5) + +> Web'in gücü evrenselliğindedir. Engellilik durumuna bakılmaksızın herkesin erişimi önemli bir husustur. +> +> \- Sir Timothy Berners-Lee, W3C Direktörü ve World Wide Web'in mucidi + +Bu alıntı, erişilebilir web siteleri oluşturmanın önemini mükemmel bir şekilde vurgulamaktadır. Herkes tarafından erişilemeyen bir uygulama, tanımı gereği dışlayıcıdır. Web geliştiricileri olarak her zaman erişilebilirliği aklımızda tutmalıyız. Baştan bu odağı alarak, oluşturduğunuz sayfalara herkesin erişebilmesini sağlama yolunda ilerlemiş olacaksınız. Bu derste, web varlıklarınızın erişilebilir olduğundan emin olmanıza yardımcı olabilecek araçları ve erişilebilirlik göz önünde bulundurularak nasıl oluşturulacağını öğreneceksiniz. + +> Bu dersi [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility?WT.mc_id=academic-77807-sagibbon) üzerinden alabilirsiniz! + +## Kullanılacak araçlar + +### Ekran okuyucular + +En iyi bilinen erişilebilirlik araçlarından biri ekran okuyuculardır. + +[Ekran okuyucular](https://en.wikipedia.org/wiki/Screen_reader), görme bozukluğu olanlar için yaygın olarak kullanılan istemcilerdir. Bir tarayıcının paylaşmak istediğimiz bilgileri doğru bir şekilde iletmesini sağlamak için zaman harcadığımız için, bir ekran okuyucunun da aynı şeyi yapmasını sağlamalıyız. + +En basit haliyle, bir ekran okuyucu, bir sayfayı yukarıdan aşağıya sesli bir şekilde okuyacaktır. Sayfanızın tamamı metin ise, okuyucu bilgileri benzer bir şekilde bir tarayıcıya iletecektir. Elbette, web sayfaları nadiren salt metindir; bağlantılar, grafikler, renk ve diğer görsel bileşenleri içerecektir. Bu bilgilerin bir ekran okuyucu tarafından doğru bir şekilde okunduğundan emin olmak için özen gösterilmelidir. + +Her web geliştiricisi bir ekran okuyucuya aşina olmalıdır. Yukarıda vurgulandığı gibi, kullanıcılarınızın kullanacağı istemcidir. Bir tarayıcının nasıl çalıştığını bildiğiniz gibi, bir ekran okuyucunun nasıl çalıştığını da öğrenmelisiniz. Neyse ki, ekran okuyucular çoğu işletim sisteminde yerleşik olarak bulunur. + +Bazı tarayıcılarda ayrıca metni yüksek sesle okuyabilen ve hatta [erişilebilirlik odaklı bu Edge tarayıcı araçları](https://support.microsoft.com/help/4000734/microsoft) gibi bazı temel gezinme özellikleri sağlayan yerleşik araçlar ve uzantılar bulunur. -uç-erişilebilirlik-özellikleri). Bunlar aynı zamanda önemli erişilebilirlik araçlarıdır, ancak ekran okuyuculardan çok farklı işlev görürler ve ekran okuyucu test araçlarıyla karıştırılmamalıdırlar. + +✅ Bir ekran okuyucu ve tarayıcı metin okuyucusu deneyin. Windows'ta [Anlatıcı](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1?WT.mc_id=academic-77807-sagibbon) varsayılan olarak dahildir ve [JAWS](https://webaim.org/articles/jaws/) ve [NVDA](https://www.nvaccess.org/about-nvda/) da yüklenebilir. macOS ve iOS'ta varsayılan olarak [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) yüklenir. + +### Yakınlaştır + +Görme bozukluğu olan kişiler tarafından yaygın olarak kullanılan bir diğer araç ise yakınlaştırmadır. En temel yakınlaştırma türü, 'Kontrol + artı işareti (+)' aracılığıyla veya ekran çözünürlüğü azaltılarak kontrol edilen statik yakınlaştırmadır. Bu tür yakınlaştırma tüm sayfanın yeniden boyutlandırılmasına neden olur, bu nedenle [duyarlı tasarım](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) kullanmak, artırılmış yakınlaştırma düzeylerinde iyi bir kullanıcı deneyimi sağlamak için önemlidir. . + +Başka bir yakınlaştırma türü, gerçek bir büyüteç kullanmak gibi, ekranın bir alanını büyütmek ve kaydırmak için özel yazılıma dayanır. Windows'ta, [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şiktir ve [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) daha fazla özelliğe ve daha geniş bir kullanıcı tabanına sahip bir üçüncü taraf büyütme yazılımıdır. Hem macOS hem de iOS, [Zoom](https://www.apple.com/accessibility/mac/vision/) adlı yerleşik bir büyütme yazılımına sahiptir. + +### Kontrast denetleyicileri + +Web sitelerindeki renklerin, renk körü kullanıcıların veya düşük kontrastlı renkleri görmekte zorlanan kişilerin ihtiyaçlarına cevap verecek şekilde özenle seçilmesi gerekir. + +✅ Kullanmayı sevdiğiniz bir web sitesini [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=tr) gibi bir tarayıcı uzantısıyla renk kullanımı için test edin -US&WT.mc_id=akademik-77807-sagibbon). Ne öğreniyorsun? + +### Deniz Feneri + +Tarayıcınızın geliştirici aracı alanında Deniz Feneri aracını bulacaksınız. Bu araç, bir web sitesinin erişilebilirliğine (ve diğer analizlere) ilişkin bir ilk görüş elde etmek için önemlidir. Yalnızca Lighthouse'a güvenmemek önemli olsa da, temel olarak %100'lük bir puan çok yararlıdır. + +✅ Tarayıcınızın geliştirici araç panelinde Lighthouse'u bulun ve herhangi bir sitede bir analiz çalıştırın. ne keşfedersiniz? + +## Erişilebilir bir tasarım yapmak + +Erişilebilirlik nispeten geniş bir konudur. Size yardımcı olmak için çok sayıda kaynak mevcuttur. + +- [Erişilebilir U - Minnesota Üniversitesi](https://accessibility.umn.edu/your-role/web-developers) + +Erişilebilir siteler oluşturmanın her yönünü kapsayamayacak olsak da, aşağıda uygulamak isteyeceğiniz temel ilkelerden bazıları verilmiştir. Erişilebilir bir sayfa tasarlamak, erişilebilir hale getirmek için mevcut bir sayfaya geri dönmekten **her zaman** daha kolaydır. + +## İyi görüntüleme ilkeleri + +### Renk güvenli paletler + +İnsanlar dünyayı farklı şekillerde görürler ve buna renkler de dahildir. Siteniz için bir renk şeması seçerken, herkes tarafından erişilebilir olduğundan emin olmalısınız. [Renk paletleri oluşturmak için harika bir araç Color Safe'dir](http://colorsafe.co/). + +✅ Renk kullanımında çok sorunlu bir web sitesi belirleyin. Neden? Niye? + +### Doğru HTML'yi kullanın + +CSS ve JavaScript ile herhangi bir öğeyi herhangi bir kontrol türü gibi göstermek mümkündür. "", "