Những điều mới hơn cần biết về danh sách HTML tốt

Danh sách HTML thật nhàm chán. Họ không do nhiều, vì vậy chúng tôi không thực sự nghĩ về chúng mặc dù chúng được sử dụng rộng rãi như thế nào. Và chúng tôi vẫn có thể thực hiện những điều tương tự mà chúng tôi vẫn luôn thực hiện để tùy chỉnh chúng, chẳng hạn như xóa điểm đánh dấu, đảo ngược thứ tự và tạo bộ đếm tùy chỉnh.

Tuy nhiên, có một số điều “mới hơn” — bao gồm cả những mối nguy hiểm — cần biết khi sử dụng danh sách. Những mối nguy hiểm chủ yếu là nhỏ, nhưng phổ biến hơn bạn nghĩ. Chúng ta sẽ tìm hiểu những điều đó, cùng với một số nội dung mới mà chúng ta có thể thực hiện với các danh sách và thậm chí cả những cách mới để tiếp cận các giải pháp cũ.

Để làm rõ, đây là những phần tử HTML mà chúng ta đang nói đến:

• Danh sách có thứ tự

• Danh sách không có thứ tự

• danh sách mô tả

• danh sách tương tác


Danh sách có thứ tự, danh sách không có thứ tự và danh sách tương tác chứa các mục danh sách (

) được hiển thị theo loại danh sách mà chúng tôi đang xử lý. Một danh sách có thứ tự (

) hiển thị các số bên cạnh các mục trong danh sách. Danh sách không có thứ tự (

) và các phần tử menu (

) hiển thị dấu đầu dòng bên cạnh các mục trong danh sách. Chúng tôi gọi đây là “điểm đánh dấu danh sách” và chúng thậm chí có thể được tạo kiểu bằng cách sử dụng ::đánh dấu phần tử giả. Danh sách mô tả sử dụng thuật ngữ mô tả (

) và chi tiết mô tả (

) thay vì

và không có dấu danh sách. Chúng được cho là được sử dụng để hiển thị siêu dữ liệu và bảng thuật ngữ, nhưng tôi không thể nói rằng mình đã từng nhìn thấy chúng ngoài tự nhiên.

Hãy bắt đầu với những thứ dễ dàng — làm thế nào để thiết lập lại các kiểu danh sách một cách chính xác (ít nhất là theo ý kiến ​​của tôi). Sau đó, chúng ta sẽ xem xét một số vấn đề về khả năng tiếp cận trước khi làm sáng tỏ vấn đề khó nắm bắt.

phần tử mà bạn có thể ngạc nhiên khi biết… thực ra cũng là một loại danh sách!

Đặt lại kiểu danh sách

Các trình duyệt tự động áp dụng các kiểu Tác nhân người dùng của riêng chúng để trợ giúp với cấu trúc trực quan của danh sách ngay lập tức. Điều đó có thể là tuyệt vời! Nhưng nếu chúng tôi muốn bắt đầu với một bảng trống không có ý kiến ​​về kiểu dáng, thì trước tiên chúng tôi phải đặt lại các kiểu đó.

Ví dụ: chúng ta có thể xóa các điểm đánh dấu bên cạnh danh sách các mục khá dễ dàng. Không có gì mới ở đây:

/* Zap all list markers! */
ol, ul, menu {
  list-style: none;
}

Nhưng CSS hiện đại có những cách mới để giúp chúng tôi nhắm mục tiêu các trường hợp danh sách cụ thể. Giả sử chúng ta muốn xóa các điểm đánh dấu khỏi tất cả các danh sách, trừ khi các danh sách đó xuất hiện trong nội dung dạng dài, như một bài viết. Nếu chúng ta kết hợp sức mạnh của các hàm lớp giả CSS mới hơn :where() và :not(), chúng ta có thể cô lập các trường hợp đó và cho phép các điểm đánh dấu trong các trường hợp đó:

/* Where there are lists that are not articles where there are lists... */
:where(ol, ul, menu):not(article :where(ol, ul, menu)) {
  list-style: none;
}

Tại sao sử dụng :where() thay vì :is()? tính đặc thù của :where() luôn luôn bằng không, trong khi :is() lấy tính đặc hiệu của phần tử cụ thể nhất trong danh sách bộ chọn của nó. Vì vậy, sử dụng :where() là một cách ít mạnh mẽ hơn để ghi đè mọi thứ và có thể dễ dàng ghi đè chính nó.

Các kiểu UA cũng áp dụng phần đệm để tạo khoảng trống cho nội dung của mục danh sách khỏi điểm đánh dấu của nó. Một lần nữa, đó là một khả năng chi trả khá tốt trong một số trường hợp, nhưng nếu chúng tôi đã xóa các điểm đánh dấu danh sách như chúng tôi đã làm ở trên, thì chúng tôi cũng có thể xóa sạch phần đệm đó. Đây là một trường hợp khác cho :where():

:where(ol, ul, menu) {
  padding-left: 0; /* or padding-inline-start */
}

Được rồi, điều đó sẽ ngăn các mục trong danh sách không có điểm đánh dấu xuất hiện trôi nổi trong không gian. Nhưng chúng tôi đại loại là ném đứa bé ra ngoài bằng nước tắm và loại bỏ lớp đệm trong mọi trường hợp, kể cả những đứa trẻ mà chúng tôi đã cách ly trước đó trong một

. Vì vậy, bây giờ những danh sách có điểm đánh dấu sắp treo ngoài mép của hộp nội dung.

