Khả năng tiếp cận

Cách chúng tôi xây dựng cho người dùng bàn phím, trình đọc màn hình, thị lực kém và công nghệ thấp. Một ảnh chụp trung thực, có ngày tháng.

Chúng tôi viết trang này theo cách tương tự như phần còn lại của trang web: những gì hoạt động, những gì không hoạt động, và cách tự xác minh. Nó có ngày tháng vì khả năng tiếp cận là mục tiêu di chuyển. Chúng tôi kiểm tra lại sau mỗi lần phát hành lớn.

Tuyên bố khả năng tiếp cận chính thức

Tiêu chuẩn mục tiêu

WCAG 2.2 AA trên toàn bộ trải nghiệm. Xử lý AAA về giao diện tiêu điểm (vòng tương phản cao dày, không bị che khuất) và nhãn biểu mẫu + khôi phục lỗi. Được theo dõi theo Khuyến nghị W3C, không phải diễn giải lại.

Kiểm toán nội bộ cuối cùng

2026-04-19. Kiểm tra thủ công của đội ngũ chúng tôi trên trang chủ, print-size, hub /standards/ + 9 trang thẩm quyền, và 45 trang đích sơ đồ thanh toán.

Kiểm toán bên ngoài

Đã ủy nhiệm, báo cáo đang chờ. Xuất bản khi nhận được tại /accessibility/audit/ với ghi chú khắc phục, khiếm khuyết nguyên vẹn, không chọn lọc.

Tần suất kiểm tra lại

Kiểm tra ngẫu nhiên hàng tháng + kiểm tra thủ công đầy đủ sau bất kỳ thay đổi UI lớn nào. Kiểm tra tự động (kiểm tra tương phản, quét tiêu chí mới WCAG 2.2) chạy mỗi lần triển khai.

Liên hệ + SLA

hello@abundera.ai, chúng tôi xác nhận báo cáo khả năng tiếp cận trong vòng 2 ngày làm việc, phân loại trong 5 ngày, và xử lý các rào cản bàn phím / trình đọc màn hình / nhận thức là vấn đề ưu tiên.

Tuân thủ WCAG 2.2 AA theo tiêu chí thành công

Các tiêu chí mới trong phiên bản 2.2 mà chúng tôi đang theo dõi tích cực. Trạng thái phản ánh những gì chúng tôi đã xác minh nội bộ; kiểm toán bên ngoài sẽ thay thế.

Hỗ trợ chuyển động và màu sắc bắt buộc

• prefers-reduced-motion: reduce, hoạt ảnh nổi và mờ dần của quả cầu môi trường bị ức chế. Chuyển tiếp chức năng vẫn ngắn. Đã xác minh với macOS Reduce Motion và Windows "Hiển thị hoạt ảnh" bị tắt.
• forced-colors: active (Chế độ tương phản cao Windows), vòng tiêu điểm sử dụng màu Highlight của hệ thống; đường viền kế thừa CanvasText hệ thống. Đã xác minh trong Edge trên Windows 11 High Contrast.

Giới hạn đã biết

• JAWS chưa được kiểm tra. Vòng AT tiếp theo nhắm mục tiêu JAWS trên Edge trên Windows 11.
• Trình thiết kế danh thiếp được thiết kế ưu tiên chuột cho bản xem trước kéo để định vị. Mỗi điều khiển có thay thế bàn phím, nhưng vòng phản hồi trực tiếp vẫn là hình ảnh.
• Báo cáo kiểm toán bên ngoài đang chờ. Trạng thái tự chứng nhận trong bảng trên sẽ được thay thế bằng kết quả của kiểm toán viên khi báo cáo đến.
• Một số công nghệ hỗ trợ của bên thứ ba (Dragon NaturallySpeaking, Speech-to-text trên Android) không có trong ma trận kiểm hồi quy của chúng tôi; chúng tôi chấp nhận báo cáo cộng đồng và sửa theo từng yêu cầu.

Nhật ký thay đổi khả năng tiếp cận

