tabindex hoặc tập trung cho điều hướng bàn phím

Question

Tôi đang làm rất nhiều công việc với khả năng truy cập và WCAG tại thời điểm này nhưng một điều tôi đang cố gắng làm việc tốt cho tất cả người dùng và đặc biệt là những người sử dụng điều hướng bằng bàn phím .

Điều này nghe có vẻ đơn giản, hãy ném liên kết đến một neo ở đầu trang và mọi người có thể 'nhấp vào' nó để bỏ qua điều hướng hoặc nội dung không quan trọng khác.

Vấn đề là, khi bạn nhấp vào liên kết anchor bằng bàn phím và sau đó nhấn lại phím 'tab', bạn sẽ được đưa đến phần tử ngay sau liên kết 'bỏ qua nội dung' chứ không phải trong phần nội dung chính. Tức là, liên kết mà bạn liên kết đã không nhận được sự tập trung.

Dường như đây là vấn đề phổ biến, vì tôi chưa tìm thấy trang web có liên kết 'bỏ qua nội dung' có liên kết hoạt động chính xác. Ngay cả trang web Vision Australia cũng có vấn đề này.

Tôi đã hy vọng rằng ai đó biết về kỹ thuật/hack/thư viện để thực hiện công việc này như mong muốn.

EDIT: Tôi có thể xác nhận rằng sự cố này xảy ra trong Chrome và Safari, nhưng không xảy ra với Firefox trên máy Mac của tôi.

Answer 1

Hầu hết các trình duyệt đều cuộn trực quan xuống đích của liên kết cùng một trang, nhưng không thực sự đặt tiêu điểm bàn phím vào liên kết đó. Bạn có thể sử dụng JavaScript (hoặc JQuery, như trong ví dụ dưới đây) để cung cấp cho tập trung vào các mục tiêu:

$("a[href^='#']").not("a[href]='#'").click(function() { 
    $("#"+$(this).attr("href").slice(1)+"").focus(); 
}); 

Tuy nhiên, có một lỗi trong WebKit có thể ngăn chặn thậm chí giải pháp này làm việc trong các trình duyệt WebKit như Chrome và Safari . Tôi đã viết một bài đăng blog về vấn đề này khoảng một năm trước, và một số người khác đã được xây dựng trên nó:

• Terrill Thompson blog post
• More from Damon Muma
• A JavaScript-only solution by Zegnat
• WebKit Bug Report
• Chromium Bub Report