Tập trung

Các thành phần tương tác, trong đó có các thành phần điều khiển biểu mẫu, đường liên kết và nút, nằm bằng cách mặc định có thể làm tâm điểm và gắn thẻ. Các phần tử có thể gắn thẻ là một phần của thứ tự điều hướng tâm điểm theo tuần tự của tài liệu. Các phần tử khác mang tính trơ, nghĩa là chúng không có tính tương tác. Với thuộc tính HTML, bạn có thể làm cho các phần tử tương tác trở nên tĩnh và làm cho các phần tử trơ có tính tương tác.

Theo mặc định, thứ tự tiêu điểm điều hướng giống với thứ tự hình ảnh (là thứ tự mã nguồn). Có HTML các thuộc tính có thể thay đổi thứ tự này và các thuộc tính CSS có thể thay đổi thứ tự hình ảnh của nội dung. Thay đổi tab đơn đặt hàng có HTML hoặc thứ tự hiển thị hình ảnh qua CSS có thể ảnh hưởng xấu đến trải nghiệm người dùng.

Đừng thay đổi thứ tự thẻ thực tế và được nhìn thấy bằng CSS và HTML. Như hai ví dụ sau đây minh hoạ, thứ tự tab khác với thứ tự dự kiến sẽ gây nhầm lẫn cho người dùng và không tốt cho trải nghiệm người dùng.

Trong ví dụ này, giá trị của thuộc tính tabindex đã làm cho thứ tự thẻ trở nên lộn xộn:

Trong ví dụ này, CSS đã tạo ra sự khác biệt giữa thứ tự thẻ và thứ tự hình ảnh của nội dung:

Phần khai báo flex-flow: row-reverse; đã đảo ngược thứ tự hình ảnh. Ngoài ra, thuộc tính order của CSS được áp dụng cho từ thứ 6, "This", đã chuyển giao diện đó một từ. Trình tự gắn thẻ là thứ tự của mã, không còn khớp với thứ tự hình ảnh nữa, dẫn đến việc ngắt kết nối cho người dùng bàn phím.

Tạo các phần tử trơ có tính tương tác

Các thuộc tính contenteditable và tabindex là các thuộc tính chung có thể được thêm vào bất kỳ phần tử nào để có thể làm tâm điểm trong quá trình này. Bạn cũng có thể lấy tiêu điểm các phần tử có thể lấy tiêu điểm bằng chuột hoặc con trỏ thông qua thẻ autofocus hoặc theo tập lệnh, chẳng hạn như với element.focus().

Thuộc tính tabindex

Thuộc tính chung tabindex, đã ra mắt trong thuộc tính, cho phép các phần tử không thể nhận tiêu điểm để lấy tiêu điểm tiêu điểm, thường bằng phím Tab, do đó có tên như vậy.

Thuộc tính tabindex nhận giá trị là số nguyên. Giá trị âm khiến một phần tử có thể làm tâm điểm nhưng không gắn thẻ được. Đáp Giá trị tabindex của 0 giúp phần tử có thể làm tâm điểm và có thể gắn thẻ, thêm phần tử mà phần tử đó được áp dụng vào trình tự thứ tự điều hướng tiêu điểm theo thứ tự mã nguồn. Giá trị từ 1 trở lên sẽ khiến phần tử đó có thể làm tâm điểm và gắn thẻ, nhưng thêm thẻ này vào trình tự ưu tiên thẻ, và như chúng ta đã thấy ở trên, bạn nên tránh sử dụng.

Trên trang này, nút chia sẻ (<share-action>) là một phần tử tuỳ chỉnh. tabindex="0" thêm phần tử này mà không thể làm tâm điểm như bình thường vào thứ tự tab mặc định của bàn phím:

<share-action authors="@front-end.social/@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, mastodon" role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

Có một phần tử tùy chỉnh khác trên trang này: điều hướng cục bộ có một phần tử có giá trị tabindex âm:

<web-navigation-drawer type="standard" tabindex="-1">

Thuộc tính tabindex có giá trị âm giúp phần tử đó có thể làm tâm điểm nhưng không gắn thẻ được. Phần tử có thể nhận tâm điểm, chẳng hạn như qua HTMLElement.focus(), nhưng không phải là một phần của thứ tự điều hướng lấy tiêu điểm tuần tự. Quy ước cho các phần tử không thể dùng thẻ, có thể làm tâm điểm là sử dụng tabindex="-1". Lưu ý rằng nếu bạn thêm tabindex="-1" vào một phần tử tương tác, thì phần tử này sẽ không gắn thẻ được nữa.

Bạn có thể sử dụng phương thức element.focus() để đặt tiêu điểm thành phần tử có thể làm tâm điểm. Xin lưu ý rằng các trình duyệt sẽ cuộn các phần tử được lấy tiêu điểm vào khung hiển thị. Vì lý do này, hãy tránh sử dụng element.focus({preventScroll:true}), vì việc tập trung vào một phần tử không hiển thị sẽ mang lại trải nghiệm không tốt cho người dùng.

