Đây là lỗi nhỏ về mặt markup, nhưng lại gây ảnh hưởng lớn đến accessibility và khả năng sử dụng bằng bàn phím.
Accessible name của button là gì
Accessible name là tên mà công nghệ hỗ trợ dùng để mô tả một nút. Khi screen reader gặp button, nó cần biết:
- Nút này dùng để làm gì
- Hành động nào sẽ xảy ra khi bấm
Tên này có thể đến từ:
- Nội dung text bên trong button
- Thuộc tính
aria-label - Thuộc tính
aria-labelledby
Nếu không có nguồn nào ở trên, button sẽ bị coi là không có accessible name.
Vì sao lỗi này xuất hiện rất nhiều
Lỗi này phổ biến vì xu hướng thiết kế và cách triển khai UI hiện đại.
- Icon button không có text
- Dùng
<div>hoặc<span>giả button - Button chỉ chứa SVG
- Framework che giấu HTML gốc bên dưới
Về mặt thị giác, icon đã đủ rõ. Nhưng screen reader thì không “nhìn thấy” icon.
Những vị trí dễ dính lỗi nhất
- Nút search, close, menu
- Icon action trong bảng dữ liệu
- Player controls
- Custom dropdown và slider
- Button được build bằng JavaScript
Ví dụ sai thường gặp
<button>
<svg></svg>
</button>
Button trên không có bất kỳ tên nào để screen reader đọc.
Ví dụ đúng chuẩn accessibility
Cách tốt nhất là dùng text trực tiếp:
<button>Tìm kiếm</button>
Nếu UI bắt buộc phải dùng icon-only button:
<button aria-label="Tìm kiếm">
<svg></svg>
</button>
Giải pháp này giữ nguyên giao diện nhưng vẫn đảm bảo button có tên rõ ràng.
Tránh dùng div giả button
Một lỗi rất phổ biến là dùng <div> làm button:
<div onclick="submitForm()">
Gửi
</div>
Cách này gây hàng loạt vấn đề: không có accessible name đúng nghĩa, không focus bằng bàn phím, không có hành vi chuẩn của button.
Nên thay bằng:
<button type="button">Gửi</button>
Những sai lầm cần tránh
- Dùng icon-only button nhưng không có aria-label
- Dùng aria-label chung chung như “button”
- Lạm dụng role=”button” thay vì dùng thẻ
<button> - Tạo button bằng div vì lý do CSS
Ảnh hưởng của lỗi này đến accessibility
Khi button không có accessible name:
- Screen reader không thể mô tả chức năng nút
- Người dùng bàn phím khó điều hướng
- Trải nghiệm sử dụng trở nên rối rắm
- Điểm accessibility audit bị trừ nặng
Lợi ích khi sửa lỗi button không có tên
Khi mỗi button đều có accessible name rõ ràng:
- Screen reader đọc giao diện mạch lạc
- UI dễ sử dụng hơn cho mọi đối tượng
- Code semantic và dễ bảo trì
- Website đạt chuẩn accessibility tốt hơn
Kết luận
Lỗi Buttons do not have an accessible name thường xuất phát từ việc ưu tiên giao diện mà bỏ qua ngữ nghĩa HTML. Chỉ cần đảm bảo mỗi button đều có text hoặc nhãn ARIA phù hợp, và sử dụng đúng thẻ <button>, bạn đã loại bỏ hoàn toàn lỗi này và cải thiện đáng kể trải nghiệm accessibility cho website.
Bình luận