Alt text thường được kiểm bằng một câu hỏi duy nhất: có hay không. Nhưng phần lớn lỗi alt thực tế lại nằm ở chỗ có mà sai: mọi ảnh dùng chung tiêu đề bài, alt là tên file, alt là chuỗi từ khóa cách nhau bằng dấu phẩy. Bài này viết một script audit bắt các lỗi đó.

Thiếu alt khác alt rỗng

Đây là điểm quan trọng nhất khi viết audit. alt="" là hợp lệ và là cách đúng cho ảnh trang trí theo W3C. Còn thiếu hẳn thuộc tính alt thì một số trình đọc màn hình sẽ đọc tên file ảnh.

<!-- Ảnh trang trí: đúng --> <img src="duong-ke.svg" alt=""> <!-- Thiếu alt: trình đọc màn hình có thể đọc "duong-ke chấm svg" --> <img src="duong-ke.svg">

Trong Python, phân biệt bằng img.get("alt") is None chứ không phải not img.get("alt").

Script audit 

import re from collections import Counter from bs4 import BeautifulSoup TEN_FILE = re.compile(r"(\.(jpe?g|png|webp|gif|avif)$)|^(img|dsc|screenshot)[-_ ]?\d+", re.I) MO_DAU_THUA = re.compile(r"^(hình ảnh|ảnh|image|picture) (của|of)\b", re.I) def audit_alt(html: str, tieu_de_bai: str = "") -> list: soup = BeautifulSoup(html, "html.parser") imgs = soup.find_all("img") loi = [] dem = Counter((i.get("alt") or "").strip().lower() for i in imgs) for img in imgs: src = img.get("src", "") alt = img.get("alt") if alt is None: loi.append(("thieu_alt", src)) continue alt = alt.strip() if not alt: if img.find_parent("a"): loi.append(("link_alt_rong", src)) continue if TEN_FILE.search(alt): loi.append(("alt_la_ten_file", alt)) if MO_DAU_THUA.match(alt): loi.append(("mo_dau_hinh_anh_cua", alt)) if alt.count(",") >= 2 and len(alt.split()) / (alt.count(",") + 1) <= 3: loi.append(("nghi_nhoi_tu_khoa", alt)) if len(alt) > 125: loi.append(("alt_qua_dai", alt[:60] + "...")) if dem[alt.lower()] > 1: loi.append(("alt_trung", alt)) if tieu_de_bai and alt.lower() == tieu_de_bai.strip().lower(): loi.append(("alt_bang_tieu_de_bai", src)) return loi

Giải thích từng luật

  • link_alt_rong: ảnh nằm trong thẻ a mà alt rỗng thì link không có tên. Ảnh làm link phải có alt nói nơi đến, ví dụ "Xem bộ sưu tập áo thun nam mùa hè", vì alt đó đóng vai anchor text.
  • nghi_nhoi_tu_khoa: heuristic đơn giản, nhiều dấu phẩy và mỗi cụm rất ngắn, bắt kiểu "áo thun, áo thun nam, áo thun giá rẻ". Google gọi việc nhồi từ khóa vào alt là trải nghiệm xấu và có thể bị xem là spam.
  • alt_qua_dai: HTML không giới hạn độ dài alt, nhưng người dùng trình đọc màn hình phải nghe hết câu. Ngưỡng khoảng 125 ký tự là quy ước thực tế, không phải chuẩn.
  • alt_trung và alt_bang_tieu_de_bai: dấu hiệu của plugin tự điền alt bằng tiêu đề bài, mười ảnh mang chung một câu.

Những gì script không bắt được

Script không biết alt có tả đúng ảnh không, và không biết banner có chứa chữ quan trọng như "Giảm 20% đến hết tháng 11" hay không. Hai việc đó vẫn cần người nhìn ảnh. Script chỉ thu hẹp danh sách ảnh cần nhìn.

Phần dành cho người viết nội dung, gồm 7 cách viết alt và bảng ví dụ theo loại ảnh, có trong bài Thẻ alt là gì trên Onic.vn.

Bài gốc: https://onic.vn/kien-thuc/the-alt-la-gi/