Bağlantıların ve görüntülerin erişilebilir olmasını sağlama
Herhangi bir web sayfasındaki en yaygın bileşenlerden ikisi bağlantılar ve resimlerdir. Bu öğelerin erişilebilirlik üzerinde derin bir etkisi vardır. İyi bağlantı metni ve alternatif metin sağlamak, sayfalarınızı tüm kullanıcılar için geliştirmek için atabileceğiniz ilk adımlardan biridir.
Bağlantı metni
Köprüler, web'e göz atmayı temel alır. Ekran okuyucuların bağlantıları düzgün bir şekilde okuyamasını sağlamak, tüm kullanıcıların sitenize göz atmasını sağlar.
Aşağıdaki örnek metindeki iki bağlantıyı göz önünde bulundurun:
- "Bazen peri pengueni olarak bilinen küçük penguen, dünyanın en küçük penguenidir. Daha fazla bilgi için buraya tıklayın."
- "Bazen peri pengueni olarak bilinen küçük penguen, dünyanın en küçük penguenidir. Daha fazla bilgi için ziyaret edin https://en.wikipedia.org/wiki/Little_penguin ."
Not
İki örnek, web geliştiricisi olarak neleri kullanmamanız gerektiğini gösterir.
Bu bağlantılar, tam görüşlü kişiler için uygun görünse de ekran okuyucuda beklediğiniz gibi çalışmaz. Ekran okuyucuların metni okuduğunu unutmayın. Metinde bir URL görünürse, ekran okuyucu URL'yi okur. Genel olarak, URL anlamlı bilgiler iletmez ve can sıkıcı gelebilir. Telefonunuz url içeren bir kısa mesajı sesli olarak okuduysa bu sorunla karşılaşmış olabilirsiniz.
Ekran okuyucular ayrıca, bir sayfadaki köprüleri okuma olanağına da sahiptir. Bu özelliği, gören bir kişinin bağlantılar için sayfayı tarayacağı şekilde okur. Bağlantı metni her zaman "buraya tıklayın" ise, tüm kullanıcı "buraya tıklayın, buraya tıklayın, buraya tıklayın, buraya tıklayın, buraya tıklayın, ..." sözlerini duyar. Tüm bağlantılar artık birbirinden ayırt edilemez ve bu da sinir bozucu bir deneyimdir.
"Tıklama" sözcüğü de bir sorundur, çünkü tüm kullanıcılar tıklamaz. Telefon kullanıcıları dokunur, klavye kullanıcıları Enter tuşunu veya Ara Çubuğunu seçebilir ve diğer istemciler başka araçlar kullanır.
Her zaman anlamlı bağlantı metni kullanmalıyız. İyi bağlantı metni, bağlantının diğer tarafında neler olduğunu kısaca açıklar. Küçük penguenlerle ilgili önceki örnekte bağlantı, türler hakkındaki Wikipedia sayfasına gider. Küçük penguenler tümceciği mükemmel bir bağlantı metni olacaktır çünkü bu, bir kişinin bağlantıyı seçtiğinde ne öğreneceğini netleştirir:
- "Bazen peri pengueni olarak bilinen küçük penguen, dünyanın en küçük penguenidir."
Not
Sitenizin herkes tarafından erişilebilir olmasını sağlamanın bir bonusu olarak, arama motorlarının sitenizde gezinmesine de yardımcı olursunuz. Arama altyapıları, sayfaların konularını öğrenmek için bağlantı metnini kullanır. Bu nedenle iyi bağlantı metni kullanmak herkese yardımcı olur!
ARIA öznitelikleri
Aşağıdaki ürün sayfasını düşünün:
| Ürün | Açıklama | Sipariş |
|---|---|---|
| Arabirim öğesi | [Description]('#') |
[Order]('#') |
| Süper pencere öğesi | [Description]('#') |
[Order]('#') |
Bu, tablodaki çeşitli öğelerle ilgili bilgileri gösteren ve açıklamaya ve düzene bağlantılar içeren bir sayfa için ortak bir düzendir. Açıklama ve sipariş metninin çoğaltılması, tarayıcı kullanan biri için anlamlıdır. Ancak, ekran okuyucu kullanan biri yalnızca açıklama sözcüklerini ve bağlam olmadan tekrarlanan sırayı duyar.
HTML, bu tür senaryoları desteklemek için Erişilebilir Zengin İnternet Uygulamaları (ARIA) olarak bilinen bir dizi özniteliği destekler. Ekran okuyuculara daha fazla bilgi sağlamak için bu öznitelikleri kullanabilirsiniz.
Örneğin, sayfanın biçimi izin vermediğinde bir bağlantıyı açıklamak için kullanabilirsiniz aria-label . Pencere öğesinin açıklaması şu şekilde ayarlanmış olabilir:
<a href="#" aria-label="Widget description">description</a>
ARIA'nın, ekran okuyucuların bağlantılar için okuyacakları metin eklemenin ötesinde birçok kullanım alanı vardır. Anlamsal HTML kullanılamadığında belirli öğelerin oynadığı rolleri açıklamak için bunu kullanabilirsiniz. Örneğin bir ağaç oluştururken, arabirimi ekran okuyucuya açıklamak için ARIA rollerini kullanabilirsiniz:
<h2 id="tree-label">File Viewer</h2>
<div role="tree" aria-labelledby="tree-label">
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
</div>
Önemli
Daha önce açıklandığı gibi anlamsal işaretleme ve iyi bağlantı metni kullanıldığında genellikle ARIA kullanımı yerine geçilir. Tarayıcılar ve ekran okuyucular, bir kullanıcının kullanabileceği tek istemciler değildir ve sayfanızı tüm istemciler ve kullanıcılar için iyi çalışacak şekilde tasarlamak ana hedefiniz olmalıdır.
Resimler için alternatif metin
Genel bir kural olarak, ekran okuyucular görüntünün içeriğini okuyamaz. Bazıları yapay zeka kullansa da, oluşturulan sonuçlar bağlamsal olarak doğru olmayabilir. Neyse ki, görüntülerin erişilebilir olmasını sağlamak çok fazla iş almaz; özniteliğin alt tüm anlamı budur. Tüm anlamlı görüntülerin, ne olduklarını veya iletmeye çalıştıkları bilgileri açıklayan bir alt özniteliği (gündelik olarak alternatif metin olarak bilinir) olmalıdır.
Tamamen dekoratif olan görüntülerde öznitelikleri alt boş bir dize olarak ayarlanmalıdır: alt="". Bu ayar, ekran okuyucuların dekoratif görüntüyü gereksiz yere duyurmasını önler.
Not
Tahmin edebileceğiniz gibi, arama motorları görüntüdekileri anlayamaz. Alternatif metne dayanır. Bu nedenle bir kez daha sayfanızın erişilebilir olmasını sağlamak bonuslar sağlar!