Anlambilim ve yardımcı teknolojiye giriş
Fare veya işaret cihazı kullanamayan kullanıcıların (fiziksel bir engel, teknoloji sorunu veya kişisel tercihleri nedeniyle) yalnızca klavye kullanımını ele alarak bir siteye nasıl erişilebileceğini gördünüz. Biraz dikkat ve düşünülmesini gerektirse de, baştan planlamanız çok fazla çaba gerektirmeyecektir. Bu temel çalışma tamamlandığında, tamamen erişilebilir ve daha şık bir siteye giden yolun epey ilerlemiş olacaksınız.
Bu derste, bu çalışmayı geliştirecek ve ekranı göremeyen Victor Tsaran gibi kullanıcıları desteklemek üzere web sitelerinin nasıl oluşturulacağı gibi diğer erişilebilirlik faktörleri hakkında düşünmenizi sağlayacağız.
Öncelikle, bilgilere erişmelerini engelleyebilecek engelli kullanıcılara yardımcı olan ekran okuyucular gibi araçların genel terimi olan yardımcı teknoloji ile ilgili biraz bilgi edineceğiz.
Bir sonraki derste, bazı genel kullanıcı deneyimi kavramlarına göz atacak ve yardımcı teknoloji kullanıcılarının deneyimini daha yakından incelemek için bunlardan yola çıkacağız.
Son olarak, bu kullanıcılara iyi bir deneyim sunmak için HTML'nin etkili bir şekilde nasıl kullanılacağını ve daha önce odak noktasının ele alınma şekliyle nasıl örtüştüğünü göreceğiz.
Yardımcı teknolojiler
Yardımcı teknoloji, engelli bir kişinin bir görevi tamamlamasına yardımcı olan cihazlar, yazılımlar ve araçları kapsayan genel bir terimdir. En genel anlamda bu, yürümek için koltuk değneği veya okumak için büyüteç gibi düşük teknolojili bir şey ya da akıllı telefonda bulunan robotik kol veya görüntü tanıma yazılımı gibi yüksek teknolojili bir şey olabilir.
![Koltuk değneği büyüteç ve robotik protez gibi yardımcı teknoloji örnekleri.](https://web.developers.google.cn/static/articles/semantics-builtin/image/assistive-technology-exam-beeec6611c495.png?authuser=5&hl=tr)
Yardımcı teknoloji, tarayıcı yakınlaştırma gibi genel veya özel olarak tasarlanmış oyun kumandası kadar spesifik bir özellik içerebilir. Braille ekran gibi ayrı bir fiziksel cihaz olabilir veya sesli kontrol gibi yazılımlarda tamamen uygulanabilir. Bazı ekran okuyucular gibi işletim sistemine entegre veya bir Chrome uzantısı gibi eklenti olabilir.
![Tarayıcı yakınlaştırma özellikli braille ekranı ve sesli kontrol de dahil daha yardımcı teknoloji örnekleri.](https://web.developers.google.cn/static/articles/semantics-builtin/image/more-assistive-technology-dbc07e3c289be.png?authuser=5&hl=tr)
Yardımcı teknoloji ile teknoloji arasındaki çizgi genelde belirsizdir; sonuçta tüm teknoloji kullanıcılara bir görevde yardımcı olmaya yöneliktir. Teknolojiler de genellikle "yardımcı" kategorisine girebilir veya bu kategoriden ayrılabilir.
Örneğin, en eski ticari konuşma sentezi ürünlerinden biri, görme engelliler için konuşma hesap makinesiydi. Artık arabayla yol tariflerinden sanal asistanlara kadar her yerde konuşma sentezi var. Öte yandan, başta genel amaçlı olan teknoloji çoğu zaman yardımcı bir kullanım görür. Örneğin, az gören kullanıcılar gerçek dünyadaki küçük bir şeyi daha iyi görmek için akıllı telefonlarının kamera yakınlaştırma özelliğini kullanabilir.
Web geliştirme bağlamında, çeşitli teknolojileri göz önünde bulundurmalıyız. Kullanıcılar, ekran okuyucu veya Braille ekran kullanarak, ekran büyüteciyle, sesli kontrol aracılığıyla, anahtarlı cihaz kullanarak ya da kullanabilecekleri daha spesifik bir arayüz oluşturmak için sayfanın varsayılan arayüzünü uyarlayan başka bir yardımcı teknoloji biçimini kullanarak web sitenizle etkileşimde bulunabilirler.
Bu yardımcı teknolojilerin çoğu, erişilebilir bir kullanıcı deneyimi oluşturmak için programatik olarak ifade edilen anlamlara dayanır. Bu dersin büyük bir kısmı bu konuyla ilgilidir. Ancak programatik olarak ifade edilen anlamları açıklayabilmeden önce, biraz verdemler hakkında konuşmamız gerekir.
Fırsatlar
İnsan yapımı bir araç veya cihaz kullandığımızda, genellikle aracın ne işe yaradığı ve nasıl çalıştığı hakkında fikir vermek için onun biçimine ve tasarımına bakarız. Uygunluk, kullanıcısına bir işlem gerçekleştirme fırsatı sunan veya sunan herhangi bir nesnedir. Uygun fiyat ne kadar iyi tasarlanmışsa kullanımı da o kadar açık veya sezgiseldir.
Klasik bir örnek olarak su ısıtıcısı veya çaydanlık verilebilir. Daha önce hiç çay demliği görmemiş olsanız bile suyu ağzına değil, sapına alarak teslim etmeniz gerektiğini kolayca anlayabilirsiniz.
![Saplı ve musluklu çaydanlık.](https://web.developers.google.cn/static/articles/semantics-builtin/image/a-teapot-handle-spout-cb54fefc75464.png?authuser=5&hl=tr)
Çünkü kupalar, sulama kapları, sürahiler, kahve fincanları gibi pek çok başka nesnede gördüklerinize benzer bir maliyet elde edersiniz. Muhtemelen tencereyi fıskiyeden alabilirsiniz, ancak benzer olanaklara yönelik deneyiminiz sapın daha iyi seçenek olduğunu gösteriyor.
Grafik kullanıcı arayüzlerinde olanaklar, yapabileceğimiz eylemleri temsil eder, ancak etkileşimde bulunulacak fiziksel bir nesne olmadığı için belirsiz olabilirler. Bu nedenle GUI yardımcıları, açık ve net olacak şekilde özel olarak tasarlanmıştır: Düğmeler, onay kutuları ve kaydırma çubukları, kullanımlarını mümkün olduğunca az eğitimle aktaracak şekilde tasarlanmıştır.
Örneğin, bazı yaygın form öğelerinin (verdemler) kullanımını şu şekilde farklı sözcüklerle açıklayabilirsiniz:
- Radyo düğmeleri — "Bu seçeneklerden birini belirleyebilirim."
- Onay kutusu - "Bu seçenek için 'evet' veya 'hayır' seçeneğini belirleyebilirim."
- Metin alanı - "Bu alana bir şey yazabilirim."
- Açılır liste - "Seçeneklerimi görüntülemek için bu öğeyi açabilirim."
Bu öğeler hakkında yalnızca onları görebildiğiniz için çıkarımlarda bulunabilirsiniz. Doğal olarak, bir öğenin sağladığı görsel ipuçlarını göremeyen biri, öğenin anlamını veya sezgisel olarak söz konusu öğenin değerini kavramaz. Bu nedenle, bilgilerin kullanıcının ihtiyaçlarına uygun alternatif bir arayüz oluşturabilecek yardımcı teknolojiler tarafından erişilebilir olacak kadar esnek bir şekilde ifade edilmesini sağlamalıyız.
Bir paketin kullanımının görsel olmayan bu şekilde gösterilmesi, anlamsal olarak adlandırılır.
Ekran okuyucular
Yardımcı teknolojiler arasında popüler bir tür olan ekran okuyucu, görme engelli kişilerin ekrandaki metni üretilen bir sesle okunarak bilgisayarlarını kullanabilmelerini sağlayan bir programdır. Kullanıcı, imleci klavyeyle ilgili bir alana hareket ettirerek okunan öğeyi kontrol edebilir.
Victor Tsaran'dan, görme engelli bir kişi olarak OS X'teki VoiceOver adlı yerleşik ekran okuyucuyu kullanarak web'e nasıl eriştiğini açıklamasını istedik. VoiceOver kullanarak Victor'un bu videosunu izleyin.
Şimdi ekran okuyucu kullanmayı deneme sırası sizde. JavaScript'te yazılmış, minimal ancak çalışan bir ekran okuyucu olan ChromeVox Lite'ı içeren sayfayı aşağıda bulabilirsiniz. Ekran, az görme deneyimini simüle etmek ve kullanıcıyı görevi bir ekran okuyucuyla tamamlamaya zorlamak için kasıtlı olarak bulanıklaştırılmıştır. Elbette, bu alıştırma için Chrome tarayıcıyı kullanmanız gerekir.
ChromeVox lite tanıtım sayfası
Ekran okuyucuyu kontrol etmek için ekranın altındaki kontrol panelini kullanabilirsiniz. Bu ekran okuyucunun işlevi çok asgari düzeydedir ancak Previous
ve Next
düğmelerini kullanarak içeriği keşfedebilir ve Click
düğmesini kullanarak öğeleri tıklayabilirsiniz.
Ekran okuyucunun nasıl kullanıldığını anlamak için bu sayfayı ChromeVox lite'ı kullanarak kullanmayı deneyin. Bir ekran okuyucunun (veya diğer yardımcı teknolojilerin) programatik olarak ifade edilen anlamlara dayalı olarak kullanıcı için eksiksiz bir alternatif kullanıcı deneyimi oluşturduğunu düşünün. Ekran okuyucu, görsel arayüz yerine duyulabilir bir arayüz sağlar.
Ekran okuyucunun her bir arayüz öğesiyle ilgili bazı bilgileri nasıl söylediğine dikkat edin. İyi tasarlanmış bir okuyucunun, karşılaştığı öğelerle ilgili aşağıdaki bilgilerin tümünü veya en azından çoğunu söylemesini beklemelisiniz.
- Belirtilmişse (olması gerekir) öğenin role veya türü.
- Varsa öğenin adı (olması gerekir).
- Varsa öğenin değeri (olabilir veya olmayabilir).
- Öğenin state; ör. etkin veya devre dışı (geçerliyse) durumu.
Yerel öğeler yerleşik erişilebilirlik meta verileri içerdiği için ekran okuyucu, bu alternatif kullanıcı arayüzünü oluşturabilir. Oluşturma motorunun görsel bir arayüz oluşturmak için yerel kodu kullanması gibi, ekran okuyucu da buna benzer erişilebilir bir sürüm oluşturmak için DOM düğümlerindeki meta verileri kullanır.
![Ekran okuyucu, erişilebilir düğümler oluşturmak için DOM'yi kullanır.](https://web.developers.google.cn/static/articles/semantics-builtin/image/a-screen-reader-uses-dom-d41868210913.png?authuser=5&hl=tr)