Chỉ báo focus trong điều hướng: những gì người dùng bàn phím cần thấy

Một người dùng tab qua menu điều hướng của bạn. Họ nhấn Tab. Trình duyệt di chuyển focus tới liên kết tiếp theo. Nhưng họ không thể biết họ đang ở đâu. Chỉ báo focus là một đường viền xám 1 pixel trên nền trắng—vô hình trừ khi bạn nheo mắt. Họ nhấn Tab lần nữa. Vẫn không thấy gì. Họ từ bỏ và rời đi.

Bạn vừa mất đi một khách hàng đang cố gắng sử dụng trang web của bạn.

Chỉ báo focus là phần bị đánh giá thấp nhất của điều hướng bàn phím. Hầu hết các nhà thiết kế xem chúng như một việc phụ hoặc chủ động ẩn chúng vì chúng “trông xấu”. Nhưng đối với người dùng bàn phím—dù họ mù, có khiếm khuyết vận động, hay chỉ là những người dùng thành thạo—chỉ báo focus là con trỏ của họ. Nếu không có chúng, điều hướng là bất khả thi.

Tin tốt: thiết kế chỉ báo focus hiệu quả không khó. Tin xấu: hầu hết các trang thương mại điện tử làm sai, và WCAG 2.2 đã nâng cao tiêu chuẩn cao hơn nữa.

WCAG 2.2 Thực sự Yêu cầu Cái gì

WCAG 2.2, được công bố vào tháng 10 năm 2023, đã giới thiệu một tiêu chí Level AA mới dành riêng cho chỉ báo focus: Tiêu chí Thành công 2.4.11 Focus Appearance.

Các hướng dẫn trước đó (WCAG 2.1 của 2.4.7 Focus Visible) chỉ yêu cầu focus phải được nhìn thấy—bất kỳ chỉ báo nào hiển thị đều vượt qua. Nhưng “hiển thị” là chủ quan. Một đường viền xám nhạt 1 pixel trên nền trắng về mặt kỹ thuật được tính là hiển thị, mặc dù về mặt chức năng nó vô dụng.

WCAG 2.2 đặt ra các yêu cầu cụ thể:

Yêu cầu Kích thước

Chỉ báo focus phải dày ít nhất 2 pixel CSS cho toàn bộ chu vi của thành phần được focus, hoặc có diện tích tương đương.

Điều này có nghĩa gì trong thực hành:

• Một viền đặc 2px xung quanh nút: vượt qua
• Một viền 1px: không vượt qua (trừ khi nó bao phủ một diện tích lớn hơn)
• Một viền 4px chỉ trên một bên: không vượt qua (không bao phủ chu vi)
• Một gạch chân dày dưới liên kết cao 2px và ít nhất rộng bằng văn bản liên kết: vượt qua

Yêu cầu Độ tương phản

Chỉ báo focus phải có tỷ lệ độ tương phản ít nhất 3:1 so với:

1. Trạng thái chưa focus của thành phần
2. Màu sắc lân cận (nền phía sau thành phần)

Điều này khó hơn vẻ ngoài của nó. Nếu liên kết điều hướng của bạn là văn bản xanh đậm trên nền trắng, và chỉ báo focus của bạn là một đường viền xanh nhạt, bạn cần:

• Tỷ lệ độ tương phản 3:1 giữa đường viền xanh nhạt và nền trắng (màu lân cận)
• Tỷ lệ độ tương phản 3:1 giữa đường viền xanh nhạt và văn bản xanh đậm (màu thành phần)

Nhiều nhà thiết kế chọn một màu thương hiệu cho focus trông tuyệt vời nhưng không vượt qua một trong hai kiểm tra độ tương phản này.

Vấn đề Viền Mặc định của Trình duyệt

Hầu hết các trình duyệt cung cấp một viền focus mặc định—thường là một đường chấm hoặc đặc mỏng. Chrome sử dụng một viền xanh đặc 2px. Firefox sử dụng một viền chấm. Safari sử dụng một halo xanh.

