Yardımcı teknoloji kullanıcıları, belirli bir web sayfasında kolayca gezinmek ve ilgi alanlarını belirlemek için HTML semantik öğelerinin doğru kullanımına güvenir. 2016 ekran okuyucu stratejisi anketi sırasında kullanıcılar, tanıdık olmayan bir web sitesinde gezinirken bilgi almanın ilk yolu olarak başlık hiyerarşisini ve önemli bölgeleri bildirdi.
Yer işaretleri ve başlıklar kullanılmadan, ekran okuyucu kullanıcılarını ciddi şekilde rahatsız ediyoruz ve onları istenen içeriğin peşinde tüm web sitesinde Sekme'ye zorluyoruz. Açıkça görülüyor ki, yer işaretlerinin yanlış kullanımı ( veya kullanılmaması ), istikamet seviyeleri ve etiketleme, erişilebilirlik sorunlarının daha derin bir göstergesidir. Ancak, bu sorunlar nispeten az mühendislik çabasıyla değiştirilebilir.
Yer işareti alanları, bir HTML öğesindeki gruplamaların doğasıyla ilgili bağlamı dolaylı olarak sağlar. Ekran okuyucular, bir sayfadaki mevcut tüm önemli noktaları kolayca tanımlayabilir ve bunları kullanıcıya gösterebilir:
<aside>-
role="complementary"bağımsız olarak destekleyen bir bölüme atıfta bulunur. Potansiyel olarak ana içerikle ilgili olabilir.
<header>—The
role="banner"sitenin başlığını tanımlamak için kullanılır. Genellikle bir sayfanın üst kısmında bir logo ve gezinme öğeleri içerir.
<nav>— Büyük gezinme bağlantıları grupları, özniteliğe sahip bir üst öğeyle bulunabilir
role="navigation".
<main>— Her sayfanın ana içeriği,
role="main".
<section>—
role="region"Ziyaretçilerin hızlı bir şekilde gitmek isteyebilecekleri yeterince önemli alanlar için kullanılmalıdır.
<footer>— Bir sayfanın en altında
role="contentinfo"özniteliğe sahip öğeyi buluyoruz. Genellikle çocuklar/?/, gizlilik veya telif hakkı bilgileriyle birlikte küresel site hakkında gezinme öğeleri içerir.
divEşleşen bir
roleözniteliğe sahip olan yer işaretlerini birbirinin yerine kullanabilirsiniz . Örneğin,
<div role=”nav”>eşdeğer
<nav>öğeyle anlamsal olarak aynıdır.
a11y.com'da Mac'in VoiceOver'ını (
cmd + f5) kullanırken aşağıdaki yer işaretlerini gözlemleyebiliriz ( sol, sağ oklarla birlikte ):
ctrl + alt + u
Ekran okuyucumuz tarafından sağlanan bilgiler göz önüne alındığında, aşağıdakileri çıkarabiliriz;
asideBelgenin başındaki bir öğe, ardından
headerbirincil içeren bir öğe
nav. Ayrıca, ilgili Sponsorlarla birlikte adlandırılmış bir içindekiler tablosu
mainiçeren bir bölümümüz var. Son olarak, bir hakkında site bağlantılarımız var.
nav
aside
footer
nav
Bizim türetmemiz, a11y web sitesinde fark edilen görsel hiyerarşiden uzak değildir. Mühendisler ayrıca
aria-labelsöz konusu yer işaretlerinin dilsel temsilini ve anlamını daha da geliştirmek için kullanıyorlar. Ekran okuyucular , bir HTML öğesinin
aria-labelaçık veya örtük
roleözniteliğinin ardından ilkini duyurur. Örneğin,
<nav aria-label="Primary">( örtük
role="navigation" olması) “Birincil navigasyon” olarak yorumlanacaktır.
Başlık etiketleri (
<h1>to
<h6>) web sayfasındaki bilgi yapısını ana hatlarıyla belirtir. Başlıkları kullanarak, ekran okuyucu için etkili bir şekilde yorumlanabilir bir içindekiler tablosu oluşturabilirsiniz. Sonuç olarak, kullanıcılar hayal kırıklığı yaşamadan ilgi alanlarını hızla bulabilirler.
Başlık sıraları, miras alınan görsel stilleri nedeniyle genellikle yanlış kullanılır. Bunu yapmaktan kaçınmalı ve semantik anlamları için rütbeleri kullanmalıyız. En
<h1>yüksek önem derecesini taşıyan belge başlığı görevi görürken, a
<h2>bir alt başlık olarak nitelendirilebilir. İdeal olarak, ortak belge yazma biçimlerine göre başlıkların yerleşimine uyuyoruz:
<h1>belgenizdeki diğer tüm başlıklardan önce yerleştirilmiş yalnızca bir etikete sahip olması önerilir.
Aşağıdaki başlık hiyerarşisini gözlemlemek için a11y.com'u bir kez daha inceleyeceğiz :
Her bölümle ilgili içeriğin hemen anlamını taşıyan harika etiketlemeyi hemen gözlemleyebiliriz. Ayrıca
<h2>“İçindekiler” yazısının da bulunduğu sitede görsel olarak izlenememektedir. Bu etiketleme yaklaşımı, ekran okuyucuların, başlıklar menüsüne göz atarken, aksi takdirde gözden kaçırılacak olan önemli alanları birbirinin yerine geçecek şekilde seçmesini sağlar.
Son beş
<h2>başlık tek bir büyük harfli kelime kullanır. Bu, bir liste veya bağlantı bağlantılarının gruplandırılmasıyla bir ilişki ileten kasıtlı bir yaklaşımdır.
Öncelikle, gerçekleşmesi gereken değişikliğin derecesini daha iyi anlamak için bir erişilebilirlik denetimi yapmalıyız. Bir ekran okuyucu kullanın ve yer işaretini veya yön gezginini kullanarak web sitenizde gezinmeyi deneyin. Önyargılı sonuçlardan kaçınmak için web sitenize aşina olmayan bir test cihazıyla böyle bir deney yaparsanız daha da iyi olur. Mevcut durumunuzu izlemek ve istenen erişilebilirlik temeline yönelik ilerlemenizi değerlendirmek için mümkün olduğunca çok bilgi ve geri bildirim toplayın.
Gezinme, ana içerik ve alt bilgi gibi mantıksal olarak yapılandırılmış içerik bloklarını tanımlayarak başlayın. Bu alanlar bulunduğunda, dış kapsayıcılarını anlamsal bir HTML yer işaretiyle değiştirin.
aria-labelBağlamı daha iyi ayırmak ve anlamak için ile ek etiketleme yapın.
Alanlarınız doğru bir şekilde atandıktan sonra, başlık seviyeleriyle değiştirilebilir etiketleme gerektirebilecek daha fazla endişe duyulan alanları belirleyin. Başlık yapınızın geçerli bir basamak izlediğinden emin olun ve varsayılan kullanıcı aracısı stilleri için başlıkları kullanmaktan kaçının. Artımlı iyileştirmelerinizi onaylamak için tekrar tekrar denetleyin.
Yer işaretleri ve yön seviyeleri konularını, etkileriyle birlikte yeterli derinlikte inceledik. Yukarıda belirtilen ilkeleri uygularken, sorunlu olabileceğinden , potansiyel aşırı ( veya altı ) etiketlemenin bilincinde olun.
Yer işareti alanlarının ötesinde uygulanabilir olduğunda semantik HTML kullanmayı unutmayın. Umarım, şimdi (Div)eloper'ın cehenneminden birkaç adım uzaktasınızdır.
Alkışlayarak, başkalarının bu içeriği keşfetmesine yardımcı olur ve erişilebilirlik, tasarım, React ve JavaScript hakkında daha fazla makale yazmaya motive edersiniz!
Bu, web siteleri oluşturmaktan onları barındırmaya kadar tüm adımları attığımız Kişisel Web Sitesi serisinin 1. bölümüdür. Kişisel bir web sitesi oluşturmayı öğrenme sürecini aşağıdaki adımlara böldüm: Giriş Herkesin bir web sitesine ihtiyacı olduğuna inanıyorum.
Geliştirici deneyimi bugüne kadar bu yıl en çok kullanılan terimlerden biri, ancak fikri ve arkasındaki anlamı o kadar çok paylaşıyorum ki Santagostino'da (bugün çalıştığım şirket) başlangıç için mini bir araç geliştirdim. BT / DEV departmanındaki kişilerin sayısı. Startupper olarak adlandırılan bu araç, çok teşekkür ettiğim SparkFabrik playbook'tan esinlenmiştir.
Bir zamanlar küçük bir mutfağı olan bir “oyun” alanı, pinpon ve langırt masası olan büyük bir reklam ajansında çalıştım. Buradaki fikir, bir içki ya da atıştırmalık alıp gevşemek için iş arkadaşlarınızla biraz oyun oynayabilmenizdi.
Startup'lar çeşitli nedenlerle fon toplarlar. İster bir ürün geliştirmek ister şirketin büyümesini hızlandırmak için olsun, bağış toplama, iş hedeflerinize ulaşmak için harika bir mekanizmadır.
Size böyle bir soruna nüanslı bir çözümün benim için nasıl göründüğünü göstereyim. Spivak'ın ünlü kitabı Calculus'ta, problemlerden bazıları bir veya iki yıldızla işaretlenmiştir ve bunlar nispeten daha yüksek bir zorluk seviyesini gösterir.
Nora Herold ve Pleiades Kolektifi3 Mayıs 2022 İletim Birinci Bölüm'den alıntı:Hepiniz için yakın olan türden büyük astrolojik ve göksel olaylar hakkında biraz konuşmak istiyoruz ve aynı zamanda geleceğe doğru ilerleyen çok şeyiniz olacak. yaz ayları ve sonbaharda, Venüs hariç hemen hemen her gezegenin geri hareketini deneyimlersiniz. Geçen yılın sonundan bu yılın başına ve Ocak ayının büyük bir kısmına kadar Venüs retrosu deneyiminizi zaten yaşadınız.