Skip to main content

Web Accessibility — Thiết Kế Web Tiếp Cận Cho Mọi Người

Mở đầu — Accessibility không chỉ là đạo đức, mà là lợi thế cạnh tranh thực sự​

Hãy thử một thí nghiệm nhỏ: nhắm mắt lại và thử dùng website của bạn chỉ bằng bàn phím. Không chuột, không touchpad. Bạn có thể điều hướng được đến đâu? Có biết mình đang ở đâu trên trang không?

Nếu câu trả lời là "không" — website của bạn đang vô tình khóa cửa trước mặt hàng triệu người dùng tiềm năng.

Web Accessibility (viết tắt a11y) là việc thiết kế và phát triển website sao cho mọi người đều có thể sử dụng được, bao gồm người khuyết tật thị giác, thính giác, vận động, và nhận thức. Theo Tổ chức Y tế Thế giới (WHO), khoảng 16% dân số toàn cầu — tức hơn 1.3 tỷ người — sống với một dạng khuyết tật nào đó. Tại Việt Nam, con số này vào khoảng 7.06 triệu người (khoảng 7.09% dân số).

Nhưng accessibility không chỉ là câu chuyện đạo đức. Đây là quyết định kinh doanh thông minh:

  • SEO mạnh hơn: Google ưu tiên website có cấu trúc rõ ràng, alt text đầy đủ, heading phân cấp logic — tất cả đều là yếu tố accessibility
  • Thị trường rộng hơn: Người khuyết tật trên toàn cầu có sức mua ước tính $13 nghìn tỷ/năm (theo Return on Disability Group)
  • Giảm rủi ro pháp lý: Năm 2023, Mỹ ghi nhận hơn 4,600 vụ kiện liên quan đến web accessibility. Xu hướng này đang lan rộng sang các thị trường khác
  • UX tốt hơn cho tất cả: Phụ đề video giúp cả người xem ở nơi ồn ào. Contrast tốt giúp cả người dùng ngoài trời nắng. Keyboard navigation giúp cả power user làm việc nhanh hơn

📌 Insight quan trọng: Accessibility tốt = SEO tốt = UX tốt. Ba mục tiêu này không mâu thuẫn nhau — chúng cùng hướng về một đích: làm web tốt hơn cho mọi người.

Phân tích chuyên sâu — WCAG và bốn nguyên tắc nền tảng​

WCAG là gì và tại sao bạn cần biết?​

WCAG (Web Content Accessibility Guidelines) là bộ tiêu chuẩn quốc tế do W3C (World Wide Web Consortium) phát triển, định nghĩa cách làm nội dung web tiếp cận được với người khuyết tật. Phiên bản hiện tại là WCAG 2.2 (phát hành tháng 10/2023), với WCAG 3.0 đang trong giai đoạn phát triển.

WCAG chia thành ba mức tuân thủ:

MứcYêu cầuÁp dụng cho
AMức tối thiểu — loại bỏ các rào cản nghiêm trọng nhấtMọi website
AAMức khuyến nghị — tiêu chuẩn cho hầu hết tổ chứcWebsite doanh nghiệp, thương mại điện tử, dịch vụ công
AAAMức cao nhất — hỗ trợ tối đa cho mọi dạng khuyết tậtWebsite chuyên biệt, dịch vụ y tế, giáo dục

💡 Thực tế: Hầu hết các quy định pháp luật (ADA ở Mỹ, EAA ở châu Âu) yêu cầu mức AA. Đây cũng là mức MangoAds khuyến nghị cho mọi dự án web.

Bốn nguyên tắc POUR — Xương sống của Accessibility​

WCAG được xây dựng trên bốn nguyên tắc cốt lõi, gọi tắt là POUR. Mọi tiêu chí kỹ thuật đều xoay quanh bốn trụ cột này:

1. Perceivable (Nhận biết được)​

Người dùng phải nhận biết được thông tin và các thành phần giao diện. Nếu ai đó không thể nhìn thấy hình ảnh, họ cần một cách khác để tiếp nhận thông tin đó.

Các yếu tố kỹ thuật chính:

🔹 Alt text cho hình ảnh

