Bu, form erişilebilirliği üzerine yaptığımız küçük serinin 3. gönderisi. 2. gönderiyi kaçırdıysanız, göz atın :focus-visible ile Kullanıcı Odaklılığını Yönetme. Bu yazıda bir formda gezinirken ekran okuyucu kullanımına ve ayrıca bazı en iyi uygulamalara bakacağız.

Ekran Okuyucusu Nedir?

Web'de dolaşırken "ekran okuyucu" terimini duymuş olabilirsiniz. Hatta şu anda, oluşturduğunuz deneyimler üzerinde manuel erişilebilirlik testleri yürütmek için bir ekran okuyucu kullanıyor olabilirsiniz. Ekran okuyucu bir tür AT veya yardımcı teknolojidir.

Ekran okuyucu, dijital metni sentezlenmiş konuşmaya veya genellikle Braille okuyucuyla görülen Braille çıktısına dönüştürür.

Bu örnekte Mac VO kullanacağım. Mac VO (VoiceOver), tüm Mac aygıtlarında yerleşiktir; iOS, iPadOS ve macOS sistemleri. MacOS'u çalıştırdığınız cihazın türüne bağlı olarak VO'nun açılması farklılık gösterebilir. Bunu yazdığım VO'yu çalıştıran Macbook Pro'da dokunmatik çubuk yok, bu yüzden donanıma göre kısayol tuşlarını kullanacağım.

MacOS'ta VO'yu Başlatma

Güncellenmiş bir Macbook Pro kullanıyorsanız makinenizdeki klavye aşağıdaki görüntüye benzeyecektir.

tuşunu basılı tutarak başlayacaksınız cmd tuşuna basın ve ardından Touch ID'ye üç kez hızlı bir şekilde basın.

TouchBar'lı bir MBP (MacBook Pro) kullanıyorsanız kısayolu kullanacaksınız. cmd+fn+f5 VO'yu açmak için Masaüstü veya dizüstü bilgisayarınızla geleneksel bir klavye kullanıyorsanız tuşlar aynı olmalıdır veya Erişilebilirlik ayarlarında VO'yu açmanız gerekecektir. VO açıldığında, sesli bir diyalogla birlikte bu iletişim kutusuyla karşılaşacaksınız. VO'ya giriş.

"VoiceOver'ı Kullan" düğmesini tıklarsanız, web sitelerinizi ve uygulamalarınızı test etmek için VO'yu kullanmaya doğru ilerliyorsunuz demektir. Akılda tutulması gereken bir nokta da VO'nun Safari ile kullanım için optimize edilmiş olmasıdır. Bununla birlikte, ekran okuyucu testinizi çalıştırırken kullandığınız tarayıcının Safari olduğundan emin olun. Bu iPhone ve iPad için de geçerli.

VO'yu en başından itibaren kullanmanın iki ana yolu vardır. Kişisel olarak bunu kullanma şeklim bir web sitesine gitmek ve aşağıdakilerin bir kombinasyonunu kullanmaktır: tab, control, option, shift ve ok tuşları, yalnızca bu tuşlarla deneyimde verimli bir şekilde gezinebiliyorum.

Deneyimde gezinmenin diğer bir yaygın yolu da VoiceOver Rotoru. Rotor, deneyimde doğrudan olmak istediğiniz yere gitmek için tasarlanmış bir özelliktir. Rotor'u kullanarak tüm siteyi dolaşma zorunluluğunu ortadan kaldırırsınız, bunu "Kendi Maceranızı Seçin" olarak düşünün.

değiştirici Tuşlar

Değiştirici tuşlar, VO'daki farklı özellikleri kullanma şeklinizdir. Varsayılan değiştirici tuşu veya VO is control + option ancak bunu büyük harf kilidine çevirebilir veya birbirinin yerine kullanmak üzere her iki seçeneği de seçebilirsiniz.

Rotorun Kullanılması

Rotoru kullanmak için değiştirici tuş(lar)ınız ve “U” harfinden oluşan bir kombinasyon kullanmanız gerekir. Benim için değiştirici anahtarım caps lock. basıyorum caps lock + U ve Rotor benim için dönüyor. Rotor açıldığında sol ve sağ okları kullanarak deneyimin istediğim herhangi bir bölümüne gidebilirim.