Những giá trị mặc định này không vượt qua WCAG 2.2 trong nhiều bối cảnh:

Nghiên cứu của WebAIM phát hiện ra rằng các kiểu focus mặc định không vượt qua yêu cầu độ tương phản trên khoảng 78% kết hợp màu sắc được sử dụng trên các trang web thực.

Đó là lý do tại sao chỉ báo focus tùy chỉnh quan trọng. Bạn không thể dựa vào các giá trị mặc định của trình duyệt.

Chỉ báo Focus Tốt Trông Như Thế Nào

Chỉ báo focus tốt nhất cân bằng khả năng nhìn thấy, tính nhất quán thương hiệu và khả năng tiếp cận. Dưới đây là các mô hình được chứng minh từ các trang thương mại điện tử hàng đầu.

Mô hình 1: Viền Độ tương phản Cao

Mô hình phổ biến nhất là một viền đặc với độ tương phản mạnh:

a:focus,
button:focus {
  outline: 3px solid #0066CC; /* Xanh với độ tương phản cao */
  outline-offset: 2px;        /* Khoảng cách giữa phần tử và viền */
}

Điều này hoạt động tốt cho các liên kết điều hướng, nút và đầu vào biểu mẫu. Khoảng cách 2px ngăn chặn viền chồng lên lên các cạnh văn bản hoặc biểu tượng, cải thiện khả năng đọc.

