use: focus as a: hover thay thế cho điều hướng bàn phím

Question

WCAG 2.0 khuyên bạn cũng nên sử dụng :focus khi :hover được sử dụng trên các phần tử liên kết để hỗ trợ điều hướng bàn phím. Điều này làm việc tốt cho các phần tử liên kết, nhưng có một vài sự khác biệt giữa hai yếu tố này.

• bất kỳ yếu tố có thể có tình trạng :hover trong khi chỉ có rất ít người có thể được tập trung
• khi lơ lửng trên một phần tử, bạn cũng di chuột qua tất cả các yếu tố mẹ của nó. Đây không phải là trường hợp có tiêu điểm

Câu hỏi này nghiêm chỉnh về css. Có cách nào để mô phỏng hành vi của :hover (như được mô tả ở trên) để điều hướng bằng bàn phím không? Hoặc có bất kỳ lý do mạnh mẽ tại sao một người không muốn điều đó?

Để làm cho nó rõ ràng hơn ở đây là một ví dụ:

html:

<div id="box"> 
    foo bar 
    <a href="#">click me</a> 
</div> 

css:

#box { 
    opacity: 0.3; 
} 
#box:hover { 
    opacity: 1; 
} 
#box a:focus { 
    opacity: 1; 
} 

Khi sử dụng một con chuột, tôi sẽ di chuột qua các yếu tố liên kết trước khi sử dụng nó . Vì trạng thái :hover lan truyền lên trên #box sẽ hoàn toàn mờ đục.

Khi sử dụng một bàn phím, tôi sẽ tập trung vào yếu tố liên kết trước khi sử dụng nó. Vì trạng thái :focus không không truyền lên trên #box sẽ không hoàn toàn mờ đục.

Answer 1

Điều này có thể được thực hiện trong JavaScript với focusin/focusout sự kiện (họ chỉ là như focus và blur trừ họ bong bóng). Here là một fiddle.

Nó nắm để chức năng này:

var deepFocus = function(element, cls) { 
    cls = cls || 'deep-focus'; 

    element 
     .on('focusin', function() { 
      element.addClass(cls); 
     }) 
     .on('focusout', function() { 
      var value = !!element.find(':focus').length; 
      element.toggleClass(cls, value); 
     }); 
}; 

Cập nhật: Có một số dự thảo có chứa các :focus-within chọn mà chính xác sẽ làm gì được yêu cầu ở đây.

Answer 2

Để thực hiện: tập trung ảnh hưởng đến elemnts không liên kết và hình thành yếu tố mà bạn cần sử dụng trong tabIndex thuộc tính. khi bạn đặt nó trên mỗi phần tử, bạn có thể gán cho nó phần tử pesudo.

trong ví dụ của bạn, bạn cần hiểu rằng độ mờ là ở trên div cha cũng nếu thay đổi độ mờ liên kết.

bạn có thể xem mẫu đang hoạt động here. hoặc mẫu để sử dụng tabIndex

<div tabindex="1">Touch the Div</div>