Image accessibility

Image accessibility là gì?

Image accessibility (tiếp cận hình ảnh) là việc thiết kế và triển khai hình ảnh trên website sao cho người dùng có khuyết tật thị giác, rối loạn nhận thức hoặc dùng công nghệ hỗ trợ (như trình đọc màn hình) vẫn hiểu được nội dung, chức năng và ngữ cảnh của hình ảnh đó. Đây không chỉ là yêu cầu về đạo đức hay pháp lý (ví dụ: WCAG 2.1, Luật Người khuyết tật Việt Nam), mà còn là một phần thiết yếu của trải nghiệm người dùng và SEO hiện đại.

Tại sao quan trọng trong SEO?

Hình ảnh chiếm hơn 60% dung lượng trung bình của một trang web (theo HTTP Archive, 2023). Khi hình ảnh không được tiếp cận đúng cách:

• Trình đọc màn hình bỏ qua hoặc báo lỗi — làm giảm độ tin cậy của trang với người dùng khuyết tật;
• Công cụ tìm kiếm (Google, Bing) không thể hiểu nội dung hình ảnh nếu thiếu alt phù hợp — ảnh hưởng trực tiếp đến khả năng xếp hạng hình ảnh và trang tổng thể;
• Tỷ lệ thoát tăng, thời gian ở trang giảm — hai tín hiệu hành vi người dùng mà Google xác nhận sử dụng trong đánh giá chất lượng trang;
• Website không đạt tiêu chuẩn WCAG AA — rủi ro pháp lý và mất uy tín thương hiệu, đặc biệt với tổ chức nhà nước hoặc doanh nghiệp niêm yết.

Google khẳng định rõ: "Chúng tôi ưu tiên nội dung dễ tiếp cận vì nó thường cũng là nội dung rõ ràng, có cấu trúc tốt và hữu ích với mọi người" (Google Search Central, cập nhật tháng 4/2024).

Cách hoạt động

Khi trình đọc màn hình gặp thẻ <img>, nó sẽ:

1. Đọc thuộc tính alt nếu có — đây là nguồn thông tin chính;
2. Nếu alt="" (rỗng), trình đọc hiểu hình ảnh mang tính trang trí và bỏ qua;
3. Nếu không có alt, một số trình đọc sẽ đọc tên file (ví dụ: IMG_20240512.jpg) — gây nhầm lẫn và giảm trải nghiệm;
4. Với hình ảnh có chức năng (nút, liên kết), trình đọc cũng kiểm tra thuộc tính role, aria-label hoặc aria-labelledby để xác định hành vi.

ARIA (Accessible Rich Internet Applications) không thay thế alt, mà bổ sung khi cần mô tả phức tạp hơn — ví dụ: biểu đồ tương tác, sơ đồ quy trình nhiều bước.

Hướng dẫn thực hiện

Dưới đây là các bước kỹ thuật bắt buộc khi triển khai image accessibility:

1. Viết alt ngắn gọn, chính xác và ngữ cảnh: Mô tả cái gì và mục đích của hình ảnh — không mô tả màu sắc, kích thước trừ khi cần thiết. Ví dụ: alt="Bánh mì thịt nướng tại cửa hàng Bánh Mì Sài Gòn, Quận 1" — tốt hơn alt="bánh mì" hoặc alt="bánh mì ngon, vàng giòn, nóng hổi".
2. Không lặp từ khóa: Không nhồi nhét từ khóa như alt="dịch vụ SEO Hà Nội, SEO website, công ty SEO chuyên nghiệp". Google coi đây là spam và có thể phạt.
3. Sử dụng alt="" cho hình ảnh trang trí: Nếu hình ảnh chỉ phục vụ mục đích thị giác (ví dụ: đường viền, icon trang trí), đặt alt="" (không khoảng trắng). Không để trống thuộc tính (alt không có dấu bằng) — trình đọc sẽ đọc tên file.
4. Dùng ARIA khi cần mở rộng:
   • aria-label: Dành cho hình ảnh chức năng (ví dụ: nút chia sẻ Facebook): <img src="fb-icon.png" aria-label="Chia sẻ bài viết lên Facebook">;
   • aria-labelledby: Khi mô tả nằm ở phần tử khác (ví dụ: tiêu đề + phụ đề): <img aria-labelledby="chart-title chart-desc"><h3 id="chart-title">Doanh thu quý 1</h3><p id="chart-desc">Tăng 22% so với cùng kỳ năm ngoái</p>;
   • Không dùng aria-hidden="true" cho hình ảnh có nội dung — trừ khi chắc chắn nó hoàn toàn không cần thiết với người dùng.