Alt text (alternative text) là văn bản thay thế mô tả nội dung hình ảnh. Screen reader đọc alt text để người dùng khiếm thị hiểu hình ảnh truyền tải gì.

<!-- ❌ Sai: Alt text rỗng cho ảnh có nội dung quan trọng -->
<img src="chart-revenue.png" alt="">

<!-- ❌ Sai: Alt text không mô tả đúng nội dung -->
<img src="chart-revenue.png" alt="hình ảnh">

<!-- ✅ Đúng: Mô tả nội dung và ý nghĩa -->
<img src="chart-revenue.png" alt="Biểu đồ doanh thu Q1-Q4 2025, tăng trưởng 45% so với cùng kỳ năm trước">

<!-- ✅ Đúng: Ảnh trang trí thuần túy dùng alt rỗng -->
<img src="decorative-divider.svg" alt="" role="presentation">

Nguyên tắc viết alt text hiệu quả:

  • Mô tả nội dung và mục đích, không phải hình thức ("biểu đồ tăng trưởng doanh thu" thay vì "một biểu đồ")
  • Ngắn gọn nhưng đầy đủ (thường dưới 125 ký tự)
  • Không bắt đầu bằng "hình ảnh của..." — screen reader đã thông báo đó là ảnh rồi
  • Ảnh trang trí thuần túy → dùng alt="" (alt rỗng) để screen reader bỏ qua

🔹 Color contrast (Tỷ lệ tương phản màu)

Tỷ lệ tương phản giữa chữ và nền phải đủ cao để người dùng có thị lực kém hoặc mù màu vẫn đọc được.

Loại văn bảnMức AAMức AAA
Chữ bình thường (dưới 18px)4.5:17:1
Chữ lớn (từ 18px bold hoặc 24px)3:14.5:1
UI components & graphics3:1—
❌ Chữ xám nhạt #999 trên nền trắng #FFF → tỷ lệ 2.85:1 (FAIL)
✅ Chữ xám đậm #595959 trên nền trắng #FFF → tỷ lệ 7.01:1 (PASS AAA)

⚠️ Lỗi phổ biến: Nhiều designer chọn màu chữ nhạt vì "trông đẹp, minimalist" nhưng vô tình tạo rào cản cho người dùng thị lực kém. Thẩm mỹ và accessibility không mâu thuẫn — chỉ cần chọn màu có ý thức hơn.

🔹 Captions và Transcripts cho nội dung đa phương tiện

  • Video phải có closed captions (phụ đề đóng) cho người khiếm thính
  • Audio (podcast, voice content) cần có transcript (bản ghi text)
  • Video không có âm thanh cần audio description hoặc text alternative mô tả nội dung

Đây không chỉ là yêu cầu accessibility — phụ đề còn giúp SEO video vì search engine có thể index nội dung text trong captions.

2. Operable (Vận hành được)​

Mọi chức năng trên website phải vận hành được bằng nhiều phương thức tương tác khác nhau, không chỉ chuột.

🔹 Keyboard Navigation

Đây là yếu tố quan trọng nhất trong Operable. Mọi chức năng tương tác — menu, form, button, link, modal — phải điều khiển được hoàn toàn bằng bàn phím.

Các phím chuẩn:

  • Tab — di chuyển giữa các phần tử tương tác (focus forward)
  • Shift + Tab — di chuyển ngược (focus backward)
  • Enter / Space — kích hoạt button, link
  • Arrow keys — điều hướng trong menu, tabs, radio buttons
  • Escape — đóng modal, dropdown

Yêu cầu kỹ thuật:

<!-- ❌ Sai: div không nhận focus bằng keyboard -->
<div onclick="openMenu()">Menu</div>

<!-- ✅ Đúng: button có keyboard support mặc định -->
<button onclick="openMenu()">Menu</button>

<!-- ✅ Nếu bắt buộc dùng div: thêm role, tabindex, keydown handler -->
<div role="button" tabindex="0"
     onclick="openMenu()"
     onkeydown="if(event.key==='Enter'||event.key===' ')openMenu()">
  Menu
</div>

🔹 Focus indicator rõ ràng

Khi dùng Tab để di chuyển, người dùng phải nhìn thấy rõ phần tử nào đang được focus. Trình duyệt có default focus outline, nhưng nhiều developer tắt nó vì "xấu" mà không thay thế bằng style khác.