[Gömülü içerik]

Başlık Düzeyine Göre Gezinme

Deneyimde gezinmenin bir başka güzel yolu da seviyeyi belirlemektir. Değiştirici tuşlarınızın kombinasyonunu kullanırsanız + cmd + H başlık düzeylerine göre belge yapısında gezinebilirsiniz. tuşuna basarak da belgeyi yukarı taşıyabilirsiniz. shift bu şekilde sırayla, değiştirici tuşlar + shift + cmd + H.

[Gömülü içerik]

Geçmiş ve En İyi Uygulamalar

Formlar, HTML'de sahip olduğumuz en güçlü yerel öğelerden biridir. İster bir sayfada bir şey arayın, ister bir şey satın almak için form gönderin, ister bir anket gönderin. Formlar web'in temel taşıdır ve deneyimlerimize etkileşimi getiren bir katalizördür.

Web formunun geçmişi, 1995 yılının Eylül ayına kadar uzanmaktadır. HTML 2.0 spesifikasyonu. Bazıları internetin eski güzel günlerini söylüyor, en azından ben öyle söylüyorum. Stephanie Stimac harika bir makale yazdı Smashing Magazine başlıklı, “Seçimi ve Ötesini Standartlaştırma: Yerel HTML Form Kontrollerinin Dünü, Bugünü ve Geleceği anlayışının sonucu olarak, buzdolabında iki üç günden fazla durmayan küçük şişeler elinizin altında bulunur.

Web için erişilebilir bir form oluştururken izlenecek en iyi 5 uygulama aşağıda verilmiştir.

1. Bir form öğesi kullandığınızdan emin olun. Formlara varsayılan olarak erişilebilirdir ve her zaman div'ler üzerinden kullanılmalıdır.

<form>
  <!-- Form controls are nested here. -->
</form>

2. kullandığınızdan emin olun. for ve id nitelikler label's ve inputböylece bağlantılı olurlar. Bu şekilde, etikete tıklarsanız/dokunursanız odak girişe kayar ve yazmaya başlayabilirsiniz.

<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>

3. Formun doldurulması için bir alan gerekliyse, gerekli özniteliği ve aria-gerekli özniteliği kullanın. Bunlar formun gönderilmesini kısıtlayacaktır. Aria-required özelliği, yardımcı tekniğe alanın gerekli olduğunu açıkça bildirir.

<input type="text" id="name" name="name" required aria-required/>

4. Kullan, :focus, :focus-within ve :focus-visible Bir kullanıcının odağı nasıl aldığını yönetmek ve özelleştirmek için CSS sözde sınıfları.

form:focus-within {
 background-color: #cfffcf;
}

input:focus-within {
 border: 10px solid #000000;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
 outline: 2px solid crimson;
 border-radius: 3px;
}

5. A button form göndermek gibi bir eylemi başlatmak için kullanılır. Kullan onu! kullanarak düğme oluşturmayın. div'S. A div tanımı gereği bir bölücüdür. Doğasında erişilebilirlik özellikleri yoktur.

Gösteri

[Gömülü içerik]

Kodu kontrol etmek istiyorsanız şuraya gidin: VoiceOver Demosu GitHub deposu. Yukarıdaki demoyu seçtiğiniz ekran okuyucunuzla denemek istiyorsanız şuraya göz atın: VoiceOver ile Web Formunda Gezinme.

Ekran Okuyucu Yazılımı

Aşağıda, belirli işletim sisteminizde kullanabileceğiniz çeşitli ekran okuyucu yazılımı türlerinin bir listesi bulunmaktadır. Tercih ettiğiniz makine Mac değilse, Windows ve Linux'un yanı sıra Android cihazlar için de seçenekler mevcuttur.

NVDA

NVDA, NV Access'in ekran okuyucusudur. Şu anda yalnızca Microsoft Windows 7 SP1 ve sonraki sürümleri çalıştıran bilgisayarlarda desteklenmektedir. Daha fazla erişim için şuraya göz atın: NV Access web sitesindeki NVDA sürüm 2024.1 indirme sayfası!

JAWS

