Chương 5: Thiết Kế Cho Tất Cả Mọi Người

Accessibility không phải tính năng. Accessibility là bản chất của thiết kế.

Cuối hành trình, Thầy đưa An đến một ngôi đền cổ nằm giữa rừng sâu. Trên bậc thềm đá, có ba người đang ngồi: một người mù, một người chỉ có một tay, một người đang cố gắng đọc bảng hướng dẫn bằng kính lúp.

An nhìn họ rồi quay sang Thầy: “Họ đang gặp khó khăn khi dùng sản phẩm sao?”

Thầy gật đầu: “Phải. Và lỗi không phải ở họ. Lỗi ở thiết kế.”

Và An bắt đầu học bài học cuối cùng: Accessibility (A11y) – thiết kế cho tất cả mọi người.

Vì sao A11y không phải “tùy chọn” mà là trách nhiệm

Thầy chỉ vào người đầu tiên – người mù đang dùng điện thoại.

“Con thấy gì?”

“Anh ấy đang đọc bằng giọng nói.”

“Đúng. Nếu giao diện không có alt text, không có semantic HTML, không hỗ trợ screen reader – anh ấy sẽ bị loại trừ hoàn toàn.”

Thầy nói tiếp: “Con nghĩ A11y chỉ giúp người khuyết tật. Sai. A11y giúp tất cả.”

Ví dụ:

• Chữ lớn giúp người cao tuổi – cũng giúp người dùng điện thoại dưới ánh nắng
• Alt text giúp người mù – cũng giúp SEO tốt hơn
• Màu tương phản cao giúp người mù màu – cũng giúp màn hình cũ hiển thị rõ

“A11y không thêm chi phí. A11y mở rộng thị trường.”

Bài học từ người khiếm thị – khi mắt không nhìn, tai và tay sẽ dẫn lối

Thầy mời người đàn ông mù lại gần.

“Anh dùng sản phẩm như thế nào?”

Người đàn ông cầm điện thoại, bật VoiceOver, trượt ngón tay trên màn hình. Mỗi lần chạm vào phần tử, giọng máy lại đọc to: “Button – Đăng ký”, “Link – Quên mật khẩu”.

An tròn mắt: “Anh không cần nhìn màn hình?”

Người đàn ông cười: “Không. Nhưng tôi cần giao diện có thứ tự logic, có label rõ ràng, có heading đúng cấu trúc. Nếu thiếu, tôi sẽ lạc trong mê cung vô hình.”

Thầy giải thích:

• Screen reader đọc theo thứ tự DOM
• Alt text phải mô tả đúng chức năng, không phải hình ảnh
• Interactive element phải có accessible name
• Không dùng màu đơn lẻ để truyền tải thông tin

“Người khiếm thị không cần thương hại. Họ cần thiết kế đúng chuẩn.”

Bài học từ người chỉ có một tay – khi tay không đủ, giao diện phải đủ rộng

Người thứ hai – cô gái chỉ có một tay – đang cố gắng bấm một nút nhỏ ở góc màn hình.

Cô ấy thở dài: “Nút này quá nhỏ, quá xa. Tôi phải dùng hai tay hoặc đặt máy xuống bàn.”

Thầy nhìn An: “Con thấy vấn đề?”

An gật đầu: “Target size quá nhỏ.”

Thầy liệt kê nguyên lý:

• Touch target tối thiểu 44×44px (iOS) hoặc 48×48dp (Android)
• Khoảng cách giữa các target đủ xa để tránh nhầm lẫn
• Đặt nút quan trọng ở vùng dễ với tới
• Hỗ trợ gesture thay thế (vuốt thay vì chạm)
• Cho phép điều khiển bằng phím (keyboard navigation)

“Người một tay không chỉ là người khuyết tật. Còn là bà bếm trẻ, người lái xe, người đang xách đồ.”

Bài học từ người mù màu – khi mắt không phân biệt, thiết kế phải có thêm “dấu hiệu”

Người thứ ba – ông già đeo kính lúp – đang nhìn chằm chằm vào biểu đồ.

“Tôi không biết đường nào là tốt, đường nào là xấu. Chỉ toàn màu đỏ và xanh lá. Tôi không phân biệt được.”

An nhìn biểu đồ: hai đường gần như giống màu.

Thầy nói: “Đây là lỗi kinh điển: dùng màu đơn lẻ để truyền tải thông tin.”

Nguyên lý thiết kế cho người mù màu:

• Không chỉ dùng màu – thêm icon, pattern, label
• Dùng màu có độ tương phản cao (WCAG 2.1 level AA: 4.5:1 cho chữ, 3:1 cho đồ họa)
• Test với công cụ mô phỏng mù màu (Color Oracle, Stark)
• Dùng màu an toàn: xanh dương – cam – tím – xám

