Công nghệ

Accessibility Website: Chuẩn WCAG Quốc Tế

Published on April 19, 2026 7 min read

Table of Contents

Web accessibility (trợ năng website) đảm bảo mọi người đều sử dụng được website — bao gồm 7.8 triệu người khuyết tật tại Việt Nam (Tổng cục Thống kê 2023) và hàng triệu người có khó khăn tạm thời (gãy tay, đeo kính, môi trường sáng/tối). Theo WebAIM 2024, 96.3% website có lỗi accessibility nghiêm trọng. Accessibility không chỉ là đạo đức — nó cải thiện SEO (Google đánh giá accessibility trong ranking), tăng UX cho tất cả users, và mở rộng đối tượng khách hàng.

WCAG 2.1 — Tiêu Chuẩn Quốc Tế

WCAG (Web Content Accessibility Guidelines) do W3C phát triển — tiêu chuẩn accessibility phổ biến nhất thế giới. WCAG 2.1 AA là mức yêu cầu phổ biến (bắt buộc tại EU, Mỹ, Úc cho website chính phủ và công cộng).

4 Nguyên Tắc POUR

Nguyên tắc	Ý nghĩa	Ví dụ
Perceivable (Nhận biết)	Nội dung phải nhận biết được bằng nhiều giác quan	Alt text hình ảnh, phụ đề video, contrast đủ
Operable (Vận hành)	Giao diện phải vận hành được bằng nhiều cách	Keyboard navigation, skip links, no time limits
Understandable (Dễ hiểu)	Nội dung và UI phải dễ hiểu	Ngôn ngữ rõ ràng, error messages cụ thể
Robust (Bền vững)	Tương thích với assistive technologies	Semantic HTML, ARIA labels, valid markup

10 Lỗi Accessibility Phổ Biến Nhất

1. Thiếu Alt Text Cho Hình Ảnh

Lỗi: <img src="product.jpg"> — screen reader đọc “image” không biết là gì. Sửa: <img src="product.jpg" alt="Bảng giá thiết kế website tại Cần Thơ 2025"> — mô tả nội dung hình ảnh bằng keyword liên quan.

Alt text vừa giúp accessibility, vừa tốt cho SEO — Google đọc alt text để hiểu nội dung hình ảnh.

2. Contrast Màu Không Đủ

Yêu cầu WCAG AA: Contrast ratio tối thiểu 4.5:1 cho text thường, 3:1 cho text lớn (18px+ hoặc 14px+ bold).