• 2026-04-19 (PM), Đã sửa lỗi kích hoạt đôi vùng trực tiếp TalkBack: đã xóa aria-live="polite" khỏi wrapper #qr-preview; thông báo bây giờ chỉ đến từ huy hiệu khả năng quét role="status", một lần mỗi lần tạo. Modal BCD: bộ chọn màu nhận được liên kết <label for> thích hợp; vùng chứa lưới cài đặt trước nhận được role="group" + aria-label. Bảng khả năng tiếp cận nhận được <caption> + scope="col"/"row".
• 2026-04-19 (AM), Nâng cấp chỉ báo tiêu điểm (3 px + sao lưu box-shadow). Đã thêm hỗ trợ forced-colors + prefers-reduced-motion. Kiểm toán kích thước mục tiêu: tăng .saved-profile-delete, .type-search-clear, .compat-toggle-btn lên ≥ 28 px. Đã sửa lỗi bỏ qua cấp tiêu đề (tiêu đề phụ vCard/MECARD h4 → h3). Đã xuất bản tuyên bố WCAG 2.2 AA chính thức + ma trận AT.
• 2026-04-18, Đã ghi lại kiểm tra cơ sở thủ công WCAG 2.2 AA. Dải tin cậy bốn trụ thu gọn để có hệ thống phân cấp rõ ràng hơn.
• 2026-03-08, Xuất bản trang /accessibility/ ban đầu.

Chúng tôi cam kết điều gì

• Điều hướng bàn phím đầy đủ. Mọi điều khiển trình tạo, mọi modal và mọi luồng xuất đều có thể tiếp cận mà không cần chuột.
• Trạng thái tiêu điểm hiển thị. Các đầu vào, nút và liên kết được lấy tiêu điểm hiển thị vòng rõ ràng. Chúng tôi không chỉ dựa vào màu sắc.
• Nhãn trên mọi trường. Đầu vào biểu mẫu có các phần tử <label> liên quan hoặc thuộc tính aria-label. Văn bản giữ chỗ không bao giờ được sử dụng làm nhãn duy nhất.
• Vùng ARIA trực tiếp cho bản xem trước QR và thông báo. Trình đọc màn hình nghe thấy "QR đã tạo" và thông báo khi chúng kích hoạt.
• Thay thế văn bản cho nút chỉ có biểu tượng. aria-label trên mỗi nút chỉ SVG.
• Ý nghĩa trạng thái độc lập màu sắc. Huy hiệu khả năng quét và chip tương thích kết hợp màu sắc với ký hiệu và nhãn văn bản.
• Tên định dạng xuất rõ ràng. Nút tải xuống ghi "Tải PNG", "Tải SVG", v.v., không chỉ "Tải xuống".
• Mục tiêu chạm di động lớn. Các phần tử tương tác ít nhất 44 × 44 pixel CSS trên con trỏ thô, theo WCAG 2.5.8.
• Tôn trọng chuyển động giảm. Chuyển tiếp bị tắt dưới prefers-reduced-motion: reduce.

Chúng tôi vẫn còn thiếu sót ở đâu

• JAWS chưa được kiểm tra. Giấy phép JAWS đã được mua, vị trí kiểm tra đã được đặt cho vòng AT tiếp theo. Tất cả các trình đọc chính khác (VoiceOver macOS + iOS, NVDA, Narrator, TalkBack) đã vượt qua kiểm hồi quy gần nhất.
• Trình thiết kế danh thiếp phụ thuộc nhiều vào chuột theo thiết kế (kéo để định vị, xem trước canvas). Các thay thế bàn phím tồn tại cho mọi điều khiển nhưng vòng phản hồi xem trước trực tiếp vẫn ưu tiên hình ảnh. Điều khiển màu sắc hiện sử dụng liên kết <label for> thích hợp + role="group" trên bộ chọn cài đặt trước (2026-04-19).
• Luồng trình tạo phức tạp (CSV hàng loạt, trình hướng dẫn nhiều bước) có thể sử dụng cấu trúc liên kết bỏ qua tốt hơn. Đã lên kế hoạch.
• Tóm tắt bảng mô tả. Bảng khả năng tiếp cận + tương thích hiện có thuộc tính <caption> + scope (2026-04-19). Tóm tắt tường thuật cấp hàng dài hơn cho mỗi hàng vẫn đang được lên kế hoạch.

Ma trận hỗ trợ công nghệ hỗ trợ

Tạo phẩm kỹ thuật, không phải tuyên bố PR. Mỗi hàng là tổ hợp trình duyệt + AT + nền tảng thực sự mà chúng tôi đã trực tiếp thử nghiệm. Trạng thái phản ánh lần kiểm tra thủ công gần nhất; lưu ý ghi lại bất kỳ điều gì vẫn ngăn cản việc vượt qua đầy đủ.

Tần suất phát hành: ma trận được chạy lại với mỗi thay đổi UI lớn. "Đạt" = không có rào cản; lưu ý là các kiểm hồi quy thẩm mỹ hoặc phạm vi hẹp được xếp hàng cho lần phát hành tiếp theo. "Chưa kiểm tra" = chúng tôi chưa thực sự chạy tổ hợp, chúng tôi nói thay vì bỏ qua.

