Tiêu điểm bàn phím css

Tôi muốn thêm trạng thái tiêu điểm cho các phần tử tương tác trên trang web của mình, tuy nhiên, tôi không muốn kiểu dáng mà tôi thêm áp dụng khi nhấp vào các phần tử. Nếu tôi chỉ sử dụng :focus trong css của mình, tôi sẽ thấy các kiểu xuất hiện khi nhấp vào các phần tử hoặc chạm vào chúng trên màn hình cảm ứng. Có cách nào để tôi có thể tạo kiểu cho các trạng thái tiêu điểm chỉ dành cho điều hướng bàn phím khi lướt qua trang web không?

Câu trả lời

Đây là một yêu cầu kỹ thuật khá phổ biến mà các nhà phát triển và nhà thiết kế gặp phải khi họ nhận thức được sự cần thiết của trạng thái tập trung vào điều hướng bàn phím. Chúng tôi thường đề xuất một giải pháp có tên là đầu vào gì tương đối phổ biến và mạnh mẽ. Nếu bạn đang tìm kiếm một giải pháp nhỏ hơn hoặc để tạo giải pháp của riêng mình, bạn có thể thấy hữu ích khi tham khảo giải pháp javascript này mà một trong những nhà phát triển của chúng tôi đã tạo trước khi chúng tôi tìm thấy thông tin đầu vào minh họa một giải pháp khả thi khác cho vấn đề

Một số người dùng máy tính không thể sử dụng chuột. Những người khác thích sử dụng bàn phím hơn vì nó thường hiệu quả hơn. Máy tính nói chung và trình duyệt web nói riêng có thể được vận hành chỉ bằng bàn phím. Trong trình duyệt web, người dùng có thể sử dụng phím tab để chuyển giữa các thành phần có thể đặt tiêu điểm (i. e. , liên kết, trường biểu mẫu và bất kỳ nội dung nào khác đã được thêm vào thứ tự tab bằng thuộc tính tabindex HTML). Tuy nhiên, người dùng bàn phím thường khó biết họ đang ở đâu trên trang. Nhà thiết kế phải cẩn thận để đảm bảo rằng có thể dễ dàng biết mục nào trên trang hiện đang có tiêu điểm bàn phím

Để biết thêm thông tin về khả năng truy cập bàn phím nói chung, bao gồm danh sách các tổ hợp phím phổ biến được sử dụng trong trình duyệt web, hãy xem trang Khả năng truy cập bàn phím của chúng tôi

kỹ thuật

Tránh ghi đè chỉ báo tiêu điểm mặc định của trình duyệt

Tất cả các trình duyệt hiển thị một đường viền có thể nhìn thấy xung quanh phần tử hiện có tiêu điểm bàn phím. Có thể vô hiệu hóa đường viền này bằng cách sử dụng thuộc tính outline:none trong CSS. Đừng làm điều này trừ khi bạn đang cung cấp một chỉ báo tiêu điểm tốt hơn so với chỉ báo do trình duyệt cung cấp (xem phần tiếp theo)

Nâng cao chỉ báo tiêu điểm mặc định của trình duyệt

Một số trình duyệt (e. g. , Chrome, Safari) hiển thị đường viền màu lam dễ nhìn xung quanh phần tử hiện có tiêu điểm. Tuy nhiên, các trình duyệt khác (e. g. , Internet Explorer, Firefox) hiển thị một đường chấm mảnh. Cái sau có thể rất khó nhìn thấy. Để cung cấp cho người dùng một chỉ báo tiêu điểm dễ nhìn và nhất quán trên tất cả các trình duyệt, hãy sử dụng. bộ chọn tiêu điểm trong CSS để xác định thay đổi kiểu xảy ra khi một phần tử có tiêu điểm. Ví dụ: các kiểu mã CSS sau liên kết dưới dạng văn bản màu đen trên nền trắng theo mặc định;

a {
 color: black;
 background-color: white;
 text-decoration: underline
 }
 a:focus, a:hover {
   color: white;
   background-color: black;
   text-decoration: none
 }

thử nghiệm

Chỉ sử dụng bàn phím, hãy thử sử dụng phím Tab để điều hướng qua trang. Bạn sẽ có thể biết bạn đang ở đâu mọi lúc

Đề cương tiêu điểm là một cách tuyệt vời để cải thiện khả năng tiếp cận. Theo truyền thống, chúng được thiết lập với lớp giả :focus. Điều đó vẫn hoạt động, nhưng với :focus-visible, chúng tôi có một cách mới để chỉ hiển thị các kiểu tiêu điểm khi chúng có ý nghĩa. Nó hoạt động như thế nào?

Lớp giả :focus-visible đã hoạt động được hơn bảy năm và gần đây chúng tôi đã gặp phải một tình huống là nó hiện có trong các phiên bản ổn định của tất cả các trình duyệt hiện đại. Chrome/Edge (từ 86), Safari (từ 15. 4) và Firefox (từ 85)

