a11y: web cho mọi người

Ngoài đời, một toà nhà tử tế có đường dốc cho xe lăn, thang máy có nút chữ nổi, vỉa hè có vạch gồ cho người khiếm thị. Những thứ đó không làm phiền ai, mà giúp nhiều người hơn dùng được toà nhà. Web cũng vậy - và việc làm cho trang ai cũng dùng được gọi là accessibility (khả năng tiếp cận), viết tắt a11y (chữ a, 11 chữ ở giữa, chữ y).

Ai cần a11y? Nhiều hơn ta tưởng:

• ▸Người khiếm thị dùng screen reader (phần mềm đọc màn hình) để NGHE trang thay vì nhìn.
• ▸Người chỉ dùng được bàn phím (không dùng chuột vì lý do vận động).
• ▸Người thị lực kém hoặc mù màu cần chữ đủ rõ, đủ tương phản.
• ▸Cả người bình thường lúc bất tiện: đang bế mèo nên dùng một tay, hay nhìn màn hình ngoài nắng chói.

Người khiếm thị không nhìn trang mà nghe nó, qua screen reader. Phần mềm này đọc nội dung tuần tự, đọc alt của ảnh, đọc tên trường form - và quan trọng: cho người dùng nhảy nhanh giữa các heading và landmark, đúng như cấu trúc mèo con dựng ở bài Cấu trúc một trang chuẩn semantic.

Nghĩa là phần lớn a11y mèo con đã làm rồi mà không hay: thẻ semantic cho landmark, heading có thứ bậc, và đặc biệt thuộc tính alt - thứ âm thầm phục vụ cả người khiếm thị lẫn máy tìm kiếm:

Một điểm mới đáng nhớ: hãy dùng đúng thẻ cho đúng việc. Một nút bấm phải là <button>, không phải một <div> trang điểm cho giống nút. Vì screen reader đọc thẻ button là "nút bấm" và cho bấm được; còn div thì với nó chỉ là một ô vô nghĩa.

<!-- Tốt: máy đọc biết đây là nút, bấm được bằng bàn phím -->
<button>Mua ngay</button>

<!-- Tệ: nhìn giống nút nhưng máy đọc không hiểu, không bấm được bằng bàn phím -->
<div class="btn">Mua ngay</div>

• ▸Screen reader đọc trang tuần tự và nhảy theo heading/landmark - cấu trúc semantic là bản đồ.
• ▸alt, label, heading mèo con đã học chính là nền a11y, không cần làm lại.
• ▸Dùng đúng thẻ (button cho nút, a cho link) để máy đọc hiểu và bàn phím dùng được.

Nhiều người duyệt web chỉ bằng bàn phím: phím Tab nhảy tới phần tử tương tác kế tiếp, Shift+Tab lùi lại, Enter/Space để kích hoạt. Một trang tốt phải đi được hết bằng bàn phím. Có hai thói quen giữ điều đó.

Một: dùng thẻ tương tác đúng. Các thẻ a, button, input tự nhận được focus và bấm được bằng bàn phím - miễn phí. Còn div/span thì không, dù mèo con tô cho nó giống nút đến đâu.

Hai: đừng xoá focus ring - vòng sáng trình duyệt vẽ quanh phần tử đang được chọn. Với người dùng bàn phím, nó chính là "con trỏ chuột" của họ: xoá đi là họ lạc, không biết mình đang ở đâu trên trang. CSS outline: none để cho "đẹp" là một lỗi a11y kinh điển.

<a href="/">Trang chủ</a>      <!-- Tab lần 1 dừng ở đây -->
<a href="/khoa-hoc">Khoá học</a>  <!-- Tab lần 2 -->
<input id="q" />                <!-- Tab lần 3 -->
<button>Tìm</button>           <!-- Tab lần 4 -->

• ▸Tab/Shift+Tab di chuyển focus; Enter/Space kích hoạt - nhiều người duyệt web chỉ vậy.
• ▸a, button, input tự dùng được bằng bàn phím; div/span thì không.
• ▸Giữ focus ring (outline) - nó là con trỏ của người dùng bàn phím.
• ▸Thứ tự focus đi theo thứ tự thẻ trong HTML, nên trật tự thẻ hợp lý là quan trọng.

Đa số trường hợp, HTML semantic đã đủ kể cho máy đọc mọi thứ. Nhưng đôi khi có khoảng trống - vd một nút chỉ có icon, không có chữ. Mắt người nhìn dấu ✕ thì đoán ra "đóng", nhưng screen reader chẳng có chữ nào để đọc. Lúc đó ta cần ARIA (Accessible Rich Internet Applications) - bộ thuộc tính bổ nghĩa thêm cho máy đọc.

Hai thứ hay dùng nhất: aria-label đặt một cái tên cho phần tử không có chữ, và aria-hidden="true" giấu phần thuần trang trí khỏi máy đọc.

<!-- Nút icon: thêm aria-label để máy đọc biết nó là gì -->
<button aria-label="Đóng">✕</button>

<!-- Icon thuần trang trí: giấu khỏi máy đọc cho đỡ ồn -->
<span aria-hidden="true">★</span> Đánh giá cao

Người thị lực kém, người mù màu, hay bất cứ ai đọc màn hình ngoài nắng đều cần chữ nổi đủ rõ trên nền. Để đo "đủ rõ" một cách khách quan, chuẩn WCAG (Web Content Accessibility Guidelines) dùng tỉ số tương phản (contrast ratio) giữa màu chữ và màu nền - từ 1:1 (trùng màu, vô hình) tới 21:1 (đen trên trắng). Ngưỡng tối thiểu cho chữ thường là 4.5:1 (mức AA).

Kéo thử hai màu dưới đây và xem tỉ số đổi thế nào - chú ý cặp xám-trên-trắng trượt sát ngưỡng:

Một cái bẫy hay gặp: màu xám nhạt như #777 trên nền trắng nhìn "có vẻ ổn" nhưng chỉ đạt khoảng 4.48:1 - trượt AA trong gang tấc. Chữ đậm hơn một chút là qua.

• ▸Tỉ số tương phản đo chữ có nổi đủ trên nền không (1:1 vô hình → 21:1 đen/trắng).
• ▸Chữ thường cần >= 4.5:1 (WCAG AA); chữ lớn nhẹ ngưỡng hơn (3:1).
• ▸Đừng chỉ dùng màu để báo thông tin - kèm chữ/icon cho người mù màu.

Mèo con không cần công cụ đắt tiền để kiểm a11y cơ bản. Ba cách nhanh:

• ▸Cất chuột đi, đi hết trang chỉ bằng Tab - tới được mọi nút/link và luôn thấy focus ring?
• ▸Mở DevTools của trình duyệt, chạy Lighthouse (hoặc tiện ích axe) để nó chấm điểm a11y.
• ▸Đọc to alt của từng ảnh xem có hiểu ảnh nói gì không; thử phóng to chữ 200%.

Để ý điều này: gần như mọi việc làm cho a11y - HTML semantic, alt, heading có thứ bậc, link có chữ rõ nghĩa - cũng chính là việc làm cho SEO. Lý do giống hệt nhau: screen reader và Google đều là "máy đọc" trang qua thẻ chứ không qua mắt. Làm tốt cái này thường được luôn cái kia.