/* ❌ Tuyệt đối không làm thế này: */
*:focus { outline: none; }

/* ✅ Tùy chỉnh focus style thay vì xóa: */
*:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
  border-radius: 2px;
}

📌 Dùng :focus-visible thay vì :focus để focus style chỉ hiện khi dùng keyboard, không hiện khi click chuột — vừa đẹp vừa accessible.

🔹 Không có bẫy bàn phím (Keyboard Trap)

Người dùng phải có thể thoát ra khỏi bất kỳ thành phần nào bằng bàn phím. Modal dialog là nơi hay xảy ra lỗi này — focus bị "nhốt" trong modal mà không có cách thoát ra.

3. Understandable (Dễ hiểu)​

Nội dung và cách vận hành giao diện phải dễ hiểu và nhất quán.

🔹 Accessible Forms — Biểu mẫu tiếp cận được

Form là nơi tương tác nhiều nhất và cũng hay mắc lỗi accessibility nhất:

<!-- ❌ Sai: Input không có label liên kết -->
<input type="email" placeholder="Nhập email">

<!-- ✅ Đúng: Label liên kết rõ ràng với input -->
<label for="email">Địa chỉ email</label>
<input type="email" id="email" name="email"
       aria-describedby="email-hint" required>
<span id="email-hint">Ví dụ: ten@email.com</span>

<!-- ✅ Thông báo lỗi rõ ràng và liên kết với field -->
<label for="phone">Số điện thoại</label>
<input type="tel" id="phone" name="phone"
       aria-invalid="true" aria-describedby="phone-error">
<span id="phone-error" role="alert">
  Vui lòng nhập số điện thoại hợp lệ (10 chữ số)
</span>

Checklist cho accessible forms:

  • ✅ Mỗi input có <label> liên kết qua for/id
  • ✅ Placeholder không thay thế label (placeholder biến mất khi gõ)
  • ✅ Thông báo lỗi cụ thể, nằm gần field lỗi, được đọc bởi screen reader
  • ✅ Không chỉ dùng màu để báo lỗi (kết hợp icon hoặc text)
  • ✅ Form có thể submit hoàn toàn bằng keyboard

🔹 Ngôn ngữ trang

Khai báo thuộc tính lang chính xác giúp screen reader đọc đúng ngôn ngữ:

<html lang="vi">
  <!-- Screen reader sẽ đọc nội dung bằng giọng tiếng Việt -->
  <p>Chào mừng bạn đến với <span lang="en">MangoAds</span></p>
</html>

🔹 Điều hướng nhất quán

Menu, breadcrumb, và các pattern điều hướng phải nhất quán trên toàn bộ website. Người dùng screen reader phụ thuộc vào sự nhất quán này để xây dựng "bản đồ tinh thần" về cấu trúc trang.

4. Robust (Bền vững)​

Nội dung phải đủ bền vững để hoạt động với nhiều công nghệ hỗ trợ (assistive technologies) khác nhau, bao gồm screen reader, braille display, và voice control.

🔹 ARIA Labels — Cầu nối giữa giao diện và công nghệ hỗ trợ

ARIA (Accessible Rich Internet Applications) là bộ thuộc tính HTML bổ sung ngữ nghĩa cho các thành phần giao diện phức tạp mà HTML thuần không diễn đạt đủ.

Các ARIA attributes quan trọng nhất:

AttributeMục đíchVí dụ
aria-labelGán nhãn cho phần tử không có text hiển thị<button aria-label="Đóng">×</button>
aria-labelledbyTham chiếu đến phần tử chứa nhãn<div aria-labelledby="section-title">
aria-describedbyLiên kết mô tả bổ sung<input aria-describedby="password-hint">
aria-expandedTrạng thái mở/đóng của dropdown, accordion<button aria-expanded="false">
aria-hiddenẨn phần tử khỏi screen reader<span aria-hidden="true">🔍</span>
aria-liveThông báo nội dung thay đổi động<div aria-live="polite">Đã cập nhật</div>
roleĐịnh nghĩa vai trò của phần tử<nav role="navigation">
<!-- Ví dụ: Accordion accessible -->
<h3>
  <button aria-expanded="false" aria-controls="panel-1">
    Câu hỏi thường gặp về SEO
  </button>
</h3>
<div id="panel-1" role="region" aria-labelledby="heading-1" hidden>
  <p>Nội dung trả lời ở đây...</p>
</div>

⚠️ Quy tắc vàng của ARIA: "No ARIA is better than bad ARIA." Dùng HTML semantic đúng cách trước (button, nav, header, main, footer). Chỉ dùng ARIA khi HTML thuần không đủ diễn đạt. ARIA sai có thể gây hại nhiều hơn không có ARIA.

🔹 Screen Reader Compatibility

Để website tương thích tốt với screen reader (NVDA, JAWS, VoiceOver):

  • Dùng HTML semantic: <header>, <nav>, <main>, <article>, <aside>, <footer> thay vì <div> cho mọi thứ
  • Heading phân cấp logic: H1 → H2 → H3, không nhảy cấp (H1 → H3)
  • Skip navigation link: Cho phép người dùng screen reader bỏ qua menu để đến nội dung chính
<!-- Skip link — phần tử đầu tiên trong body -->
<a href="#main-content" class="skip-link">
  Bỏ qua đến nội dung chính
</a>
<!-- ... navigation ... -->
<main id="main-content">
  <!-- Nội dung chính -->
</main>
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
}
.skip-link:focus {
  left: 10px;
  top: 10px;
  padding: 8px 16px;
  background: #1a73e8;
  color: #fff;
}

Góc nhìn MangoAds — Accessibility là nền tảng, không phải lớp phủ​

Tại sao MangoAds đưa accessibility vào quy trình phát triển web?​

Tại MangoAds, chúng tôi không xem accessibility là một "tính năng bổ sung" hay checkbox cuối dự án. Accessibility là một phần của chất lượng web — cũng như performance, security, và SEO.

Cách tiếp cận của MangoAds:

  1. Accessibility-first trong thiết kế: Đội design kiểm tra color contrast ngay từ giai đoạn wireframe, không đợi đến khi code xong mới fix
  2. Semantic HTML là mặc định: Developers được training viết HTML semantic trước, dùng ARIA chỉ khi thực sự cần
  3. Testing tích hợp: Accessibility testing nằm trong CI/CD pipeline, không phải audit cuối dự án
  4. Tư duy "curb cut effect": Mỗi cải thiện accessibility đều mang lại lợi ích cho toàn bộ người dùng — ví dụ, cấu trúc heading tốt vừa giúp screen reader vừa cải thiện SEO

💡 "Curb cut effect" là hiện tượng: giải pháp thiết kế cho người khuyết tật lại có lợi cho tất cả mọi người. Lề đường hạ thấp (curb cut) ban đầu cho xe lăn, nhưng cũng giúp người đẩy xe nôi, kéo vali, đi xe đạp. Trong web: alt text giúp SEO, captions giúp ai xem video ở nơi ồn, keyboard navigation giúp power user.

Mối liên hệ Accessibility — SEO — Performance​

MangoAds luôn nhấn mạnh với khách hàng: ba yếu tố này cùng một gốc rễ.

Yếu tố AccessibilityLợi ích SEOLợi ích Performance
Alt text đầy đủGoogle hiểu nội dung ảnh → Image SEO—
Heading phân cấp logicCấu trúc rõ ràng → Featured snippets—
Semantic HTMLCrawlability tốt hơnÍt code thừa hơn → nhẹ hơn
Captions/TranscriptNội dung text được index—
Tối ưu color contrast——
Tối ưu formUX tốt → giảm bounce rate—
Skip navigation—Faster interaction cho mọi user

Ứng dụng thực tế — Accessibility Audit Checklist & Testing Tools​

Accessibility Audit Checklist cho website​

Dùng checklist này để đánh giá nhanh mức accessibility của website hiện tại:

📌 Perceivable (Nhận biết):

  • Mọi hình ảnh có nội dung đều có alt text mô tả chính xác
  • Ảnh trang trí có alt="" hoặc role="presentation"
  • Tỷ lệ contrast chữ/nền đạt tối thiểu 4.5:1 (AA)
  • Video có closed captions
  • Audio có transcript
  • Thông tin không chỉ truyền đạt qua màu sắc (có thêm icon, text, pattern)