“Khoảng 8% nam và 0.5% nữ bị mù màu. Họ không nhìn thấy thế giới của con – trừ khi con thiết kế đúng.”

WCAG – bộ quy tắc vàng của A11y

Thầy đưa An một tấm bảng ghi 4 chữ: POUR.

“Đây là nguyên lý cốt lõi của WCAG – Web Content Accessibility Guidelines.”

P – Perceivable (Có thể nhận thức)

• Cung cấp text thay thế cho hình ảnh
• Cung cấp transcript/caption cho âm thanh/video
• Không dùng màu đơn lẻ để truyền tải
• Cho phép điều chỉnh kích thước chữ

O – Operable (Có thể vận hành)

• Tất cả chức năng đều làm được bằng bàn phím
• Cho phép đủ thời gian đọc/thao tác
• Không gây co giật, nhấp nháy
• Rõ ràng về vị trí con trỏ/focus

U – Understandable (Có thể hiểu được)

• Ngôn ngữ rõ ràng, đơn giản
• Giao diện nhất quán
• Có hướng dẫn khi cần thiết
• Có cơ chế sửa lỗi rõ ràng

R – Robust (Bền vững)

• Tương thích với trình đọc màn hình
• Code có semantic đúng (header, nav, main, button)
• Có ARIA label khi cần thiết
• Test với nhiều thiết bị hỗ trợ

“POUR không phải checklist. POUR là tư duy.”

ARIA – khi HTML không đủ, ARIA bổ sung ý nghĩa

Thầy mở laptop, chỉ vào một đoạn code:

<div role="button" tabindex="0" aria-label="Đóng popup" onclick="close()">×</div>

“Đây là nút đóng. Nhưng nó là div, không phải button. Screen reader sẽ không biết. ARIA giúp nói rõ: đây là button, có thể click, dùng để đóng.”

Nguyên tắc ARIA:

• Dùng khi HTML semantic không đủ
• Không dùng ARIA để thay thế HTML đúng
• Luôn test với screen reader thực tế
• Giữ ARIA đơn giản, đúng mục đích

“ARIA là cần cẩu. Dùng đúng thì hữu ích. Lạm dụng thì phá hỏng cả công trình.”

Bài học về “tư duy A11y” – từ checklist sang văn hóa

Sau một ngày quan sát, An hỏi: “Thưa Thầy, làm sao để không bỏ sót A11y?”

Thầy đáp: “Đừng coi A11y là checklist cuối cùng. Hãy coi đó là tư duy từ đầu.”

Tư duy A11y gồm:

• Thiết kế cho phổ rộng, không cho trung bình
• Test với người thật, không chỉ công cụ
• Đặt mình vào vị trí người khác
• Luôn hỏi: “Nếu tôi không thể nhìn/nghe/dùng tay, tôi vẫn dùng được không?”

“A11y không làm sản phẩm chậm. A11y không tốn thêm tiền. A11y chỉ yêu cầu con quan tâm – từ đầu.”

Khoảnh khắc An hiểu “thiết kế cho tất cả” là thiết kế cho chính mình

Trước khi rời ngôi đền, An thử bịt mắt, dùng screen reader để điều khiển một trang web.

Chỉ 5 phút, An đã lạc. Không biết đang ở đâu. Không biết nút nào để bấm. Không biết thông tin quan trọng ở đâu.

An tháo bịt mắt, thở dài: “Con không thể tưởng tượng cuộc sống hàng ngày của họ như thế nào.”

Thầy nhẹ nhàng: “Con không cần tưởng tượng. Con chỉ cần thiết kế đúng. Vì một ngày nào đó, con cũng sẽ già, con cũng sẽ mỏi mắt, con cũng sẽ bị gãy tay. Khi đó, con sẽ cần chính thiết kế của con.”

Và An hiểu: A11y không phải vì thương hại. A11y là vì bản thân mình – trong tương lai.

Tóm tắt kiến thức cốt lõi

A11y là gì? Thiết kế cho mọi người, bất kể khả năng, hoàn cảnh, thiết bị.

Tại sao A11y quan trọng? Mở rộng thị trường, tuân thủ pháp lý, cải thiện UX cho tất cả, thể hiện trách nhiệm xã hội.

4 nguyên lý WCAG: Perceivable – Operable – Understandable – Robust.

Nhóm người cần A11y: người khiếm thị, người khiếm thính, người khuyết tật vận động, người mù màu, người cao tuổi, người dùng di động, người trong hoàn cảnh đặc biệt.

Kỹ thuật A11y cơ bản: alt text, semantic HTML, keyboard navigation, color contrast, ARIA label, focus visible, touch target size, caption/transcript.

Tư duy A11y: thiết kế cho phổ rộng, test với người thật, đặt mình vào vị trí người khác, coi A11y là tư duy chứ không phải checklist.