Tập trung

Podcast CSS – 018: Trọng tâm

Trên trang web của mình, bạn nhấp vào một đường liên kết đưa người dùng đến nội dung chính của trang web. Các đường liên kết này thường được gọi là đường liên kết bỏ qua hoặc đường liên kết neo. Khi đường liên kết đó được bàn phím kích hoạt, bằng cách sử dụng phím tab và Enter, vùng chứa nội dung chính sẽ có vòng tiêu điểm xung quanh. Tại sao lại như vậy?

Nguyên nhân là do <main> có giá trị thuộc tính tabindex="-1", nghĩa là thuộc tính này có thể được lấy làm tâm điểm theo phương thức lập trình. Khi <main> được nhắm mục tiêu (vì #main-content trong thanh URL của trình duyệt khớp với id) sẽ nhận được tiêu điểm có lập trình. Bạn sẽ muốn xoá kiểu lấy nét trong những tình huống như vậy. Tuy nhiên, việc xử lý tiêu điểm đúng cách và cẩn thận sẽ giúp tạo ra trải nghiệm người dùng tốt, dễ tiếp cận. Đó cũng có thể là một nơi tuyệt vời để khiến người dùng quan tâm đến các lượt tương tác.

Tại sao tâm điểm lại quan trọng?

Là nhà phát triển web, công việc của bạn là làm cho trang web trở nên dễ tiếp cận và dành cho tất cả mọi người. Việc tạo trạng thái tiêu điểm dễ tiếp cận bằng CSS là một phần trong trách nhiệm này.

Kiểu tiêu điểm hỗ trợ người dùng một thiết bị như bàn phím hoặc nút điều khiển công tắc để di chuyển và tương tác với trang web. Nếu một phần tử nhận được tiêu điểm nhưng không có chỉ báo trực quan nào, thì người dùng có thể mất dấu các nội dung được lấy tiêu điểm. Điều này có thể gây ra các vấn đề về điều hướng và dẫn đến hành vi không mong muốn nếu người dùng nhấp vào đường liên kết không chính xác.

Cách các phần tử lấy nét

Một số phần tử có thể tự động lấy tiêu điểm; đây là các phần tử chấp nhận hoạt động tương tác và nhập vào, chẳng hạn như <a>, <button>, <input> và <select>. Tóm lại là tất cả các thành phần biểu mẫu, nút và đường liên kết. Thông thường, bạn có thể điều hướng các phần tử có thể được lấy làm tiêu điểm của trang web bằng cách sử dụng phím tab để di chuyển về phía trước trên trang và shift + tab để di chuyển về phía sau.

Ngoài ra, còn có một thuộc tính HTML có tên là tabindex cho phép bạn thay đổi chỉ mục dạng thẻ (là thứ tự mà các phần tử được làm tâm điểm) mỗi khi có người nhấn phím tab hoặc tiêu điểm được dịch chuyển theo một thay đổi về hàm băm trong URL hoặc bằng một sự kiện JavaScript. Nếu bạn đặt tabindex trên một phần tử HTML thành 0, thì thẻ này có thể nhận tiêu điểm thông qua phím tab và sẽ tôn trọng chỉ mục thẻ chung, được xác định theo thứ tự nguồn tài liệu.

Nếu bạn đặt tabindex thành -1, thì thành phần này chỉ có thể nhận tâm điểm theo phương thức lập trình, nghĩa là chỉ khi sự kiện JavaScript xảy ra hoặc thay đổi hàm băm (khớp với id của phần tử trong URL) mới xảy ra. Nếu bạn đặt tabindex cao hơn 0, thẻ đó sẽ bị xoá khỏi chỉ mục thẻ chung, được xác định theo thứ tự nguồn tài liệu. Thứ tự thẻ giờ đây sẽ được xác định bằng giá trị của tabindex, do đó, một phần tử có tabindex="1" sẽ nhận được tâm điểm trước phần tử có tabindex="2" chẳng hạn.

Tạo kiểu tiêu điểm

Hành vi mặc định của trình duyệt khi một phần tử nhận được tiêu điểm là vòng tròn lấy nét. Vòng lấy nét này khác nhau giữa cả trình duyệt và hệ điều hành.

Bạn có thể thay đổi hành vi này bằng CSS, bằng cách sử dụng các lớp giả :focus, :focus-within và :focus-visible mà bạn đã tìm hiểu trong bài học về lớp giả lập. Điều quan trọng là bạn phải đặt kiểu tiêu điểm có độ tương phản với kiểu mặc định của một phần tử. Ví dụ: phương pháp phổ biến là sử dụng thuộc tính outline.

a:focus {
  outline: 2px solid slateblue;
}

Thuộc tính outline có thể xuất hiện quá gần với văn bản của một đường liên kết, nhưng thuộc tính outline-offset có thể giúp bạn làm việc đó, vì thuộc tính này bổ sung thêm padding trực quan mà không ảnh hưởng đến kích thước hình học mà phần tử lấp đầy. Giá trị số dương cho outline-offset sẽ đẩy đường viền ra ngoài, giá trị âm sẽ đẩy đường viền vào trong.

Hiện tại trong một số trình duyệt, nếu bạn đã đặt border-radius trong phần tử và sử dụng outline thì đường viền sẽ không khớp – đường viền sẽ có các góc sắc. Do đó, bạn nên sử dụng box-shadow có bán kính mờ nhỏ vì box-shadow cắt theo hình dạng, tôn vinh border-radius, nhưng kiểu này sẽ không hiển thị trong Chế độ tương phản cao của Windows. Điều này là do Chế độ tương phản cao của Windows không áp dụng bóng và hầu hết bỏ qua hình nền để ưu tiên các chế độ cài đặt mà người dùng ưu tiên.

Tóm tắt

Việc tạo trạng thái tiêu điểm tương phản với trạng thái mặc định của một phần tử là vô cùng quan trọng. Các kiểu trình duyệt mặc định đã thực hiện việc này cho bạn, nhưng nếu bạn muốn thay đổi hành vi này, hãy nhớ những điều sau:

• Tránh sử dụng outline: none trên một phần tử có thể nhận tiêu điểm bàn phím.
• Tránh thay thế kiểu outline bằng box-shadow. vì chúng không xuất hiện trong Chế độ tương phản cao của Windows.
• Chỉ đặt giá trị dương cho tabindex trên phần tử HTML nếu bạn nhất thiết phải làm vậy.
• Đảm bảo trạng thái lấy nét rất rõ ràng so với trạng thái mặc định.

Kiểm tra mức độ hiểu biết của bạn

Kiểm tra kiến thức về sự tập trung