Nếu bạn muốn truy vấn tài liệu để tìm hiểu phần tử nào hiện có tâm điểm, hãy sử dụng thuộc tính Document.activeElement chỉ có thể đọc.

Các phần tử có tabindex 1 trở lên sẽ nằm trong một trình tự thẻ riêng biệt. Như bạn thấy trong Codepen, việc đóng thẻ bắt đầu theo một trình tự riêng biệt, theo thứ tự từ giá trị thấp nhất đến giá trị cao nhất, trước khi đi qua các giá trị trong trình tự thông thường (chưa đặt tabindex hoặc tabindex="0") theo thứ tự nguồn:

tabindex với giá trị dương sẽ đặt phần tử vào trình tự lấy tiêu điểm được ưu tiên, điều này có thể dẫn đến tình trạng lộn xộn của thứ tự lấy tiêu điểm. Tránh sửa đổi thứ tự DOM bằng tabindex. Việc thay đổi thứ tự trong thẻ không chỉ có thể tạo ra người dùng xấu những trải nghiệm này khiến nhà phát triển gặp nhiều khó khăn trong việc quản lý và duy trì.

Thuộc tính contenteditable

Thuộc tính contenteditable đã được thảo luận trước đó. Khi đặt contenteditable="true" trên bất kỳ phần tử nào, bạn có thể chỉnh sửa phần tử này, có thể làm tâm điểm và là một phần của thứ tự thẻ. Hành vi lấy nét tương tự như thiết lập tabindex="0", nhưng không giống nhau. Lồng ghép Các phần tử contenteditable có thể làm tâm điểm nhưng không gắn thẻ được. Để phần tử contenteditable lồng nhau có thể gắn thẻ, hãy thêm tabindex="0", Thao tác này sẽ thêm nó vào thứ tự điều hướng lấy tiêu điểm tuần tự.

Tập trung vào các phần tử tương tác

Thuộc tính autofocus

Trong khi boolean autofocus là một thuộc tính chung có thể đặt trên bất kỳ phần tử nào, nó không làm cho phần tử trơ có tính tương tác. Khi trang tải, phần tử có thể làm tâm điểm đầu tiên có tập hợp thuộc tính autofocus sẽ nhận được tiêu điểm, miễn là phần tử đó hiển thị và không được lồng trong <dialog>.

Việc tự động đặt tiêu điểm vào nội dung có thể gây nhầm lẫn. Việc đặt autofocus trên thành phần điều khiển biểu mẫu có nghĩa là thành phần kiểm soát biểu mẫu sẽ cuộn vào chế độ xem khi tải trang. Tất cả người dùng của bạn, bao gồm cả người dùng trình đọc màn hình và người dùng có khung nhìn nhỏ, có thể không "xem" hướng dẫn cho biểu mẫu, thậm chí có thể cuộn qua nhãn thường hiển thị của điều khiển biểu mẫu. autofocus không làm thay đổi thứ tự điều hướng lấy tiêu điểm tuần tự của tài liệu. Các phần tử trong chuỗi đến trước đơn giản là bỏ qua thành phần tự động lấy nét. Vì những lý do này, bạn không nên thêm thuộc tính autofocus.

Ngoại lệ đối với trường hợp "không sử dụng autofocus" đề xuất bao gồm thuộc tính autofocus trong các phần tử <dialog>. Khi một hộp thoại được mở, trình duyệt sẽ tự động đặt tiêu điểm vào phần tử tương tác có thể làm tâm điểm đầu tiên trong <dialog>, nghĩa là không cần autofocus cho một phần tử. Nếu bạn muốn chắc chắn rằng một phần tử tương tác cụ thể trong hộp thoại nhận được đặt tiêu điểm khi hộp thoại mở ra, hãy thêm thuộc tính autofocus vào phần tử đó.

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

Thuộc tính autofocus được đặt trên <button> đóng đảm bảo nó nhận được tiêu điểm khi hộp thoại được mở. Là phần tử đầu tiên trong hộp thoại, nó sẽ nhận được tiêu điểm trong mọi trường hợp. Theo mặc định, khi một hộp thoại được mở, phần tử có thể làm tâm điểm đầu tiên trong hộp thoại sẽ nhận tiêu điểm trừ phi một phần tử khác trong hộp thoại đã được đặt thuộc tính autofocus.

Làm cho các phần tử tương tác trở nên trơ

Ngoài ra còn có các thuộc tính HTML có thể xoá các phần tử tương tác khỏi trình tự đóng thẻ. Bao gồm một tabindex phủ định vào các phần tử có thể làm tâm điểm, thêm thuộc tính disabled để hỗ trợ các thành phần điều khiển biểu mẫu và thêm thuộc tính inert chung vào một vùng chứa, tất cả đều làm cho các phần tử không thể dùng thẻ. Ba thuộc tính này KHÔNG thay thế được cho nhau.

Giá trị tabindex âm

