Hiệu ứng Curb Cut trong Điều hướng
Hiệu ứng "curb cut" — được đặt tên theo quan sát quy hoạch đô thị rằng các dốc lề đường được lắp đặt để giúp người dùng xe lăn cũng mang lại lợi ích cho người đi xe đạp, cha mẹ đẩy xe nôi và công nhân giao hàng với xe đẩy — có một tương tự trực tiếp trong thiết kế điều hướng kỹ thuật số. Những cải tiến thiết kế giúp điều hướng dễ tiếp cận cho người dùng khiếm thị, hạn chế vận động hoặc khác biệt nhận thức cũng làm cho điều hướng tốt hơn cho mọi khách truy cập khác.
Đây không phải là sáo ngữ — đây là sự thật thương mại có thể đo lường được. Mục tiêu chạm lớn (tối thiểu 44×44 điểm, theo khuyến nghị của Hướng dẫn Giao diện Con người của Apple) giúp điều hướng dễ tiếp cận cho người dùng hạn chế vận động cũng dễ chạm hơn cho bất kỳ người dùng nào điều hướng bằng một tay trên tàu đang chuyển động. Độ tương phản màu đủ (tỷ lệ 4.5:1 cho văn bản thường, theo WCAG 2.1 AA) giúp điều hướng dễ đọc cho người dùng thiếu khả năng nhận biết màu sắc cũng làm cho nó dễ đọc dưới ánh nắng mặt trời — một bối cảnh phổ biến cho người mua sắm di động. Nhãn điều hướng rõ ràng, mô tả giúp định hướng cho người dùng khuyết tật nhận thức cũng giúp điều hướng dễ quét hơn cho mọi người dùng đang đưa ra quyết định danh mục nhanh chóng.
Lý do thương mại cho điều hướng dễ tiếp cận không chủ yếu là giảm thiểu rủi ro pháp lý — mà là tối ưu hóa chuyển đổi cũng phục vụ khách truy cập dựa vào các tính năng tiếp cận.
"Khi chúng tôi kiểm tra điều hướng để đánh giá khả năng tiếp cận, mọi vấn đề chúng tôi tìm thấy hóa ra cũng là vấn đề khả năng sử dụng chung. Các mục tiêu chạm quá nhỏ đối với người dùng bàn phím và thiết bị chuyển đổi cũng gây khó chịu cho người dùng thông thường. Văn bản điều hướng độ tương phản thấp không đạt WCAG cũng trông nhạt nhòa trên thiết bị di động trong mọi điều kiện ánh sáng. Chúng tôi đã khắc phục mọi thứ trong danh sách khả năng tiếp cận và thấy sự cải thiện trong mức độ tương tác điều hướng di động trên tất cả người dùng — không chỉ người dùng khuyết tật."
— Khách hàng Navi+, thương hiệu đồ ngoài trời
Nguyên tắc Tiếp cận Điều hướng với Tác động Thương mại
Một số nguyên tắc tiếp cận có tác động thương mại đặc biệt trực tiếp khi áp dụng cho điều hướng:
Kích thước mục tiêu chạm đủ lớn. Các mục điều hướng — tab Tab Bar, liên kết menu, nút bật/tắt dropdown — phải có mục tiêu chạm ít nhất 44×44 pixel CSS. Dưới ngưỡng này, số lần chạm nhầm tăng lên, đặc biệt trên điện thoại nhỏ hơn và đối với người dùng điều hướng bằng một tay. Chạm nhầm mở sai đích đến điều hướng tạo ra sự khó chịu và ma sát điều hướng ngược. Mục tiêu chạm đúng kích thước giảm chạm nhầm cho mọi người.
Độ tương phản đủ giữa văn bản điều hướng và nền. WCAG 2.1 AA yêu cầu tỷ lệ tương phản 4.5:1 cho văn bản cỡ bình thường. Đối với điều hướng, thường được hiển thị ở kích thước phông chữ nhỏ hơn nội dung thân bài, đáp ứng ngưỡng này vừa là yêu cầu tiếp cận vừa là cải tiến khả năng đọc có lợi cho tất cả người dùng. Nhãn điều hướng khó đọc làm chậm quá trình quét danh mục và tăng tải nhận thức.
Thứ tự tập trung logic cho điều hướng bàn phím. Người dùng điều hướng bằng bàn phím hoặc thiết bị chuyển đổi phụ thuộc vào thứ tự tập trung có thể dự đoán — trình tự trong đó các phần tử tương tác nhận được tiêu điểm khi người dùng nhấn Tab. Menu điều hướng với thứ tự tập trung không logic (nhảy từ mục menu thứ ba đến chân trang trước khi đến mục thứ tư) bị hỏng đối với người dùng bàn phím và thường chỉ ra các vấn đề cấu trúc HTML cơ bản có thể ảnh hưởng đến lập chỉ mục công cụ tìm kiếm.
Chỉ báo tiêu điểm hiển thị. Nhiều cửa hàng ẩn chỉ báo tiêu điểm mặc định của trình duyệt (đường viền xuất hiện trên các phần tử tương tác được tập trung) vì lý do thẩm mỹ. Đối với người dùng bàn phím và thiết bị chuyển đổi, điều này làm cho điều hướng không thể thực hiện được — họ không thể thấy phần tử nào hiện đang được tập trung. Chỉ báo tiêu điểm hiển thị, được tạo kiểu phù hợp với thẩm mỹ thương hiệu, là yêu cầu tiếp cận nỗ lực tối thiểu chủ yếu ảnh hưởng đến một tập hợp nhỏ người dùng nhưng báo hiệu chất lượng tổng thể của việc triển khai điều hướng.
| Nguyên tắc Tiếp cận | Đối tượng Hưởng lợi Chính | Lợi ích Rộng hơn |
|---|---|---|
| Mục tiêu chạm tối thiểu 44px | Người dùng hạn chế vận động | Ít chạm nhầm hơn cho tất cả người dùng di động |
| Tỷ lệ tương phản văn bản 4.5:1 | Người dùng thị lực yếu, thiếu nhận biết màu | Khả năng đọc tốt hơn trong mọi điều kiện ánh sáng |
| Nhãn điều hướng mô tả | Người dùng khuyết tật nhận thức, trình đọc màn hình | Quét danh mục nhanh hơn cho mọi khách truy cập |
| Thứ tự tập trung logic | Người dùng bàn phím và thiết bị chuyển đổi | Chỉ ra cấu trúc HTML sạch (lợi ích SEO) |
Điều hướng Dễ tiếp cận như Định vị Thương hiệu
Ngoài các lợi ích chuyển đổi, điều hướng dễ tiếp cận truyền đạt điều gì đó về thương hiệu. Một cửa hàng có điều hướng hoạt động cho khách truy cập trên toàn bộ phạm vi khả năng — bao gồm người mua sắm lớn tuổi có thị lực và độ chính xác vận động có thể giảm sút, khách truy cập mua sắm trong môi trường khó khăn và người dùng có khuyết tật vĩnh viễn hoặc tạm thời — là cửa hàng xây dựng trải nghiệm cho toàn bộ đối tượng, không phải một tập hợp con.
Đối với các thương hiệu có đối tượng bao gồm nhân khẩu học lớn tuổi, cha mẹ (thường mua sắm bằng một tay trong khi bế con bằng tay kia) hoặc cộng đồng có tỷ lệ trên mức trung bình về các khuyết tật cụ thể, điều hướng dễ tiếp cận là yếu tố khác biệt về giữ chân và lòng trung thành cũng như tối ưu hóa chuyển đổi. Các thành phần điều hướng của Navi+ được xây dựng với khả năng tiếp cận như một nguyên tắc thiết kế — kích thước mục tiêu chạm, tỷ lệ tương phản và đánh dấu ngữ nghĩa hỗ trợ trình đọc màn hình và điều hướng bàn phím được tích hợp vào mặc định thành phần, không phải được bổ sung sau như suy nghĩ thêm.
Dùng thử miễn phí — không cần code, không cần lập trình viên
Cài đặt trong vài phút trên Shopify, WordPress hoặc bất kỳ website nào.