Yerel HTML öğeleri ve öğrenmesi kolay ARIA spesifikasyonları, bir web uygulamasının içeriğini engeller olmadan iletmek için kullanılabilir. Dizinin ilk bölümü, hayali sigorta şirketi “Crimson Assurance” örneğini kullanarak engelsiz bir web sitesinin yapısını anlattı. Makale bilgisi, bu ikinci bölümün anlaşılmasına yardımcı olur, ancak zorunlu bir gereklilik değildir.
Ayrıca bu durumda kod örnekleri tek uygulama seçeneği değil, örnek uygulama içindeki ideal çözümdür. Bunlar, bir web uygulamasının içeriğinin engelsiz iletişiminin en önemli unsurlarını açıklamayı ve teknik bir genel bakış sağlamayı amaçlamaktadır. Bildirilen çalışanların isimleri, sigorta gibi hayalidir.
İçerik haritası gezintisi
Her web uygulama sayfasının ana alanı referans noktasının altında başlar <main> bir ekmek kırıntısı navigasyonu ile. Bir kullanıcı bunu web sitesi yapısındaki konumunu belirlemek için kullanabilir ve ana başlığa ek olarak, burada ayrıca istenen sayfayı gerçekten açıp açmadığını da kontrol edebilir. Bir kullanıcı, bu navigasyonu kullanarak daha önce seyahat edilen rotadaki ilk sayfaya da dönebilir. Yönlendirmeyi kolaylaştırmanın yanı sıra, sitenin yapısı hakkında ana gezinmeye göre daha ayrıntılı bilgi sağlar.
Erişilebilirlik açısından, kırıntı navigasyonu bu şekilde açıkça etiketlenmelidir. “Buradasın:” gibi bir atama genellikle bu amaçla okunur. Etiketin görünürlüğü, navigasyonunuzu ve dolayısıyla geçerli konumunuzu hızlı bir şekilde bulmanıza yardımcı olduğundan, etiket yalnızca ekran okuyucular tarafından değil herkes tarafından görülebilmelidir.
Kaynak kodunda, tüm alan bir tane altında olmalıdır. <nav>– Yer işareti bulunur. Ana navigasyon gibi, bu da olmalı <nav>-Referans noktası aria-label atanmak Crimson Assurance’da bu navigasyona “navigasyon yolu” denir; atama görsel olarak görünmez. “ARIA”, “Erişilebilir Zengin İnternet Uygulamaları” anlamına gelir ve kullanıcı arabirimi öğelerini anlamsal olarak işaretlemek için HTML’nin bir uzantısıdır. Yalnızca HTML, gerekli semantik bilgileri yerel olarak sağlamıyorsa kullanılmalıdır.
Yol şununla başlamalıdır: <ol>-Etiketler sıralı bir liste olarak görünür. Liste, şu anlama gelir: aria-label aynı onlar gibi <nav>– “Navigasyon rotası” etiketli dönüm noktası. Son giriş tarafından gönderilecek aria-label="page" geçerli sayfa olarak işaretlendi.
Gereksiz yer işareti tanımı ve liste, ister doğrudan yer işaretine gidin, ister doğrudan listeye gidin, web sitesinin hangi alanında bulunduğunuzu doğrudan gösterir.
Crimson Assurance müşteriye genel bakış sayfasındaki içerik haritası gezintisi burada:
<nav aria-label="Navigationspfad">
<span>Sie befinden sich hier: </span>
<ol aria-label="Navigationspfad">
<li>
<a href=".../portal">Startseite</a>
</li>
<li>
<a href=".../portal">
Kundenübersicht
</a>
</li>
<li>
<a href=".../portal/customers/a2" aria-current="page">
Kundendeckblatt
</a>
</li>
</ol>
</nav>
Crimson ana sayfasından o anda görüntülenen müşteri kapağına giden gezinme yolu.
arama alanları
Crimson Assurance, müşteriye genel bakış sayfasında bir müşteri araması sunar. Arama alanının etiketi olarak, ayarlanan <label for=""> “Müşterinin adı”. Arama alanıyla bağlantı, etiketi bir öğeye benzersiz bir şekilde atayan kimlik aracılığıyla yapılır. Bir etiket tam olarak bir öğeye atanabilir ve bir öğenin tam olarak bir etiketi olabilir. Etiketler, bir öğenin benzersiz, teknoloji destekli, okunabilir şekilde etiketlenmesini sağlar.
Ayrıca, etkileşimli bir öğenin etiketi, imleci giriş alanına yerleştirmek için bir giriş alanı gibi tıklanabilir. Bir ekran okuyucu genellikle kendi satırındaki bir etiketi okur. Odağı karşılık gelen giriş alanına ayarlamak için bu satırları tıklamanız yeterli olduğundan, bir öğeye odaklanmak çok daha verimlidir.
Etiket aynı satırdaki bir giriş alanının önünde olsa bile, önce giriş alanına odaklanmaktansa satırın başına atlamak ve tıklamak daha kolaydır. HTML etiketleri, tıklanabilir alanı artırdıkları için motor engelli kullanıcılar için çok kullanışlıdır. Crimson Assurance Müşteri Adı etiketi arama alanı sözdizimi şöyledir:
<form id="customer-search-form">
<label for="customer-search-input">Kundenname</label>
<input id=" customer-search-input">
</form>
Bir arama alanı “label for” ile etiketlenebilir.
ile bir arama kutusu görünecektir. <input>-Öznitelik türü search anlamsal olarak farklıdır. Yardımcı bir teknoloji bu bilgileri kullanıcılara iletebilir. Bu size doğrudan ne tür özel bir giriş alanı olduğunu ve onu kullanarak hangi eylemin gerçekleştirilebileceğini söyler.
Otomatik tamamlama, özellikle kişisel bir web sitesindeki bir arama alanı için kullanışlıdır. Bir yandan konsantrasyonu düşük olan kullanıcıları desteklerken, diğer yandan genel olarak en çok iletişim kurulan müşterilerin aramalarını hızlandırır.
Öte yandan bir yer tutucu, erişilebilirliği açıkça iyileştirmez. Aksine, burada destek olarak sunulan tüm bilgilerin etikette daha iyi görünmesi gerektiğinden, kullanımı genellikle önerilmez. Crimson Assurance için yer tutucu, olası bir girişe örnek olarak müşterinin adıdır. Bu, belirli bir biçim gerektirmediğinden, yer tutucuya aslında gerek yoktur. Ancak, bir yer tutucunun kullanımına örnek teşkil eder. Örneğin, bir yer tutucu belirli bir tarih formatını işaret edecekse, bunu giriş alanı etiketinde belirtmek en iyisi olacaktır. Bu, yanlış bir format girerseniz, düzeltme yapsanız bile hangi formatı istediğinizi görebileceğiniz anlamına gelir. Bir yer tutucu, siz onu ekledikten sonra artık görünmediğinden, bunun dışında gerekli biçimi hatırlamanız gerekir.
Crimson Assurance’ta Müşteri Araştırması, Müşteriye Genel Bakış web sayfasında ikinci ana faaliyet olan Son Müşteriler’in üzerindeki ilk ana faaliyettir. öznitelik autofocus arama alanı, sayfa yüklendiğinde imleci doğrudan arama alanına yerleştirir, böylece bir kullanıcı, arama alanına gitmek zorunda kalmadan sayfayı yükledikten hemen sonra bir müşteri arayabilir.
Crimson Assurance arama alanının sözdizimi şöyledir:
<input type="search" autocomplete="on" placeholder="Johnnie Summers" autofocus>
Bir arama alanının anlamsal olarak etiketlenmesi ve otomatik tamamlama, yer tutucular ve otomatik odaklamanın kullanılması.
Crimson Assurance, arama alanına en az iki karakter girdikten sonra müşteri arama sonuçlarını görüntüler. Bulunan müşterilerin listesi dinamik olarak oluşturulur ve daha fazla harf girildikçe değişir. Bir ekran okuyucu, içeriğin o anda ön plan alanından farklı bir alanda değiştiğini başlangıçta algılamaz. Uygulamanın bir ekran okuyucuya ilettiği daha fazla bilgi olmadan, kullanıcı iki karakter ve her ek karakter girdikten sonra arama alanından çıkmalı ve kaç müşteri bulunduğunu kontrol etmelidir; sıkıcı ve tatmin edici olmayan bir süreç.
Ekran okuyucu gibi yardımcı bir teknolojiye, bir web sayfasının bir alanının kullanıcı etkinliğine göre dinamik olarak değiştiğini söylemek için geliştiriciler değişen alana ARIA özniteliğini ekleyebilir. aria-live değeri ile "assertive" atamak için aria-live Bir ekran okuyucunun “izlemesi” gereken bir web sitesinin dinamik olarak değişen alanını işaretler. Sonuç olarak, değişiklikleri izlemek için tüm sayfayı tekrar tekrar yeniden yüklemeniz ve okumasını sağlamanız gerekmez.
Değer "assertive" değişikliklerin sitenin kullanıcılara hemen iletmesi gereken acil bilgiler olduğunu belirtir. Örneğin, dinamik bir aramada, kullanıcı yazmaya devam ederken veya arama sonuçlarının sayısını duymak için çok kısa bir süre yazmayı bıraktıklarında, sayfanın arama sonuçlarının sayısını hemen bildirmesi mantıklıdır.
Crimson Assurance ile arama sonuçları bölgesi dinamik bölge olarak işaretlenir ve "assertive" öncelik. Yazdığınız ikinci harften itibaren, sayfa hemen arama sonuçlarının sayısı hakkında bir mesaj görüntüler. Ayrıca, tüm arama sonuçları okunur. Böylece bir kullanıcı, imleç odağını değiştirmek zorunda kalmadan arama sonuçlarının yanı sıra arama sonuçlarının sayısını da okuyabilme olanağına sahip olur. Arama sonuçlarının çokluğundan memnunsa, aramaya devam etmek için arama sonuçlarının tüm çıktısını dinlemek zorunda değildir, ancak çıktıyı istediği zaman durdurabilir.
aria-live=”assertive” kullanılması, dinamik olarak oluşturulan arama sonuçlarının sayısının çıkarılmasına neden olur.
Haberin Sonu
Ayrıca bu durumda kod örnekleri tek uygulama seçeneği değil, örnek uygulama içindeki ideal çözümdür. Bunlar, bir web uygulamasının içeriğinin engelsiz iletişiminin en önemli unsurlarını açıklamayı ve teknik bir genel bakış sağlamayı amaçlamaktadır. Bildirilen çalışanların isimleri, sigorta gibi hayalidir.
İçerik haritası gezintisi
Her web uygulama sayfasının ana alanı referans noktasının altında başlar <main> bir ekmek kırıntısı navigasyonu ile. Bir kullanıcı bunu web sitesi yapısındaki konumunu belirlemek için kullanabilir ve ana başlığa ek olarak, burada ayrıca istenen sayfayı gerçekten açıp açmadığını da kontrol edebilir. Bir kullanıcı, bu navigasyonu kullanarak daha önce seyahat edilen rotadaki ilk sayfaya da dönebilir. Yönlendirmeyi kolaylaştırmanın yanı sıra, sitenin yapısı hakkında ana gezinmeye göre daha ayrıntılı bilgi sağlar.
Erişilebilirlik açısından, kırıntı navigasyonu bu şekilde açıkça etiketlenmelidir. “Buradasın:” gibi bir atama genellikle bu amaçla okunur. Etiketin görünürlüğü, navigasyonunuzu ve dolayısıyla geçerli konumunuzu hızlı bir şekilde bulmanıza yardımcı olduğundan, etiket yalnızca ekran okuyucular tarafından değil herkes tarafından görülebilmelidir.
Kaynak kodunda, tüm alan bir tane altında olmalıdır. <nav>– Yer işareti bulunur. Ana navigasyon gibi, bu da olmalı <nav>-Referans noktası aria-label atanmak Crimson Assurance’da bu navigasyona “navigasyon yolu” denir; atama görsel olarak görünmez. “ARIA”, “Erişilebilir Zengin İnternet Uygulamaları” anlamına gelir ve kullanıcı arabirimi öğelerini anlamsal olarak işaretlemek için HTML’nin bir uzantısıdır. Yalnızca HTML, gerekli semantik bilgileri yerel olarak sağlamıyorsa kullanılmalıdır.
Yol şununla başlamalıdır: <ol>-Etiketler sıralı bir liste olarak görünür. Liste, şu anlama gelir: aria-label aynı onlar gibi <nav>– “Navigasyon rotası” etiketli dönüm noktası. Son giriş tarafından gönderilecek aria-label="page" geçerli sayfa olarak işaretlendi.
Gereksiz yer işareti tanımı ve liste, ister doğrudan yer işaretine gidin, ister doğrudan listeye gidin, web sitesinin hangi alanında bulunduğunuzu doğrudan gösterir.
Crimson Assurance müşteriye genel bakış sayfasındaki içerik haritası gezintisi burada:
<nav aria-label="Navigationspfad">
<span>Sie befinden sich hier: </span>
<ol aria-label="Navigationspfad">
<li>
<a href=".../portal">Startseite</a>
</li>
<li>
<a href=".../portal">
Kundenübersicht
</a>
</li>
<li>
<a href=".../portal/customers/a2" aria-current="page">
Kundendeckblatt
</a>
</li>
</ol>
</nav>
Crimson ana sayfasından o anda görüntülenen müşteri kapağına giden gezinme yolu.
arama alanları
Crimson Assurance, müşteriye genel bakış sayfasında bir müşteri araması sunar. Arama alanının etiketi olarak, ayarlanan <label for=""> “Müşterinin adı”. Arama alanıyla bağlantı, etiketi bir öğeye benzersiz bir şekilde atayan kimlik aracılığıyla yapılır. Bir etiket tam olarak bir öğeye atanabilir ve bir öğenin tam olarak bir etiketi olabilir. Etiketler, bir öğenin benzersiz, teknoloji destekli, okunabilir şekilde etiketlenmesini sağlar.
Ayrıca, etkileşimli bir öğenin etiketi, imleci giriş alanına yerleştirmek için bir giriş alanı gibi tıklanabilir. Bir ekran okuyucu genellikle kendi satırındaki bir etiketi okur. Odağı karşılık gelen giriş alanına ayarlamak için bu satırları tıklamanız yeterli olduğundan, bir öğeye odaklanmak çok daha verimlidir.
Etiket aynı satırdaki bir giriş alanının önünde olsa bile, önce giriş alanına odaklanmaktansa satırın başına atlamak ve tıklamak daha kolaydır. HTML etiketleri, tıklanabilir alanı artırdıkları için motor engelli kullanıcılar için çok kullanışlıdır. Crimson Assurance Müşteri Adı etiketi arama alanı sözdizimi şöyledir:
<form id="customer-search-form">
<label for="customer-search-input">Kundenname</label>
<input id=" customer-search-input">
</form>
Bir arama alanı “label for” ile etiketlenebilir.
ile bir arama kutusu görünecektir. <input>-Öznitelik türü search anlamsal olarak farklıdır. Yardımcı bir teknoloji bu bilgileri kullanıcılara iletebilir. Bu size doğrudan ne tür özel bir giriş alanı olduğunu ve onu kullanarak hangi eylemin gerçekleştirilebileceğini söyler.
Otomatik tamamlama, özellikle kişisel bir web sitesindeki bir arama alanı için kullanışlıdır. Bir yandan konsantrasyonu düşük olan kullanıcıları desteklerken, diğer yandan genel olarak en çok iletişim kurulan müşterilerin aramalarını hızlandırır.
Öte yandan bir yer tutucu, erişilebilirliği açıkça iyileştirmez. Aksine, burada destek olarak sunulan tüm bilgilerin etikette daha iyi görünmesi gerektiğinden, kullanımı genellikle önerilmez. Crimson Assurance için yer tutucu, olası bir girişe örnek olarak müşterinin adıdır. Bu, belirli bir biçim gerektirmediğinden, yer tutucuya aslında gerek yoktur. Ancak, bir yer tutucunun kullanımına örnek teşkil eder. Örneğin, bir yer tutucu belirli bir tarih formatını işaret edecekse, bunu giriş alanı etiketinde belirtmek en iyisi olacaktır. Bu, yanlış bir format girerseniz, düzeltme yapsanız bile hangi formatı istediğinizi görebileceğiniz anlamına gelir. Bir yer tutucu, siz onu ekledikten sonra artık görünmediğinden, bunun dışında gerekli biçimi hatırlamanız gerekir.
Crimson Assurance’ta Müşteri Araştırması, Müşteriye Genel Bakış web sayfasında ikinci ana faaliyet olan Son Müşteriler’in üzerindeki ilk ana faaliyettir. öznitelik autofocus arama alanı, sayfa yüklendiğinde imleci doğrudan arama alanına yerleştirir, böylece bir kullanıcı, arama alanına gitmek zorunda kalmadan sayfayı yükledikten hemen sonra bir müşteri arayabilir.
Crimson Assurance arama alanının sözdizimi şöyledir:
<input type="search" autocomplete="on" placeholder="Johnnie Summers" autofocus>
Bir arama alanının anlamsal olarak etiketlenmesi ve otomatik tamamlama, yer tutucular ve otomatik odaklamanın kullanılması.
Crimson Assurance, arama alanına en az iki karakter girdikten sonra müşteri arama sonuçlarını görüntüler. Bulunan müşterilerin listesi dinamik olarak oluşturulur ve daha fazla harf girildikçe değişir. Bir ekran okuyucu, içeriğin o anda ön plan alanından farklı bir alanda değiştiğini başlangıçta algılamaz. Uygulamanın bir ekran okuyucuya ilettiği daha fazla bilgi olmadan, kullanıcı iki karakter ve her ek karakter girdikten sonra arama alanından çıkmalı ve kaç müşteri bulunduğunu kontrol etmelidir; sıkıcı ve tatmin edici olmayan bir süreç.
Ekran okuyucu gibi yardımcı bir teknolojiye, bir web sayfasının bir alanının kullanıcı etkinliğine göre dinamik olarak değiştiğini söylemek için geliştiriciler değişen alana ARIA özniteliğini ekleyebilir. aria-live değeri ile "assertive" atamak için aria-live Bir ekran okuyucunun “izlemesi” gereken bir web sitesinin dinamik olarak değişen alanını işaretler. Sonuç olarak, değişiklikleri izlemek için tüm sayfayı tekrar tekrar yeniden yüklemeniz ve okumasını sağlamanız gerekmez.
Değer "assertive" değişikliklerin sitenin kullanıcılara hemen iletmesi gereken acil bilgiler olduğunu belirtir. Örneğin, dinamik bir aramada, kullanıcı yazmaya devam ederken veya arama sonuçlarının sayısını duymak için çok kısa bir süre yazmayı bıraktıklarında, sayfanın arama sonuçlarının sayısını hemen bildirmesi mantıklıdır.
Crimson Assurance ile arama sonuçları bölgesi dinamik bölge olarak işaretlenir ve "assertive" öncelik. Yazdığınız ikinci harften itibaren, sayfa hemen arama sonuçlarının sayısı hakkında bir mesaj görüntüler. Ayrıca, tüm arama sonuçları okunur. Böylece bir kullanıcı, imleç odağını değiştirmek zorunda kalmadan arama sonuçlarının yanı sıra arama sonuçlarının sayısını da okuyabilme olanağına sahip olur. Arama sonuçlarının çokluğundan memnunsa, aramaya devam etmek için arama sonuçlarının tüm çıktısını dinlemek zorunda değildir, ancak çıktıyı istediği zaman durdurabilir.
aria-live=”assertive” kullanılması, dinamik olarak oluşturulan arama sonuçlarının sayısının çıkarılmasına neden olur.
Haberin Sonu