“Daha iyi bir ekran okuyucuya ihtiyacımız var”

- Anonim

Yukarıdaki referansı anladıysanız, iyi bir arkadaşsınız demektir. JAWS web sitesine göre özetle şöyle:

“JAWS, Job Access With Speech, görme kaybı nedeniyle ekran içeriğini görme veya fareyle gezinme gibi sorunlar yaşayan bilgisayar kullanıcıları için geliştirilmiş, dünyanın en popüler ekran okuyucusudur. JAWS, bilgisayarınızdaki en popüler bilgisayar uygulamaları için konuşma ve Braille çıktısı sağlar. Ofisinizden, uzak masaüstünüzden veya evinizden internette gezinebilecek, belge yazabilecek, e-posta okuyabilecek ve sunumlar oluşturabileceksiniz.

JAWS web sitesi

JAWS'ı kendiniz inceleyin ve eğer bu çözüm ihtiyaçlarınızı karşılıyorsa kesinlikle bir şans verin!

Hikâyeci

Ekran Okuyucusu, Windows 11 ile birlikte gelen yerleşik bir ekran okuyucu çözümüdür. Ekran okuyucu seçiminiz olarak bunu kullanmayı seçerseniz aşağıdaki bağlantı, kullanımına ilişkin destek belgeleri içindir.

Anlatıcı için eksiksiz kılavuz

katil balina

Orca, GNOME çalıştıran farklı Linux dağıtımlarında kullanılabilen bir ekran okuyucudur.

“Orca, konuşma ve yenilenebilir braille aracılığıyla grafiksel masaüstüne erişim sağlayan ücretsiz, açık kaynaklı, esnek ve genişletilebilir bir ekran okuyucudur.

Orca, Linux ve Solaris için birincil yardımcı teknoloji altyapısı olan Yardımcı Teknoloji Hizmet Sağlayıcı Arayüzünü (AT-SPI) destekleyen uygulamalar ve araç kitleriyle çalışır. AT-SPI'yi destekleyen uygulamalar ve araç kitleri arasında GNOME Gtk+ araç seti, Java platformunun Swing araç seti, LibreOffice, Gecko ve WebKitGtk yer alır. KDE Qt araç seti için AT-SPI desteği araştırılıyor."

Orca Web Sitesi

TalkBack'e

Google TalkBack, Android cihazlarda kullanılan ekran okuyucudur. Açma ve kullanma hakkında daha fazla bilgi için, Android Erişilebilirlik Destek Sitesindeki bu makaleye göz atın.

tarayıcı Desteği

HTML öğeleri ve ARIA (Erişilebilir Zengin İnternet Uygulaması) nitelikleri için gerçek tarayıcı desteği arıyorsanız, şunu öneririm: HTML için caniuse.com ve ARIA için Erişilebilirlik Desteği Tarayıcı desteğiyle ilgili en son 4-1-1'i almak için. Unutmayın, tarayıcı teknolojiyi desteklemiyorsa ekran okuyucunun da desteklememesi muhtemeldir.

DijitalA11Y makaleleriyle tarayıcı ve ekran okuyucu bilgilerini özetlemeye yardımcı olabilir,  Ekran Okuyucular ve Tarayıcılar! Erişilebilirlik Testi için En İyi Kombinasyon Hangisidir?

Hızlı Linkler

https://support.apple.com/guide/voiceover/with-the-voiceover-rotor-mchlp2719/mac

https://www.w3.org/TR/wai-aria/

https://www.w3.org/WAI/standards-guidelines/aria/

https://support.google.com/accessibility/android/answer/6283677?hl=en

https://support.google.com/accessibility/android/answer/6283677?hl=en

• SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
• PlatoData.Network Dikey Üretken Yapay Zeka. Kendine güç ver. Buradan Erişin.
• PlatoAiStream. Web3 Zekası. Bilgi Genişletildi. Buradan Erişin.
• PlatoESG. karbon, temiz teknoloji, Enerji, Çevre, Güneş, Atık Yönetimi. Buradan Erişin.
• PlatoSağlık. Biyoteknoloji ve Klinik Araştırmalar Zekası. Buradan Erişin.
• Kaynak: https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/