📌 Operable (Vận hành):

  • Mọi chức năng tương tác hoạt động bằng keyboard
  • Focus indicator luôn hiển thị rõ ràng
  • Không có keyboard trap
  • Skip navigation link hoạt động
  • Không có nội dung nhấp nháy quá 3 lần/giây

📌 Understandable (Dễ hiểu):

  • Thuộc tính lang khai báo đúng
  • Form có label liên kết đúng
  • Thông báo lỗi cụ thể và gần field lỗi
  • Điều hướng nhất quán trên mọi trang
  • Link text mô tả đích đến (không dùng "click here" hoặc "xem thêm" không ngữ cảnh)

📌 Robust (Bền vững):

  • HTML validate, không có lỗi nghiêm trọng
  • ARIA attributes sử dụng đúng
  • Heading phân cấp logic (H1 → H2 → H3, không nhảy)
  • Landmark roles đầy đủ (header, nav, main, footer)

Testing Tools — Công cụ kiểm tra Accessibility​

1. axe DevTools (Deque)​

Loại: Browser extension (Chrome, Firefox, Edge) Mức giá: Free (core) / Paid (pro) Điểm mạnh: Ít false positive nhất, tích hợp tốt với CI/CD

# Tích hợp axe vào automated testing với axe-core
npm install @axe-core/cli -g
axe https://yourwebsite.com --rules best-practice

axe phát hiện khoảng 57% các lỗi accessibility có thể kiểm tra tự động. Phần còn lại cần manual testing.

2. WAVE (WebAIM)​

Loại: Browser extension + Online tool (wave.webaim.org) Mức giá: Free Điểm mạnh: Visual overlay trực quan, hiển thị lỗi ngay trên trang

WAVE phù hợp cho người mới bắt đầu vì nó hiển thị trực quan các lỗi ngay trên giao diện web, dễ hiểu và dễ định vị vấn đề.

3. Lighthouse (Google)​

Loại: Tích hợp sẵn trong Chrome DevTools Mức giá: Free Điểm mạnh: Đánh giá tổng hợp (Performance + Accessibility + SEO + Best Practices)

# Chạy Lighthouse accessibility audit từ CLI
npx lighthouse https://yourwebsite.com --only-categories=accessibility --output=json

💡 Lưu ý: Lighthouse chỉ kiểm tra khoảng 30-40% các tiêu chí WCAG. Điểm Lighthouse 100 không có nghĩa website đã fully accessible. Luôn kết hợp với manual testing.

4. Manual Testing — Không thể bỏ qua​

Automated tools chỉ phát hiện được 30-50% lỗi accessibility. Phần còn lại bắt buộc phải test thủ công:

  • Keyboard-only navigation: Tắt chuột, dùng Tab/Enter/Escape để duyệt toàn bộ website
  • Screen reader testing: Dùng VoiceOver (macOS), NVDA (Windows, miễn phí), hoặc TalkBack (Android)
  • Zoom testing: Phóng to 200% — layout có bị vỡ không?
  • Tắt CSS: Nội dung có còn đọc được theo thứ tự logic không?
  • Tắt hình ảnh: Alt text có truyền đạt đủ thông tin không?

Lộ trình triển khai Accessibility cho website hiện có​

Nếu website của bạn chưa có accessibility, đừng hoảng — không cần làm tất cả cùng lúc. MangoAds khuyến nghị lộ trình 3 giai đoạn:

Giai đoạn 1 — Quick wins (1-2 tuần):

  • Thêm alt text cho tất cả hình ảnh
  • Fix color contrast issues
  • Thêm lang attribute cho thẻ <html>
  • Đảm bảo mọi form input có label

Giai đoạn 2 — Structural fixes (2-4 tuần):

  • Chuyển sang semantic HTML (header, nav, main, footer)
  • Fix heading hierarchy
  • Thêm skip navigation link
  • Đảm bảo keyboard navigation hoạt động toàn bộ

