Tập trung

Podcast CSS – 018: Focus (Tập trung)

Trên trang web của bạn, khi bạn nhấp vào một đường liên kết bỏ qua 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 liên kết đó được kích hoạt bằng bàn phím, hãy sử dụng phím tab và Enter, vùng chứa nội dung chính có một vòng tròn tiêu điểm xung quanh. Tại sao lại như vậy?

Điều này là do <main> có giá trị thuộc tính tabindex="-1". tức là có thể lấy tiêu đ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 — URL này sẽ nhận trọng tâm có lập trình. Đôi khi, bạn nên xoá kiểu lấy nét trong những tình huống như vậy, nhưng việc xử lý tập trung đúng cách và cẩn thận sẽ giúp tạo ra dễ tiếp cận và mang tính trải nghiệm người dùng cao hơn. Đây cũng có thể là một nơi tuyệt vời để tăng thêm sự quan tâm cho các hoạt động tương tác.

Vì sao sự tập trung 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 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 có thể truy cập bằng CSS là một phần trong trách nhiệm này.

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

Cách các thành phần được lấy tiêu điểm

Một số phần tử có thể tự động lấy tiêu điểm; đây là những phần tử chấp nhận hoạt động tương tác và dữ liệu đầu vào, chẳng hạn như <a>, <button>, <input> và <select>. Tóm lại, tất cả các yếu tố 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ể làm tâm điểm của một trang web bằng cách sử dụng phím tab để tiến trên trang và di chuyển + tab để lùi lại.

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 thẻ — chính là thứ tự các phần tử được lấy tiêu điểm – mỗi khi ai đó nhấn phím tab, hoặc tiêu điểm bị thay đổi khi thay đổi hàm băm trong URL hoặc bởi sự kiện JavaScript. Nếu tabindex trên phần tử HTML được đặt thành 0, nó có thể nhận tiêu điểm qua phím tab và sẽ tôn vinh 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ì ứng dụng này chỉ có thể nhận tiêu điểm theo phương thức lập trình, có nghĩa là chỉ khi một sự kiện JavaScript xảy ra hoặc thay đổi hàm băm (trùng khớp với id của phần tử trong URL). Nếu bạn đặt tabindex thành bất kỳ giá trị nào cao hơn 0, thì thẻ đó sẽ bị xoá khỏi chỉ mục thẻ toàn cầu, được xác định theo thứ tự nguồn tài liệu. Thứ tự nhấn phím hiện sẽ được xác định bằng giá trị của tabindex, vì vậy, một phần tử có tabindex="1" sẽ nhận được tiêu điểm trước một 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à hiển thị vòng lấy nét. Vòng tròn tiêu điểm 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, sử dụng :focus, :focus-within và :focus-visible mà bạn đã tìm hiểu trong bài học về lớp giả. Đ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ụ: một 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ă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 điều đó, vì nó thêm padding trực quan bổ sung 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, một giá trị âm sẽ kéo bố cục vào phía trong.

Hiện tại, trên một số trình duyệt, nếu bạn đã đặt border-radius trong phần tử và sử dụng outline, 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 làm 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ị ở 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à chủ yếu bỏ qua hình nền để ưu tiên các chế độ cài đặt ưu tiên của người dùng.

Tóm tắt

Việc tạo trạng thái tiêu điểm có độ tương phản với trạng thái mặc định của phần tử là cực kỳ 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.
• Bạn chỉ nên đặt một giá trị dương cho tabindex trên phần tử HTML nếu thực sự cần phải đặt giá trị đó.
• Đảm bảo trạng thái của tiêu điểm phải rất rõ ràng so với trạng thái mặc định.

Kiểm tra kiến thức

Kiểm tra kiến thức về trọng tâm