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.
Nếu một phần tử không thể lấy tiêu điểm thì phần tử đó được mô tả là gì?
Điều gì sẽ đúng nếu phần tử có thuộc tính disabled
?