Ví dụ thực tế: Amazon sử dụng một viền cam 3px (#FF9900) với khoảng cách 2px trên tất cả các phần tử tương tác. Cam vượt qua độ tương phản trên nền trắng (6.8:1) và so với các nút xanh đậm của họ (4.2:1).

Mô hình 2: Nền + Viền Combo

Để tích hợp thị giác chặt hơn, kết hợp thay đổi màu nền với một viền mỏng:

a:focus,
button:focus {
  background-color: #E6F2FF; /* Nền xanh nhạt */
  outline: 2px solid #0066CC; /* Viền xanh đậm hơn */
  outline-offset: 0;
}

Điều này đặc biệt hiệu quả cho các menu điều hướng nơi bạn muốn mục liên kết được focus nổi bật so với phần còn lại của menu.

Ví dụ thực tế: Điều hướng hàng đầu của Google sử dụng nền xám nhạt (#F1F3F4) với viền đen 2px trên các mục được focus. Nền tạo ra một trạng thái “được chọn” rõ ràng, trong khi viền cung cấp độ tương phản được yêu cầu.

Mô hình 3: Gạch chân cho Liên kết Văn bản

Đối với các liên kết văn bản nội tuyến trong nội dung, một gạch chân dày thường rõ ràng hơn một viền:

a:focus {
  outline: none; /* Loại bỏ viền mặc định */
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: #0066CC;
  text-underline-offset: 4px;
}

Điều này giữ chỉ báo focus gần với văn bản và tránh “hộp xung quanh một từ” trông mà các viền tạo ra.

Ví dụ thực tế: Tài liệu Shopify sử dụng một gạch chân xanh 3px trên các liên kết được focus, được định vị 4px dưới đường cơ sở văn bản.

Mô hình 4: Bóng cho Thẻ Tương tác

Đối với bố cục dựa trên thẻ (thẻ sản phẩm, hộp tính năng), một bóng hộp tạo chiều sâu:

.product-card:focus {
  outline: none;
  box-shadow: 0 0 0 3px #0066CC, 0 4px 12px rgba(0,0,0,0.15);
}

Lớp bóng đầu tiên (0px mờ, 3px lây lan) hoạt động như chỉ báo focus. Cái thứ hai thêm chiều sâu thị giác.

Ví dụ thực tế: Etsy sử dụng bóng xanh 3px xung quanh các thẻ sản phẩm khi được focus, kết hợp với bóng thả tinh tế để tạo chiều sâu.

Thủ thuật :focus-visible

Một khiếu nại chung từ các nhà thiết kế về chỉ báo focus là chúng xuất hiện khi người dùng nhấp chuột, tạo ra một đường viền “bị dính” sau khi nhấp. Điều này xảy ra vì :focus kích hoạt trên bất kỳ sự kiện focus nào—chuột, bàn phím hoặc theo chương trình.

Giải pháp là lớp giả :focus-visible, được hỗ trợ trong tất cả các trình duyệt hiện đại từ năm 2022:

/* Chỉ hiển thị chỉ báo focus cho người dùng bàn phím */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #0066CC;
  outline-offset: 2px;
}

/* Ẩn viền mặc định cho người dùng chuột */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

Điều này hiển thị chỉ báo focus khi người dùng điều hướng với Tab, nhưng ẩn nó khi họ nhấp chuột. Tốt nhất của cả hai thế giới.

Lưu ý quan trọng: Một số người dùng có khiếm khuyết vận động sử dụng cả bàn phím và chuột—họ có thể nhấp để focus một phần tử, sau đó sử dụng bàn phím để tương tác. Đừng giả định :focus-visible có nghĩa là “chỉ người dùng trình đọc màn hình”. Nó có nghĩa là “điều hướng bàn phím đang diễn ra”.

Kiểm tra Chỉ báo Focus của Bạn

Đây là cách kiểm tra xem chỉ báo focus của bạn có đáp ứng WCAG 2.2:

Bước 1: Kiểm tra Bàn phím Thủ công

Mở trang web của bạn và nhấn Tab liên tục. Tự hỏi:

• Tôi có thể luôn thấy focus ở đâu không?
• Chỉ báo focus có dày ít nhất 2px không?
• Nó có trông khác với trạng thái chưa focus không?
• Tôi có thể thấy nó trên nền sáng không? Nền tối?
• Nó có biến mất hoặc trở nên khó thấy khi di chuột không?

Nếu bạn trả lời “không” cho bất kỳ câu nào trong số này, bạn có vấn đề chỉ báo focus.

Bước 2: Kiểm tra Tỷ lệ Độ tương phản

Sử dụng một công cụ như Trình kiểm tra Độ tương phản của WebAIM để xác minh:

1. Chỉ báo focus so với nền: Đo độ tương phản giữa màu viền focus của bạn và nền phía sau phần tử. Phải ít nhất 3:1.

2. Chỉ báo focus so với thành phần: Đo độ tương phản giữa màu viền focus của bạn và màu chính của thành phần (màu văn bản cho liên kết, màu nền cho nút). Phải ít nhất 3:1.

Nếu chỉ báo focus của bạn là #0066CC (một màu xanh phổ biến), hãy kiểm tra nó so với:

• Nền trắng: 8.1:1 (vượt qua)
• Nền xám nhạt (#F5F5F5): 7.2:1 (vượt qua)
• Nền xanh nhạt (#CCE5FF): 2.2:1 (không vượt qua)

Khi nó không vượt qua, bạn cần một màu focus tối hơn hoặc nhạt hơn tùy thuộc vào bối cảnh.

Bước 3: Kiểm tra Tự động

Chạy các công cụ này để bắt các vấn đề chỉ báo focus phổ biến:

• axe DevTools (tiện ích mở rộng trình duyệt): Đánh dấu các chỉ báo focus bị thiếu và viền độ tương phản thấp
• Lighthouse Accessibility (trong Chrome DevTools): Kiểm tra các phần tử có thể focus mà không có kiểu focus hiển thị
• WAVE (công cụ đánh giá khả năng tiếp cận web): Làm nổi bật vấn đề thứ tự focus và khả năng nhìn thấy focus

Không có công cụ nào trong số này hoàn toàn thực thi yêu cầu kích thước và độ tương phản của WCAG 2.2 (tiêu chuẩn là mới), nhưng chúng bắt các vấn đề rõ ràng.

Lỗi Chỉ báo Focus Phổ biến

Đây là những thất bại tôi thường thấy nhất trên các cửa hàng Shopify:

Lỗi 1: Ẩn Focus Hoàn toàn

Nhiều chủ đề bao gồm CSS này:

*:focus {
  outline: none;
}

Điều này loại bỏ tất cả các chỉ báo focus trên toàn trang web. Đó là lỗi khả năng tiếp cận tệ nhất bạn có thể làm.

Tại sao nó xảy ra: Các nhà thiết kế không thích viền mặc định của trình duyệt và loại bỏ nó mà không thay thế nó.

Sửa: Loại bỏ quy tắc đó và thêm kiểu focus tùy chỉnh bằng :focus-visible.

Lỗi 2: Viền Vô hình trên Nền Tối

Một viền focus xanh nhạt trông tuyệt vời trên nền trắng nhưng biến mất trên các thanh điều hướng tối hoặc phần chân trang.

Ví dụ thất bại:

a:focus {
  outline: 2px solid #66A3E0; /* Xanh nhạt */
}

Trên nền xanh đậm (#1A2332), viền này chỉ có tỷ lệ độ tương phản 1.8:1—không vượt qua WCAG.

Sửa: Sử dụng các màu focus khác nhau cho bối cảnh sáng và tối:

/* Nền sáng */
.light-section a:focus {
  outline: 3px solid #0066CC; /* Xanh đậm */
}

/* Nền tối */
.dark-section a:focus {
  outline: 3px solid #FFFFFF; /* Trắng */
}

Hoặc sử dụng một màu độ tương phản cao hoạt động ở mọi nơi, như đen trên nền sáng và trắng trên nền tối.

Lỗi 3: Chỉ báo Focus Nhỏ hơn 2px

Các viền mỏng không vượt qua yêu cầu kích thước của WCAG 2.2:

button:focus {
  outline: 1px solid #0066CC; /* Quá mỏng */
}

Sửa: Tăng lên ít nhất 2px, hoặc sử dụng một viền dày hơn trên một bên:

button:focus {
  outline: none;
  border-bottom: 4px solid #0066CC; /* Gạch chân dày */
}

Lỗi 4: Dựa vào Thay đổi Màu Duy nhất

Chỉ thay đổi màu văn bản hoặc màu nền khi focus không vượt qua nếu thay đổi không tạo ra chỉ báo hình ảnh rõ ràng:

a:focus {
  color: #0066CC; /* Văn bản chuyển sang xanh */
}

Điều này có thể hiển thị với người dùng có khả năng nhìn, nhưng người dùng trình đọc màn hình không được cho biết rằng focus đã di chuyển. Và nếu màu văn bản gốc đã giống xanh, thay đổi có thể quá tinh tế.

Sửa: Luôn thêm chỉ báo chu vi (viền, gạch chân hoặc đường viền).

Chỉ báo Focus cho Mega Menu

Mega menu tạo ra một thách thức độc đáo vì chúng chứa nhiều cấp độ điều hướng. Khi người dùng tab vào mega menu, focus phải đi đâu? Khi họ mũi tên xuống các menu con, làm thế nào bạn hiển thị mục nào được focus?

Đây là một mô hình mạnh mẽ:

/* Mục điều hướng cấp cao nhất */
.nav-item > a:focus {
  outline: 3px solid #0066CC;
  outline-offset: -3px; /* Bên trong giới hạn phần tử */
  background-color: #F0F7FF;
}

/* Mục menu con */
.mega-menu a:focus {
  background-color: #E6F2FF;
  outline: 2px solid #0066CC;
}

Những chi tiết chính:

• Các mục cấp cao nhất sử dụng outline-offset: -3px để vẽ viền bên trong giới hạn phần tử, tránh chồng lấp với các mục lân cận
• Các mục menu con nhận cả thay đổi màu nền (để nổi bật khỏi lưới) và viền (để đáp ứng yêu cầu kích thước WCAG)

Ví dụ thực tế: Trình tạo Menu Navi+ tạo các mega menu với mô hình này được tích hợp sẵn—các mục cấp cao nhất làm nổi bật với thay đổi màu nền và viền, và các menu con sử dụng điều hướng phím mũi tên với các chỉ báo focus rõ ràng trên mỗi mục.

Trường hợp Kinh doanh cho Chỉ báo Focus Tốt hơn

Hầu hết chủ cửa hàng không ưu tiên chỉ báo focus vì chúng có vẻ như một chi tiết hình ảnh nhỏ. Nhưng tác động là có thể đo lường được.

Khảo sát năm 2024 của WebAIM về người dùng trình đọc màn hình phát hiện ra rằng 87% người trả lời đã trích dẫn “điều hướng bàn phím” là tính năng khả năng tiếp cận quan trọng nhất, trước alt text, HTML ngữ nghĩa và nhãn ARIA. Trong điều hướng bàn phím, các chỉ báo focus hiển thị được xếp hạng là frustration hàng đầu.

Khi người dùng không thể thấy họ ở đâu trên trang, họ không thể hoàn thành các tác vụ. Điều đó dịch trực tiếp thành doanh thu bị mất.

Nghiên cứu của Baymard Institute về khả năng sử dụng thanh toán cho thấy rằng “thanh toán quá dài/phức tạp” gây ra 17% lỗi giỏ hàng. Đối với người dùng bàn phím trên trang web có chỉ báo focus kém, mỗi lần thanh toán đều quá phức tạp—họ dành thời gian thêm để định hướng lại trên mỗi trường, hoặc họ hoàn toàn từ bỏ.

Ngược lại, các trang web có chỉ báo focus mạnh mẽ thấy tỷ lệ hoàn thành tác vụ được cải thiện. Một nghiên cứu của Nomensa về ROI khả năng tiếp cận phát hiện ra rằng các trang web có khả năng tiếp cận (bao gồm quản lý focus tốt) có tỷ lệ hoàn thành tác vụ cao hơn 23% so với những đối thủ không có khả năng tiếp cận.

Chỉ báo focus tốt hơn sẽ không chỉ giúp bạn vượt qua kiểm toán. Nó sẽ giúp người dùng hoàn thành mua sắm.

Danh sách kiểm tra Triển khai Nhanh

Đây là kế hoạch hành động 20 phút để cải thiện chỉ báo focus của bạn:

Ngay lập tức (5 phút):

1. Thêm CSS cơ bản này vào chủ đề của bạn:

   a:focus-visible,
   button:focus-visible,
   input:focus-visible,
   select:focus-visible {
     outline: 3px solid #0066CC;
     outline-offset: 2px;
   }
   

2. Kiểm tra trên trang chủ, menu điều hướng và thanh toán của bạn. Bạn có thấy chỉ báo focus ở mọi nơi không?

Tuần này (1 giờ):

1. Chọn một màu focus phù hợp với thương hiệu vượt qua yêu cầu độ tương phản. Sử dụng Trình kiểm tra Độ tương phản của WebAIM để xác minh 3:1 so với các màu nền chính của bạn.

2. Tùy chỉnh kiểu focus cho các phần khác nhau (nền sáng so với nền tối).

3. Kiểm tra mega menu của bạn (nếu bạn có). Đảm bảo các mục menu con được focus rõ ràng.

Tháng này (2-3 giờ):

1. Thêm kiểu focus cụ thể cho các thành phần tương tác:
   • Thẻ sản phẩm
   • Nút Thêm vào giỏ
   • Hộp kiểm lọc
   • Đề xuất hoàn thành tự động tìm kiếm
   • Nút đóng modal

2. Chạy kiểm tra tự động với axe DevTools và sửa mọi vấn đề focus được đánh dấu.

3. Có một thành viên nhóm (hoặc khách hàng) điều hướng trang web của bạn chỉ bằng bàn phím và báo cáo nơi focus khó thấy.

Chỉ báo focus là một trong những chiến thắng khả năng tiếp cận dễ nhất. Công việc kỹ thuật là tối thiểu—một vài chục dòng CSS—nhưng tác động là lớn. Mọi người dùng bàn phím hạ cánh trên trang web của bạn sẽ hưởng lợi.

Bài viết này là một phần của hướng dẫn lớn hơn về Điều hướng bàn phím: tại sao nó quan trọng ngoài khả năng tiếp cận.