Những Điều Cơ Bản Về Truy Cập Frontend 🔥
Truy cập không chỉ đơn giản là đánh dấu các tiêu chí của WCAG hay ghi nhớ các phím tắt của trình đọc màn hình. Trong các dự án thực tế, nó liên quan đến cách bạn giải quyết vấn đề, hợp tác và suy nghĩ một cách bao gồm.
Đó là lý do tại sao các cuộc phỏng vấn về truy cập không nên chỉ là những buổi kiểm tra kiến thức. Thay vào đó, những câu hỏi tốt nhất sẽ mời gọi ứng viên giải thích cách tiếp cận của họ, chia sẻ câu chuyện và thể hiện sự nhận thức thực tiễn.
Trong bài viết này, chúng ta sẽ khám phá các câu hỏi phỏng vấn về truy cập được phân thành bốn danh mục: Chung, Kỹ thuật, Thiết kế và Nội dung. Mỗi danh mục sẽ tiết lộ một điều gì đó khác biệt về quan điểm và kỹ năng của ứng viên.
1. Các Câu Hỏi Chung: Hình Thành Tư Duy Về Truy Cập
Các câu hỏi này tập trung vào việc hiểu truy cập ở mức độ rộng, kiểm tra nhận thức, triết lý và sự đồng cảm.
✅ Ai là người hưởng lợi từ truy cập?
Hầu hết mọi người ngay lập tức nghĩ đến người dùng khuyết tật - và họ đúng. Nhưng những câu trả lời mạnh mẽ mở rộng quan điểm này:
- Khuyết tật vĩnh viễn (mù, điếc, hạn chế vận động)
- Khuyết tật tạm thời (gãy tay, đau nửa đầu, hồi phục sau phẫu thuật)
- Giới hạn tình huống (ánh sáng mặt trời trên điện thoại, quán cà phê ồn ào, bế em bé)
- Người cao tuổi gặp các thay đổi tự nhiên về thị lực, thính giác hoặc nhận thức
- Người dùng di động hưởng lợi từ bố cục đáp ứng
- Cải thiện SEO và hiệu suất mà không tốn kém
💡 Ví dụ: Sự hiểu biết: Phụ đề không chỉ giúp người khiếm thính - chúng giúp bất kỳ ai đang xem trong một tàu điện ngầm ồn ào hoặc học một ngôn ngữ mới.
✅ Thiết Kế Bao Gồm và Thiết Kế Toàn Diện
- Thiết kế toàn diện → Sản phẩm có thể sử dụng bởi mọi người mà không cần sửa đổi.
- Thiết kế bao gồm → Thiết kế có chủ ý cho sự đa dạng của con người và các trường hợp ngoại lệ.
Ví dụ: Các đường cắt trên vỉa hè được thiết kế cho người dùng xe lăn, nhưng cũng giúp phụ huynh với xe đẩy, du khách với hành lý và nhân viên giao hàng.
Ví dụ kỹ thuật số: Chế độ tối có lợi cho người dùng nhạy cảm với ánh sáng và những người đơn giản chỉ thích nó.
✅ Liên Kết Bỏ Qua
Liên kết bỏ qua cho phép người dùng bàn phím bỏ qua điều hướng lặp đi lặp lại và nhảy trực tiếp đến nội dung chính.
- Thường là phần tử có thể lấy nét đầu tiên
- Ẩn cho đến khi được lấy nét
- Tiết kiệm thời gian và giảm bực bội
🚨 Sai lầm phổ biến: Liên kết bỏ qua không có kiểu dáng lấy nét rõ ràng khiến chúng trở nên vô dụng.
✅ Tuân Thủ WCAG (A, AA, AAA)
- A → Các yêu cầu tối thiểu (truy cập cơ bản)
- AA → Tiêu chuẩn thực tiễn (hầu hết các luật tham chiếu điều này)
- AAA → Tiêu chuẩn vàng (lý tưởng nhưng không phải lúc nào cũng thực tế)
Ví dụ: AA yêu cầu độ tương phản văn bản là 4.5:1, trong khi AAA nâng cao nó lên 7:1.
👉 Điểm tổng quát: Tìm kiếm các câu trả lời cho thấy lợi ích truy cập cho tất cả mọi người, và ứng viên hiểu rằng truy cập liên quan đến con người, không chỉ là danh sách kiểm tra.
2. Các Câu Hỏi Kỹ Thuật: Xây Dựng Trải Nghiệm Có Truy Cập
Ở đây chúng ta kiểm tra cách ứng viên nghĩ về các chi tiết thực hiện - HTML, CSS, JavaScript, ARIA và hành vi công nghệ hỗ trợ.
✅ Cây Truy Cập
Các trình duyệt xây dựng một “cây truy cập” song song với DOM. Các trình đọc màn hình dựa vào nó.
- DOM = mọi thứ
- Cây truy cập = chỉ những gì liên quan (vai trò, trạng thái, nhãn)
💡 Các nhà phát triển nên hiểu điều này để gỡ lỗi tại sao một trình đọc màn hình lại “nói” điều gì đó không mong đợi.
✅ rems/ems so với px cho kích thước phông chữ
- px = cố định, bỏ qua sở thích của người dùng
- rems = tương đối với kích thước phông chữ gốc (tỷ lệ nhất quán)
- ems = tương đối với phần tử cha (hữu ích cho tỷ lệ cấp độ thành phần)
📌 Lợi ích truy cập: Người dùng có thị lực kém thường tăng kích thước văn bản của trình duyệt. Với px, thiết kế bị lỗi; với rem/em, nó thích ứng.
✅ Bẫy Lấy Nét
Bẫy nét bên trong các thành phần (như modals) đảm bảo rằng người dùng bàn phím không “tab” ra ngoài một cách tình cờ.
- ✅ Cần thiết trong modals, dropdowns
- ❌ Vấn đề khi thực hiện không chính xác (không có cách nào thoát, thiếu trạng thái lấy nét)
Nguyên tắc chung: Luôn cho phép Esc để đóng modals và trả lại nét cho phần tử kích hoạt.
✅ ARIA: Con Dao Hai Lưỡi
- Quy tắc đầu tiên: Đừng sử dụng ARIA nếu HTML đã giải quyết vấn đề.
- ❌ Lạm dụng:
role="button"trên một<button> - ✅ Sử dụng đúng:
aria-expandedtrên một menu có thể thu gọn
💡 ARIA nên tăng cường, không thay thế, HTML ngữ nghĩa.
✅ Thuộc Tính Alt cho Hình Ảnh
- Logo → tên công ty
- Trang trí →
alt="" - Biểu đồ/phức tạp → các lựa chọn văn bản dài hơn hoặc bảng dữ liệu
SVG không chấp nhận alt → sử dụng <title> hoặc aria-labelledby.
👉 Điểm kỹ thuật: Một ứng viên mạnh hiểu cách các trình duyệt và công nghệ hỗ trợ hoạt động cùng nhau, không chỉ là thuộc tính nào đi đâu.
3. Các Câu Hỏi Thiết Kế: Quyết Định Hình Ảnh & Tương Tác
Truy cập cũng quan trọng như các lựa chọn thiết kế như nó là về mã.
✅ Độ Tương Phản Màu
- WCAG AA → 4.5:1 (bình thường), 3:1 (lớn)
- WCAG AAA → 7:1 (bình thường), 4.5:1 (lớn)
💡 Độ tương phản cao giúp người dùng thị lực kém và ai đó đang đọc điện thoại của họ dưới ánh sáng mặt trời chói chang.
Công cụ: WebAIM Contrast Checker, plugin Stark.
✅ Các Trạng Thái Tương Tác Ngoài Hover
Đừng thiết kế nút chỉ với hiệu ứng hover. Bạn cũng cần:
- Lấy nét → cho điều hướng bàn phím
- Hoạt động → khi đang được nhấn
- Đã truy cập → cho liên kết
- Vô hiệu hóa → rõ ràng nhưng có thể đọc được
📌 Người dùng bàn phím phụ thuộc vào các chỉ báo lấy nét rõ ràng. Việc loại bỏ chúng = thảm họa.
✅ Nội Dung Hiện Ra Khi Di Chuột
Các menu/tooltips chỉ hiện ra khi di chuột không phù hợp cho:
- Người dùng di động (không có hover)
- Người dùng bàn phím (không có chuột)
- Người dùng có vấn đề về vận động (hover không đáng tin cậy)
💡 Giải pháp: Hỗ trợ cả click/tap và tương tác bàn phím.
✅ Làm Cho Infographics Có Truy Cập
Infographics rất khó. Cung cấp thông tin tương đương:
- Văn bản alt ngắn (tóm tắt)
- Mô tả dài (văn bản ẩn hoặc trang liên kết)
- Bảng với dữ liệu thô khi có thể
👉 Điểm thiết kế: Thiết kế thân thiện với truy cập = độ tương phản, trạng thái, lựa chọn thay thế và linh hoạt.
4. Các Câu Hỏi Nội Dung: Truy Cập Vượt Ra Ngoài Mã
Truy cập cũng áp dụng cho các bài thuyết trình, tài liệu và phương tiện.
✅ Bài Thuyết Trình Có Truy Cập
- Màu sắc tương phản cao + phông chữ lớn (24pt+)
- Đừng chỉ dựa vào màu sắc
- Mô tả bằng lời hình ảnh
- Chia sẻ slide trước
- Thêm phụ đề/tóm tắt cho video
✅ PDF và Tài Liệu Có Truy Cập
Gán nhãn đúng là rất quan trọng - nếu không, các trình đọc màn hình có thể đọc mọi thứ theo thứ tự ngẫu nhiên.
- Sử dụng kiểu tiêu đề, không chỉ là văn bản in đậm
- Thêm văn bản alt cho hình ảnh
- Đảm bảo các trường biểu mẫu được gán nhãn
- Kiểm tra thứ tự đọc
✅ Truy Cập Truyền Thông Xã Hội
- Văn bản alt cho hình ảnh
- Phụ đề video (đừng chỉ dựa vào phụ đề tự động)
- Hashtags CamelCase (
#InclusiveDesign) - Tránh văn bản trong hình ảnh (hoặc thêm mô tả)
- Giới hạn việc sử dụng emoji (các trình đọc màn hình đọc từng emoji!)
👉 Điểm nội dung: Truy cập không chỉ là công việc của nhà phát triển - đó là một thói quen giao tiếp.
Kết Luận
Các câu hỏi phỏng vấn về truy cập không phải là về trivia - mà là về cách ứng viên suy nghĩ, ưu tiên và hợp tác.
Một nhà phát triển frontend tập trung vào truy cập mạnh mẽ:
- Nhìn nhận truy cập là có lợi cho tất cả mọi người
- Biết cả thực hiện kỹ thuật và nguyên tắc thiết kế
- Bảo vệ truy cập ngay cả khi nó không phải là ưu tiên của khách hàng
- Thực hành thói quen bao gồm trong mã, tài liệu và phương tiện
⚡ Nếu bạn đang chuẩn bị cho một cuộc phỏng vấn frontend, hãy nhớ: Truy cập không phải là một ô kiểm - đó là một tư duy.
