mütevazi <label>_ Bu yaygın. Sade. Bu basit. Bu sıradan. Yüzünde, bu konuda özel bir şey yok. Genellikle bazı metinlere stil vermek için CSS için yalnızca bir hedef olarak kullanılır. Bilmek için daha ne var? O ufaklığı form alanınızın üstüne vurun ve sayfamızı dinamik ve heyecan verici hale getirmek için CSS için Javascript'e geri dönelim, değil mi?

Belki de değil.

önsöz

Bir HTTP sunucusuna erişimi olan hemen hemen her profesyonelin etiketler hakkında yazdığına dair kullanışlı bir miktara bahse girerim. Buna ölü bir at demek kolay olurdu, ancak 2023 WebAIM Milyon Raporuna göre , internetteki en iyi milyon ana sayfanın %96,3'ünde en az bir erişilebilirlik hatası tespit edildi ve bu sayfaların %45,9'unda tespit edildi. form etiketleriyle ilgili hatalar içeriyordu. Bu, yetersiz renk kontrastı, alternatif metin içermeyen resimler ve erişilebilir adı olmayan bağlantılardan sonra en yaygın 4. erişilebilirlik sorunudur. Her iki rakam da son 5 yılda düşüş eğilimi gösterdi, ancak onları daha da düşürmek için önümüzde hala çok iş var. Bu gönderi en az bir kişiyi "Vay canına, bunu bilmiyordum" diye düşündürürse, bunu heyecan verici bir başarı olarak kabul edeceğim

Etiketin Amacı

Bir web uygulamasının çerçevesindeki bir etiketi düşündüğümüzde, muhtemelen metin alanları, radyo düğmeleri, onay kutuları vb. öğelere bitişik bir form hayal ediyoruz. Adlar ve tarihler gibi beklenen değerleri veya diğer seçimlerin neyi temsil ettiğini iletirler. Görsel olarak mantıklı, ancak oyunda daha fazlası var.

Neden Önemlidir?

Yekpare "kullanıcılar" terimini soyduğumuzda, kullanıcıların insan olduğunu anlamalıyız. İnsanlar benzersiz ve karmaşıktır ve bu, hızlı tempolu yazılım geliştirme dünyasında kaybolabilir. Kapsayıcılığı göz önünde bulundurarak tasarlamak, zihinsel bir değişim gerektirir; Hedefimiz olarak yalnızca "ortalama" kullanıcıyı düşündüğümüzde, çok sayıda insanı uygulamalarımızdan dışlama riskiyle karşı karşıya kalırız. Bu dışlanmanın yükünü engelliler çekiyor ama bu böyle olmak zorunda değil.

Ve iyi haber: Erişilebilir etiketler kolaydır. Bir ekibin elde edebileceği en kolay erişilebilirlik "kazançlarından" biri olduklarını iddia ediyorum. Bir etiketi neyin erişilebilir ve bir o kadar da önemlisi kullanılabilir kıldığını öğrenelim.

Erişilebilir Haydi

Farklı durumlara sahip iki kişi düşünün.

Jeremy 41 yaşında. Yerel bir bankada mali müşavir olarak çalışıyor. Yüzmeyi, yürüyüş yapmayı ve arkadaşları ve ailesiyle kamp yapmayı sever. Jeremy de 30'lu yaşlarının başında geçirdiği beyin ameliyatının komplikasyonları nedeniyle kör. Jeremy, hem işinin bir işlevi olarak hem de boş zamanlarında teknolojiyle etkileşim kurmak için bir ekran okuyucu kullanıyor.

Menekşe 73 yaşında. Başarılı bir avukatlık kariyerinin ardından emekli oldu. Emekliliğinde, doğu Avrupa'dan göçmen olan ebeveynlerinin memleketlerini ve tarihi yerleri ziyaret etmek için dünyayı dolaştı. Son zamanlarda torunlarına daha yakın yaşamak için taşındı. Violet'in iki elinde de kireçlenme var. Gereksiz acıdan kaçınmak için bilgisayarı ve telefonuyla etkileşim kurmak için konuşma tanıma yazılımı kullanmayı tercih ediyor.

Hem Jeremy hem de Violet aynı web sayfasını kullanmaya çalışıyor: tıbbi hizmet sağlayıcılarının web sitesinde, tıbbi faturaları ödeme, kişisel bilgilerini güncelleme, randevu alma vb. olanaklar sunan bir hasta portalı.

