Đây sẽ là bài đăng thứ 2 trong loạt bài nhỏ mà chúng tôi đang thực hiện về khả năng truy cập biểu mẫu. Nếu bạn bỏ lỡ bài viết đầu tiên, hãy xem Các biểu mẫu có thể truy cập được với các lớp giả. Trong bài đăng này, chúng ta sẽ xem xét :focus-visible và cách sử dụng nó trong các trang web của bạn!

Điểm tiếp xúc tập trung

Trước khi chúng ta tiến về phía trước với :focus-visible, hãy xem lại cách :focus hoạt động trong CSS của bạn. Tiêu điểm là chỉ báo trực quan cho biết một phần tử đang được tương tác thông qua bàn phím, chuột, bàn di chuột hoặc công nghệ hỗ trợ. Một số thành phần nhất định có tính tương tác tự nhiên, như liên kết, nút và thành phần biểu mẫu. Chúng tôi muốn đảm bảo rằng người dùng của chúng tôi biết họ đang ở đâu và những tương tác họ đang thực hiện.

Hãy nhớ đừng làm điều này trong CSS của bạn!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

Khi bạn xóa tiêu điểm, bạn xóa tiêu điểm đó cho MỌI NGƯỜI! Chúng tôi muốn đảm bảo rằng chúng tôi đang duy trì sự tập trung.

Nếu vì bất kỳ lý do gì bạn cần phải xóa tiêu điểm, hãy đảm bảo rằng cũng có tiêu điểm dự phòng :focus phong cách cho người dùng của bạn. Dự phòng đó có thể phù hợp với màu sắc thương hiệu của bạn, nhưng hãy đảm bảo rằng những màu đó cũng có thể truy cập được. Nếu bộ phận tiếp thị, thiết kế hoặc xây dựng thương hiệu không thích kiểu vòng lấy nét mặc định thì đã đến lúc bắt đầu trò chuyện và cộng tác với họ để tìm ra cách tốt nhất để thêm lại vòng lấy nét.

Là gì focus-visible?

Lớp giả, :focus-visible, giống như mặc định của chúng tôi :focus lớp giả. Nó cung cấp cho người dùng một dấu hiệu cho thấy nội dung nào đó đang được tập trung vào trang. Cách bạn viết :focus-visible được cắt và khô:

:focus-visible {
  /* ... */
}

Khi đang sử dụng :focus-visible với một phần tử cụ thể, cú pháp trông giống như thế này:

.your-element:focus-visible {
  /*...*/
}

Điều tuyệt vời khi sử dụng :focus-visible là bạn có thể làm cho yếu tố của mình nổi bật, tươi sáng và táo bạo! Không cần phải lo lắng về việc nó hiển thị nếu phần tử được nhấp/nhấn. Nếu bạn chọn không triển khai lớp này, mặc định sẽ là vòng tập trung tác nhân người dùng mà một số người không mong muốn.

Cốt truyện của focus-visible

Trước khi chúng tôi có :focus-visible, kiểu tác nhân người dùng sẽ được áp dụng :focus tới hầu hết các thành phần trên trang; các nút, liên kết, v.v. Nó sẽ áp dụng đường viền hoặc “vòng lấy nét” cho phần tử có thể lấy tiêu điểm. Điều này được coi là xấu, hầu hết đều không thích vòng lấy nét mặc định mà trình duyệt cung cấp. Do vòng lấy nét không thuận lợi khi nhìn nên hầu hết các tác giả đã loại bỏ nó… mà không có dự phòng. Hãy nhớ rằng, khi bạn loại bỏ :focus, nó làm giảm khả năng sử dụng và khiến người dùng bàn phím không thể tiếp cận được trải nghiệm.

Ở trạng thái hiện tại của web, trình duyệt không còn biểu thị rõ ràng tiêu điểm xung quanh các phần tử khác nhau khi chúng có tiêu điểm. Thay vào đó, trình duyệt sử dụng các phương pháp chẩn đoán khác nhau để xác định khi nào nó sẽ giúp ích cho người dùng, đổi lại sẽ cung cấp vòng tiêu điểm. Dựa theo Khan Academy, một heuristic là, “một kỹ thuật hướng dẫn thuật toán để tìm ra những lựa chọn tốt.”

Điều này có nghĩa là trình duyệt có thể phát hiện xem người dùng có tương tác với trải nghiệm từ bàn phím, chuột hoặc bàn di chuột hay không và dựa trên loại đầu vào đó, trình duyệt sẽ thêm hoặc xóa vòng lấy nét. Ví dụ trong bài đăng này nêu bật sự tương tác đầu vào.