5. Tối ưu định dạng & kích thước: Dùng WebP/AVIF cho hình ảnh có hỗ trợ; đảm bảo kích thước file dưới 100 KB (tùy trường hợp); cung cấp srcset cho responsive — giúp tải nhanh hơn trên thiết bị di động, giảm bounce rate.

Lỗi thường gặp

Lỗi	Hậu quả	Cách khắc phục
alt bị thiếu hoặc để trống (alt không có giá trị)	Trình đọc màn hình đọc tên file; Google không hiểu nội dung hình ảnh	Thêm alt có nghĩa hoặc đặt alt="" nếu trang trí
alt quá dài (>125 ký tự)	Một số trình đọc cắt ngắn; người dùng mất tập trung	Giữ dưới 125 ký tự; dùng aria-describedby nếu cần mô tả chi tiết
Dùng hình ảnh thay cho văn bản (ví dụ: menu dạng ảnh)	Không thể phóng to, dịch, tìm kiếm; không tương thích trình đọc	Thay bằng HTML + CSS; nếu bắt buộc, thêm alt đầy đủ và role="navigation"
Ảnh SVG thiếu thuộc tính truy cập	Trình đọc bỏ qua hoàn toàn	Thêm role="img", aria-label hoặc <title> bên trong thẻ <svg>

Ví dụ thực tế

Ví dụ 1 – Hình ảnh sản phẩm:
<img src="may-tinh-xach-tay-macbook-pro.jpg" alt="MacBook Pro 16 inch M3 Pro, bàn phím backlit, cổng Thunderbolt 4, dùng cho lập trình viên và thiết kế đồ họa">
→ Đúng: mô tả sản phẩm, cấu hình nổi bật và đối tượng người dùng.

Ví dụ 2 – Biểu đồ tương tác:
<div role="img" aria-label="Biểu đồ cột cho thấy doanh thu tháng 1–4/2024: tháng 1: 1,2 tỷ, tháng 2: 1,4 tỷ, tháng 3: 1,8 tỷ, tháng 4: 2,1 tỷ"><svg>...</svg></div>
→ Đúng: dùng role="img" và aria-label thay vì alt (vì SVG không hỗ trợ alt trực tiếp).

Ví dụ 3 – Nút chia sẻ:
<a href="https://facebook.com/share"><img src="share-fb.svg" aria-label="Chia sẻ bài viết này lên Facebook"></a>
→ Đúng: aria-label mô tả hành động, không phải mô tả hình ảnh.

Câu hỏi thường gặp

Alt text có ảnh hưởng trực tiếp đến thứ hạng Google không?

Có, nhưng gián tiếp. Google không dùng alt như một yếu tố xếp hạng độc lập, mà dùng nó để hiểu nội dung trang, cải thiện trải nghiệm người dùng và xác minh tính liên quan. Trang có alt tốt thường có tỷ lệ tương tác cao hơn — đây là tín hiệu xếp hạng mạnh.

Có nên dịch alt text sang tiếng Anh nếu website đa ngôn ngữ?

Có. Alt text phải khớp với ngôn ngữ hiển thị của trang. Nếu trang tiếng Việt, alt phải tiếng Việt; nếu trang tiếng Anh, alt phải tiếng Anh. Google xử lý theo thuộc tính hreflang và ngôn ngữ trang — không tự dịch alt text.

Hình ảnh background CSS có cần alt không?

Không. Hình ảnh nền (background-image trong CSS) không nằm trong DOM như thẻ <img>, nên không cần alt. Nếu hình nền mang thông tin quan trọng (ví dụ: biểu ngữ khuyến mãi), nên dùng thẻ <img> với alt và CSS để định vị — hoặc thêm mô tả văn bản gần đó.