Website dễ tiếp cận (accessibility): giúp mọi người dùng được, kể cả người khiếm thị, người lớn tuổi

Một người mẹ ngoài 60 tuổi muốn đặt lịch khám cho mình nhưng chữ trên website quá nhỏ, màu xám nhạt trên nền trắng. Một người khiếm thị dùng trình đọc màn hình nghe “ảnh, ảnh, ảnh” mà không biết đó là ảnh gì. Một nhân viên văn phòng bị đau tay chỉ dùng bàn phím nhưng không thể bấm nút “Gửi” trong form.

Accessibility (khả năng tiếp cận) là thiết kế để những người này, và mọi người khác, đều dùng được website. Đây không chỉ là việc tốt, mà còn mở rộng tệp khách hàng và cải thiện trải nghiệm chung.

Accessibility là gì?

Là việc thiết kế và xây dựng website sao cho người dùng với nhiều khả năng khác nhau đều có thể nhận biết, thao tác, hiểu và sử dụng nội dung. Tiêu chuẩn quốc tế phổ biến là WCAG (Web Content Accessibility Guidelines), với các mức A, AA, AAA.

Đối tượng hưởng lợi:

• Người khiếm thị, thị lực kém, mù màu.
• Người lớn tuổi.
• Người khiếm thính.
• Người khó khăn vận động, chỉ dùng bàn phím.
• Người dùng trong điều kiện khó: nắng gắt, mạng chậm, một tay.

Vì sao website cần dễ tiếp cận?

1. Mở rộng khách hàng: người lớn tuổi là nhóm khách lớn của y tế, bảo hiểm, du lịch, bất động sản.
2. Trải nghiệm tốt hơn cho mọi người.
3. Hỗ trợ SEO: văn bản thay thế, cấu trúc tiêu đề, nhãn rõ ràng giúp Google hiểu nội dung.
4. Uy tín thương hiệu: thể hiện sự quan tâm đến mọi khách hàng.
5. Yêu cầu của đối tác quốc tế: nhiều thị trường có quy định về khả năng tiếp cận.

Những việc cơ bản cần làm

Hạng mục	Cách làm
Tương phản	Chữ thường có tỷ lệ tương phản tối thiểu 4,5:1 với nền
Cỡ chữ	Nội dung 16 px trở lên, cho phép phóng to
Ảnh	Thẻ alt mô tả ảnh có nội dung; ảnh trang trí để alt trống
Tiêu đề	Dùng H1, H2, H3 đúng thứ tự
Liên kết	Chữ liên kết có nghĩa (“Xem bảng giá” thay vì “bấm vào đây”)
Form	Mỗi ô có nhãn, thông báo lỗi rõ ràng
Bàn phím	Mọi nút, menu, form dùng được bằng phím Tab, Enter
Video	Có phụ đề, không tự phát âm thanh
Màu sắc	Không chỉ dùng màu để truyền thông tin

Dùng được bằng bàn phím

Thử bấm phím Tab trên website: có thấy đang chọn vào đâu không (viền focus)? Có mở được menu, điền được form, đóng được cửa sổ bật lên không? Nhiều giao diện ẩn viền focus vì “không đẹp”, khiến người dùng bàn phím không biết mình đang ở đâu. Nên giữ viền focus, có thể tuỳ chỉnh cho hợp thiết kế.

Văn bản thay thế cho ảnh

• Ảnh sản phẩm: mô tả sản phẩm (“Váy liền màu xanh navy, cổ chữ V”).
• Ảnh chứa chữ (banner): alt ghi lại nội dung chữ.
• Biểu tượng chức năng (kính lúp, giỏ hàng): alt hoặc nhãn “Tìm kiếm”, “Giỏ hàng”.
• Ảnh trang trí: alt trống để trình đọc màn hình bỏ qua.

Công cụ kiểm tra

• Lighthouse trong Chrome (mục Accessibility).
• WAVE của WebAIM.
• Công cụ kiểm tra độ tương phản màu.
• Trình đọc màn hình: TalkBack (Android), VoiceOver (iPhone, Mac), NVDA (Windows).

Công cụ tự động chỉ phát hiện một phần lỗi; nên thử thêm bằng bàn phím và trình đọc màn hình.

Ví dụ cải thiện cho website phòng khám

Một phòng khám có nhiều bệnh nhân lớn tuổi. Sau khi kiểm tra, website được sửa: tăng cỡ chữ nội dung lên 18 px, đổi chữ xám nhạt thành xám đậm, nút “Đặt lịch” lớn hơn, thêm nhãn cho form, thêm alt cho ảnh bác sĩ, giữ viền focus. Điểm Accessibility trên Lighthouse tăng từ 68 lên 95, và quan trọng hơn, lượt đặt lịch từ khách trên 55 tuổi tăng lên.

Lỗi thường gặp

• Chữ xám nhạt trên nền trắng.
• Ảnh không có alt hoặc alt nhồi từ khoá.
• Form chỉ có chữ gợi ý trong ô, không có nhãn.
• Nút chỉ có biểu tượng, không có nhãn.
• Cửa sổ bật lên không đóng được bằng bàn phím.
• Chặn phóng to trên điện thoại.

Checklist accessibility cơ bản

• Tương phản chữ đạt chuẩn.
• Cỡ chữ 16 px trở lên.
• Ảnh có alt phù hợp.
• Tiêu đề đúng cấp.
• Form có nhãn, lỗi rõ ràng.
• Dùng được bằng bàn phím, có viền focus.
• Video có phụ đề.

Findme hỗ trợ gì?

Findme kiểm tra và cải thiện khả năng tiếp cận: tương phản, cỡ chữ, alt, nhãn form, bàn phím, giúp website thân thiện với người lớn tuổi và mọi người dùng. Xem tối ưu website, bài website cho khách lớn tuổi và bảng giá.

Lời kết

Website dễ tiếp cận là website tôn trọng mọi khách hàng. Những cải thiện cơ bản không tốn nhiều công sức nhưng giúp nhiều người dùng được website hơn, và ai cũng được hưởng lợi từ trải nghiệm rõ ràng hơn.

Accessibility cho website bán hàng

Với website bán hàng, chú ý thêm: nút chọn size, màu có nhãn rõ (không chỉ ô màu), thông báo thêm vào giỏ được trình đọc màn hình đọc, quy trình thanh toán dùng được bằng bàn phím, mã xác thực không chỉ dựa vào hình ảnh.

Câu hỏi thường gặp

Website nhỏ có cần quan tâm accessibility không?
Có, các việc cơ bản như tương phản, cỡ chữ, alt, nhãn form đều đơn giản và mang lại lợi ích ngay.

Plugin accessibility có giải quyết hết không?
Không; các plugin thanh công cụ chỉ hỗ trợ một phần, nên sửa từ thiết kế và mã nguồn.

Accessibility có giúp SEO không?
Có gián tiếp: alt ảnh, cấu trúc tiêu đề, liên kết có nghĩa đều giúp Google hiểu nội dung.

Làm sao biết website đạt chuẩn nào?
Dùng công cụ kiểm tra kết hợp kiểm tra thủ công theo tiêu chí WCAG; Findme có thể hỗ trợ đánh giá.