Trong những ngày đầu của :focus-visible chúng tôi đã sử dụng một polyfill Để xử lý vòng lấy nét do Alice Boxhall và Brian Kardell tạo ra, Mozilla cũng đã đưa ra lớp giả của riêng họ, :moz-focusring, trước thông số kỹ thuật chính thức. Nếu bạn muốn tìm hiểu thêm về những ngày đầu của vòng lấy nét, hãy tham khảo Diễn viên A11y với Rob Dodson.

Tập trung tầm quan trọng

Có rất nhiều lý do tại sao tiêu điểm lại quan trọng trong ứng dụng của bạn. Đầu tiên, như tôi đã nêu ở trên, với tư cách là đại sứ của web, chúng tôi phải đảm bảo rằng chúng tôi đang cung cấp trải nghiệm tốt nhất, dễ tiếp cận nhất có thể. Chúng tôi không muốn bất kỳ người dùng nào đoán được họ đang ở đâu trong khi đang điều hướng qua trải nghiệm.

Một ví dụ luôn xuất hiện trong đầu tôi là Trang web Hai anh em mù. Nếu bạn truy cập trang web và nhấp/nhấn (cách này hoạt động trên thiết bị di động), nhắm mắt ở góc dưới bên trái, bạn sẽ thấy mắt mở và quá trình mô phỏng bắt đầu. Cả hai anh em Bradford và Bryan Manning đều được chẩn đoán mắc bệnh Stargardt khi còn trẻ. Bệnh Stargardt là một dạng thoái hóa điểm vàng của mắt. Theo thời gian cả hai anh em sẽ bị mù hoàn toàn. Hãy truy cập trang web và nhấp vào mắt để xem họ nhìn thấy thế nào.

Nếu bạn ở vị trí của họ và phải điều hướng qua một trang, bạn sẽ muốn đảm bảo rằng bạn biết chính xác mình đang ở đâu trong toàn bộ trải nghiệm. Vòng lấy nét mang đến cho bạn sức mạnh đó.

Demo

Bản demo dưới đây cho thấy cách :focus-visible hoạt động khi được thêm vào CSS của bạn. Phần đầu tiên của video cho thấy trải nghiệm khi điều hướng bằng chuột, phần thứ hai cho thấy điều hướng qua chỉ bằng bàn phím của tôi. Tôi cũng ghi lại chính mình để chứng tỏ rằng tôi đã chuyển từ sử dụng chuột sang bàn phím.

Trình duyệt dự đoán những việc cần làm với vòng lấy nét dựa trên thông tin đầu vào của tôi (bàn phím/chuột), sau đó thêm vòng lấy nét vào các thành phần đó. Trong trường hợp này, khi tôi điều hướng qua ví dụ này bằng bàn phím, mọi thứ đều được lấy nét. Khi sử dụng chuột, chỉ đầu vào được lấy nét còn các nút thì không. Nếu bạn loại bỏ :focus-visible, trình duyệt sẽ áp dụng vòng lấy nét mặc định.

Mã dưới đây đang được áp dụng :focus-visible đến các yếu tố có thể tập trung.

:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Nếu bạn muốn chỉ định label hoặc nút nhận :focus-visible chỉ cần chuẩn bị lớp học với input or button tương ứng.

button:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

/*** OR ***/

input:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

HỖ TRỢ

Nếu trình duyệt không hỗ trợ :focus-visible bạn có thể dự phòng tại chỗ để xử lý tương tác. Mã dưới đây là từ Sân chơi MDN. Bạn có thể dùng @supports theo quy định hoặc “truy vấn tính năng” để kiểm tra hỗ trợ. Một điều cần lưu ý là quy tắc này phải được đặt ở đầu mã hoặc được lồng bên trong một nhóm quy tắc khác.

<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">Button without fallback</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

Mối quan tâm tiếp cận hơn nữa

Những vấn đề về khả năng tiếp cận cần lưu ý khi xây dựng trải nghiệm của bạn:

• Đảm bảo rằng các màu bạn chọn cho chỉ báo lấy nét, nếu có, vẫn có thể truy cập được theo thông tin được ghi trong tài liệu. WCAG 2.2 Độ tương phản phi văn bản (Cấp AA)
• Quá tải nhận thức có thể khiến người dùng đau khổ. Đảm bảo giữ phong cách trên các yếu tố tương tác khác nhau nhất quán

Hỗ trợ trình duyệt

Liên kết

• Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
• PlatoData.Network Vertical Generative Ai. Trao quyền cho chính mình. Truy cập Tại đây.
• PlatoAiStream. Thông minh Web3. Kiến thức khuếch đại. Truy cập Tại đây.
• Trung tâmESG. Than đá, công nghệ sạch, Năng lượng, Môi trường Hệ mặt trời, Quản lý chất thải. Truy cập Tại đây.
• PlatoSức khỏe. Tình báo thử nghiệm lâm sàng và công nghệ sinh học. Truy cập Tại đây.
• nguồn: https://css-tricks.com/managing-user-focus-with-focus-visible/