Lưu ý rằng các kiểu UA áp dụng thêm 40px đến

thành phần.

Vì vậy, những gì chúng tôi muốn làm là ngăn các điểm đánh dấu danh sách "treo" bên ngoài vùng chứa. Chúng ta có thể khắc phục điều đó bằng list-style-position bất động sản:

Hoặc không… có thể nó phụ thuộc vào sở thích phong cách?

Mối quan tâm về khả năng tiếp cận mới hơn với danh sách

Thật không may, có một số lo ngại về khả năng truy cập khi nói đến danh sách — ngay cả trong thời hiện đại hơn này. Một mối quan tâm là kết quả của việc áp dụng list-style: none; như chúng tôi đã làm khi đặt lại các kiểu UA.

Tóm lại, Safari không đọc danh sách có thứ tự và không có thứ tự được tạo kiểu với list-style: none dưới dạng danh sách thực tế, chẳng hạn như khi điều hướng nội dung bằng trình đọc màn hình. Nói cách khác, việc loại bỏ các điểm đánh dấu cũng loại bỏ ý nghĩa ngữ nghĩa của danh sách. Các sửa chữa cho sửa chữa này nó để áp dụng một ARIA list vai trò trong danh sách và một listitem vai trò đối với các mục danh sách vì vậy trình đọc màn hình sẽ chọn chúng:

  
...
  
...
  
...



  
...
  
...
  
...

Kì lạ Safari coi đây là một tính năng hơn là một lỗi. Về cơ bản, người dùng sẽ báo cáo rằng trình đọc màn hình đã thông báo quá nhiều danh sách (vì nhà phát triển có xu hướng lạm dụng chúng), vì vậy hiện tại, chỉ những người có role="list" được công bố bởi trình đọc màn hình, điều này thực sự không có gì lạ. Scott O'Hara có một tóm tắt chi tiết về việc tất cả đã đi xuống như thế nào.

Mối lo ngại về khả năng tiếp cận thứ hai không phải do chúng tôi tự tạo ra (hoan hô!). Vì vậy, bạn biết làm thế nào bạn được cho là thêm một aria-label đến

yếu tố không có tiêu đề? Chà, đôi khi cũng hợp lý khi làm điều tương tự với một danh sách không chứa thành phần tiêu đề giúp mô tả danh sách.

  
Grocery list
  

     
  




  

Bạn hoàn toàn không phải sử dụng một trong hai phương pháp. Việc sử dụng tiêu đề hoặc nhãn ARIA chỉ là ngữ cảnh bổ sung, không phải là yêu cầu — hãy đảm bảo kiểm tra trang web của bạn bằng trình đọc màn hình và thực hiện những gì mang lại trải nghiệm người dùng tốt nhất cho tình huống đó.

Trong một số tin tức liên quan, Eric Bailey đã viết một bài xuất sắc về tại sao và làm thế nào anh ta xem xét aria-label là một mùi mã.

Chờ đợi,

là một danh sách, quá?

OK, vì vậy, bạn có thể tự hỏi về tất cả các

các yếu tố mà tôi đã đưa vào các ví dụ về mã. Nó thực sự siêu đơn giản; menu là danh sách không có thứ tự ngoại trừ việc chúng dành cho các mục tương tác. Chúng thậm chí còn được hiển thị trên cây khả năng truy cập dưới dạng danh sách không có thứ tự.

Trong những ngày đầu của web ngữ nghĩa, tôi đã lầm tưởng rằng các menu giống như

s trước khi tin rằng chúng dành cho menu ngữ cảnh (hoặc “thanh công cụ” như thông số kỹ thuật nói) bởi vì đó là những gì các phiên bản đầu tiên của thông số HTML đã nói. (MDN có một bài viết thú vị trên tất cả những thứ không dùng nữa liên quan đến

nếu bạn thực sự quan tâm.)

Tuy nhiên, ngày nay, đây là cách ngữ nghĩa để sử dụng menu:

  
Email
  
Twitter
  
Facebook

Cá nhân, tôi nghĩ rằng có một số trường hợp sử dụng tốt cho

. Ví dụ cuối cùng đó hiển thị danh sách các nút chia sẻ xã hội được gói trong một nhãn

phần tử, khía cạnh đáng chú ý là nhãn “Chia sẻ bài viết” đóng góp một lượng ngữ cảnh đáng kể giúp mô tả chức năng của các nút.

Thực đơn có thực sự cần thiết không? Không. Có phải họ mốc HTML? Chắc chắn không phải. Nhưng họ ở đó nếu bạn tận hưởng ít hơn

s và bạn cảm thấy như thành phần này có thể sử dụng aria-label cho bối cảnh bổ sung.

Còn gì nữa không?

Vâng, cũng có những điều đã nói ở trên

tuy nhiên, phần tử (danh sách mô tả), MDN dường như không coi chúng là danh sách theo cách tương tự - đó là một danh sách các nhóm chứa các thuật ngữ - và tôi không thể nói rằng tôi đã thực sự thấy chúng được sử dụng. Theo MDN, chúng được cho là được sử dụng cho siêu dữ liệu, bảng thuật ngữ và các loại cặp khóa-giá trị khác. Tôi sẽ chỉ tránh chúng với lý do tất cả các trình đọc màn hình thông báo chúng khác nhau.

Nhưng chúng ta đừng kết thúc mọi thứ trên một lưu ý tiêu cực. Dưới đây là danh sách những điều tuyệt vời mà bạn có thể làm với danh sách: