Mở đầu — vì sao bài này quan trọng
Hãy tưởng tượng bạn vừa thiết kế xong một website bán hàng đẹp lung linh: màu sắc hài hòa, font chữ tinh tế, hiệu ứng mượt mà. Bạn tự hào gửi cho sếp duyệt. Rồi một ngày, một khách hàng khiếm thị gọi điện phàn nàn rằng họ không thể hoàn tất đơn hàng vì trình đọc màn hình của họ đọc nút "Thanh toán" thành "button button button" — vô nghĩa. Một khách hàng khác lớn tuổi email rằng chữ quá nhỏ, quá nhạt, họ không đọc nổi. Và bạn nhận ra: sản phẩm đẹp của bạn đang loại bỏ một lượng lớn người dùng thật sự muốn mua hàng.
Đó chính là lý do Accessibility (khả năng tiếp cận, thường viết tắt là a11y — vì giữa chữ "a" và "y" có 11 ký tự) tồn tại. Đây là bài học nền tảng, mở đầu cho cả một hành trình dài. Trước khi bạn học về màu sắc, bàn phím, trình đọc màn hình hay ARIA ở các bài sau, bạn cần hiểu bức tranh tổng thể: Accessibility là gì, tại sao nó quan trọng, ai được hưởng lợi, và vì sao nó không phải là "tính năng thêm vào cho vui" mà là một phần cốt lõi của thiết kế chuyên nghiệp.
Nếu bạn nắm vững tư duy trong bài này, mọi kỹ thuật cụ thể sau này sẽ trở nên logic và dễ tiếp thu hơn rất nhiều. Ngược lại, nếu bỏ qua, bạn sẽ chỉ học kỹ thuật một cách máy móc mà không hiểu "tại sao". Vậy nên hãy cùng tôi đi thật chậm và chắc ở bài đầu tiên này.
Khái niệm cốt lõi
Accessibility thực sự là gì?
Nói đơn giản, Accessibility là việc thiết kế sản phẩm số (website, app) sao cho càng nhiều người càng có thể sử dụng được, bất kể họ có khiếm khuyết về thị giác, thính giác, vận động, hay nhận thức hay không.
Một điểm quan trọng cần khắc sâu ngay từ đầu: Accessibility không chỉ dành cho người khuyết tật vĩnh viễn. Đây là hiểu lầm phổ biến nhất. Trên thực tế, khả năng tiếp cận phục vụ cho ba nhóm tình huống:
- Khuyết tật vĩnh viễn (permanent): người mù một mắt, người cụt tay, người điếc.
- Khuyết tật tạm thời (temporary): người bị gãy tay đang bó bột, người vừa phẫu thuật mắt, người bị viêm kết mạc.
- Khuyết tật tình huống (situational): người mẹ đang bế con nên chỉ có một tay để thao tác điện thoại, người đang đi ngoài nắng gắt nhìn màn hình bị chói, người ở nơi ồn ào không nghe được video nên cần phụ đề.
Con số biết nói: quy mô thực sự
Theo Tổ chức Y tế Thế giới (WHO), khoảng 1,3 tỷ người — tức xấp xỉ 15-16% dân số thế giới — đang sống với một dạng khuyết tật đáng kể nào đó. Con số này lớn hơn dân số của cả Trung Quốc. Nếu bỏ qua nhóm này, bạn đang tự tay đóng cửa với 1/6 khách hàng tiềm năng.
Riêng tại Việt Nam, theo số liệu của Tổng cục Thống kê, có hơn 7 triệu người khuyết tật (chiếm khoảng 7% dân số từ 2 tuổi trở lên). Cộng thêm dân số đang già hóa nhanh — người cao tuổi thường suy giảm thị lực, thính lực và khả năng vận động tinh — thì thị trường cần accessibility ở Việt Nam là cực kỳ lớn và đang tăng.
Với người làm nghề Design, đây không phải là câu chuyện từ thiện. Đây là câu chuyện thị trường, doanh thu và trách nhiệm nghề nghiệp.
Bốn khía cạnh chính của accessibility
Để dễ hình dung, hãy nhớ rằng khuyết tật ảnh hưởng đến việc dùng web theo bốn nhóm chính. Ở các bài sau bạn sẽ đi sâu từng nhóm, còn bây giờ chỉ cần nắm tổng quan:
- Thị giác (Visual): người mù hoàn toàn dùng trình đọc màn hình, người nhìn kém cần phóng to chữ, người mù màu không phân biệt được đỏ/xanh.
- Thính giác (Auditory): người điếc hoặc nghe kém cần phụ đề và bản ghi văn bản cho nội dung âm thanh.
- Vận động (Motor): người không dùng được chuột, chỉ dùng bàn phím hoặc thiết bị hỗ trợ đặc biệt.
- Nhận thức (Cognitive): người khó tập trung, khó đọc, khó ghi nhớ — cần ngôn ngữ đơn giản, bố cục rõ ràng.
WCAG — bộ tiêu chuẩn "kim chỉ nam"
Bạn sẽ nghe đi nghe lại một cái tên xuyên suốt khóa học: WCAG (Web Content Accessibility Guidelines — Hướng dẫn về Khả năng Tiếp cận Nội dung Web). Đây là bộ tiêu chuẩn quốc tế do tổ chức W3C ban hành, được xem như "luật chơi chung" của cả ngành.
WCAG có ba cấp độ tuân thủ: A (tối thiểu), AA (mức mà đa số luật pháp và doanh nghiệp yêu cầu), và AAA (cao nhất, khó đạt toàn diện). Trong thực tế công việc, mục tiêu bạn nên nhắm tới hầu như luôn là mức AA. Bài này chỉ cần bạn biết WCAG tồn tại và AA là chuẩn mực phổ biến — cấu trúc chi tiết của nó sẽ được mổ xẻ ở các bài về POUR và WCAG sau này.
Ba lý do lớn để làm accessibility
Tôi thường tóm gọn động lực làm accessibility thành ba trụ cột để học viên dễ nhớ:
1. Đạo đức và con người: Web là một tiện ích công cộng của thế kỷ 21. Chính Tim Berners-Lee — cha đẻ của World Wide Web — từng nói: "Sức mạnh của Web nằm ở tính phổ quát của nó. Việc mọi người đều truy cập được, bất kể khuyết tật, là một khía cạnh thiết yếu." Loại trừ ai đó khỏi ngân hàng, y tế, giáo dục trực tuyến là một vấn đề công bằng xã hội.
2. Pháp lý: Ngày càng nhiều quốc gia luật hóa accessibility. Ở Mỹ có ADA (Americans with Disabilities Act) và Section 508. Ở châu Âu, European Accessibility Act (EAA) chính thức có hiệu lực từ tháng 6/2025, buộc rất nhiều dịch vụ số (ngân hàng, thương mại điện tử, giao thông...) phải đạt chuẩn nếu muốn hoạt động tại thị trường EU. Doanh nghiệp Việt Nam xuất khẩu dịch vụ số ra nước ngoài chắc chắn sẽ bị ràng buộc bởi những luật này.
3. Kinh doanh và UX: Đây là điểm nhiều người bất ngờ nhất — accessibility làm cho sản phẩm tốt hơn cho tất cả mọi người, không riêng người khuyết tật. Chú thích alt text giúp Google SEO tốt hơn. Cấu trúc heading rõ ràng giúp mọi người đọc lướt nhanh hơn. Độ tương phản màu cao giúp người bình thường đọc dễ dưới nắng. Đây gọi là hiệu ứng lề đường (curb-cut effect): những đoạn dốc vỉa hè vốn làm cho xe lăn, nhưng cuối cùng lại giúp cả người kéo vali, đẩy xe nôi, giao hàng.
Tình huống thực tế
Ví dụ 1: Target và vụ kiện 6 triệu đô
Đây là câu chuyện kinh điển trong ngành. Năm 2006, Liên đoàn Người mù Quốc gia Hoa Kỳ kiện chuỗi bán lẻ khổng lồ Target vì website của họ không dùng được với trình đọc màn hình: các nút không có nhãn, hình ảnh không có alt text, không thao tác được bằng bàn phím. Người khiếm thị không thể mua sắm online. Vụ kiện kéo dài và cuối cùng năm 2008 Target phải dàn xếp 6 triệu USD tiền bồi thường, cộng thêm chi phí sửa lại toàn bộ website và bị giám sát tuân thủ trong nhiều năm.
Bài học rút ra: Sửa accessibility sau khi bị kiện tốn kém hơn gấp nhiều lần so với làm đúng ngay từ đầu. Một dòng alt text bị bỏ quên có thể trở thành một khoản chi hàng triệu đô. Accessibility không phải chi phí — nó là bảo hiểm rủi ro.
Ví dụ 2: Ngân hàng số Việt Nam và khách hàng khiếm thị
Giả sử một ngân hàng số tại Việt Nam — ta gọi là "VietBank Digital" — ra mắt app chuyển tiền mới với giao diện rất hiện đại: nút bấm dạng biểu tượng không có chữ, xác nhận giao dịch bằng màu (nút xanh là đồng ý, nút xám là hủy), và mã OTP hiển thị trong 60 giây rồi tự biến mất.
Vấn đề nảy sinh: một khách hàng khiếm thị dùng VoiceOver (trình đọc màn hình của iPhone) không biết nút nào để bấm vì icon không có nhãn. Một khách hàng lớn tuổi bị mù màu không phân biệt được nút xanh và nút xám nên bấm nhầm. Và một khách hàng thao tác chậm không kịp nhập OTP trong 60 giây nên bị khóa giao dịch. Kết quả: tỷ lệ bỏ dở giao dịch tăng, tổng đài quá tải cuộc gọi phàn nàn, và uy tín thương hiệu bị ảnh hưởng.
Bài học rút ra: Với dịch vụ tài chính — nơi mà sự độc lập và riêng tư đặc biệt quan trọng (không ai muốn nhờ người khác nhập giúp mật khẩu ngân hàng) — accessibility trực tiếp quyết định người dùng có tin tưởng và ở lại hay không. Một app không tiếp cận được đồng nghĩa với việc đẩy khách hàng sang đối thủ.
Ví dụ 3: Phụ đề và curb-cut effect của một nền tảng học trực tuyến
Một nền tảng học trực tuyến (giống chính nền tảng bạn đang học đây) quyết định thêm phụ đề cho toàn bộ video bài giảng, ban đầu chỉ để phục vụ học viên khiếm thính. Sau ba tháng, đội ngũ phân tích dữ liệu phát hiện điều thú vị: hơn 60% lượt xem phụ đề đến từ người nghe bình thường — họ học trên xe buýt không tiện bật loa, học ban đêm sợ đánh thức người nhà, hoặc là người nước ngoài đang học tiếng Việt cần đọc kèm để hiểu. Thời gian xem trung bình mỗi video tăng lên, và nội dung có phụ đề cũng được Google lập chỉ mục tốt hơn nên lượng truy cập tự nhiên tăng.
Bài học rút ra: Đây chính là curb-cut effect trong thực tế. Tính năng làm cho một nhóm nhỏ lại mang lợi ích cho số đông. Khi bạn thuyết phục sếp đầu tư vào accessibility, hãy dùng chính lập luận này — nó không chỉ là "làm điều tốt" mà còn là quyết định kinh doanh khôn ngoan.
Hướng dẫn từng bước
Ở bài nền tảng này, tôi sẽ không đưa bạn vào code chi tiết (những bài sau sẽ làm điều đó). Thay vào đây là quy trình tư duy để bạn bắt đầu tiếp cận accessibility một cách đúng đắn ngay từ hôm nay:
- Thay đổi câu hỏi trong đầu. Thay vì hỏi "Trông có đẹp không?", hãy tập thói quen hỏi thêm: "Ai có thể bị loại khỏi việc dùng sản phẩm này?". Chỉ riêng việc đặt câu hỏi này thôi đã thay đổi 50% cách bạn thiết kế.
- Nhận diện phổ người dùng của sản phẩm bạn đang làm. Liệt kê ra: người dùng của bạn có thể dùng trình đọc màn hình không? Có người lớn tuổi không? Họ dùng trong hoàn cảnh nào (ngoài trời, trên xe, một tay)? Việc này giúp accessibility trở nên cụ thể chứ không trừu tượng.
- Làm quen với một công cụ kiểm tra nhanh. Cài đặt tiện ích mở rộng trình duyệt như axe DevTools hoặc WAVE (các bài sau sẽ hướng dẫn kỹ). Chạy thử trên một trang web bất kỳ để thấy nó liệt kê lỗi accessibility ra sao. Bạn sẽ choáng khi thấy ngay cả những website lớn cũng đầy lỗi.
- Thử "rút phích chuột". Cất con chuột đi và thử dùng một website chỉ bằng phím Tab và Enter. Bạn có đến được nút "Mua hàng" không? Bạn có thấy được mình đang đứng ở đâu trên trang không? Đây là bài kiểm tra đơn giản nhất nhưng bộc lộ rất nhiều vấn đề.
- Ghi nhớ mục tiêu WCAG AA. Đặt nó làm ngôi sao Bắc Đẩu cho mọi dự án. Bạn chưa cần thuộc từng điều khoản, chỉ cần biết đích đến là ở đó.
- Đưa accessibility vào từ giai đoạn thiết kế, không phải giai đoạn sửa lỗi. Nguyên tắc "shift-left" — càng sớm càng rẻ. Thảo luận accessibility ngay khi vẽ wireframe, không đợi đến khi sản phẩm đã lên production.
Lỗi thường gặp & mẹo
Lỗi 1: Coi accessibility là việc làm sau cùng. Rất nhiều đội chỉ nghĩ đến a11y khi sắp release hoặc khi bị khách hàng phàn nàn. Lúc đó chi phí sửa đắt gấp nhiều lần. Mẹo: Hãy đưa accessibility vào checklist Definition of Done ngay từ đầu dự án.
Lỗi 2: Nghĩ rằng "khách hàng của mình không có người khuyết tật". Đây là ngộ nhận nguy hiểm. Khuyết tật tình huống và tạm thời ảnh hưởng đến gần như tất cả mọi người vào lúc này hay lúc khác. Bạn không bao giờ biết chính xác ai đang dùng sản phẩm của mình trong hoàn cảnh nào. Mẹo: Nhớ đến Persona Spectrum — một tay, chói nắng, ồn ào.
Lỗi 3: Tin rằng chỉ cần một plugin "overlay" là xong. Trên thị trường có những công cụ quảng cáo "cài một dòng code là website accessible ngay". Đây gần như luôn là lời hứa sai. Cộng đồng người khuyết tật phản đối mạnh mẽ các overlay này vì chúng thường làm trải nghiệm tệ hơn và không xử lý được gốc rễ vấn đề. Mẹo: Không có đường tắt — accessibility phải được xây từ nền móng.
Lỗi 4: Nhầm accessibility với "làm cho người mù". Accessibility rộng hơn thế rất nhiều: thính giác, vận động, nhận thức. Mẹo: Luôn nghĩ đến cả bốn nhóm khuyết tật.
Mẹo vàng: Cách nhanh nhất để "thấm" accessibility là trải nghiệm chính nó. Hãy bật trình đọc màn hình có sẵn trên máy (VoiceOver trên Mac, Narrator trên Windows, TalkBack trên Android) và thử duyệt web trong 10 phút với mắt nhắm. Bạn sẽ hiểu ngay tại sao mọi kỹ thuật trong khóa học này lại quan trọng đến vậy.
Bài tập thực hành
- Kiểm toán nhanh một website Việt Nam. Chọn một website bạn hay dùng (ví dụ một trang thương mại điện tử hoặc app ngân hàng). Cài axe DevTools hoặc WAVE, chạy kiểm tra và ghi lại số lỗi accessibility mà nó báo. Viết 3-4 câu nhận xét về loại lỗi phổ biến nhất.
- Thử thách "không chuột". Chọn một website bất kỳ và cố gắng hoàn thành một tác vụ (ví dụ: tìm kiếm một sản phẩm và thêm vào giỏ hàng) chỉ dùng bàn phím. Ghi lại những chỗ bạn bị "kẹt" không thao tác được. Đây chính là những chỗ người khuyết tật vận động cũng sẽ bị kẹt.
- Lập bảng Persona Spectrum. Với một sản phẩm bạn đang làm hoặc muốn làm, hãy kẻ một bảng ba cột: khuyết tật vĩnh viễn / tạm thời / tình huống, và điền vào ít nhất hai ví dụ người dùng thực tế cho mỗi cột. Việc này rèn thói quen nghĩ về phổ người dùng.
- Viết một đoạn thuyết phục sếp. Giả sử sếp bạn nói "Accessibility tốn thời gian, để sau đi". Hãy viết một đoạn 150 từ dùng ba trụ cột (đạo đức, pháp lý, kinh doanh) và ít nhất một con số cụ thể để thuyết phục họ đầu tư ngay từ đầu.
Tóm tắt
Accessibility (a11y) là việc thiết kế sản phẩm số để càng nhiều người càng dùng được, bất kể khuyết tật về thị giác, thính giác, vận động hay nhận thức. Đây không phải là tính năng phụ hay việc làm từ thiện — nó là một phần cốt lõi của thiết kế chuyên nghiệp.
Những điểm cần khắc sâu sau bài này:
- Khoảng 15-16% dân số thế giới (1,3 tỷ người) và hơn 7 triệu người Việt Nam sống với khuyết tật — một thị trường khổng lồ không thể bỏ qua.
- Accessibility phục vụ cả khuyết tật vĩnh viễn, tạm thời và tình huống — nghĩa là gần như tất cả mọi người đều hưởng lợi vào lúc này hay lúc khác (Persona Spectrum).
- Ba trụ cột động lực: đạo đức, pháp lý (ADA, EAA), và kinh doanh/UX.
- Curb-cut effect: cải tiến cho nhóm nhỏ mang lợi cho số đông, như câu chuyện phụ đề video.
- WCAG mức AA là chuẩn mực thực tế bạn cần nhắm tới xuyên suốt khóa học.
- Nguyên tắc quan trọng nhất: làm accessibility từ đầu luôn rẻ hơn sửa về sau — bài học 6 triệu đô của Target là minh chứng.