İşaretleme ile HTML Tablosu Erişilebilirliği Nasıl Geliştirilir

Web erişilebilirliği, web uygulamalarını görsel engelli kişiler tarafından kolaylıkla kullanılabilecek şekilde tasarlamayı ifade eder. Bu kullanıcılardan bazıları güveniyor ekran okuyucular web sayfalarındaki içeriği okumak için. Ekran okuyucular Sayfadaki kodu yorumlar. ve içeriğini kullanıcıya oku.

Verileri web sayfalarında yapılandırılmış biçimde görüntülemek için yaygın olarak kullanılan bir HTML öğesidir. Tasarımı basit olanlardan karmaşık olanlara, sıra başlıkları, birleştirilmiş başlıklar vb..

Bir masa erişilebilirliği göz önünde bulundurularak tasarlanmamışsa, ekran okuyucuların verileri karmaşık tablolarda kullanıcılar için anlamlı bir şekilde çevirmesi zor olacaktır. Bu nedenle, karmaşık HTML tablolarını daha kolay anlaşılabilir hale getirmek için erişilebilirlik için Başlıkların, sütun gruplarının, satır gruplarının vs. açıkça tanımlandığından emin olun. Bunun nasıl olduğunu aşağıda göreceğiz işaretleme ile elde edildi.

Kapsam Özelliği

Basit bir masa için bile

ile işaretlemek kapsamı = "sütun" yardımcı teknolojinin aynı sütunda izlenen hücrelerin öğrencilerin isimleri olduğunu belirlemesine yardımcı olur.

Benzer şekilde, hücreler

ihtiva eden kapsamı = "COLGROUP" Kullanıcıların, ele geçirdikleri sütun grubunda izleyen hücrelerdeki verilerin söz konusu konu ile ilişkili olduğunu belirlemelerine yardımcı olur..

O zaman var

ile işaretlemek kapsamı = "satır" Bu aynı hücrede onu takip eden hücrelerin “sınıf” söz konusu öğrencinin adıyla ilgili bilgiler.

Satır grupları

Şimdi başka bir örneğe geçelim, bu örnek yukarıdaki satırla hemen hemen aynı tabloya sahip olacak, satır ve sütun başlıklarını değiştireceğiz, yani satır gruplarıyla çalışabiliriz.

Başlıkları net bir şekilde tanımlayan etiket, kapsam Hücrelerdeki benzer veri türlerinden kaynaklanabilecek herhangi bir karışıklığa yol açmamak ve bunlara yol açmamak.

  Çalışan Adı  Çalışan Kodu  Proje kodu  Çalışan Atama  
  John Doe  32456  456789  yönetmen  
  Miriam Luther  78902  456789  Müdür Yardımcısı

Kapsam özelliği ne işe yarıyor? W3C'ye göre:

Başka bir deyişle, veri hücrelerini karşılık gelen başlık hücreleriyle ilişkilendirmemize yardımcı olur..

Lütfen yukarıdaki örnekte geçiş yapabileceğinizi unutmayın.

için

. Olduğu sürece kapsam değeri var col, İlgili sütunun başlığı olarak yorumlanacaktır..

kapsam özellik bu dört değerden birine sahip olabilir; col, kürek çekmek, rowgroup, COLGROUP sırasıyla bir sütun başlığını, bir satır başlığını, bir sütun grubu başlığını ve bir satır grubu başlığını belirtmek için.

Karmaşık Tablolar

Şimdi daha karmaşık bir masaya geçelim..

Yukarıdaki, bir sınıftaki öğrencileri ve üç ders için pratik ve teoride notlarını listeleyen bir tablodur..

İşte bunun için HTML kodu. Masa kullandı rowspan ve colspan veri hücreleri için birleştirilmiş başlıklar oluşturmak.

  Öğrenci adı  Biyoloji  Kimya  Fizik  
  Pratik  teori  Pratik  teori  Pratik  teori  
  John Doe  bir  bir+  B  bir  bir  bir-  
  Miriam Luther  bir  bir  C  C+  bir  bir-

Yukarıdaki tabloda, her veri hücresi, bu tablo hücrelerinin her biridir notu görüntüleme, üç bilgi parçasıyla ilişkilendirilir:

Bu öğrencinin hangi öğrenciye ait olduğu?
Bu not hangi konuya aittir??
Bu sınıf Pratik mi Teori mi??

Bu üç bilgi yapısal ve görsel olarak üç farklı tipte başlık hücresinde tanımlanmıştır:

Öğrenci adı
Özne ismi
Pratik veya teori

Erişilebilirlik için aynısını tanımlayalım.

      Öğrenci adı  Biyoloji  Kimya  Fizik  
  Pratik  teori  Pratik  teori  Pratik  teori  
  John Doe  bir  bir+  B  bir  bir  bir-  
  Miriam Luther  bir  bir  C  C+  bir  bir-

Yukarıdaki işaretlemeye ekledik kapsam veri hücreleri hakkında başlık bilgisi içeren hücrelere.

Sütun Grubu

Biyoloji, Kimya ve Fizik hücreleri, her biri iki sütundan oluşan bir grupla ilişkilendirilecektir (Teori ve Pratik). Sadece ekleyerek birleşmiş satır = "2" sütun grupları oluşturmaz, yalnızca belirli hücrenin iki hücrenin boşluğunu işgal ettiğini gösterir.

Sütun grubu oluşturmak için kullanmanız gerekir. COLGROUP ve sonra ekleyin karış bu sütun grubunun kaç tane sütun içerdiğini belirten özellik.

Öğrenci adı

Biyoloji

John Doe

konu		John Doe	Miriam Luther
Biyoloji	Pratik	bir	bir
Biyoloji	teori	bir+	bir
Kimya	Pratik	B	C
Kimya	teori	bir	C+
Fizik	Pratik	bir	bir
Fizik	teori	bir-	bir-

Şimdi çalışacak örneğimiz var, önceki örnekteki sütun grupları için yaptığımız gibi satır grupları oluşturarak başlayalım..

Ancak, satır grupları gibi bir etiket kullanılarak oluşturulamaz COLGROUP Çünkü yok rowgroup eleman.

HTML satırları genellikle kullanılarak gruplandırılır , ve elementler. Tek bir HTML

eleman bir olabilir , bir ve çoklu . Birden çok kullanacağız tbody Tabloda satır grupları oluşturmak ve ilgili kapsamı başlık hücrelerine eklemek.

konu		John Doe	Miriam Luther
Biyoloji	Pratik	bir	bir
Biyoloji	teori	bir+	bir
Kimya	Pratik	B	C
Kimya	teori	bir	C+
Fizik	Pratik	bir	bir
Fizik	teori	bir-	bir-

Satırları ekledik “Pratik” ve “teori” her birinde tbody her birinde iki satır bulunan satır grupları oluşturma. Biz de ekledik kapsamı = "rowgroup" Bu iki satır hakkında başlık bilgisini içeren hücrelere (ki bu durumda notların ait olduğu konu adıdır).

Şimdi Oku: CSS İle Eşit Sütun Yüksekliği