Dù sao thì focus-visible là gì?

Vấn đề là, :focus-visible không phải là lớp giả “chỉ tập trung vào người dùng bàn phím”, nó là “chỉ tập trung khi trình duyệt cho rằng nó đúng, dựa trên một số kinh nghiệm”

“Khi nó đúng”, điều đó thậm chí có nghĩa là gì? . Ví dụ: hầu hết các trình duyệt hiển thị đường viền khi bạn nhấn nút bằng bàn phím, nhưng không hiển thị khi bạn nhấp vào nút bằng chuột. Nói cách khác, các kiểu tiêu điểm trong trình duyệt đôi khi chỉ hiển thị, trong các trường hợp cụ thể. Lớp giả :focus-visible có nghĩa là để phù hợp với những trường hợp đó

Điều này làm cho :focus-visible rất khác so với :focus, phù hợp với bất kỳ yếu tố hiện đang được tập trung nào, bất kể việc làm nổi bật nó có hợp lý hay không. Đó là lý do tại sao bạn có thể thấy các kiểu bạn đã áp dụng qua :focus ngay cả khi bạn nhấp vào thứ gì đó bằng chuột, một hành vi có thể khiến người dùng bối rối và khiến một số nhà phát triển tắt hoàn toàn phần nổi bật (nhưng bạn bè không cho phép bạn bè làm điều này, bạn sẽ

Từ

[:focus-visible cho phép] tác giả thay đổi giao diện của chỉ báo tiêu điểm mà không thay đổi khi chỉ báo tiêu điểm xuất hiện

Vì vậy, nó cho phép bạn nhắm mục tiêu các trường hợp mà trình duyệt thường áp dụng các kiểu tiêu điểm và quan trọng là nó loại trừ các trường hợp trình duyệt không vẽ đường viền mặc định của chúng, chẳng hạn như khi người dùng nhấp vào một thứ bằng chuột

Do đó, các trình duyệt áp dụng kiểu :focus-visible cho nhiều trường hợp không sử dụng chuột hơn là chỉ người dùng bàn phím. Đó là những trường hợp nào?
Có rất nhiều thiết bị giống như bàn phím, như Eric Bailey giải thích trong Tập trung vào các kiểu tiêu điểm.

Đũa, gậy, công tắc, thiết bị hút và hút, công nghệ nhận dạng giọng nói và theo dõi ánh mắt đều có thể tạo đầu vào trong một hệ thống kỹ thuật số. Các thiết bị này sẽ xác định một khu vực nội dung và kích hoạt nó. Điều này tương tự như cách bạn có thể nhấn phím tab trên bàn phím và ô tiếp theo trong bảng tính sẽ được đánh dấu, cho biết ô đó đã được chuyển đến và sẵn sàng để chỉnh sửa

Một số công nghệ này thể hiện dưới dạng bàn phím (như màn hình chữ nổi), chúng có thể nằm dưới sự che chở của focus-visible, những công nghệ khác (như điều khiển bằng giọng nói) giống chuột hơn và có thể không kích hoạt các chẩn đoán này. Một số công nghệ hỗ trợ cũng đi kèm với điểm nổi bật của riêng chúng, chẳng hạn như VoiceOver trên iOS và Giao diện người dùng điều khiển công tắc macOS

Con trỏ so với con trỏ không

(không quy chuẩn) trong thông số kỹ thuật cho :focus-visible gợi ý rằng :focus-visible nên áp dụng cho các tương tác “thông qua bàn phím hoặc một số thiết bị không trỏ khác”. Điều này khiến tôi tự hỏi sự khác biệt chính xác giữa thiết bị trỏ và thiết bị không trỏ là gì. Đặc tả Sự kiện con trỏ có một số câu trả lời (cảm ơn Bramus. )

Về cơ bản, có các phương thức nhập liệu có thể thực hiện thao tác nhấp chuột và các phương thức nhập liệu không thực sự là chuột nhưng có thể mô phỏng thao tác nhấp chuột, như màn hình cảm ứng và nhập liệu bằng bút. Sự kiện con trỏ cố gắng trừu tượng hóa tất cả các phương thức nhập liệu đó thành một khái niệm mới gọi là “con trỏ”

Trong đặc điểm kỹ thuật đó

Biểu diễn phần cứng bất khả tri của thiết bị đầu vào có thể nhắm mục tiêu tọa độ cụ thể (hoặc tập hợp tọa độ) trên màn hình, chẳng hạn như chuột, bút hoặc liên hệ cảm ứng

Tôi chưa tìm thấy định nghĩa cho các thiết bị không phải con trỏ, chẳng hạn như bàn phím, nhưng cách tốt nhất của tôi là mô tả. thiết bị không trỏ là thiết bị cho phép bạn di chuyển giữa các phần tương tác khác nhau của giao diện người dùng. Những người khác cũng gọi nó là "điều hướng tuần tự"

Ví dụ về điều hướng không con trỏ hoặc tuần tự

• :focus-visible5/:focus-visible6 hoặc các phím mũi tên khi bạn sử dụng bàn phím
• cử chỉ khi sử dụng VoiceOver trên iOS, bạn vuốt giữa các thành phần khác nhau
• chế độ vật phẩm trong điều khiển công tắc (xem bản demo điều khiển công tắc của Milan Patel, bản demo chế độ vật phẩm tại 3. 59, điều khiển công tắc ghi chú cũng có chế độ con trỏ, mà Milan đề cập rằng anh ấy thấy dễ dàng hơn)

Vì mục đích hoàn chỉnh, còn có khái niệm “điều hướng không gian”. Điều này tương tự như điều hướng tuần tự, nhưng bạn không chỉ quay lại và chuyển tiếp—bạn còn có thể di chuyển lên và xuống, chẳng hạn như khi bạn chọn nội dung nào đó để xem trên dịch vụ phát trực tuyến trên TV của mình

Các phương thức nhập liệu khác nhau và trùng lặp

Ngay cả với sự khác biệt giữa thiết bị trỏ và thiết bị không trỏ, không có thiết bị nào trong số này là rất nhị phân. Có những người dùng luôn sử dụng bàn phím hoặc những người dùng không bao giờ sử dụng, nhưng hầu hết mọi người sẽ ở đâu đó ở giữa. Họ có thể chuyển đổi giữa chuột và bàn phím trong một phiên trình duyệt hoặc sử dụng các thiết bị cho phép nhập nhiều phương thức. Ai đó có thể kết nối bàn phím bluetooth với máy tính bảng chỉ cảm ứng cho đến lúc đó. Điều khiển công tắc trong iOS có cả chế độ điểm và chế độ vật phẩm

Và ngay cả khi bạn có thể phát hiện mọi loại thiết bị, mọi người không giống nhau. Bạn có thể có những người dùng sử dụng chuột, nhưng vẫn được hưởng lợi từ việc xem những gì hiện đang tập trung. người dùng có thị lực kém và người dùng bị khuyết tật về nhận thức

Trong một bình luận thảo luận về focus-visible, Jonathan Avila chia sẻ cách anh ấy chuyển đổi giữa các phương thức

Tôi thường chuyển đổi giữa các phương thức nhập chẳng hạn như bằng cách nhấp và kéo một nút để đặt tiêu điểm ở đâu đó rồi sử dụng bàn phím để điều hướng từ đó. Tôi có thể nhấp vào một nút radio và sau đó sử dụng các mũi tên để chọn các nút radio khác. Tôi sẽ chuyển đổi giữa cảm ứng, chuột, bàn phím và nhiều cài đặt khác như văn bản lớn, trình đọc màn hình hoặc thu phóng tùy theo tình huống

Điều thú vị về :focus-visible là nó cho phép các trình duyệt thông minh hơn khi hiển thị các kiểu tiêu điểm. Các trình duyệt sẽ không chuyển sang chế độ tiêu điểm hiển thị khi bạn nhấn bất kỳ phím nào, nó sẽ tính đến những thứ như sử dụng tổ hợp lệnh/điều khiển + phím, như Alice Boxhall giải thích trong tập Trò chuyện Igalia gần đây. Các heuristic cũng phát triển theo thời gian

Ok, vậy bây giờ thì sao?

Bài đăng này hóa ra dài hơn một chút so với dự định của tôi, nhưng những gì tôi đã cố gắng ghi lại là những gì tôi đã bắt đầu. điều đó và tại sao :focus-visible không chỉ là một cách để hiển thị các kiểu tiêu điểm chỉ dành cho người dùng bàn phím

Nếu bạn muốn nghe thêm về :focus-visible từ những người đã làm việc về vấn đề này, tập Trò chuyện Igalia gần đây đã nói ở trên với Brian Kardell, Alice Boxhall và Rob Dodson sẽ đề cập đến một số lịch sử và quá trình phát triển

Cảm ơn Job van Achterberg, Roel Van Gils, Eric Eggert và Patrick H. Lauke cho phản hồi và đầu vào của họ về các bản nháp trước đó

Tiêu điểm bàn phím là gì?

Việc sử dụng CSS tập trung là gì?

Làm cách nào để bạn tập trung vào HTML?

CSS giả là gì

Tôi có thể đặt tiêu điểm bằng CSS không?

Tập trung vào bàn phím là gì?

Bộ chọn tiêu điểm trong CSS là gì?

Tôi nên sử dụng tiêu điểm hay tiêu điểm