Lỗi phổ biến: Text xám nhạt (#999) trên nền trắng = contrast 2.85:1 (fail). Dùng công cụ WebAIM Contrast Checker kiểm tra.

Mọi element tương tác (link, button, form, menu) phải truy cập được bằng Tab key. Focus indicator (viền xanh khi Tab đến) không được ẩn (outline: none là lỗi phổ biến).

Test: Đặt chuột xuống, dùng Tab di chuyển qua toàn bộ website. Nếu bất kỳ element nào không Tab đến được → lỗi accessibility.

4. Heading Hierarchy Sai

Sai: H1 → H3 → H2 → H4 (nhảy cấp, lộn xộn). Đúng: H1 → H2 → H3 → H2 → H3 (tuần tự, logic).

Screen reader dùng headings để navigate — heading hierarchy sai = người dùng bị lạc. Heading đúng cũng cải thiện SEO vì Google hiểu cấu trúc nội dung.

5. Form Thiếu Labels

Sai: <input placeholder="Nhập tên"> — placeholder biến mất khi focus. Đúng: <label for="name">Họ tên</label><input id="name"> — label luôn hiển thị, screen reader đọc được.

Website có menu dài: mỗi lần Tab phải đi qua 20+ menu items trước khi đến nội dung. Skip link: <a href="#main-content">Bỏ qua menu</a> — ẩn visual, hiển thị khi Tab focus.

7. Video Không Có Phụ Đề/Transcript

Video marketing trên website cần phụ đề cho người khiếm thính và transcript cho screen reader. YouTube tự tạo captions (cần review accuracy). Thêm aria-label cho video player.

8. Link Text Không Mô Tả

Sai: “Click vào đây”, “Đọc thêm”, “Xem chi tiết” — screen reader đọc danh sách link ra toàn “đọc thêm”. Đúng: “Xem bảng giá thiết kế website 2025”, “Đọc hướng dẫn SEO địa phương”.

9. ARIA Sử Dụng Sai

ARIA (Accessible Rich Internet Applications) bổ sung semantic cho elements phức tạp. Quy tắc số 1: không dùng ARIA nếu HTML native đủ. <button> tốt hơn <div role="button">. ARIA dùng sai nguy hiểm hơn không dùng.

10. Responsive Thiếu Accessibility

Zoom 200% (WCAG yêu cầu): nội dung phải không bị overlap, cắt, hoặc mất. Touch target mobile: tối thiểu 44×44px. UX/UI responsive chuẩn = accessibility chuẩn.

Accessibility Checklist Nhanh

Must-have (WCAG AA)

Nice-to-have (WCAG AAA)

Contrast ratio ≥ 7:1
Video có phụ đề VÀ audio description
Abbreviation definitions
Reading level accessible
Sign language interpretation

Công Cụ Kiểm Tra Accessibility (Miễn Phí)

Công cụ	Mục đích	Cách dùng
Lighthouse	Audit tổng hợp	Chrome DevTools → Lighthouse → Accessibility
axe DevTools	Extension Chrome	Scan trang web, báo lỗi chi tiết
WAVE	Web-based checker	wave.webaim.org → nhập URL
Pa11y	CLI tool	Automated testing trong CI/CD
Contrast Checker	Kiểm tra contrast	webaim.org/resources/contrastchecker
Screen Reader	Test thực tế	NVDA (Windows, miễn phí), VoiceOver (Mac)

Best practice: Chạy Lighthouse accessibility audit → sửa lỗi → test lại. Mục tiêu: Lighthouse Accessibility score 90+.

Accessibility + SEO: Mối Liên Hệ Chặt Chẽ

Accessibility và SEO chia sẻ nhiều yêu cầu kỹ thuật:

Yêu cầu Accessibility	Lợi ích SEO
Alt text hình ảnh	Google Image Search ranking
Heading hierarchy	Content structure cho crawlers
Semantic HTML	Rich snippets, featured snippets
Fast loading	Core Web Vitals ranking signal
Descriptive link text	Anchor text SEO
Mobile responsive	Mobile-first indexing
Clean HTML	Crawlability

Website accessible thường xếp hạng cao hơn trên Google — không phải vì Google “ưu ái” mà vì cấu trúc tốt + UX tốt = ranking signals tích cực.

GEO optimization cũng hưởng lợi: AI search engines (ChatGPT, Gemini) dễ trích xuất nội dung từ website có semantic HTML rõ ràng.

Accessibility Theo Ngành Tại Việt Nam

Website chính phủ/công cộng: Nghị định 42/2022/NĐ-CP yêu cầu website cơ quan nhà nước phải đảm bảo tiếp cận cho người khuyết tật. Xu hướng sẽ mở rộng ra doanh nghiệp.

E-commerce: Website bán hàng online accessible mở rộng tệp khách hàng: người cao tuổi (dùng zoom), người khiếm thị (screen reader), người khuyết tật vận động (keyboard only).

Giáo dục: Website giáo dục cần accessible cho học sinh/sinh viên khuyết tật — yêu cầu pháp lý ngày càng nghiêm ngặt.

Y tế: Website phòng khám phải dễ dùng cho bệnh nhân mọi lứa tuổi và tình trạng sức khỏe.

Chi Phí Triển Khai Accessibility

Phương án	Chi phí	Thời gian
Tích hợp từ đầu (website mới)	+10-20% chi phí phát triển	Trong timeline dự án
Audit website hiện tại	2-5 triệu	1-2 ngày
Sửa lỗi cơ bản (alt text, contrast, labels)	3-10 triệu	1-2 tuần
Sửa lỗi nâng cao (keyboard nav, ARIA, semantic)	10-30 triệu	2-4 tuần

Lời khuyên: Tích hợp accessibility từ đầu khi thiết kế website mới rẻ hơn 5-10 lần so với sửa sau. Đây là lý do chọn agency hiểu accessibility quan trọng.

Website Accessible Chuẩn Quốc Tế — Chúng Tôi Xây Web

Chúng Tôi Xây Web tại Cái Răng, Cần Thơ thiết kế website tích hợp accessibility từ nền tảng: semantic HTML, alt text đầy đủ, keyboard navigation, contrast chuẩn WCAG, và Lighthouse Accessibility 90+. Website UX/UI chuẩn cho mọi người dùng.

Tư vấn miễn phí audit accessibility website hiện tại.

Nhắn Zalo: https://zalo.me/0817771184
Gọi trực tiếp: 0817771184
Gửi yêu cầu: chungtoixayweb.vn/lien-he

Frequently Asked Questions

Web accessibility (trợ năng) là gì?

Web accessibility đảm bảo mọi người đều sử dụng được website — bao gồm người khiếm thị (dùng screen reader), khiếm thính (cần phụ đề video), khuyết tật vận động (dùng bàn phím thay chuột), và người có rối loạn nhận thức. WCAG 2.1 AA là tiêu chuẩn quốc tế phổ biến nhất.

Accessibility có quan trọng cho SEO không?

Rất quan trọng. Google đánh giá accessibility trong Lighthouse audit. Alt text hình ảnh, heading hierarchy, semantic HTML, ARIA labels — tất cả đều là ranking signals. Website accessible thường có SEO tốt hơn vì structure rõ ràng, content dễ crawl, và UX tốt (giảm bounce rate).

WCAG 2.1 AA yêu cầu gì?

4 nguyên tắc: Perceivable (nhận biết — alt text, contrast 4.5:1, captions), Operable (vận hành — keyboard navigation, skip links, no time limits), Understandable (dễ hiểu — ngôn ngữ rõ ràng, error messages), Robust (bền vững — semantic HTML, ARIA, tương thích assistive technology).

Chi phí để website đạt chuẩn accessibility?

Website mới: thêm 10-20% chi phí nếu tích hợp accessibility từ đầu. Website hiện tại: audit 2-5 triệu, sửa lỗi 5-20 triệu tùy mức độ. Đầu tư accessibility từ đầu rẻ hơn 5-10 lần so với sửa sau. Nhiều lỗi accessibility có thể tự sửa miễn phí: alt text, heading order, contrast.

Need this service?

Call 0817771184 or chat on Zalo for a free consultation about website design.

Contact Now Chat on Zalo

Accessibility Website: Chuẩn WCAG Quốc Tế