Loại bỏ cơn đau đầu khỏi tính năng quản lý tập trung

Rob Dodson

Tính năng "điểm bắt đầu điều hướng tiêu điểm tuần tự" xác định vị trí chúng ta 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ó vùng được lấy tiêu điểm. Điều 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 ta nhiều tính năng hỗ trợ tích hợp để xử lý các hoạt động tương tác bằng bàn phím, tức là bạn có thể dễ dàng viết các trang có thể sử dụng qua bàn phím – cho dù bạn bị khiếm khuyết vận động khiến bạn không thể sử dụng chuột hay bạn chỉ muốn loại bỏ việc di chuyển tay khỏi bàn phím để tiết kiệm những mili giây quý giá.

Việc xử lý bàn phím xoay quanh tiêu điểm, giúp xác định vị trí của các sự kiện bàn phím trên trang. Cho đến nay, chúng tôi vẫn cần phải 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 trong một số trường hợp. 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 để phản hồi 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 nhiều vấn đề và đòi hỏi một số thủ thuật hack 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 sớm biến mất hoàn toàn, nhưng trong Chrome 50, kỹ thuật này sẽ 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 tạo một cách hợp lý sẽ tự động trở nên dễ tiếp cận hơn mà không cần phải quản lý tiêu điểm thủ công thêm. Hãy xem một ví dụ.

Đường liên kết trong trang

Các trang web có nhiều văn bản thường liên kết 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à một người mê ẩm thực Úc), thì loạt thao tác tiếp theo của tôi sẽ diễn ra như sau:

• Nhấn Tab hai lần để lấy tiêu điểm vào đường liên kết Recipes (Công thức nấu ăn)
• Nhấn Enter để chuyển đến phần Công thức nấu ăn
• Nhấn Tab lần nữa để lấy tiêu điểm vào đường liên kết Đọc thêm

Hãy xem ví dụ thực tế bằng Chrome 49.

Ồ. Chuyện đó không diễn ra theo đúng kế hoạch phải không?

Thay vì đặt tiêu điểm vào đường liên kết Đọc thêm, thao tác nhấn Tab lần cuối đã di chuyển tiêu điểm đến 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 đề để có thể lấy tiêu đề làm tiêu điểm. Vì vậy, việc nhấp vào neo có tên #recipes không di chuyển tiêu điểm. Đây là một lỗi nhỏ và không gây ảnh hưởng lớn nếu bạn là người dùng chuột. Nhưng điều này có thể là vấn đề lớn nếu bạn là người dùng thiết bị bàn phím hoặc thiết bị chuyển đổi. Hãy 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? Bạn sẽ cảm thấy khó chịu khi phải liên tục nhấn phím tab để quay lại và chuyển tiếp qua tất cả các neo đó!

Hãy xem xét cùng một trải nghiệm hiện tại bằng Chrome 50.

Wow, đó chính xác là những gì chúng ta muốn, và quan trọng nhất là chúng ta không phải thay đổi mã. Trình duyệt chỉ cần xác định vị trí tiêu điểm dựa trên vị trí chúng ta đang ở trong tài liệu.

Cách thức hoạt động

Trước khi triển khai điểm bắt đầu 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 mục tiêu lấy tiêu điểm tiếp theo có thể liên quan đến việc di chuyển tiêu điểm sang một mục không thực sự có thể lấy tiêu điểm, chẳng hạn như phần tử vùng chứa hoặc tiêu đề. Điều này gây ra mọi loại sự cố lạ, bao gồm cả việc hiển thị 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 gọi, điểm bắt đầu lấy tiêu điểm cung cấp một cơ chế đề xuất vị trí bắt đầu tìm phần tử có thể lấy tiêu điểm tiếp theo khi chúng ta nhấn Tab hoặc Shift-Tab.

Bạn có thể thiết lập điểm bắt đầu điều hướng tiêu điểm theo một số cách: Nếu một thành phần nào đó có tiêu điểm, thì đó cũng là điểm bắt đầu điều hướng tiêu điểm, giống như trước đây. Ngoài ra, giống như trước đây, nếu không có yếu tố nào khác đặt điểm bắt đầu điều hướng tiêu điểm, thì đó sẽ là document hiện tại hoặc dialog đang hoạt động (nếu có và được hỗ trợ). Nếu chúng ta đ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, thì phần tử đó sẽ đặt điểm bắt đầu điều hướng 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ẹ của phần tử đó sẽ trở thành điểm bắt đầu tiêu điểm. Không còn phải tìm kiếm tiêu điểm nữa!

Các trường hợp sử dụng khác

Ngoài ví dụ trên, còn có nhiều trường hợp khác mà tính năng này có thể hữu ích.

Ẩn phần tử

Đô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ụ về điều này là các mục có thể nhấp vào trong băng chuyền. Trong các phiên bản Chrome trước, việc ẩn mục đang đượ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êu trên thành một cái bẫy khó chịu đối với người dùng bị khiếm khuyết 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 xảy ra nữa. Nếu một phần tử bị ẩn thông qua một trong các phương thức trên, thì việc nhấn phím Tab sẽ chỉ di chuyển đến 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 neo ẩn mà bạn chỉ có thể truy cập thông qua bàn phím. Các thành phần này cho phép người dùng "bỏ qua" các thành phần điều hướng để chuyển thẳng đến nội dung của trang. Đây có thể là một tính năng cực kỳ hữu ích cho người dùng bàn phím và thiết bị chuyển đổi. Như đã giải thích trên trang web WebAIM

Lưu ý: Nếu không có một hệ thống nào đó để bỏ qua danh sách dài các đường liên kết, một số người dùng sẽ gặp bất lợi rất lớn. Hãy cân nhắc những người dùng không thể cử động cánh tay, những người sử dụng máy tính bằng cách gõ đầu vào nút chuyển hoặc dùng một cây gậy trong miệng để nhấn các phím trên bàn phím. Việc yêu cầu người dùng thực hiện bất kỳ hành động nào có thể là hàng trăm lần trước khi xem được nội dung chính là điều không thể chấp nhận được.

Nhiều trang web phổ biến triển khai đường liên kết bỏ qua, mặc dù bạn có thể chưa bao giờ nhận thấy chúng.

Vì các đường liên kết bỏ qua được đặt tên là neo, nên chúng hoạt động giống như ví dụ về mục lục ban đầu của chúng ta.

Những điểm cần lưu ý và dịch 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ả 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 được đặt tên.

Bản minh hoạ

Điểm bắt đầu điều hướng tiêu điểm tuần tự là một bổ sung tuyệt vời cho bộ nguyên hàm hỗ trợ tiếp cận của trình duyệt. Cách này dễ hiểu 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. Nhân đôi niềm vui! Hãy xem bản minh hoạ để tìm hiểu sâu hơn về tính năng này.