Mở đầu — vì sao bài này quan trọng
Hãy tưởng tượng bạn là một người khiếm thị đang lướt một trang thương mại điện tử để mua quà sinh nhật cho con. Bạn không nhìn thấy màn hình, thay vào đó một phần mềm đọc màn hình (screen reader) đọc to từng phần nội dung trang web cho bạn nghe. Đến phần sản phẩm, phần mềm bỗng đọc: "Hình ảnh, IMG-2048-final-v3.jpg". Bạn hoàn toàn không biết đó là cái áo, đôi giày hay cái đồng hồ. Toàn bộ trải nghiệm mua sắm sụp đổ chỉ vì một dòng chữ nhỏ mà lẽ ra ai đó đã phải viết: thuộc tính alt.
Alt text — hay text thay thế cho hình ảnh — là một trong những kỹ thuật accessibility "rẻ nhất về công sức nhưng đắt giá nhất về tác động". Bạn không cần viết lại code, không cần dựng framework mới, chỉ cần viết một câu mô tả tốt. Vậy mà theo báo cáo WebAIM Million (khảo sát 1 triệu trang chủ phổ biến nhất), năm nào ảnh thiếu alt text hoặc alt text vô nghĩa cũng nằm trong top những lỗi accessibility phổ biến nhất — thường trên 55% trang chủ có ít nhất một ảnh thiếu alt.
Trong khóa học này, các bài trước đã dạy bạn nền tảng WCAG, semantic HTML và cách screen reader hoạt động. Bài 14 này đi sâu vào một chi tiết tưởng nhỏ mà cực kỳ quan trọng: viết alt text sao cho đúng, đủ và hữu ích. Đây là kỹ năng mà bất kỳ designer, content writer hay developer nào cũng phải nắm, vì nó xuất hiện ở mọi trang web trên đời.
Khái niệm cốt lõi
Alt text là gì và phục vụ ai?
Trong HTML, mỗi thẻ <img> có một thuộc tính alt (viết tắt của "alternative text"). Đây là đoạn văn bản mô tả nội dung và chức năng của hình ảnh, dành cho những trường hợp người dùng không thể nhìn thấy chính hình ảnh đó.
<img src="ao-thun-trang.jpg" alt="Áo thun cotton màu trắng, cổ tròn, in logo nhỏ ở ngực trái">
Alt text phục vụ ba nhóm đối tượng chính, và đây cũng là ba lý do bạn phải viết nó:
1. Người dùng screen reader. Đây là lý do quan trọng nhất. Người khiếm thị hoặc thị lực kém dùng phần mềm đọc màn hình (NVDA, JAWS, VoiceOver). Khi con trỏ đến một hình ảnh, phần mềm sẽ đọc to nội dung alt. Nếu không có alt, một số screen reader sẽ đọc tên file (thảm họa như ví dụ mở đầu), một số bỏ qua hoàn toàn (người dùng mất thông tin).
2. Khi hình ảnh không tải được. Mạng chậm, đường dẫn ảnh bị hỏng, server lỗi — trình duyệt sẽ hiển thị alt text thay cho ảnh vỡ. Ở bối cảnh Việt Nam, nơi nhiều người dùng vẫn truy cập qua 3G/4G vùng ngoại thành hoặc mạng chập chờn, đây không phải tình huống hiếm.
3. Công cụ tìm kiếm (SEO). Google và các search engine không "nhìn" được ảnh; chúng đọc alt text để hiểu ảnh nói về gì. Alt tốt giúp ảnh của bạn được xếp hạng trong Google Images và cải thiện SEO tổng thể của trang. Đây là điểm khiến việc "bán" accessibility cho sếp trở nên dễ hơn: nó vừa nhân văn, vừa có lợi cho kinh doanh.
Ba nguyên tắc vàng khi viết alt
Nguyên tắc 1 — Mô tả chức năng, không phải bề ngoài. Câu hỏi đúng không phải "trong ảnh có gì?" mà là "hình ảnh này truyền tải thông tin gì trong ngữ cảnh này?". Cùng một tấm ảnh có thể cần alt khác nhau tùy vị trí đặt nó.
Nguyên tắc 2 — Ngắn gọn, súc tích. Alt text nên là một câu ngắn, thường dưới 125 ký tự. Screen reader đọc liền một mạch, không ngắt nghỉ, nên một đoạn alt dài lê thê sẽ khiến người nghe mệt mỏi. Nếu cần mô tả dài (biểu đồ phức tạp, ảnh nghệ thuật), hãy dùng phần mô tả trong nội dung trang hoặc thuộc tính aria-describedby.
Nguyên tắc 3 — Không lặp lại và không thừa. Đừng bắt đầu bằng "Hình ảnh của..." hay "Ảnh chụp...". Screen reader đã tự thông báo "đây là hình ảnh" (image/graphic) rồi, nên viết thêm chỉ tạo ra sự dư thừa "hình ảnh, hình ảnh của con mèo".
Ảnh mang nội dung (informative) vs ảnh trang trí (decorative)
Đây là phân biệt cốt lõi mà rất nhiều người làm sai. Không phải ảnh nào cũng cần alt text mô tả.
Ảnh mang nội dung (informative) truyền tải thông tin cần thiết: ảnh sản phẩm, biểu đồ, ảnh minh họa một bước hướng dẫn, ảnh chụp sự kiện trong bài báo. Những ảnh này BẮT BUỘC có alt mô tả nội dung.
Ảnh trang trí (decorative) chỉ để làm đẹp, không thêm thông tin: đường kẻ trang trí, họa tiết nền, icon lặp lại bên cạnh một chữ đã có nghĩa. Với ảnh này, bạn nên để alt rỗng: alt="" (dấu ngoặc kép liền nhau, không có khoảng trắng). Điều này báo cho screen reader "hãy bỏ qua ảnh này" và người dùng không bị làm phiền.
Lưu ý cực quan trọng: alt="" (alt rỗng có chủ đích) hoàn toàn khác với việc thiếu thuộc tính alt. Thiếu alt = screen reader không biết phải làm gì và thường đọc tên file. Alt rỗng = "cố tình bỏ qua, đây chỉ là trang trí". Luôn có thuộc tính alt trên mọi thẻ <img>, chỉ là nội dung có thể rỗng hay không.
Ảnh chức năng (functional images)
Khi ảnh là một nút bấm hoặc một liên kết — ví dụ logo công ty dẫn về trang chủ, icon kính lúp cho nút tìm kiếm — thì alt phải mô tả hành động/đích đến, không phải hình dạng.
<!-- Sai: mô tả hình dạng -->
<a href="/"><img src="logo.png" alt="Hình tròn màu xanh có chữ V"></a>
<!-- Đúng: mô tả chức năng -->
<a href="/"><img src="logo.png" alt="Vietcombank - về trang chủ"></a>
Tình huống thực tế
Ví dụ 1 — Sàn thương mại điện tử Việt Nam và bài toán 50.000 sản phẩm
Một sàn TMĐT tại TP.HCM (tạm gọi là ShopViet) có khoảng 50.000 sản phẩm đang bán. Đội kỹ thuật để tất cả ảnh sản phẩm với alt là tên file tự sinh từ hệ thống upload, kiểu alt="prod_88213_thumb.jpg". Một khách hàng khiếm thị gửi phản hồi rằng cô không thể phân biệt các sản phẩm khi dùng VoiceOver trên iPhone, mọi thứ đều chỉ là "prod, gạch dưới, số".
Đội ngũ nhận ra không thể ngồi viết tay 50.000 alt. Giải pháp họ chọn: dùng dữ liệu có sẵn trong hệ thống. Mỗi sản phẩm đã có tên, thương hiệu, màu sắc, danh mục trong cơ sở dữ liệu. Họ viết một script tự động ghép alt theo mẫu: "{Tên sản phẩm} - {Thương hiệu} - màu {màu}", ví dụ alt="Áo khoác gió nam - Owen - màu xanh navy". Kết quả: alt vừa hữu ích cho screen reader, vừa cải thiện thứ hạng Google Images (traffic từ tìm kiếm ảnh tăng khoảng 12% sau ba tháng).
Bài học rút ra: Ở quy mô lớn, alt text tốt không nhất thiết phải viết tay từng cái. Hãy tận dụng metadata có cấu trúc sẵn trong hệ thống. Nhưng phải kiểm tra mẫu ghép có tự nhiên không, tránh sinh ra alt kiểu robot.
Ví dụ 2 — Bài báo và tấm ảnh "một câu chuyện, hai ngữ cảnh"
Một tòa soạn báo điện tử đăng bài về lũ lụt miền Trung. Trong bài có tấm ảnh: một người phụ nữ đứng trên mái nhà, nước ngập đến gần mái, tay vẫy về phía đội cứu hộ.
Ban đầu content editor viết: alt="Ảnh chụp lũ lụt". Đúng nhưng vô dụng — người khiếm thị nghe xong vẫn không hiểu được cảm xúc và tình huống mà tấm ảnh muốn kể.
Sau khi được đào tạo về accessibility, họ sửa lại: alt="Một phụ nữ đứng trên mái nhà ngập gần hết, vẫy tay cầu cứu đội cứu hộ đang tiến tới bằng thuyền". Giờ đây người khiếm thị "thấy" được đúng câu chuyện mà tấm ảnh kể.
Điều thú vị: cùng tấm ảnh đó, nếu đặt trong một bài hướng dẫn kỹ thuật cứu hộ đường thủy, alt lại nên nhấn mạnh vào thao tác của đội cứu hộ. Ngữ cảnh quyết định nội dung alt.
Bài học rút ra: Alt không phải là caption (chú thích ảnh hiển thị dưới ảnh). Caption bổ sung thông tin cho tất cả mọi người; alt thay thế trải nghiệm hình ảnh cho người không thấy được. Đừng để trùng lặp máy móc, và luôn viết alt theo đúng ý đồ của ảnh trong ngữ cảnh cụ thể.
Ví dụ 3 — Ngân hàng số và ảnh biểu đồ chi tiêu
Một ứng dụng ngân hàng số tại Đông Nam Á có màn hình "Phân tích chi tiêu" với biểu đồ tròn hiển thị tỷ lệ chi tiêu theo danh mục (ăn uống 40%, di chuyển 20%, mua sắm 25%, khác 15%). Biểu đồ này được render thành ảnh <img>.
Đội thiết kế lúc đầu để alt="Biểu đồ chi tiêu tháng này". Người khiếm thị nghe xong biết có một biểu đồ, nhưng không biết mình đã chi bao nhiêu vào đâu — tức là mất hoàn toàn thông tin tài chính quan trọng.
Cách xử lý đúng: vì đây là ảnh phức tạp mang nhiều dữ liệu, alt ngắn không đủ. Họ đặt alt tóm tắt: alt="Biểu đồ tròn chi tiêu tháng 6: Ăn uống 40%, Mua sắm 25%, Di chuyển 20%, Khác 15%", đồng thời cung cấp một bảng dữ liệu ẩn/hiện ngay bên dưới để người dùng đọc chi tiết. Cách này vừa đúng WCAG, vừa hữu ích cho cả người sáng mắt muốn xem con số chính xác.
Bài học rút ra: Với ảnh chứa dữ liệu (biểu đồ, đồ thị, infographic), alt phải truyền tải được thông điệp/dữ liệu chính, chứ không chỉ nói "có một biểu đồ". Nếu dữ liệu quá nhiều, kết hợp alt tóm tắt với mô tả dài trong nội dung trang.
Hướng dẫn từng bước
Đây là quy trình bạn có thể áp dụng cho mọi hình ảnh:
Bước 1 — Xác định mục đích của ảnh. Tự hỏi: "Nếu xóa tấm ảnh này đi, người dùng có mất thông tin gì không?". Nếu có → ảnh mang nội dung. Nếu không → ảnh trang trí.
Bước 2 — Với ảnh trang trí, để alt rỗng. Viết alt="". Dừng lại, xong.
Bước 3 — Với ảnh chức năng (link/nút), mô tả hành động. Alt nói ảnh dẫn đến đâu hoặc làm gì, ví dụ alt="Tìm kiếm" cho icon kính lúp trong nút search.
Bước 4 — Với ảnh mang nội dung, mô tả thông tin theo ngữ cảnh. Viết một câu ngắn trả lời câu hỏi "ảnh này đang nói gì trong bối cảnh này?". Nhấn vào ý nghĩa, không vào chi tiết bề mặt vô nghĩa.
Bước 5 — Rút gọn. Bỏ "Hình ảnh của", "Ảnh chụp". Cắt bớt tính từ thừa. Nhắm dưới 125 ký tự.
Bước 6 — Với ảnh phức tạp, tách thành alt ngắn + mô tả dài. Alt tóm tắt thông điệp chính; mô tả chi tiết đặt trong text bên dưới hoặc dùng aria-describedby liên kết tới một khối mô tả.
Bước 7 — Kiểm thử thật. Bật screen reader (VoiceOver trên Mac/iPhone, NVDA miễn phí trên Windows) và nghe thử. Câu hỏi cuối cùng: "Nếu nhắm mắt lại, nghe câu này, mình có hiểu ảnh nói gì không?".
Lỗi thường gặp & mẹo
Lỗi 1 — Thiếu hẳn thuộc tính alt. Đây là lỗi phổ biến nhất. Luôn viết alt trên mọi <img>, dù nội dung có thể rỗng.
Lỗi 2 — Nhồi từ khóa SEO vào alt. Kiểu alt="giày nam giày thể thao giày rẻ giày sale giày TPHCM". Vừa hại trải nghiệm screen reader (nghe như spam), vừa bị Google phạt vì keyword stuffing. Alt tốt cho người dùng thì tự nhiên tốt cho SEO.
Lỗi 3 — Bắt đầu bằng "Hình ảnh của...". Dư thừa vì screen reader đã tự đọc "graphic/image".
Lỗi 4 — Dùng alt trùng y hệt caption. Người dùng nghe hai lần một nội dung. Nếu ảnh đã có caption đầy đủ, có thể để alt ngắn gọn hơn hoặc bổ sung góc nhìn khác.
Lỗi 5 — Alt cho icon đã có nhãn text bên cạnh. Nếu bạn có <img src="cart.svg" alt="Giỏ hàng"> Giỏ hàng, screen reader đọc "Giỏ hàng, Giỏ hàng". Icon lúc này chỉ trang trí, nên để alt="".
Mẹo 1 — Quy tắc "nghe lại". Đọc to alt của bạn lên như thể bạn là screen reader. Nếu nghe kỳ cục, viết lại.
Mẹo 2 — Với ảnh chụp người thật trong nội dung xã hội, mô tả một cách tôn trọng. Nêu điều liên quan (hành động, bối cảnh), tránh phán xét về ngoại hình khi không cần thiết.
Mẹo 3 — Chuẩn hóa quy trình cho đội. Đưa alt text vào checklist review nội dung, giống như kiểm tra chính tả. Đừng để nó là việc "nhớ thì làm".
Bài tập thực hành
Bài 1 — Phân loại. Cho các ảnh sau, xác định là informative, decorative hay functional, và viết alt phù hợp:
- (a) Logo công ty ở góc trên, bấm vào dẫn về trang chủ.
- (b) Đường viền hoa văn trang trí ở đầu bài blog.
- (c) Ảnh chụp món phở trong bài viết "Top 5 quán phở Hà Nội".
- (d) Icon kính lúp bên trong ô tìm kiếm.
alt="IMG_20240612.jpg"(ảnh một cốc cà phê sữa đá trên bàn gỗ trong bài review quán)alt="Hình ảnh của biểu đồ"(biểu đồ cột doanh thu 4 quý: Q1 100 triệu, Q2 150 triệu, Q3 130 triệu, Q4 200 triệu)alt="banner sale giảm giá khuyến mãi hot deal sốc"(banner quảng cáo "Giảm 50% toàn bộ giày, đến hết 30/6")
Gợi ý đáp án Bài 1: (a) functional — alt="Tên công ty - về trang chủ"; (b) decorative — alt=""; (c) informative — alt="Tô phở bò tái với hành lá và rau thơm"; (d) functional — alt="Tìm kiếm".
Tóm tắt
Alt text là cầu nối giữa hình ảnh và những người không nhìn thấy được nó — người dùng screen reader, người gặp lỗi tải ảnh, và cả công cụ tìm kiếm. Ba điều cốt lõi cần nhớ:
- Luôn có thuộc tính alt trên mọi
<img>. Ảnh mang nội dung thì mô tả theo ngữ cảnh; ảnh trang trí đểalt=""; ảnh chức năng thì mô tả hành động. - Viết ngắn gọn, tự nhiên, đúng ngữ cảnh — trả lời câu hỏi "ảnh này đang nói gì ở đây?", bỏ "hình ảnh của", tránh nhồi từ khóa, nhắm dưới 125 ký tự.
- Kiểm thử bằng screen reader thật — nếu nhắm mắt nghe mà vẫn hiểu, bạn đã làm đúng.