Jeremy'nin Sorunu:

"Tıbbi faturamı ödemek için kredi kartımı kullanmam gerekiyor, ancak ödeme sayfasındaki alanların ne olduğunu anlayamıyorum."

Etiketler form öğeleriyle doğru şekilde ilişkilendirilmezse, ekran okuyucu yalnızca öğenin türünü okur, yakındaki herhangi bir metni okumaz.

Violet'in Sorunu:

"Dosyamdaki adresimi değiştirmem gerekiyor ama bilgisayara ne söylersem söyleyeyim Kaydet düğmesi tıklamıyor."

Yukarıdaki ekran okuyucu örneğinde olduğu gibi, konuşma tanıma yazılımı da form alanlarında ve düğmelerde gezinmek ve bunları etkinleştirmek için uygun etiket ilişkilendirmesine güvenir.

Bu doğru. Bu sorunların her ikisi de yetersiz etiketlenmiş form öğelerinden kaynaklanır. Tipik olarak bu sonuçları üreten bazı kodlara göz atalım.

Jeremy'nin Koddaki Sorunu

Ödeme şeklini inceleyelim.:

<form>
  <label>Card Number</label>
  <input type=”text” id=”card-number” />
  <label>Expiration Date</label>
  <input type=”text” id=”expiration-date”/>
  <label>Security Code</label>
  <input type=”text” id=”security-code”/>
  <button type=”submit” id=”submit”>Submit</button>
</form>

Öznitelik for_

En basit yol, niteliği kullanmaktır for. Bu, öğenin yerel bir özelliğidir <label>. Beklenen değeri, idhedef form öğesinin özniteliğidir. Örneğimizde, ids ile üç girdimiz var: card-number, expiration-date, ve security-code. forNiteliği etiketlere ekleyebilir ve değerlerini karşılık gelen giriş kimliğine ayarlayabiliriz. Bunun neye benzediğini görelim.

<form>
  <label for=”card-number”>Card Number</label>
  <input type=”text” id=”card-number” />
  <label for=”expiration-date”>Expiration Date</label>
  <input type=”text” id=”expiration-date”/>
  <label for=”security-code”>Security Code</label>
  <input type=”text” id=”security-code”/>
  <button type=”submit” id=”submit”>Submit</button>
</form>

Akılda tutulması gereken bazı şeyler

• Nitelik girdide değil öğede forolmalıdır .<label>
• Giriş öğesinin bir özniteliği olmalıdırid . <label>Hala kendi özniteliğine sahip olabilir , idancak burada alakalı değil.
• Etiket ve girdi arasındaki ilişki birebirdir.

ARIA'yı kullanma

ARIA, yardımcı teknolojileri bir öğenin adı, durumu ve rolü hakkında bilgilendirmek için öğelere eklenebilen güçlü bir nitelikler kümesidir. Bizim durumumuzda, bir etiketi bir girdiyle ilişkilendirmek için aria-labelledby niteliğini kullanabiliriz. Bunun nasıl çalıştığına bakalım.

<form>
  <label id="card-number-label">Card Number</label>
  <input type="text" aria-labelledby="card-number-label" />
  <label id="expiration-date-label">Expiration Date</label>
  <input type="text" aria-labelledby="expiration-date-label"/>
  <label id="security-code-label">Security Code</label>
  <input type="text" aria-labelledby="security-code-label"/>
  <button type="submit" id="submit">Submit</button>
</form>

<form>
 <label id=”card-number-label”>Card Number</label>
 <label id=”card-number-instructions”>Enter the 16 digit number on the front of your card</label>
 <input type=”text” id=”card-number” aria-labelledby=”card-number-label card-number-instructions”/>
 ...
</form>

Artık Jeremy'nin karşılaştığı sorunu düzelttiğimize göre, Violet'in kullandığı sayfada neyin yanlış gittiğini inceleyelim.

Violet'in Koddaki Problemi

Violet'in kullandığı sayfa, iletişim bilgileri için form alanları ve kaydetme ve iptal işlevlerini gerçekleştirmek için bir araç çubuğunda düğmeler içerir. Bu iki düğme, görünür bir metin etiketi olmadan yalnızca simgelerle temsil edilir. Bu kendi içinde geliştirilebilir, ancak gerçek dünyada rastlanması yaygın bir durumdur.

İşte problemli kodumuz.

