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 trang web bán hàng cực kỳ đẹp: màu sắc hài hòa, font chữ thanh lịch, animation mượt mà. Bạn tự hào gửi cho khách hàng. Nhưng có một sự thật phũ phàng: cứ khoảng 6-7 người dùng truy cập trang của bạn thì có 1 người không thể dùng được nó một cách trọn vẹn. Họ là người khiếm thị dùng trình đọc màn hình, người lớn tuổi mắt kém, người bị run tay không click chuột chính xác được, hay đơn giản là một anh shipper đang đứng giữa nắng chói chang Sài Gòn cố đọc màn hình điện thoại.
Accessibility (viết tắt là a11y — vì giữa chữ "a" và chữ "y" có 11 ký tự) là nghệ thuật và kỹ thuật làm cho sản phẩm web ai cũng dùng được, bất kể họ là ai, dùng thiết bị gì, hay có khả năng thể chất ra sao.
Nhiều bạn designer Việt Nam vẫn nghĩ a11y là "việc của dev" hoặc "tính năng phụ làm sau cũng được". Đây là một quan niệm sai lầm tốn kém. Phần lớn các quyết định ảnh hưởng đến accessibility — màu sắc, độ tương phản, kích thước nút bấm, thứ tự đọc — đều được "đóng đinh" ngay từ khâu thiết kế. Nếu bạn vẽ sai từ Figma, dev có giỏi đến mấy cũng khó cứu. Đó là lý do bài này nằm trong khóa học thiết kế, chứ không phải khóa lập trình.
Trong bài này, chúng ta sẽ đi qua nền tảng a11y: ai cần nó, bốn nhóm khuyết tật chính, các nguyên tắc POUR của tiêu chuẩn WCAG, và cách bạn — một web designer — đưa tư duy accessibility vào quy trình làm việc hằng ngày. (Lưu ý: phần tương phản màu WCAG đã được học sâu ở Bài 6, phần focus state và điều hướng bàn phím sẽ học kỹ ở Bài 43; ở đây chúng ta xây dựng bức tranh tổng thể.)
Khái niệm cốt lõi
A11y là gì và không phải là gì
Accessibility nghĩa là loại bỏ các rào cản khiến một số người không thể tiếp cận, hiểu, điều hướng và tương tác với web. Nó không phải là tạo một "phiên bản dành cho người khuyết tật" riêng biệt — đó là tư duy lỗi thời. Một sản phẩm tốt là sản phẩm vốn dĩ đã accessible cho tất cả mọi người trong cùng một giao diện.
Một điểm quan trọng cần khắc cốt ghi tâm: accessibility tốt giúp ích cho TẤT CẢ mọi người, không chỉ người khuyết tật. Đây gọi là hiệu ứng "curb-cut" (vỉa hè hạ thấp). Cái dốc hạ thấp ở góc vỉa hè ban đầu được làm cho xe lăn, nhưng cuối cùng người đẩy xe đẩy em bé, người kéo vali, người giao hàng đều hưởng lợi. Trên web cũng vậy: chữ to dễ đọc giúp cả người mắt kém lẫn người đang đi xe bus xóc nảy; phụ đề video giúp cả người điếc lẫn người đang ở văn phòng không tiện bật loa.
Ai cần accessibility? — Bốn nhóm khuyết tật
Theo Tổ chức Y tế Thế giới (WHO), khoảng 15-16% dân số toàn cầu sống với một dạng khuyết tật nào đó — tức hơn 1 tỷ người. Tại Việt Nam, theo Tổng cục Thống kê, có khoảng 6,2 triệu người khuyết tật (chiếm hơn 7% dân số từ 2 tuổi trở lên), chưa kể dân số đang già hóa nhanh khiến nhóm người suy giảm thị lực, thính lực ngày càng đông.
Khuyết tật chia thành bốn nhóm chính mà designer cần ghi nhớ:
1. Thị giác (Visual) — Từ mù hoàn toàn, mù màu (khoảng 8% nam giới bị mù màu đỏ-lục), đến thị lực kém, đục thủy tinh thể. Người mù dùng screen reader (trình đọc màn hình) như NVDA, JAWS, hoặc VoiceOver để "nghe" trang web. Người mù màu cần bạn đừng dùng "màu đỏ/xanh" làm dấu hiệu duy nhất.
2. Vận động (Motor) — Người không dùng được chuột vì liệt, run tay (Parkinson), cụt chi, hoặc tạm thời như bị gãy tay. Họ điều hướng bằng bàn phím, công tắc, hoặc giọng nói. Vì vậy mọi thứ click được phải dùng được bằng phím Tab và Enter.
3. Nhận thức (Cognitive) — Khó tập trung (ADHD), khó đọc (dyslexia), suy giảm trí nhớ, tự kỷ. Nhóm này cần nội dung rõ ràng, bố cục nhất quán, không bị animation chớp nháy gây phân tâm hoặc kích động.
4. Thính giác (Hearing) — Người điếc hoặc nghễnh ngãng. Họ cần phụ đề (caption) cho video, transcript cho podcast, và không bị phụ thuộc vào tín hiệu âm thanh đơn thuần.
Đừng quên khuyết tật tạm thời và tình huống: anh bạn vừa mổ mắt, chị đang bế con nên chỉ rảnh một tay, người dùng điện thoại dưới nắng gắt làm màn hình lóa. Thiết kế accessible phục vụ tất cả những hoàn cảnh này.
WCAG và nguyên tắc POUR
Tiêu chuẩn vàng của accessibility là WCAG (Web Content Accessibility Guidelines) do tổ chức W3C ban hành. Phiên bản hiện hành là WCAG 2.2, và 3.0 đang được phát triển. WCAG có ba mức tuân thủ: A (tối thiểu), AA (mục tiêu thực tế mà hầu hết tổ chức và luật pháp yêu cầu), và AAA (lý tưởng, khó đạt toàn diện). Trong thực tế công việc, bạn nhắm tới AA.
WCAG được tổ chức quanh bốn nguyên tắc nền tảng, viết tắt là POUR:
- P — Perceivable (Cảm nhận được): Người dùng phải nhận biết được nội dung bằng giác quan họ có. Ví dụ: ảnh phải có
alt textđể screen reader đọc; video phải có phụ đề; màu chữ phải đủ tương phản với nền. - O — Operable (Vận hành được): Mọi chức năng phải dùng được bằng nhiều cách, đặc biệt là bàn phím. Không được có "bẫy" buộc phải dùng chuột. Nút bấm phải đủ to để ngón tay run vẫn chạm trúng (tối thiểu 24x24px theo WCAG 2.2, lý tưởng 44x44px).
- U — Understandable (Hiểu được): Nội dung và cách vận hành phải dễ đoán. Form báo lỗi rõ ràng "Email thiếu dấu @" thay vì "Lỗi 0x04". Bố cục nhất quán giữa các trang.
- R — Robust (Bền vững): Code phải đúng chuẩn để mọi công nghệ hỗ trợ (assistive technology) đọc được. Đây là lúc HTML semantic (Bài 19) phát huy: dùng đúng thẻ
<button>,<nav>,<h1>thay vì nhồi<div>khắp nơi.
Vai trò của designer trong a11y
Là designer, bạn nắm giữ những quyết định a11y quan trọng nhất: chọn cặp màu đủ tương phản, đặt kích thước target chạm tay, thiết kế focus state nhìn thấy rõ, sắp xếp thứ tự đọc hợp lý (visual hierarchy = reading order cho screen reader), và viết microcopy báo lỗi dễ hiểu. Khi bàn giao cho dev (Bài 55), bạn cần ghi chú rõ alt text, label cho icon, và thứ tự tab.
Tình huống thực tế
Ví dụ 1 — Tiki và bài học về nút "đặt hàng" mù màu
Một sàn thương mại điện tử lớn (gọi là sàn "T" cho ví dụ) từng có nút trạng thái đơn hàng chỉ phân biệt bằng màu: chấm xanh lá = "đã giao", chấm đỏ = "đã hủy", không có chữ hay icon kèm theo. Với khoảng 8% nam giới mù màu đỏ-lục, hai chấm này gần như giống hệt nhau. Một khách hàng lớn tuổi gọi tổng đài phàn nàn vì "không biết đơn nào đã hủy", dẫn tới đặt trùng đơn.
Diễn giải: Đây là vi phạm tiêu chí WCAG "Use of Color" — màu sắc không được là phương tiện duy nhất truyền tải thông tin. Đội thiết kế đã sửa bằng cách thêm icon dấu tích vào trạng thái "đã giao", dấu X vào "đã hủy", và nhãn chữ rõ ràng bên cạnh chấm màu.
Bài học: Mỗi khi bạn định dùng màu để báo trạng thái (xanh = đúng, đỏ = sai), hãy tự hỏi: "Nếu in trang này ra giấy đen trắng, người ta còn phân biệt được không?". Nếu không, hãy thêm icon hoặc chữ.
Ví dụ 2 — Quán cà phê khởi nghiệp và vụ kiện ADA bất ngờ
Một chuỗi cà phê Việt mở rộng sang thị trường Mỹ, làm website đặt hàng online cho chi nhánh ở California. Website đẹp nhưng menu hình ảnh không có alt text, và toàn bộ nút đặt hàng làm bằng <div> không dùng được bằng bàn phím. Một khách hàng khiếm thị ở Mỹ không đặt được hàng và gửi khiếu nại theo ADA (Americans with Disabilities Act). Tại Mỹ, có hàng nghìn vụ kiện web-accessibility mỗi năm, và chi phí dàn xếp thường từ vài nghìn đến hàng chục nghìn USD, chưa kể tổn hại danh tiếng.
Diễn giải: Accessibility không còn là chuyện "làm cho có thiện chí". EU Accessibility Act có hiệu lực từ tháng 6/2025 bắt buộc nhiều sản phẩm số (e-commerce, ngân hàng, vé...) bán tại EU phải accessible. Doanh nghiệp Việt xuất khẩu dịch vụ số ra Mỹ và EU buộc phải tuân thủ.
Bài học: Nếu sản phẩm của bạn có tham vọng vươn ra thị trường quốc tế, hãy đưa a11y vào từ ngày đầu. Sửa sau khi bị kiện đắt gấp nhiều lần làm đúng từ đầu.
Ví dụ 3 — Cổng dịch vụ công và người dùng lớn tuổi
Một cổng đăng ký dịch vụ công trực tuyến ở Việt Nam có form khai báo với chữ xám nhạt cỡ 12px trên nền trắng, và thông báo lỗi chỉ hiện viền đỏ quanh ô input mà không có chữ giải thích. Nhóm người dùng lớn tuổi — đối tượng chính của nhiều thủ tục hành chính — liên tục điền sai và bỏ cuộc giữa chừng. Tỷ lệ hoàn thành form rất thấp.
Diễn giải: Ở đây có hai vấn đề a11y: tương phản màu thấp (vi phạm Perceivable) và báo lỗi không hiểu được (vi phạm Understandable). Sau khi tăng cỡ chữ lên 16px, dùng màu chữ đậm đủ contrast, và thêm dòng chữ "Số CMND phải có 9 hoặc 12 chữ số" ngay dưới ô lỗi, tỷ lệ hoàn thành tăng rõ rệt.
Bài học: Accessibility và tỷ lệ chuyển đổi (conversion) đi cùng nhau. Làm form dễ dùng cho người mắt kém cũng là làm form dễ dùng cho tất cả, và trực tiếp tăng số người hoàn thành.
Hướng dẫn từng bước
Đây là quy trình để bạn lồng a11y vào công việc thiết kế, từ Figma đến bàn giao:
Bước 1 — Kiểm tra tương phản màu ngay khi chọn palette. Trước khi yêu cầu cặp màu chữ/nền nào, chạy qua công cụ contrast checker (như WebAIM Contrast Checker hoặc plugin Stark trong Figma). Mục tiêu: tỷ lệ tối thiểu 4.5:1 cho chữ thường, 3:1 cho chữ lớn (≥24px hoặc ≥18.66px in đậm). (Chi tiết đã học ở Bài 6.)
Bước 2 — Đừng để màu đứng một mình. Mọi thông tin truyền tải bằng màu (trạng thái, lỗi, link) phải có thêm dấu hiệu thứ hai: icon, gạch chân, chữ, hoặc pattern.
Bước 3 — Thiết kế focus state nhìn thấy được. Mọi phần tử tương tác (nút, link, ô input) cần có trạng thái focus rõ ràng — thường là viền đậm hoặc outline 2px. Đừng bao giờ xóa outline mà không thay bằng thứ gì khác. (Học sâu ở Bài 43.)
Bước 4 — Đặt kích thước target chạm tay đủ lớn. Nút và vùng click tối thiểu 44x44px trên mobile để ngón tay (kể cả người run tay) chạm trúng. Khoảng cách giữa các target cũng cần đủ rộng.
Bước 5 — Ghi chú alt text và label khi bàn giao. Trong Figma, ghi rõ mỗi ảnh nên có alt text gì, mỗi icon-button cần label gì cho screen reader (ví dụ icon kính lúp = "Tìm kiếm"). Icon trang trí thuần túy thì ghi "alt rỗng".
Bước 6 — Đảm bảo thứ tự đọc hợp lý. Visual hierarchy của bạn chính là thứ tự screen reader sẽ đọc. Sắp xếp sao cho đọc từ trên xuống, trái qua phải vẫn có nghĩa.
Bước 7 — Cung cấp text thay thế cho media. Video cần phụ đề, audio cần transcript. Ghi chú điều này trong spec.
Bước 8 — Tự kiểm tra bằng bàn phím và screen reader. Mở prototype/site, cất chuột đi, chỉ dùng phím Tab/Enter/mũi tên xem có thao tác được hết không. Bật VoiceOver (Mac: Cmd+F5) hoặc NVDA (Windows, miễn phí) nghe thử trang đọc lên như thế nào — đây là trải nghiệm "mở mắt" nhất.
Lỗi thường gặp & mẹo
Lỗi 1 — Coi a11y là việc làm sau cùng. Nhiều team định "ship trước, fix accessibility sau". Thực tế việc fix sau tốn gấp 3-5 lần và thường bị bỏ quên. Mẹo: đưa checklist a11y vào ngay bước review thiết kế, như một phần của định nghĩa "xong".
Lỗi 2 — Placeholder thay cho label. Dùng chữ mờ trong ô input làm nhãn (ví dụ ô trống chỉ ghi "Email"). Khi người dùng gõ vào, nhãn biến mất, người mắt kém và screen reader mất ngữ cảnh. Mẹo: luôn có <label> thật, đặt phía trên ô input.
Lỗi 3 — Dùng <div> làm nút bấm. Một <div onclick> nhìn giống nút nhưng screen reader không biết nó là nút, và bàn phím không tab tới được. Mẹo: yêu cầu dev dùng <button> hoặc <a> thật. Bạn thiết kế cũng nên gọi đúng tên component.
Lỗi 4 — Tương phản thấp vì "trông sang". Chữ xám nhạt trên nền trắng nhìn tinh tế trên màn hình Macbook của bạn, nhưng tệ trên màn hình rẻ ngoài nắng. Mẹo: đừng tin mắt mình, hãy tin contrast checker.
Lỗi 5 — Animation tự động chạy không tắt được. Carousel chớp nháy, video tự phát có thể gây khó chịu hoặc nguy hiểm cho người nhạy cảm với chuyển động. Mẹo: tôn trọng prefers-reduced-motion và luôn có nút dừng.
Mẹo vàng: Thử "test mù" — nhờ một người không phải dân thiết kế, hoặc người lớn tuổi trong gia đình, dùng thử sản phẩm. Nếu họ vấp ở đâu, đó thường là điểm a11y yếu.
Bài tập thực hành
- Audit nhanh một website Việt: Chọn một trang web bạn hay dùng (báo điện tử, sàn TMĐT, ngân hàng). Mở nó, cất chuột, chỉ dùng bàn phím Tab/Enter để duyệt. Ghi lại 3 chỗ bị kẹt hoặc không thấy focus ở đâu.
- Kiểm tra màu sắc: Lấy palette một dự án của bạn, chạy qua WebAIM Contrast Checker. Liệt kê cặp màu nào KHÔNG đạt 4.5:1 và đề xuất màu thay thế.
- Sửa nút trạng thái: Thiết kế lại một bộ trạng thái đơn hàng (đang xử lý / đã giao / đã hủy) sao cho người mù màu vẫn phân biệt được — không chỉ dựa vào màu.
- Trải nghiệm screen reader: Bật VoiceOver (Mac) hoặc tải NVDA (Windows, miễn phí), nhắm mắt và nghe nó đọc trang chủ một website. Viết một đoạn ngắn về cảm giác của bạn và một điều bạn sẽ thiết kế khác đi.
- Viết microcopy lỗi: Lấy 3 thông báo lỗi mơ hồ bạn từng gặp ("Có lỗi xảy ra", "Dữ liệu không hợp lệ") và viết lại cho rõ ràng, cụ thể, hướng dẫn người dùng cách sửa.
Tóm tắt
Accessibility (a11y) là việc đảm bảo mọi người — bất kể khả năng thể chất, thiết bị hay hoàn cảnh — đều dùng được sản phẩm web của bạn. Khoảng 15% dân số thế giới và hơn 6 triệu người Việt Nam có khuyết tật, chưa kể nhóm khuyết tật tạm thời và tình huống mà tất cả chúng ta đều rơi vào lúc này lúc khác.
Bốn nhóm khuyết tật cần nhớ là thị giác, vận động, nhận thức và thính giác. Tiêu chuẩn WCAG (nhắm mức AA) xoay quanh bốn nguyên tắc POUR: Perceivable, Operable, Understandable, Robust. Về mặt pháp lý, ADA ở Mỹ và EU Accessibility Act (hiệu lực 6/2025) khiến a11y trở thành yêu cầu bắt buộc, không còn là tùy chọn.
Quan trọng nhất: là designer, bạn quyết định phần lớn số phận a11y của sản phẩm ngay từ Figma — qua màu sắc, độ tương phản, kích thước target, focus state, thứ tự đọc và microcopy. Accessibility tốt không chỉ phục vụ người khuyết tật mà nâng trải nghiệm cho tất cả mọi người, đồng thời cải thiện SEO và tỷ lệ chuyển đổi. Hãy biến nó thành thói quen, không phải việc vá lỗi sau cùng. Ở các bài tiếp theo, chúng ta sẽ đào sâu vào điều hướng bàn phím và focus state (Bài 43) để hoàn thiện bộ kỹ năng a11y của bạn.