Bản đồ bàn phím

• Tab / Shift+Tab: di chuyển tiến / lùi qua các phần tử có thể lấy tiêu điểm.
• Enter / Dấu cách: kích hoạt nút và công tắc.
• Phím mũi tên: di chuyển giữa các tùy chọn trong nhóm radio (bộ chọn loại, bộ chọn mẫu, thanh tab).
• Escape: đóng modal (Trình thiết kế danh thiếp, kiểm tra trước, dịch vụ in, cắt ảnh).
• Home / End trong menu tràn để nhảy đến mục đầu / cuối.

Kiểm toán nội bộ, 2026-04-19

Kiểm tra thủ công WCAG 2.2 AA với trang chủ, /print-size/, hub /standards/ mới + 9 trang thẩm quyền, và 45 trang đích sơ đồ thanh toán (kế thừa từ mẫu dùng chung). Những gì chúng tôi đã xác minh, những gì đã sửa, và những gì còn mở:

Đã xác minh đạt

• Mục tiêu liên kết bỏ qua tồn tại, liên kết bỏ qua (href="#generator") phân giải thành phần tử hiển thị trên mỗi biến thể trang.
• Kiểu tiêu điểm hiển thị, :focus-visible được khai báo toàn cục với đường viền 2px, cộng với ghi đè mỗi đầu vào với đường viền màu + bóng. Đã xác nhận qua kiểm toán CSS tại dòng 34 và 88 của site/css/style.c17bfd85.css.
• Tất cả đầu vào biểu mẫu có nhãn, mọi <input> / <select> / <textarea> trong trình tạo đều có <label for="..."> rõ ràng hoặc <label> bao quanh.
• Nút có tên có thể tiếp cận, mọi <button> đều có nội dung văn bản hoặc aria-label. Nút chỉ SVG (hamburger, chia sẻ, cài đặt) đều mang aria-label.
• SVG trang trí được đánh dấu ẩn, aria-hidden="true" trên mỗi biểu tượng trang trí để trình đọc màn hình bỏ qua thay vì thông báo hình học.
• Vai trò ARIA chính xác, role="radiogroup" trên bộ chọn loại với role="radio" + aria-checked trên mỗi tùy chọn; role="tablist" / role="tab" + aria-selected trên tab bảng điều khiển.
• Tương phản văn bản, văn bản chính là #f5f5f5 trên #08090a (≈ 17:1, WCAG AAA). Văn bản mờ #a3a3a3 trên cùng nền là ≈ 8:1 (trên AAA 7:1).
• Bộ chuyển đổi ngôn ngữ có aria-label="Language" dù nhãn hiển thị là ngầm định.

Đã sửa trong lần kiểm tra này

• Bỏ qua cấp tiêu đề, ba tiêu đề phụ trong các phần trường bổ sung vCard / MECARD là <h4> dưới <h2> không có <h3> trung gian. Công cụ phác thảo trình đọc màn hình đã gắn cờ là "cấp bị bỏ qua". Đã đổi thành <h3> để phác thảo đọc h1 → h2 → h3 → h3 sạch sẽ.

Giới hạn đã biết

• Quét đầy đủ Axe / NVDA / VoiceOver yêu cầu trình duyệt + AT mà chúng tôi không thể chạy từ quy trình xây dựng. Kiểm tra thủ công dựa trên trình duyệt hàng tháng đã được lên lịch.
• Kiểm toán độc lập bên thứ ba đã được ủy nhiệm (xem chỗ giữ /accessibility/audit/). Báo cáo sẽ được xuất bản khi nhận được dù có kết quả.
• Phím tắt bàn phím "/" cho bảng lệnh có nguy cơ xung đột nhỏ trên các trang có trường tìm kiếm. Chúng tôi sử dụng preventDefault() chỉ khi tiêu điểm ở ngoài đầu vào; đã ghi lại nhưng chưa kiểm toán với AT.

Báo cáo sự cố

Nếu có điều gì đó không thể tiếp cận bằng bàn phím, được gán nhãn sai, hoặc không thể sử dụng được với thiết lập của bạn, hãy gửi email đến hello@abundera.ai. Bao gồm trình duyệt, hệ điều hành, AT và luồng cụ thể của bạn. Chúng tôi coi lỗi khả năng tiếp cận là vấn đề ưu tiên.

Đã xem xét lần cuối: 2026-04-19. Xem xét tiếp theo: sau lần thay đổi UI lớn tiếp theo.