Tính năng "điểm bắt đầu điều hướng lấy tiêu điểm tuần tự" xác định vị trí chúng tôi bắt đầu tìm kiếm các phần tử có thể lấy tiêu điểm để điều hướng tiêu điểm tuần tự ([Tab] hoặc [Shift-Tab]) khi không có khu vực nào được đặt tiêu điểm. Việc này đặc biệt hữu ích đối với các tính năng hỗ trợ tiếp cận như "bỏ qua đường liên kết" và quản lý tiêu điểm trong tài liệu.
HTML cung cấp cho chúng tôi nhiều tính năng hỗ trợ được tích hợp sẵn để xử lý các tương tác với bàn phím, nghĩa là việc viết các trang có thể được sử dụng thông qua bàn phím khá dễ dàng - cho dù sự suy yếu vận động khiến chúng ta không thể sử dụng chuột hay chúng ta chỉ là hiệu quả việc loại bỏ tay khỏi bàn phím làm lãng phí mili giây quý giá.
Quá trình xử lý bàn phím xoay quanh tiêu điểm, giúp xác định vị trí các sự kiện bàn phím sẽ xuất hiện trên trang. Có một vài tình huống mà cho đến bây giờ, chúng tôi cần làm thêm một số việc để đảm bảo mọi thứ hoạt động tốt cho người dùng bàn phím. Phương thức focus() cho phép chúng ta quản lý tiêu điểm bằng cách chọn một phần tử để lấy tiêu điểm nhằm phản hồi một hành động của người dùng. Tuy nhiên, phương pháp hay nhất này gặp phải rất nhiều vấn đề và đòi hỏi một số tin tặc JavaScript phức tạp để cung cấp trải nghiệm cơ sở.
Mặc dù kỹ thuật này sẽ không biến mất hoàn toàn ngay lập tức, nhưng trong Chrome 50, kỹ thuật này cần thiết trong ít trường hợp hơn nhờ Điểm bắt đầu điều hướng tiêu điểm tuần tự. Với thay đổi này, các trang được thiết kế tốt sẽ tự động dễ truy cập hơn mà không cần bạn phải quản lý thêm tiêu điểm theo cách thủ công. Hãy xem một ví dụ.
Đường liên kết trong trang
Các trang web nặng thường liên kết nội dung với nhau trong cùng một trang để giúp người dùng nhanh chóng chuyển đến các phần quan trọng.
<!-- Table of Contents -->
<a href="#recipes">Recipes</a>
<a href="#ingredients">Ingredients</a>
<!-- Recipes Section -->
<h2 id="recipes">Recipes</h1>
<h3>Vegemite Cheesecake</h3>
<p>
Vegemite cheesecake is delicious. We promise.
<a href="cheesecake.html">Read More</a>
</p>
Nếu tôi là người dùng bàn phím (và là người thích các món ăn Úc) thì chuỗi hành động tiếp theo của tôi sẽ diễn ra như sau:
- Nhấn
Tabhai lần để lấy tiêu điểm là đường liên kết đến Công thức - Nhấn
Enterđể chuyển đến phần Công thức - Nhấn lại
Tabđể lấy tiêu điểm là đường liên kết Đọc thêm
Hãy xem điều đó trong thực tế bằng cách sử dụng Chrome 49.
Ồ. Mọi thứ không diễn ra như kế hoạch phải không?
Thay vì đặt tiêu điểm vào đường liên kết Đọc thêm, hãy nhấn Tab ở lần cuối cùng để chuyển tiêu điểm sang mục tiếp theo trong mục lục. Điều này là do nhà phát triển không đặt tabindex="-1" trên tiêu đề để làm tiêu đề có thể làm tâm điểm. Vì vậy, việc nhấp vào nút liên kết có tên #recipes không di chuyển tâm điểm. Đây là một sai sót tinh vi và cũng không phải là vấn đề lớn nếu bạn sử dụng chuột. Nhưng nếu bạn là người dùng bàn phím hoặc chuyển đổi thiết bị thì điều này có thể rất lớn. Cân nhắc số lượng đường liên kết nội bộ trên một trang Wikipedia thông thường? Thật khó chịu khi phải liên tục di chuyển qua lại qua tất cả các neo đó!
Hãy cùng xem trải nghiệm tương tự khi sử dụng Chrome 50.
Ồ, đó chính xác là những gì chúng tôi muốn và hơn hết, chúng tôi không phải thay đổi mã. Trình duyệt đã tìm ra điểm cần chú ý dựa trên vị trí của chúng ta trong tài liệu.
Cách thức hoạt động
Trước khi triển khai điểm bắt đầu của tiêu điểm, tiêu điểm sẽ luôn di chuyển từ phần tử được lấy tiêu điểm trước đó hoặc đầu trang. Điều này có nghĩa là việc chọn nội dung được lấy tiêu điểm tiếp theo có thể liên quan đến việc di chuyển tâm điểm đến những thứ không thực sự có thể làm tâm điểm, chẳng hạn như phần tử vùng chứa hoặc tiêu đề. Việc này gây ra mọi điều kỳ lạ, bao gồm cả việc hiện vòng tròn tiêu điểm nếu bạn vô tình nhấp vào một phần tử như vậy.
Như tên cho thấy, điểm bắt đầu lấy tiêu điểm cung cấp một cơ chế để gợi ý vị trí bắt đầu tìm kiếm phần tử có thể làm tâm điểm tiếp theo khi chúng ta nhấn Tab hoặc Shift-Tab.
Bạn có thể đặt điểm này theo nhiều cách: Nếu nội dung nào đó có tâm điểm, thì đó cũng là điểm bắt đầu điều hướng lấy tiêu điểm, giống như trước đây.
Ngoài ra, giống như trước đây, nếu không có điểm nào khác đặt điểm bắt đầu điều hướng tâm điểm, thì đó sẽ là document hiện tại hoặc dialog hiện đang hoạt động (nếu có) và được hỗ trợ.
Giờ đây, nếu điều hướng đến một mảnh trang như trong ví dụ trên, thì mảnh đó sẽ đặt điểm bắt đầu tiêu điểm.
Ngoài ra, nếu chúng ta nhấp vào bất kỳ phần tử nào trên trang, bất kể phần tử đó có thể lấy tiêu điểm hay không, thao tác đó sẽ đặt điểm bắt đầu điều hướng lấy tiêu điểm.
Cuối cùng, nếu phần tử là điểm bắt đầu tiêu điểm bị xoá khỏi DOM, thì phần tử mẹ sẽ trở thành điểm bắt đầu tiêu điểm. Bạn không còn phải tập trung nữa!
Các trường hợp sử dụng khác
Ngoài ví dụ trên, vẫn còn nhiều trường hợp khác mà tính năng này có thể hữu ích.
Đang ẩn thành phần
Có thể đôi khi người dùng sẽ tập trung vào một mục cần được đặt thành visibility: hidden hoặc display: none. Ví dụ: các mục có thể nhấp trong một băng chuyền. Trong các phiên bản Chrome trước, việc ẩn mục hiện được lấy tiêu điểm theo cách này sẽ đặt lại tiêu điểm về điểm bắt đầu mặc định, biến băng chuyền nói trên thành một cái bẫy khó chịu cho người dùng suy giảm vận động. Với điểm bắt đầu tiêu điểm tuần tự, điều này không còn như vậy nữa. Nếu một phần tử bị ẩn thông qua một trong hai phương thức trên, thao tác nhấn phím Tab sẽ chỉ di chuyển sang mục có thể lấy tiêu điểm tiếp theo.
Bỏ qua đường liên kết
Đường liên kết bỏ qua là các đường liên kết vô hình chỉ truy cập được qua bàn phím. Chúng cho phép người dùng "bỏ qua" các thành phần điều hướng để chuyển thẳng vào nội dung của trang và chúng có thể cực kỳ có lợi cho người dùng bàn phím và chuyển đổi thiết bị. Như giải thích trên trang web WebAIM
Nhiều trang web phổ biến triển khai đường liên kết bỏ qua, mặc dù có thể bạn chưa bao giờ nhận thấy chúng.
Do đường liên kết bỏ qua được đặt tên là liên kết, nên chúng hoạt động theo cùng cách như ví dụ gốc về mục lục của chúng tôi.
Lưu ý và hỗ trợ
Điểm bắt đầu điều hướng tiêu điểm tuần tự hiện chỉ được hỗ trợ trong Chrome 50, Firefox và Opera. Cho đến khi tính năng này được hỗ trợ trong tất cả các trình duyệt, bạn vẫn cần thêm tabindex="-1" (và xoá đường viền tiêu điểm) vào các mục tiêu neo đã đặt tên.
Bản minh hoạ
Điểm bắt đầu điều hướng tâm điểm tuần tự là sự bổ sung tuyệt vời cho tập hợp các dữ liệu gốc hỗ trợ tiếp cận của trình duyệt. Thật dễ dàng để tìm và thực sự cho phép chúng ta xoá mã khỏi ứng dụng, đồng thời cải thiện trải nghiệm cho người dùng. Xin chúc mừng! Vui lòng xem bản minh hoạ để tìm hiểu kỹ hơn về tính năng này.