Cách cải thiện khả năng truy cập bảng HTML với Markup

Khả năng truy cập web đề cập đến việc thiết kế các ứng dụng web theo cách mà người khuyết tật có thể sử dụng dễ dàng. Một số người dùng này dựa vào trình đọc màn hình để đọc nội dung trong các trang web. Trình đọc màn hình giải thích mã hiện trên trang và đọc nội dung của nó cho người dùng.

là một yếu tố HTML được sử dụng rộng rãi để hiển thị dữ liệu theo kiểu có cấu trúc trong các trang web. Thiết kế của nó bao gồm từ những cái đơn giản đến những cái phức tạp, hoàn chỉnh với các tiêu đề hàng, các tiêu đề được hợp nhất, v.v..

Nếu một bảng không được thiết kế có khả năng truy cập, người đọc màn hình sẽ khó dịch dữ liệu trong các bảng phức tạp một cách có ý nghĩa cho người dùng. Do đó, để làm cho các bảng HTML phức tạp dễ hiểu hơn, để truy cập, chúng ta phải đảm bảo rằng các tiêu đề, nhóm cột, nhóm hàng, v.v ... được xác định rõ ràng. Chúng ta sẽ thấy bên dưới nó như thế nào đạt được trong đánh dấu.

Thuộc tính phạm vi

Ngay cả đối với một bảng đơn giản với

đánh dấu với scope = "col" giúp công nghệ trợ giúp xác định rằng các ô theo sau trong cùng một cột là tên của học sinh.

Tương tự, các ô như

chứa scope = "nhóm" giúp người dùng xác định rằng dữ liệu trong các ô theo sau trong nhóm cột mà nó trải dài được liên kết với chủ đề cụ thể đó.

Sau đó là

đánh dấu với scope = "hàng" xác định rằng các ô theo sau nó trong cùng một hàng, chứa “cấp” thông tin liên quan đến tên sinh viên cụ thể đó.

Nhóm hàng

Bây giờ chúng ta hãy chuyển sang một ví dụ khác, ví dụ này sẽ có bảng gần như giống như bảng ở trên trừ việc chúng ta trao đổi các tiêu đề hàng và cột, vì vậy chúng ta sẽ có thể làm việc với các nhóm hàng.

thẻ xác định rõ các tiêu đề, bạn có thể cải thiện khả năng truy cập của nó với phạm vi thuộc tính và không nhường chỗ cho bất kỳ sự nhầm lẫn nào có thể phát sinh từ các loại dữ liệu tương tự trong các ô.

  Tên nhân viên  Mã nhân viên  Mã số dự án  Chỉ định nhân viên  
  John Doe  32456  456789  Giám đốc  
  Miriam Luther  78902  456789  Phó Giám đốc

Phạm vi thuộc tính làm gì? Theo W3C:

Nói cách khác, nó giúp chúng ta liên kết các ô dữ liệu với các ô tiêu đề tương ứng của chúng.

Xin lưu ý rằng trong ví dụ trên, bạn có thể chuyển đổi

cho

. Miễn là nó phạm vi có giá trị col, nó sẽ được hiểu là tiêu đề của cột tương ứng.

Các phạm vi thuộc tính có thể có bất kỳ một trong bốn giá trị này; col, hàng, nhóm hàng, nhóm để chỉ tiêu đề của một cột, tiêu đề của một hàng, một nhóm tiêu đề của cột và một nhóm tiêu đề tương ứng.

Bàn phức tạp

Bây giờ chúng ta hãy chuyển sang một bảng phức tạp hơn.

Trên đây là bảng liệt kê các sinh viên trong một lớp và điểm số của họ về thực hành và lý thuyết cho ba môn học.

Đây là mã HTML cho nó. Bảng đã được sử dụng hàng và colspan để tạo các tiêu đề hợp nhất cho các ô dữ liệu.

  Tên học sinh  Sinh học  Hóa học  Vật lý  
  Thực hành  Học thuyết  Thực hành  Học thuyết  Thực hành  Học thuyết  
  John Doe  Một  Một+  B  Một  Một  Một-  
  Miriam Luther  Một  Một  C  C+  Một  Một-

Trong bảng trên, mỗi ô dữ liệu, đó là mỗi ô của bảng hiển thị lớp, được liên kết với ba mẩu thông tin:

Học sinh này thuộc lớp nào?
Môn học này thuộc lớp nào?
Đây có phải là lớp cho phần thực hành hoặc lý thuyết?

Ba thông tin này được định nghĩa trong ba loại ô tiêu đề khác nhau về cấu trúc và trực quan:

Tên học sinh
Tên chủ đề
Thực hành hay lý thuyết

Hãy xác định tương tự cho khả năng truy cập.

      Tên học sinh  Sinh học  Hóa học  Vật lý  
  Thực hành  Học thuyết  Thực hành  Học thuyết  Thực hành  Học thuyết  
  John Doe  Một  Một+  B  Một  Một  Một-  
  Miriam Luther  Một  Một  C  C+  Một  Một-

Trong phần đánh dấu ở trên, chúng tôi đã thêm phạm vi đến các ô chứa thông tin tiêu đề về các ô dữ liệu.

Nhóm cột

Các tế bào sinh học, hóa học và vật lý sẽ được liên kết với một nhóm gồm hai cột mỗi (Lý thuyết & thực hành). Chỉ cần thêm colspan = "2" không tạo các nhóm cột, nó chỉ cho biết rằng ô cụ thể sẽ chiếm không gian của hai ô.

Để tạo nhóm cột, bạn phải sử dụng nhóm và sau đó thêm khoảng thuộc tính của nó cho biết có bao nhiêu cột mà nhóm cột bao gồm.

Các

Tên học sinh

Sinh học

John Doe

Môn học		John Doe	Miriam Luther
Sinh học	Thực hành	Một	Một
Sinh học	Học thuyết	Một+	Một
Hóa học	Thực hành	B	C
Hóa học	Học thuyết	Một	C+
Vật lý	Thực hành	Một	Một
Vật lý	Học thuyết	Một-	Một-

Bây giờ chúng ta có mẫu để làm việc với chúng ta hãy bắt đầu bằng cách tạo các nhóm hàng như chúng ta đã làm cho các nhóm cột trong ví dụ trước.

Tuy nhiên, các nhóm hàng không thể được tạo bằng cách sử dụng thẻ như nhóm bởi vì không có nhóm hàng thành phần.

Các hàng HTML thường được nhóm lại bằng cách sử dụng , và các yếu tố. Một HTML duy nhất

yếu tố có thể có một , một và nhiều . Chúng tôi sẽ sử dụng nhiều tbody trong bảng của chúng tôi để tạo các nhóm hàng và thêm phạm vi tương ứng vào các ô tiêu đề.

Môn học		John Doe	Miriam Luther
Sinh học	Thực hành	Một	Một
Sinh học	Học thuyết	Một+	Một
Hóa học	Thực hành	B	C
Hóa học	Học thuyết	Một	C+
Vật lý	Thực hành	Một	Một
Vật lý	Học thuyết	Một-	Một-

Chúng tôi đã thêm các hàng “Thực hành” và “Học thuyết” trong mỗi tbody tạo các nhóm hàng với hai hàng trong mỗi. Chúng tôi cũng đã thêm scope = "nhóm hàng" đến các ô chứa thông tin tiêu đề về hai hàng đó (là tên chủ đề mà các lớp thuộc về trường hợp này).

Bây giờ đọc: Chiều cao cột bằng với CSS