Cara Meningkatkan Aksesibilitas Tabel HTML dengan Markup

Aksesibilitas web mengacu pada perancangan aplikasi web dengan cara yang dapat digunakan dengan mudah oleh orang-orang cacat visual. Beberapa pengguna ini mengandalkan pembaca layar untuk membaca konten di halaman web. Pembaca layar menafsirkan kode yang ada pada halaman dan membacakan isinya kepada pengguna.

adalah elemen HTML yang banyak digunakan untuk menampilkan data secara terstruktur di halaman web. Desainnya berkisar dari yang sederhana sampai yang kompleks, lengkap dengan header baris, header gabungan dll.

Jika sebuah tabel tidak dirancang dengan mempertimbangkan aksesibilitas, akan sulit bagi pembaca layar untuk menerjemahkan data dalam tabel kompleks yang bermakna bagi pengguna. Oleh karena itu, untuk membuat tabel HTML yang rumit lebih mudah dimengerti, untuk aksesibilitas, kita harus memastikan bahwa tajuk, grup kolom, grup baris, dll. ditetapkan dengan jelas. Kita akan lihat bagaimana ini di bawah dicapai dalam markup.

Atribut Lingkup

Bahkan untuk meja sederhana dengan

markup dengan scope = "col" membantu teknologi bantuan mengidentifikasi bahwa sel-sel yang mengikuti di kolom yang sama adalah nama siswa.

Demikian pula sel-sel suka

mengandung scope = "colgroup" membantu pengguna mengidentifikasi bahwa data dalam sel yang mengikuti dalam grup kolom yang dibentangkan terkait dengan subjek tertentu.

Lalu ada

markup dengan scope = "row" yang mendefinisikan bahwa sel mengikutinya di baris yang sama, berisi “kelas” informasi mengenai nama siswa tersebut.

Grup Baris

Sekarang mari kita beralih ke contoh lain, contoh ini akan memiliki tabel yang hampir sama dengan yang di atas kecuali kita akan bertukar header baris dan kolom, jadi kita akan dapat bekerja dengan grup baris.

tag yang jelas mendefinisikan header, Anda dapat meningkatkan aksesibilitasnya dengan cakupan atribut dan tidak memberikan jalan bagi kebingungan yang mungkin timbul dari tipe data yang serupa dalam sel.

  nama karyawan  Kode Karyawan  Kode proyek  Penunjukan Karyawan  
  John Doe  32456  456789  Direktur  
  Miriam Luther  78902  456789  Wakil Direktur

Apa yang dilakukan atribut lingkup? Menurut W3C:

Dengan kata lain itu membantu kita mengaitkan sel data dengan sel header yang sesuai.

Harap perhatikan bahwa dalam contoh di atas Anda dapat beralih

untuk

. Selama ini cakupan memiliki nilai col, itu akan ditafsirkan sebagai header kolom yang sesuai.

Itu cakupan atribut dapat memiliki salah satu dari empat nilai ini; col, baris, grup baris, grup untuk merujuk ke tajuk kolom, tajuk baris, tajuk grup tajuk, dan tajuk sekelompok baris.

Tabel Kompleks

Sekarang mari kita beralih ke tabel yang lebih kompleks.

Di atas adalah tabel yang berisi daftar siswa di kelas dan nilai mereka dalam praktis dan teori untuk tiga mata pelajaran.

Ini adalah kode HTML untuknya. Tabel telah digunakan rowspan dan colspan untuk membuat header gabungan untuk sel data.

  Nama siswa  Biologi  Kimia  Fisika  
  Praktis  Teori  Praktis  Teori  Praktis  Teori  
  John Doe  SEBUAH  SEBUAH+  B  SEBUAH  SEBUAH  SEBUAH-  
  Miriam Luther  SEBUAH  SEBUAH  C  C+  SEBUAH  SEBUAH-

Dalam tabel di atas, setiap sel data, yaitu masing-masing sel tabel menampilkan nilai, dikaitkan dengan tiga potong informasi:

Kelas berapa siswa ini berasal?
Mata pelajaran apa yang dimiliki kelas ini?
Apakah nilai ini untuk bagian Praktis atau Teori?

Ketiga informasi tersebut didefinisikan dalam tiga jenis sel header yang berbeda secara struktural dan visual:

Nama siswa
Nama subjek
Praktis atau teori

Mari kita mendefinisikan hal yang sama untuk aksesibilitas.

      Nama siswa  Biologi  Kimia  Fisika  
  Praktis  Teori  Praktis  Teori  Praktis  Teori  
  John Doe  SEBUAH  SEBUAH+  B  SEBUAH  SEBUAH  SEBUAH-  
  Miriam Luther  SEBUAH  SEBUAH  C  C+  SEBUAH  SEBUAH-

Pada markup di atas kami telah menambahkan cakupan ke sel yang berisi informasi tajuk tentang sel data.

Grup Kolom

Sel-sel Biologi, Kimia dan Fisika harus dikaitkan dengan sekelompok dua kolom masing-masing (Teori & Praktis). Hanya menambahkan colspan = "2" tidak membuat grup kolom, itu hanya menunjukkan bahwa sel tertentu menempati ruang sel senilai dua.

Untuk membuat grup kolom, Anda harus menggunakan grup lalu tambahkan menjangkau atribut itu menunjukkan berapa banyak kolom yang termasuk grup kolom.

Itu

Nama siswa

Biologi

John Doe

Subyek		John Doe	Miriam Luther
Biologi	Praktis	SEBUAH	SEBUAH
Biologi	Teori	SEBUAH+	SEBUAH
Kimia	Praktis	B	C
Kimia	Teori	SEBUAH	C+
Fisika	Praktis	SEBUAH	SEBUAH
Fisika	Teori	SEBUAH-	SEBUAH-

Sekarang kita memiliki sampel untuk dikerjakan, mari kita mulai dengan membuat grup baris seperti yang kita lakukan untuk grup kolom pada contoh sebelumnya.

Namun, grup baris tidak dapat dibuat menggunakan tag seperti grup karena tidak ada grup baris elemen.

Baris HTML umumnya dikelompokkan menggunakan , dan elemen. Satu HTML

elemen dapat memiliki satu , satu dan banyak . Kami akan menggunakan beberapa tbody di tabel kami untuk membuat grup baris, dan menambahkan cakupan masing-masing ke header sel.

Subyek		John Doe	Miriam Luther
Biologi	Praktis	SEBUAH	SEBUAH
Biologi	Teori	SEBUAH+	SEBUAH
Kimia	Praktis	B	C
Kimia	Teori	SEBUAH	C+
Fisika	Praktis	SEBUAH	SEBUAH
Fisika	Teori	SEBUAH-	SEBUAH-

Kami telah menambahkan baris “Praktis” dan “Teori” di setiap tbody membuat grup baris dengan dua baris di masing-masing. Kami juga telah menambahkan scope = "rowgroup" ke sel yang berisi informasi tajuk tentang dua baris (yang merupakan nama subjek nilai dalam kasus ini).

Sekarang Baca: Tinggi Kolom Setara Dengan CSS