Accessibility ảnh và SEO ảnh không phải hai việc riêng biệt — chúng là hai mặt của cùng một mục tiêu: giúp mọi người (và mọi bot) hiểu đúng nội dung ảnh của bạn. Google Googlebot hoạt động rất giống một screen reader: nó đọc text, không "nhìn" ảnh.
Theo WebAIM Survey 2025, 71% người dùng screen reader sẽ rời trang nếu nội dung không accessible. Theo Semrush, trang có accessibility tốt có điểm Core Web Vitals cao hơn trung bình 12% và tỷ lệ thoát thấp hơn 9%.
1. Alt Text — Nền Tảng Của Accessibility Và SEO Ảnh
Alt text (thuộc tính `alt`) là tín hiệu duy nhất mà cả screen reader lẫn Googlebot dùng để "đọc" nội dung ảnh. Viết alt text đúng đồng thời phục vụ cả người dùng khiếm thị lẫn SEO.
- ▸Ảnh mang nội dung: viết alt text mô tả chính xác ảnh + từ khóa tự nhiên — "Giày thể thao Nike Air Max 270 màu trắng đen"
- ▸Ảnh trang trí thuần túy: `alt=""` (empty, không bỏ thuộc tính alt) — screen reader bỏ qua, Googlebot hiểu đây là decorative
- ▸Ảnh là button/link: alt text mô tả hành động — "Mở menu điều hướng", không mô tả hình icon
- ▸Ảnh phức tạp (biểu đồ, infographic): alt text ngắn + longdesc hoặc aria-describedby trỏ đến mô tả dài
- ▸Tránh bắt đầu bằng "Ảnh chụp...", "Hình ảnh..." — screen reader đã thông báo đây là ảnh rồi
2. Thẻ figure Và figcaption — Ngữ Nghĩa Đúng Cho Ảnh Có Chú Thích
Khi ảnh có chú thích (caption), dùng cặp `<figure>` + `<figcaption>` thay vì `<div>` + `<p>`. Đây là semantic HTML đúng, giúp screen reader và Googlebot hiểu mối quan hệ giữa ảnh và chú thích.
- ▸`<figure>`: bao bọc ảnh và caption — thông báo đây là một đơn vị nội dung độc lập
- ▸`<figcaption>`: chú thích ảnh — được đọc cùng với alt text, bổ sung ngữ cảnh
- ▸figcaption và alt text không nên giống hệt nhau — figcaption thêm ngữ cảnh, alt text mô tả ảnh
- ▸Google dùng figcaption như một tín hiệu nội dung bổ sung cho ranking ảnh
- ▸Tránh dùng figcaption để nhét từ khóa — Google có thể coi là spam
3. ARIA Roles Cho Ảnh Phức Tạp
ARIA (Accessible Rich Internet Applications) cung cấp thêm ngữ nghĩa cho các trường hợp HTML thuần không đủ. Với ảnh, có hai ARIA attribute quan trọng nhất.
- ▸`role="presentation"` hoặc `aria-hidden="true"`: ẩn ảnh trang trí hoàn toàn khỏi accessibility tree — tốt hơn alt=""
- ▸`aria-describedby="id-cua-mo-ta"`: trỏ đến element chứa mô tả dài cho ảnh phức tạp
- ▸`aria-label`: thay thế alt text cho ảnh không có thuộc tính alt (trường hợp không kiểm soát được HTML)
- ▸`aria-labelledby`: khi caption/tiêu đề gần đó đóng vai trò là alt text của ảnh
Dùng axe DevTools (extension Chrome/Firefox miễn phí) để kiểm tra accessibility ảnh tự động. Nó phát hiện ảnh thiếu alt text, alt text không mô tả, và nhiều lỗi ARIA khác trong vài giây.
4. Tương Phản Màu Và Ảnh Chứa Text
WCAG 2.2 yêu cầu tỷ lệ tương phản tối thiểu 4.5:1 cho text thông thường và 3:1 cho text lớn. Khi ảnh chứa text (banner, infographic, thumbnail YouTube), tỷ lệ tương phản cũng phải đạt chuẩn.
- ▸Công cụ kiểm tra: WebAIM Contrast Checker, Colour Contrast Analyser (desktop app)
- ▸Text trên ảnh: đảm bảo overlay hoặc nền đủ tối/sáng để text readable
- ▸Không dùng ảnh làm phương tiện truyền đạt thông tin quan trọng nếu không có text alternative
- ▸Nếu ảnh chứa text quan trọng: cung cấp cùng nội dung đó trong alt text hoặc caption
5. Tại Sao Accessibility Cải Thiện SEO Trực Tiếp
Google xếp hạng theo cả hai tiêu chí: nội dung và trải nghiệm người dùng. Trang accessible thường có bounce rate thấp hơn (người dùng tìm được nội dung họ cần), dwell time cao hơn, và ít lỗi crawl hơn — tất cả đều là tín hiệu tốt cho SEO.
- ▸Alt text mô tả → Google hiểu ảnh → ảnh xuất hiện trong Google Images cho đúng từ khóa
- ▸Semantic HTML (figure/figcaption) → Google hiểu structure → tốt cho Featured Snippets
- ▸Ảnh không accessible thường đi kèm với kỹ thuật web kém → trang chậm → SEO kém
- ▸ADA compliance ngày càng quan trọng: tránh rủi ro pháp lý AND cải thiện SEO cùng lúc
- ▸Page Experience signals: accessibility cải thiện INP và giảm CLS → Core Web Vitals tốt hơn