<form>
  <label for=”address1">Address 1</label>
  <input type=”text” id=”address1" />
  <label for=”address2">Address 2</label>
  <input type=”text” id=”address2"/>
  <button type=”button” id=”save” class=”icon-only”></button>
  <button type=”button” id=”cancel” class=”icon-only”></button>
</form>

ARIA'yı Kullanma (Tekrar)

Öznitelik aria-label, çoğu HTML öğesine doğrudan erişilebilir bir ad sağlamak için kullanılabilir. Değeri, yardımcı teknolojilere maruz kalan metindir. Bu, insan dili olmalıdır, çünkü ekran okuyucular arya etiketli metni anons edecek ve ses tanıma yazılımı kullanıcıları onu öğeyle etkileşim kurmak için kullanacak.

<form>
  <label for=”address1">Address 1</label>
  <input type=”text” id=”address1" />
  <label for=”address2">Address 2</label>
  <input type=”text” id=”address2"/>
  <button type=”button” id=”save” class=”icon-only” aria-label=”Save”></button>
  <button type=”button” id=”cancel” class=”icon-only” aria-label=”Cancel”></button>
</form>

Arya etiketli birçok nüans var ama kendi makalelerini hak ediyorlar. Basit örneğimiz için bu yeterli olacaktır. Sadece aria-labelledby aria-label when için aşırı kullanmamaya dikkat edin. or would do the same job.

Artık Erişilebiliriz!

Bu basit değişikliklerle hem Jeremy hem de Violet, kendi sayfalarında yapmak için belirledikleri görevi tamamlayabilir. Bu teknikleri kullanarak, formdaki öğelerin yardımcı teknolojiler tarafından doğru bir şekilde tanımlanmasını ve bunları kullanan kişilere bilgilerin iletilmesini sağladık. Üzerine bir Accessible™ çıkartması yapıştırın ve bir gün arayın.

… Ama Daha İyisini Yapabiliriz

Sadece WCAG 2.1 başarı kriterlerinin yanındaki onay kutusunu işaretlediğimiz noktada asla durmamalıyız. WCAG, engelli kişilerin web'i kullanırken önündeki engelleri kaldırmak için bir temel oluşturur, ancak her zaman yalnızca "kullanımı mümkün"den daha iyisi için çabalamalı ve "hoş kullanım"ı hedeflemeliyiz. Erişilebilirlik ve kullanılabilirlik el ele gider ve kullanıcıların form doldurma deneyimini büyük ölçüde iyileştirmek için uygulayabileceğimiz çok basit bir teknik vardır.

Yeni Kişiliğimiz

"Erişilebilirlik" kelimesini duyduğunuzda aklınıza hemen gelmeyebilecek birini hayal edelim.

Mia, Central Florida Üniversitesi'nde Astrofizik alanında derece yapmakta olan bir birinci sınıf öğrencisidir. Çok zeki bir öğrenci ve çalışkan bir işçidir. Detaylara olan ilgisi ve keskin moda anlayışı, herhangi bir arkadaşı gardırobunu güncellerken onu başvurulacak uzman yapıyor. Yatakhanesine taşınırken ve bir kutuyu açarken, baskın elinin işaret parmağını bir maket bıçağıyla yanlışlıkla kesti.

Bazı engeller geçicidir. Küçük bir yaralanma bile kişinin hareket alanını azaltabilir, bu da onların hafife aldığı görevleri önemli ölçüde zorlaştırır. Kesik parmağı gazlı bezle sarılı olan Mia, telefonunu alışkın olmadığı bir şekilde kullanmak zorunda kalır.

Mia'nın Sorunu

"Bu doktorun sitesine sağlık bilgilerimi girmem gerekiyor, ancak telefonumun kullanımı garip olduğu için yanlış onay kutularını işaretleyip duruyorum!"

Telefonlardaki onay kutuları ve radyo düğmeleri gibi alanlarla en iyi zamanlarda etkileşim kurmak zor olabilir, ancak yaygın bir yaralanmada bile hızla hüsrana dönüşebilir. Mia'nın sağlık geçmişini sağlamak için aldığı tiroid ilaçlarının yanındaki kutuları işaretlemesi gerekiyor, ancak bunu diğer eliyle veya başka bir parmağıyla yapmak zorunda kalması, elementin daha küçük boyutu nedeniyle zor oluyor.

Mia'nın Kod Sorunu

Onay kutularına bakalım. Uygun etiket çağrışımlarıyla ilk bakışta erişilebilir görünüyorlar. Ama daha yakından bakalım.

