Xuất bản: Ngày 5 tháng 3 năm 2026
Thuộc tính HTML focusgroup là một cách khai báo được đề xuất để thêm chế độ điều hướng bằng phím mũi tên trên bàn phím vào các thành phần kết hợp như thanh công cụ, danh sách thẻ, trình đơn, hộp danh sách, v.v. mà không cần viết bất kỳ JavaScript roving-tabindex nào. Một thuộc tính thay thế hàng trăm dòng mã nguyên mẫu. Chúng tôi rất mong nhận được ý kiến phản hồi của bạn trước khi tính năng này ra mắt.
Hãy dùng thử và cho chúng tôi biết ý kiến phản hồi của bạn
Bạn có thể dùng thử focusgroup ngay hôm nay trong Chrome, Edge và các trình duyệt chromium khác bằng cách bật theo một trong hai cách sau:
- Thử nghiệm cục bộ: Trong trình duyệt, hãy mở trang
about://flagsvà bật cờ Experimental Web Platform features (Các tính năng thử nghiệm của Nền tảng web). Hoặc khởi chạy trình duyệt từ dòng lệnh bằng cách sử dụng tham số dòng lệnh--enable-blink-features=Focusgroup. - Bản dùng thử theo nguyên gốc: Đăng ký bản dùng thử theo nguyên gốc focusgroup để thử nghiệm trên trang web của bạn với người dùng thực.
Sau đó, hãy khám phá các bản minh hoạ tương tác để xem mọi mẫu hoạt động.
Chúng tôi cần ý kiến đóng góp của bạn. Gửi vấn đề về nhóm tập trung để cho chúng tôi biết ý kiến của bạn.
Đây là một nỗ lực trên nhiều trình duyệt: đề xuất này bắt nguồn từ Microsoft thông qua Nhóm cộng đồng OpenUI với sự hỗ trợ mạnh mẽ từ Google. Hình dạng API có thể thay đổi dựa trên ý kiến phản hồi của bạn. Hãy cùng tìm hiểu vấn đề mà nhóm tập trung giải quyết và cách API này hoạt động.
Vấn đề: chỉ mục tab chuyển vùng theo cách thủ công
Nếu đã từng tạo thanh công cụ, danh sách thẻ, trình đơn hoặc hộp danh sách, thì bạn đã viết một số phiên bản của mã này. ARIA Authoring Practices Guide (APG) (Hướng dẫn về các phương pháp tạo ARIA) đề xuất rằng các tiện ích kết hợp trình bày một điểm dừng Tab duy nhất và cho phép người dùng di chuyển giữa các mục bằng các phím mũi tên. Mẫu này được gọi là "chỉ mục tab di động". Nhiều khung giao diện người dùng triển khai lại việc này từ đầu:
<div role="toolbar" aria-label="Text formatting" id="toolbar">
<button type="button" tabindex="0">Bold</button>
<button type="button" tabindex="-1">Italic</button>
<button type="button" tabindex="-1">Underline</button>
<button type="button" tabindex="-1">Strikethrough</button>
</div>
Từ đây, nhà phát triển cần sử dụng JavaScript để theo dõi các phím mũi tên nhằm di chuyển tiêu điểm và điều chỉnh thuộc tính tabindex cho tất cả các phần tử. Đây là phiên bản đơn giản. Việc triển khai trong thực tế cũng cần xử lý:
- Chế độ viết và RTL: Điều chỉnh hướng của phím mũi tên dựa trên hướng nội dung.
- Bộ nhớ được lấy làm tâm điểm gần đây nhất: Khôi phục tiêu điểm về mục đang hoạt động trước đó khi người dùng quay lại thẻ.
- Các mục bị vô hiệu hoá và ẩn: Bỏ qua các mục này trong khi dò đường.
- Mục linh hoạt: Cập nhật chỉ mục di động khi các mục được thêm hoặc xoá.
Hầu hết các thư viện giao diện người dùng, bao gồm React, Angular CDK và Fluent UI đều có phiên bản riêng của logic này. Bạn sẽ phải nỗ lực rất nhiều để có được một thứ có thể là nguyên tắc cơ bản của nền tảng.
Giải pháp: thuộc tính focusgroup
Với focusgroup, thanh công cụ tương tự sẽ trở thành:
<div focusgroup="toolbar" aria-label="Text formatting">
<button type="button">Bold</button>
<button type="button">Italic</button>
<button type="button">Underline</button>
<button type="button">Strikethrough</button>
</div>
Dùng thử trực tiếp: Toolbar Pattern > Basic Toolbar (Mẫu thanh công cụ > Thanh công cụ cơ bản). Vậy là xong. Không có JavaScript cho chế độ di chuyển bằng phím mũi tên. Không cần quản lý chỉ mục thẻ theo cách thủ công. Sau đây là những việc mà trình duyệt hiện xử lý cho bạn:
- Di chuyển bằng phím mũi tên: Di chuyển giữa các mục, đồng thời tuân thủ chế độ và hướng viết.
- Một điểm dừng phím Tab: Trình duyệt sẽ tự động thu gọn các mục tham gia thành một điểm dừng phím Tab. Nhà phát triển không cần đặt
tabindex="-1"trên các mục không hoạt động. - Bộ nhớ tiêu điểm cuối cùng: Khi người dùng rời khỏi focusgroup rồi quay lại, tiêu điểm sẽ được khôi phục về mục mà họ đã rời đi.
- Ngữ nghĩa ARIA: Trình duyệt cung cấp các vai trò thích hợp (chẳng hạn như
role="toolbar") dựa trên hành vi được chọn khi các phần tử chung được sử dụng.
Nhà phát triển chỉ giữ lại logic riêng cho các tính năng của họ, chẳng hạn như chuyển đổi trạng thái đã nhấn, mở trình đơn, quản lý lựa chọn hoặc bất kỳ lệnh tuỳ chỉnh nào.
Tổng quan về API
Thuộc tính focusgroup nhận một danh sách mã thông báo được phân tách bằng dấu cách. Mã thông báo đầu tiên luôn là mã thông báo hành vi khai báo mẫu tiện ích. Các mã thông báo sửa đổi không bắt buộc sẽ xuất hiện sau: focusgroup="<behavior> [inline|block] [wrap] [nomemory]".
Mã thông báo hành vi
Bạn phải có mã thông báo về hành vi (trừ phi sử dụng none để chọn không tham gia focusgroup của đối tượng cấp trên). Nó khai báo mẫu thành phần kết hợp, đảm bảo rằng các vai trò phù hợp có thể được suy luận khi không được chỉ định theo cách khác. Các mã thông báo tuân theo các mẫu được mô tả trong hướng dẫn về phương pháp tạo Aria và được liệt kê trong bảng sau:
| Hành vi | Mẫu APG | Vai trò tối thiểu của vùng chứa (khi được áp dụng) | Vai trò tối thiểu của trẻ em (khi được áp dụng) |
Đối tượng sửa đổi mặc định |
|---|---|---|---|---|
toolbar |
Thanh công cụ | toolbar | (không có) | inline |
tablist |
Thẻ APG | tablist | thẻ | inline wrap |
radiogroup |
Nhóm nút chọn | radiogroup | radio | (không có) |
listbox |
Hộp danh sách | listbox | option | (không có) |
menu |
Thực đơn | menu | menuitem | block wrap |
menubar |
Thanh trình đơn | menubar | menuitem | inline wrap |
none |
Không có | Không áp dụng | Không áp dụng | Không có |
Hãy xem phần giải thích để biết thông tin chi tiết về cách hoạt động của tính năng liên kết vai trò.
Hạn chế về trục (inline và block)
Nếu hành vi đã chọn không có bất kỳ khoá sửa đổi mặc định nào, thì cả 4 phím mũi tên đều hoạt động để di chuyển tiêu điểm. Bạn có thể hạn chế thao tác điều hướng trong một trục logic bằng cách sử dụng đối tượng sửa đổi inline hoặc block:
inline: focusgroup chỉ phản hồi các phím mũi tên trên trục nội tuyến, trái và phải trong hầu hết các ngữ cảnh tiếng Anh (theo chiều ngang, từ trên xuống dưới).block: focusgroup chỉ phản hồi các phím mũi tên trên trục khối, lên và xuống trong hầu hết các ngữ cảnh tiếng Anh (ngang, từ trên xuống dưới).
Hạn chế về trục được căn chỉnh theo các thuộc tính logic của CSS và tự động điều chỉnh theo chế độ và hướng viết.
Điều hướng vòng tròn
Theo mặc định, chế độ di chuyển bằng phím mũi tên sẽ dừng ở các cạnh của focusgroup. Thêm đối tượng sửa đổi wrap để lặp lại từ mục cuối cùng về mục đầu tiên (và từ mục đầu tiên về mục cuối cùng). Nếu một thành phần có hành vi bao bọc theo mặc định, hãy dùng đối tượng sửa đổi nowrap để tắt hành vi này.
Dùng thử trực tiếp: Mẫu Tablist > Tablist ngang có tính năng xuống dòng. Trong ví dụ đó, khi tiêu điểm nằm trên thẻ Câu hỏi thường gặp và người dùng nhấn phím Mũi tên phải, tiêu điểm sẽ quay lại thẻ Tổng quan.
Thuộc tính focusgroupstart
Thuộc tính focusgroupstart đánh dấu phần tử nào nhận được tiêu điểm khi nhấn phím Tab vào một focusgroup lần đầu tiên (hoặc mỗi lần khi bộ nhớ bị vô hiệu hoá):
<div focusgroup="toolbar nomemory" aria-label="Entry point demo">
<button type="button">First</button>
<button type="button" focusgroupstart>Middle (Entry)</button>
<button type="button">Last</button>
</div>
Cả Tab và Shift+Tab đều chuyển đến "Middle (Entry)" vì nó có focusgroupstart và bộ nhớ bị vô hiệu hoá bằng đối tượng sửa đổi nomemory. Dùng thử trực tiếp:
Toolbar Pattern > Entry Point with focusgroupstart.
Tắt bộ nhớ (nomemory)
Theo mặc định, focusgroup sẽ ghi nhớ mục được lấy làm tiêu điểm gần đây nhất và khôi phục mục đó khi người dùng nhấn phím Tab để quay lại. Đối với những mẫu mà tiêu điểm luôn phải quay lại một điểm nhập cố định (như trong bản minh hoạ trước), hãy dùng đối tượng sửa đổi nomemory trong thuộc tính focusgroup để tắt.
Bạn cũng có thể kết hợp đối tượng sửa đổi này với chuyển động theo chương trình của focusgroupstart để kiểm soát hoàn toàn mục được lấy tiêu điểm khi vào nhóm. Bộ nhớ sẽ được xoá khi phần tử đã ghi nhớ không còn dùng được nữa; ví dụ: nếu phần tử đó bị xoá, ẩn, vô hiệu hoá, không hoạt động hoặc bị loại trừ khỏi nhóm tiêu điểm.
Chọn không nhận (focusgroup="none")
Sử dụng focusgroup="none" để loại trừ một phần tử và cây con của phần tử đó khỏi chế độ điều hướng bằng mũi tên của focusgroup tổ tiên. Người dùng vẫn có thể truy cập vào phần tử đã chọn không tham gia và cây con của phần tử đó bằng phím Tab, nhưng các phím mũi tên sẽ bỏ qua phần tử đó:
<div focusgroup="toolbar" aria-label="Segmented toolbar">
<button type="button">New</button>
<button type="button">Open</button>
<button type="button">Save</button>
<span focusgroup="none">
<button type="button">Help</button>
<button type="button">Shortcuts</button>
</span>
<button type="button">Close</button>
<button type="button">Exit</button>
</div>
Khi bạn dùng phím mũi tên phải, hệ thống sẽ chuyển đến các nút Mới, Mở, Lưu, Đóng và Thoát, bỏ qua hoàn toàn các nút Trợ giúp và Phím tắt. Nhưng người dùng vẫn có thể nhấn phím Tab để chuyển đến phần trợ giúp và truy cập vào các nút này. Thử trực tiếp: Các khái niệm khác > Phân khúc chọn không tham gia với focusgroup="none".
Mẫu kiểm thử phổ biến
Tablist
Một chế độ kiểm soát thẻ có chế độ di chuyển bằng phím mũi tên giữa các thẻ.
<div focusgroup="tablist nomemory" aria-label="Sections">
<button type="button" aria-selected="true" aria-controls="panel-overview" id="tab-overview" focusgroupstart>Overview</button>
<button type="button" aria-selected="false" aria-controls="panel-features" id="tab-features">Features</button>
<button type="button" aria-selected="false" aria-controls="panel-pricing" id="tab-pricing">Pricing</button>
<button type="button" aria-selected="false" aria-controls="panel-faq" id="tab-faq">FAQ</button>
</div>
<div role="tabpanel" id="panel-overview" aria-labelledby="tab-overview" tabindex="0">...</div>
<div role="tabpanel" id="panel-features" aria-labelledby="tab-features" tabindex="0">...</div>
<div role="tabpanel" id="panel-pricing" aria-labelledby="tab-pricing" tabindex="0">...</div>
<div role="tabpanel" id="panel-faq" aria-labelledby="tab-faq" tabindex="0">...</div>
Dùng thử trực tiếp: Mẫu Tablist > Tablist ngang có tính năng xuống dòng.
Những điểm cần chú ý:
- Thuộc tính
focusgroupstartnằm trên thẻ đã chọn, nên tiêu điểm luôn đi vào đó. - Đối tượng sửa đổi
nomemoryđảm bảo rằng ngay cả khi người dùng đã từng tập trung vào một thẻ khác, thao tác nhập lại luôn chuyển đến thẻ đã chọn. - Đối tượng sửa đổi
inlinechỉ giới hạn thao tác điều hướng bằng mũi tên cho các phím trái và phải. Điều này phù hợp với hành vi dự kiến được nêu trong mẫu Thẻ APG. - Đối tượng sửa đổi
wrapcho phép người dùng sử dụng các phím mũi tên liên tục trên tất cả các thẻ. - Mã dành cho nhà phát triển (được bỏ qua để ngắn gọn) xử lý lựa chọn thực tế: cập nhật
aria-selected, bật/tắt chế độ hiển thị bảng điều khiển và di chuyển thuộc tínhfocusgroupstartkhi thay đổi lựa chọn.
Trình đơn và thanh trình đơn
Một trình đơn dọc đơn giản có chế độ điều hướng bằng mũi tên lên và xuống.
<div focusgroup="menu" aria-label="File actions" class="menu-vertical">
<button type="button" class="menu-item">New</button>
<button type="button" class="menu-item">Open…</button>
<button type="button" class="menu-item">Save</button>
<button type="button" class="menu-item">Exit</button>
</div>
Thử trực tiếp:
Mẫu trình đơn và thanh trình đơn > Trình đơn dọc đơn giản.
Với đối tượng sửa đổi block, chỉ có các phím mũi tên lên và xuống mới điều hướng các mục. Bạn có thể tuỳ ý sử dụng các phím mũi tên trái và phải cho hành vi mà bạn xác định (ví dụ: mở trình đơn con). Đối với một thanh trình đơn có trình đơn con lồng nhau, mỗi cấp độ là một focusgroup độc lập. Dùng thử trực tiếp:
Mẫu Trình đơn và thanh trình đơn > Thanh trình đơn có trình đơn con dạng cửa sổ bật lên
<ul role="menubar" focusgroup="menubar"
aria-label="Application Menu" class="menubar">
<li role="none">
<button role="menuitem" type="button" class="menubar-item"
aria-haspopup="menu" aria-expanded="false"
popovertarget="filemenu">File</button>
<ul role="menu" focusgroup="menu"
id="filemenu" popover aria-label="File submenu" class="submenu">
<li role="none"><button type="button" class="submenu-item"
autofocus>New</button></li>
<li role="none"><button type="button" class="submenu-item">Open</button></li>
<li role="none"><button type="button" class="submenu-item">Save</button></li>
</ul>
</li>
<!-- More menu items... -->
</ul>
Thử trực tiếp: Mẫu trình đơn và thanh trình đơn > Thanh trình đơn có trình đơn con dạng cửa sổ bật lên.
Mặc dù thanh trình đơn sử dụng đối tượng sửa đổi inline để di chuyển sang trái và phải, nhưng các trình đơn con lại sử dụng đối tượng sửa đổi block để di chuyển lên và xuống. Các nhóm tiêu điểm lồng nhau hoàn toàn độc lập nên chúng không can thiệp lẫn nhau.
Radiogroup
Một nhóm nút chọn tuỳ chỉnh có chế độ điều hướng bằng phím mũi tên và chế độ kiểm soát kiểu dáng đầy đủ.
<div focusgroup="radiogroup" aria-label="Favorite color">
<span aria-checked="false" tabindex="0">Red</span>
<span aria-checked="false" tabindex="0">Green</span>
<span aria-checked="true" tabindex="0" focusgroupstart >Blue</span>
<span aria-checked="false" tabindex="0">Purple</span>
</div>
Dùng thử trực tiếp: Radio Group Pattern > Comparison: Native versus Focusgroup (Mẫu nhóm nút chọn > So sánh: Nút chọn gốc so với nút chọn focusgroup).
Mặc dù thuộc tính focusgroup xử lý thao tác điều hướng bằng phím mũi tên, nhưng bạn phải triển khai mã lựa chọn. Trong bản minh hoạ này, mã JavaScript quản lý trạng thái đã đánh dấu (bằng cách sử dụng thuộc tính aria-checked).
Khái niệm chính
Tham gia nhóm tập trung
Tất cả các thành phần con có thể làm tiêu điểm theo trình tự của phần tử có focusgroup được đặt thành một hành vi hợp lệ đều được coi là tham gia vào nhóm tiêu điểm đó. Điều này có nghĩa là các phần tử có tabindex âm sẽ không được xem xét, nhưng các phần tử có thể lấy tiêu điểm một cách tự nhiên như <button> sẽ được xem xét, cũng như các phần tử mà bạn đã chỉ định tabindex không âm.
Vị trí đánh dấu
Bạn không cần quản lý các giá trị tabindex. Ngay cả khi nhiều thành phần con có thể được chuyển đến bằng phím Tab một cách tự nhiên (ví dụ: một số phần tử <button>), focusgroup sẽ thu gọn các thành phần đó thành một điểm dừng phím Tab duy nhất. Trình duyệt xử lý mục nào có thể được chuyển bằng phím Tab tại một thời điểm bất kỳ. Dùng thử trực tiếp:
Toolbar Pattern > No tabindex Management Needed (Mẫu thanh công cụ > Không cần quản lý chỉ mục tab).
Kỷ niệm được lấy tiêu điểm gần đây nhất
Theo mặc định, khi người dùng nhấn phím Tab để rời khỏi một focusgroup và sau đó nhấn phím Tab quay lại, tiêu điểm sẽ quay về mục được lấy làm tiêu điểm gần đây nhất. Điều này rất quan trọng đối với các danh sách lớn và thanh công cụ để người dùng không bị mất dấu. Sử dụng đối tượng sửa đổi nomemory để tắt hành vi này khi bạn muốn tiêu điểm luôn được khôi phục về phần tử đầu tiên hoặc nếu bạn đang dùng focusgroupstart, hãy kiểm soát phần tử được lấy tiêu điểm ban đầu.
Nhóm tiêu điểm lồng nhau
Mỗi khai báo focusgroup sẽ tạo ra một phạm vi độc lập. Một focusgroup lồng nhau sẽ tự động chọn không sử dụng chế độ điều hướng bằng mũi tên của nhóm mẹ. Dùng phím Tab để di chuyển giữa các nhóm tiêu điểm và dùng phím mũi tên để di chuyển trong nhóm tiêu điểm hiện tại. Dùng thử trực tiếp: Các khái niệm bổ sung > Nhóm tiêu điểm lồng nhau.
Hỗ trợ DOM bóng
Theo mặc định, Focusgroup sẽ áp dụng trên các ranh giới DOM bóng. Một focusgroup được khai báo trên một máy chủ lưu trữ bóng bao gồm các phần tử có thể lấy tiêu điểm bên trong cây bóng của máy chủ lưu trữ đó. Nếu muốn chọn không sử dụng, bạn có thể dùng focusgroup="none" trong cây bóng của thành phần.
Xử lý xung đột khoá
Một số phần tử bên trong focusgroup, chẳng hạn như <input>, <textarea> và các chế độ điều khiển khác sử dụng các phím mũi tên cho mục đích riêng của chúng. Khi có xung đột giữa các phím điều hướng của focusgroup và hành vi phím mũi tên của một phần tử gốc:
- Các phím mũi tên được sử dụng bởi phần tử tương tác (ví dụ: để di chuyển con trỏ văn bản) và focusgroup không can thiệp.
- Tab hoặc Shift+Tab cung cấp cơ chế thoát mặc định, cho phép người dùng sử dụng chế độ điều hướng bằng phím Tab để "nhập lại" focusgroup.
Các hành vi thoát này chỉ áp dụng khi có xung đột khoá thực tế; các trục không xung đột sẽ không bị ảnh hưởng. Bạn cũng có thể gọi preventDefault() trên các sự kiện keydown để ghi đè hành vi phím mũi tên của focusgroup cho các phần tử cụ thể. Điều này có nghĩa là bạn có thể đưa các thành phần đầu vào và vùng văn bản vào bên trong một focusgroup mà không làm gián đoạn hành vi nào.
Nếu bạn thêm trình xử lý khoá vào các phần tử của riêng mình đang tham gia vào một focusgroup, hãy cẩn thận cung cấp một cơ chế thoát tương tự để người dùng có thể truy cập vào phần còn lại của nhóm.
Khám phá sâu các thành phần con
Các mục focusgroup không cần phải là mục con trực tiếp của vùng chứa focusgroup.
Trình duyệt sẽ xem xét tất cả các thành phần con có thể lấy tiêu điểm theo trình tự (tabindex không âm) để tham gia vào focusgroup, trừ phi các thành phần đó nằm trong một focusgroup lồng nhau hoặc chọn không tham gia bằng focusgroup="none".
<div focusgroup="toolbar" aria-label="Nested wrappers">
<div>
<span>
<button type="button">Alpha</button>
</span>
<span>
<button type="button">Beta</button>
</span>
<span>
<button type="button">Gamma</button>
</span>
</div>
</div>
Thao tác di chuyển bằng phím mũi tên vẫn hoạt động ngay cả khi các nút được lồng bên trong trình bao bọc <div> và <span>. Không có yêu cầu nào về danh sách phẳng, vì vậy, bạn có thể dùng các phần tử bao bọc để tạo kiểu.
Dùng thử trực tiếp: Các khái niệm bổ sung > Phần tử con sâu.
Tích hợp với tài sản reading-flow
Cả chế độ điều hướng tuần tự (phím Tab) và chế độ điều hướng theo hướng (phím mũi tên) đều tuân theo thuộc tính reading-flow của CSS khi có mặt, theo thứ tự đọc trực quan thay vì thứ tự nguồn DOM.
Điều này đảm bảo rằng thao tác di chuyển bằng phím mũi tên khớp với bố cục mà người dùng nhìn thấy trên màn hình.
<div focusgroup="toolbar" aria-label="Visual order"
style="display: flex; flex-direction: row-reverse; reading-flow: flex-visual;">
<button type="button">A (DOM first)</button>
<button type="button">B (DOM second)</button>
<button type="button">C (DOM third)</button>
</div>
Mặc dù thứ tự DOM là A, B, C, nhưng thứ tự hiển thị là C, B, A vì bố cục sử dụng flex-direction: row-reverse. Tuy nhiên, vì mã này cũng sử dụng reading-flow: flex-visual, nên thứ tự đọc sẽ quay lại A, B, C và focusgroup sẽ khớp với thứ tự này.
Khi bạn nhấn phím Tab, tiêu điểm sẽ chuyển đến C trước, sau đó nhấn phím mũi tên phải để chuyển tiêu điểm đến B rồi đến A. Hãy dùng thử trực tiếp: Các khái niệm bổ sung > Tích hợp luồng đọc CSS.
Hỗ trợ tiếp cận
Suy luận vai trò của ARIA
Trong focusgroup, mã thông báo hành vi được trình duyệt dùng để suy luận vai trò tối thiểu cho cả vùng chứa và các mục tham gia. Điều này có nghĩa là khi thuộc tính focusgroup được đặt trên một phần tử có vai trò chung, vai trò chính xác sẽ được áp dụng dựa trên hành vi đã chọn. Các mục tham gia của phần tử có vai trò chung hoặc các nút không có vai trò mà bạn chỉ định sẽ có vai trò được suy luận tương ứng. Ví dụ: HTML sau:
<div focusgroup="tablist">
<button>Tab 1</button>
<button>Tab 2</button>
<button>Tab 3</button>
</div>
Tạo cây hỗ trợ tiếp cận sau đây, ngay cả khi không có vai trò nào được xác định trên các nút:
+ tablist
|
+ tab
|
+ tab
|
+ tab
Bạn luôn có thể kiểm soát hành vi bằng cách đặt vai trò trực tiếp.
Những điểm cần cân nhắc về khả năng hỗ trợ tiếp cận
Hãy chú ý tôn trọng hành vi mà bạn đã chọn khi tạo một focusgroup.
Mức sử dụng Focusgroup phải phù hợp nhất có thể với hành vi mà bạn đã chỉ định. Điều này rất quan trọng để đảm bảo rằng những người dùng dựa vào các công cụ hỗ trợ tiếp cận có thể điều hướng nội dung và sử dụng các chế độ kiểm soát tuỳ chỉnh.
Mặc dù tính năng suy luận vai trò cung cấp các giá trị mặc định phù hợp, nhưng khi sử dụng các phần tử có vai trò không chung chung, hãy đảm bảo rằng các phần tử đó có vai trò phù hợp được đặt cho chức năng mà chúng cung cấp.
Khi sử dụng focusgroup, hãy nhớ rằng người dùng có thể cần phải cuộn bằng các phím mũi tên để xem nội dung của bạn. Người dùng bàn phím phải luôn có thể đọc và truy cập vào nội dung trên trang của bạn.
Phát hiện đối tượng
Để bắt đầu sử dụng focusgroup ngay hôm nay, trước khi được hỗ trợ đầy đủ trên các trình duyệt, bạn có thể phát hiện khả năng hỗ trợ focusgroup trong JavaScript:
if ('focusgroup' in HTMLElement.prototype) {
// focusgroup is supported.
} else {
// fall back to manual roving tabindex.
}
Kết luận
Thuộc tính focusgroup đang được các tổ chức tiêu chuẩn hoá triển khai và chúng tôi đang tích cực xây dựng nguyên mẫu trong Chromium cũng như tinh chỉnh API.
Hãy dùng thử và báo cáo vấn đề về nhóm tập trung trong công cụ theo dõi lỗi GitHub của Open-UI. Chúng tôi đặc biệt quan tâm đến ý kiến của bạn về những vấn đề sau:
- Nền tảng API có phù hợp với các mẫu mà bạn tạo không?
- Chúng ta có bỏ lỡ quy luật hoặc trường hợp nào không?
- Có những phần tử mà bạn không nên cho phép thuộc tính focusgroup không?
- Câu chuyện về khả năng hỗ trợ tiếp cận có phù hợp với các trường hợp sử dụng của bạn không?
Cảm ơn bạn đã giúp cải thiện chế độ thao tác bằng bàn phím trên web!
Tìm hiểu thêm
- Focusgroup Explainer
- Bản minh hoạ có tính tương tác (nguồn)
- Vấn đề về HTML của WHATWG
- Các vấn đề về nhóm tập trung của giao diện người dùng mở
- Hướng dẫn về các phương pháp tạo nội dung ARIA
Cảm ơn Mason Freed, Sara Higley, Scott O'Hara và những thành viên khác trong cộng đồng Open-UI đã giúp chúng tôi đưa focusgroup trở lại.