Giai đoạn 3 — Advanced (4-8 tuần):

  • Implement ARIA cho các component phức tạp (modal, tabs, accordion)
  • Thêm captions cho video, transcript cho audio
  • Tích hợp accessibility testing vào CI/CD
  • Training team để duy trì accessibility trong phát triển tiếp theo

FAQ — Câu hỏi thường gặp về Web Accessibility​

Accessibility có bắt buộc theo luật tại Việt Nam không?​

Hiện tại Việt Nam chưa có luật riêng bắt buộc web accessibility như ADA (Mỹ) hay EAA (châu Âu). Tuy nhiên, nếu doanh nghiệp bạn phục vụ khách hàng quốc tế hoặc có website hướng đến thị trường Mỹ/EU, bạn cần tuân thủ WCAG AA. Xu hướng luật hóa accessibility đang diễn ra trên toàn cầu — bắt đầu sớm là lợi thế.

Accessibility có làm website xấu đi không?​

Hoàn toàn không. Accessibility tốt và thiết kế đẹp hoàn toàn song hành. Apple, Google, Airbnb — những website được đánh giá cao về design đều đạt tiêu chuẩn accessibility. Vấn đề không phải "đẹp hay accessible" mà là "thiết kế có ý thức hay không".

Chi phí triển khai accessibility là bao nhiêu?​

Nếu tích hợp accessibility từ đầu dự án, chi phí bổ sung chỉ khoảng 5-10% tổng ngân sách phát triển. Nhưng nếu phải fix lại website đã hoàn thành, chi phí có thể gấp 3-5 lần so với làm đúng từ đầu. Đây là lý do MangoAds luôn khuyến nghị đưa accessibility vào từ giai đoạn thiết kế.

Tôi chỉ cần cài plugin accessibility là đủ chứ?​

Các "accessibility overlay" plugins (AccessiBe, UserWay, v.v.) không phải giải pháp thực sự. Chúng chỉ giải quyết được một phần nhỏ vấn đề bề mặt và thường tạo thêm vấn đề mới. Nhiều tổ chức đại diện cho người khuyết tật đã công khai phản đối các overlay plugins. Accessibility thực sự cần được xây dựng vào code base, không phải phủ lên trên.

Làm sao biết website của tôi có accessible không?​

Bước đầu tiên: chạy Lighthouse audit trong Chrome DevTools (F12 → Lighthouse → Accessibility). Sau đó thử duyệt website chỉ bằng bàn phím. Hai bước đơn giản này sẽ cho bạn bức tranh ban đầu. Để đánh giá toàn diện, cần audit chuyên sâu kết hợp automated tools và manual testing — MangoAds có thể hỗ trợ phần này.

Key Takeaways — Điều cốt lõi cần nhớ​

📌 Web Accessibility không phải "nice-to-have" — đây là yếu tố ảnh hưởng trực tiếp đến SEO, UX, thị trường mục tiêu, và rủi ro pháp lý

📌 WCAG AA là tiêu chuẩn nên đạt — bốn nguyên tắc POUR (Perceivable, Operable, Understandable, Robust) là kim chỉ nam cho mọi quyết định

📌 Alt text, color contrast, keyboard navigation, ARIA — bốn trụ cột kỹ thuật mà mọi website cần đáp ứng

📌 Automated tools chỉ phát hiện 30-50% lỗi — luôn kết hợp axe/WAVE/Lighthouse với manual testing (keyboard, screen reader)

📌 Overlay plugins không phải giải pháp — accessibility cần được xây dựng vào code, không phải phủ lên trên

📌 Bắt đầu sớm, chi phí thấp — tích hợp từ đầu chỉ tốn thêm 5-10% ngân sách, fix sau có thể gấp 3-5 lần

📌 Accessibility tốt = web tốt cho mọi người — curb cut effect: mọi cải thiện cho người khuyết tật đều nâng cao trải nghiệm cho toàn bộ người dùng

Bài viết thuộc MangoAds Knowledge Base. Nếu bạn cần hỗ trợ audit accessibility hoặc xây dựng website chuẩn WCAG, hãy liên hệ đội ngũ MangoAds — chúng tôi kết hợp chuyên môn kỹ thuật web và SEO để đảm bảo website vừa accessible, vừa tối ưu hiệu suất tìm kiếm.