<form>
  <label for=”synthroid”>Synthroid</label>
  <input type=”checkbox” id=”synthroid” name=”medications” value=”synthroid”/>
  <label for=”levothroid”>Levothroid</label>
  <input type=”checkbox” id=”levothroid” name=”medications” value=”levothroid”/>
  <label for=”levoxyl”>Levoxyl</label>
  <input type=”checkbox” id=”levoxyl” name=”medications” value=”levoxyl”/>
</form>

Hedef boyutu olarak da bilinen tıklanabilir veya dokunulabilir alanlarını artırmak için form denetimlerinin görünür etiketleri olduğunda kullanabileceğimiz çok basit bir teknik vardır . Tek yapmamız gereken form kontrolünü elemanın içine koymak <label>. Bir form denetimi a öğesinin alt öğesiyse, <label>etikete tıklamak veya dokunmak, ilgili form alanını etkinleştirir. Şimdi bu değişikliğe bakalım.

<form>
  <label for=”synthroid”>
  Synthroid
  <input type=”checkbox” id=”synthroid” name=”medications” value=”synthroid”/>
  </label>
  <label for=”levothroid”>
  Levothroid
  <input type=”checkbox” id=”levothroid” name=”medications” value=”levothroid”/>
  </label>
  <label for=”levoxyl”>
  Levoxyl
  <input type=”checkbox” id=”levoxyl” name=”medications” value=”levoxyl”/>
  </label>
</form>

Bu özel teknik hakkında birkaç detay

• Bu, yerel öğenin bir özelliğidir <label>. Form alanlarını aşağıdaki gibi öğelerle etiketliyorsanız <span>(ve olmamalısınız!), bu işlevi ücretsiz olarak edinemezsiniz ve manuel olarak uygulanması gerekir.
• <label><Bu özellik, yalnızca öğe form alanını kaydırırsa uygulanabilir . Kullanmak aria-labelledbysize otomatik olarak aynı davranışı sağlamaz.
• Öğe <label>yine de özniteliği içermeli ve form alanındaki öznitelikle foreşleşmelidir .id
• Birden fazla girişi tek bir etikete sarmayın.

Gitmeden önce

Bir kişiyle daha tanışalım. Yine, muhtemelen erişilebilirliği düşünürken aklınıza gelebilecek biri değil.

Ben, San Francisco'daki bir teknoloji şirketinde yazılım mimarı. Şirketi, Geleceğin Waffle Demirini yaratmak için çalışıyor. Her seferinde mükemmel çıtır çıtır ve aynı zamanda vergilerinizi yapmanıza yardımcı olur. Projeye aşık ve uyanık olduğu günün çoğunu onu nasıl daha iyi hale getirebileceğini düşünerek geçiriyor. Ben, ofise gitmesi gerektiğinde şehre giden bir otobüse biner. Herhangi bir engeli yoktur.

Kafası waffle makinesine odaklanmış olan Ben, kendi doktor randevusu için Mia ile aynı formu doldurması gerektiğini unutmuştu. O da formu doldurmak için telefonunu kullanıyor. Trafik dur-kalk olduğundan, o çalışırken otobüs beklenmedik bir şekilde öne doğru yalpalıyor.

İlaç formu alanlarında hedef boyutları büyütüldüğünden, Ben formu kolayca doldurabiliyor. Yanlış onay kutusuna tıklamak veya yanlış radyo düğmesine dokunmak konusunda endişelenmesine gerek yok. düşüncesi aklının ucundan bile geçmez. Formu bitirebilir ve waffle'ları düşünmeye geri dönebilir.

Artık Evrensel Olarak Tasarlıyoruz!!

Bu gönderide, basit bir formun engelli insanlar için nasıl engeller oluşturabileceğini ve bu engelleri kaldırmak için <label> öğesini nasıl kullanabileceğimizi gördük. Basit bir değişikliğin, hem engeli olan hem de olmayan kişiler için formu nasıl daha kolay kullanabileceğini de gördük. Evrensel Tasarımın özü budur. Engelli bireylerin ihtiyaçlarını göz önünde bulundurarak uygulamalarımızı herkes için daha iyi hale getirebiliriz.

Okuduğunuz için teşekkürler. Umarım yeni bir şey öğrenmişsinizdir veya unutmuş olabileceğiniz bir şeyi hatırlamışsınızdır.