Ngăn chặn tab di chuyển qua thanh địa chỉ

Question

Tôi nhận thấy đây có thể là vấn đề về khả năng truy cập tốt nhất có thể để lại một mình, nhưng tôi muốn biết liệu có thể ngăn tab truy cập vào thanh địa chỉ trong chu kỳ tabbing hay không.

Ứng dụng của tôi có một phương pháp khác để đi xe đạp qua các khu vực đầu vào, nhưng nhiều người dùng mới theo bản năng cố gắng sử dụng tab và nó không hoạt động như mong đợi.

Answer 1

Bạn có thể kiểm soát thứ tự tabbing (và các phần tử nào có thể lấy tiêu điểm) với toàn cầu tabindex attribute.

Tuy nhiên, bạn không thể ngăn người dùng tab vào ngữ cảnh khác không thuộc quyền kiểm soát của trang (ví dụ: thanh địa chỉ của trình duyệt) với thuộc tính này. (Tuy nhiên, có thể kết hợp với JavaScript.)

Trường hợp sử dụng như vậy (ác!), Bạn phải xem xét bẫy bàn phím.

WCAG 2.0 có hướng dẫn: 2.1.2 No Keyboard Trap. Trong Understanding SC 2.1.2 bạn có thể tìm thấy "Kỹ thuật và thất bại" cho chủ trương này:

• F10: Failure of Success Criterion 2.1.2 and Conformance Requirement 5 due to combining multiple content formats in a way that traps users inside one format type
• FLASH17: Providing keyboard access to a Flash object and avoiding a keyboard trap
• G21: Ensuring that users are not trapped in content

Vì vậy, có thể bạn nhận được một số ý tưởng bởi đó như thế nào một cái bẫy như vậy sẽ có thể .

Answer 2

Bạn có thể sử dụng Javascript và nắm bắt sự kiện "keydown" trên phần tử có "tabindex" cao nhất. Nếu người dùng nhấn phím "TAB" (event.keyCode == 9) mà không có phím "Shift" (event.shiftKey == false) thì chỉ cần đặt trọng tâm vào phần tử có tabindex thấp nhất.

Bạn cũng sẽ cần phải làm điều tương tự ngược lại đối với phần tử có tabindex thấp nhất. Chụp sự kiện "keydown" cho phần tử này. Nếu người dùng nhấn phím "TAB" (event.keyCode == 9) VỚI phím "Shift" (event.shiftKey == true) thì đặt tiêu điểm vào phần tử có tabindex cao nhất.

Điều này có hiệu quả sẽ ngăn chặn thanh địa chỉ không bao giờ được tập trung bằng cách sử dụng khóa TAB. Tôi đang sử dụng kỹ thuật này trong dự án hiện tại của mình.

Đừng quên hủy sự kiện nhấn phím nếu nhấn tổ hợp phím thích hợp! Với JQuery đó là "event.preventDefault()". Trong Javascript chuẩn, tôi tin rằng bạn chỉ đơn giản là "trả về false".

Dưới đây là một đoạn JQuery-laden Tôi đang sử dụng ...

$('#dos-area [tabindex=' + maxTabIndex + ']').on('keydown', function (e) { 
     if (e.keyCode == 9 && e.shiftKey == false) { 
      e.preventDefault(); 
      $('#dos-area [tabindex=1]').focus(); 
     } 
    }); 
    $('#dos-area [tabindex=1]').on('keydown', function (e) { 
     if (e.keyCode == 9 && e.shiftKey == true) { 
      e.preventDefault(); 
      $('#dos-area [tabindex=' + maxTabIndex + ']').focus(); 
     } 
    }); 

Cũng nên nhớ rằng việc thiết tabIndex = 0 có kết quả không mong muốn vào thứ tự mà mọi thứ đang tập trung. Tôi luôn luôn nhớ (cho mục đích của tôi) rằng tabindex là một chỉ số dựa trên 1.

Answer 3

Tôi đã sử dụng để thêm hai phần tử nhỏ, vô hình trên tabindex 1 và trên tabindex cuối cùng. Thêm onFocus cho hai phần tử này: Phần tử có tabindex 1 nên tập trung phần tử thực cuối cùng, phần tử có tabindex tối đa nên tập trung phần tử thực đầu tiên. Đảm bảo rằng bạn tập trung phần tử thực đầu tiên trên Dom: đã tải.

Answer 4

Tôi đã sử dụng giải pháp m-albert và nó hoạt động.Nhưng trong trường hợp của tôi, tôi không kiểm soát các thuộc tính tab tabindex. Mục đích của tôi là đặt tiêu điểm trên thanh công cụ ở đầu trang (điều khiển đầu tiên) khi người dùng rời khỏi điều khiển cuối cùng trên trang.

$(':input:visible').last().on('keydown', function (e) { 
    if (e.keyCode == 9 && e.shiftKey == false) { 
     e.preventDefault(); 
     $('html, body').animate({ 
      scrollTop: 0 
     }, 500); 
     $(':input:visible', context).first().focus(); 
    } 
}); 

đâu bối cảnh thể được bất kỳ Jquery đối tượng, chọn, hoặc thậm chí tài liệu, hoặc bạn có thể bỏ qua nó.

Hoạt ảnh cuộn, tất nhiên, là tùy chọn.

Answer 5

Đây là triển khai thực hiện jquery chung mà bạn không phải tìm chỉ mục tab tối đa. Lưu ý rằng mã này cũng sẽ hoạt động nếu bạn thêm hoặc xóa các phần tử trong DOM của mình.

$('body').on('keydown', function (e) { 
    var jqTarget = $(e.target); 
    if (e.keyCode == 9) { 

     var jqVisibleInputs = $(':input:visible'); 
     var jqFirst = jqVisibleInputs.first(); 
     var jqLast = jqVisibleInputs.last(); 

     if (!e.shiftKey && jqTarget.is(jqLast)) { 
      e.preventDefault(); 
      jqFirst.focus(); 
     } else if (e.shiftKey && jqTarget.is(jqFirst)) { 
      e.preventDefault(); 
      jqLast.focus(); 
     } 
    } 
}); 

Tuy nhiên, bạn nên lưu ý rằng mã ở trên chỉ hoạt động với đầu vào hiển thị. Một số phần tử có thể trở thành activeElement của tài liệu ngay cả khi chúng không được nhập vào vì vậy nếu là trường hợp của bạn, bạn nên xem xét thêm chúng vào bộ chọn $(':input:visible').

tôi không thêm mã để di chuyển đến các yếu tố trọng tâm vì điều này có thể không phải là hành vi mong muốn cho tất cả mọi người ... nếu bạn cần nó, chỉ cần thêm nó sau khi cuộc gọi đến focus()