Như chúng ta đã tìm hiểu ở trên, thuộc tính tabindex có giá trị âm khiến một phần tử có thể làm tâm điểm nhưng không gắn thẻ được. Trong khi thêm tabindex="0" thành một phần tử có thể làm tâm điểm theo mặc định, trong đó có đường liên kết, nút, thành phần điều khiển biểu mẫu và các thành phần contenteditable là không cần thiết; thêm một tabindex có giá trị âm sẽ xoá các phần tử có thể gắn thẻ thông thường khỏi tiêu điểm tuần tự thứ tự điều hướng.

Giá trị tabindex âm ngăn người dùng bàn phím tập trung vào các phần tử tương tác, nhưng không tắt phần tử đó. Pointer người dùng vẫn có thể tập trung vào phần tử đó. Để tắt một phần tử, hãy dùng thuộc tính disabled.

Đã tắt

Thuộc tính boolean disabled khiến các điều khiển biểu mẫu bật mà đối tượng đó được áp dụng và các thành phần con cháu của chúng (nếu có) không thể làm tâm điểm. Bạn không thể lấy các đối tượng điều khiển biểu mẫu đã bị tắt, không nhận được sự kiện nhấp chuột, và không được gửi khi gửi biểu mẫu. Lưu ý: disabled không phải là thuộc tính chung. Áp dụng cho <button>, <input>, <optgroup>, <option>, <select>, <textarea>, phần tử tuỳ chỉnh liên kết với biểu mẫu và <fieldset>. Khi bạn đặt chính sách này lên <optgroup> hoặc <fieldset>, tất cả các chế độ điều khiển biểu mẫu con đều bị tắt, ngoại trừ nội dung trong <legend> đầu tiên của <fieldset>.

Các phần tử tương tự hỗ trợ disabled cũng có thể nhắm mục tiêu bằng :disabled và lớp giả :enabled. Các phần tử bị tắt bằng Thuộc tính disabled thường có kiểu màu xám nhạt thông qua biểu định kiểu tác nhân người dùng, ngay cả khi accent-color đã được đặt.

Là một thuộc tính boolean, nên sự hiện diện của thuộc tính này sẽ vô hiệu hoá phần tử được bật theo cách khác; bạn không thể đặt thành false. Để bật lại một phần tử đã tắt, bạn phải xoá thuộc tính đó, thường là qua Element.removeAttribute('disabled').

Thuộc tính HTMLInputElement.disabled cho phép bạn kiểm tra nếu một nguồn đầu vào bị tắt. Vì disabled không phải là thuộc tính chung nên thuộc tính này không được kế thừa từ HTMLElement, nhưng mọi thuộc tính hỗ trợ giao diện phần tử, chẳng hạn như HTMLSelectElement, HTMLTextareaElement có cùng thuộc tính chỉ có thể đọc.

Thuộc tính disabled không áp dụng cho các phần tử inert thông thường có thể làm tâm điểm bằng tabindex hoặc contenteditable. Điều này cũng không áp dụng cho phần tử <form>. Để tắt các chức năng này, bạn có thể sử dụng thuộc tính inert chung.

Thuộc tính inert

Khi bạn thêm thuộc tính boolean chung inert vào một phần tử, phần tử đó và tất cả nội dung lồng nhau sẽ bị tắt — cả hai có thể nhấp cũng như không thể gắn thẻ – và bị xoá khỏi cây hỗ trợ tiếp cận. Mặc dù có thể áp dụng inert cho mọi phần tử, nhưng thường thì được sử dụng cho các phần nội dung, chẳng hạn như nội dung ngoài màn hình hoặc nội dung bị ẩn.

Khi áp dụng disabled cho các thành phần điều khiển biểu mẫu, trình duyệt sẽ cung cấp kiểu mặc định và có thể được tạo kiểu bằng :disabled lớp giả. Thuộc tính inert không cung cấp chỉ báo trực quan và không có lớp giả phù hợp (mặc dù bộ chọn thuộc tính của [inert] trùng khớp).

Việc sử dụng inert trên nội dung hiển thị mà không có kiểu cho biết sự trơ có thể dẫn đến trải nghiệm người dùng kém. Dưới dạng nội dung tĩnh không có sẵn cho người dùng trình đọc màn hình, điều này có thể gây nhầm lẫn khi người dùng trình đọc màn hình nhìn thấy nội dung trên màn hình không có sẵn cho các công cụ hỗ trợ tiếp cận. Làm cho tính trơ rất rõ ràng qua CSS.

Đảm bảo rằng tiêu điểm không bao giờ chuyển sang nội dung không hiển thị. Mọi nội dung được kết xuất ngoài màn hình mà không tự động xuất hiện khi tâm điểm nên được đặt ở trong. Nếu nội dung bị ẩn, nhưng xuất hiện khi được lấy tiêu điểm, chẳng hạn như đường liên kết chuyển đến nội dung trên trang này, nó không cần phải thực hiện trơ.

Kiểm tra kiến thức

Kiểm tra kiến thức

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