Form dễ tiếp cận: những cách sửa quan trọng nhất

Form là nơi các vấn đề về khả năng tiếp cận gây thiệt hại lớn nhất, vì một khách truy cập không thể hoàn thành form thì không thể mua hàng, đặt chỗ hay liên hệ với bạn. Điều đáng khích lệ là phần lớn lỗi đến từ một danh sách ngắn các nguyên nhân, và cách sửa chủ yếu là HTML thuần. Bài viết này tập hợp những thay đổi chúng tôi sẽ làm đầu tiên khi rà soát một form liên hệ, một bước thanh toán hoặc một form đăng ký nhận bản tin.

Dùng phần tử native trước khi tự chế

Một div có style trông như ô nhập liệu không phải là ô nhập liệu. Trình đọc màn hình có thể không thông báo nó như vậy, nhấp vào chữ của nó không focus vào đâu cả, giá trị của nó không được gửi theo mặc định, và thiết bị di động không thể hiện đúng bàn phím trên màn hình cho nó. Các control native mang lại tất cả những thứ đó miễn phí. Logic này cũng áp dụng cho nút bấm: một button thật có thể focus và thao tác bằng Enter và Space ngay từ đầu.

Nếu bạn thật sự phải xây một widget tùy biến, hướng dẫn về bàn phím của MDN đưa ra danh sách kiểm tra: nó phải truy cập được bằng Tab, phải phản hồi các sự kiện bàn phím chứ không chỉ sự kiện con trỏ, và phải hiển thị style focus nhìn thấy được. tabindex="0" đặt một phần tử vào thứ tự tự nhiên; nên tránh các giá trị lớn hơn không vì chúng kéo focus ra khỏi thứ tự đọc và gây bối rối cho mọi người.

<!-- Prefer this -->
<button type="button" class="save">Save</button>

<!-- Only if you cannot: it needs role, tabindex and key handling -->
<div role="button" tabindex="0" class="save">Save</div>

Gắn label cho mọi control, và đặt gợi ý ở nơi có thể liên kết

Mỗi ô nhập cần một label liên kết. Khớp for của label với id của ô nhập cùng lúc làm được hai việc: công nghệ hỗ trợ đọc label, và nhấp vào label sẽ focus vào trường, làm vùng bấm lớn hơn. Với quy tắc định dạng và văn bản trợ giúp, hãy đặt gợi ý cạnh trường và nối nó bằng aria-describedby.

<label for="pw">Password</label>
<input id="pw" name="pw" type="password"
       minlength="8" required
       aria-describedby="pw-hint">
<p id="pw-hint">Use at least eight characters.</p>

Hướng dẫn về validation của Smashing Magazine khuyên giữ label tách riêng khỏi gợi ý và lỗi thay vì bọc mọi thứ trong phần tử label, vì làm vậy khiến việc đọc thông báo ồn hơn và kiểm thử khó hơn. Cũng hãy dùng đúng type và inputmode để điện thoại hiện đúng bàn phím.

Làm cho lỗi dễ nhận biết, cụ thể và có liên kết

Chỉ riêng viền đỏ là chưa đủ với người có khác biệt về thị giác màu. Hãy kết hợp màu sắc với một biểu tượng và, trên hết, là văn bản nói rõ cái gì sai và cách sửa, bằng ngôn ngữ đơn giản. Sau đó liên kết văn bản đó với trường và đánh dấu trường là không hợp lệ:

<label for="email">Email</label>
<input id="email" name="email" type="email"
       aria-invalid="true"
       aria-describedby="email-error">
<p id="email-error">Enter an address like [email protected].</p>

Hướng dẫn này khuyên dùng aria-describedby thay vì aria-errormessage ở thời điểm hiện tại, vì mức hỗ trợ của cái sau trong các trình đọc màn hình còn yếu. Nó cũng chỉ ra rằng nếu văn bản lỗi thay đổi khi trường đã có focus, văn bản mới sẽ không được đọc lại cho đến khi trường được focus lần nữa.

Quyết định cách thông báo lỗi khi gửi form

Hai hướng dẫn chúng tôi đã đọc khác nhau ở chi tiết nhưng thống nhất về nguyên tắc: đừng dồn dập trình đọc màn hình. Với form dài, hãy hiển thị một phần tóm tắt gần nút gửi, được thông báo một lần, và giữ các thông báo inline riêng lẻ ở chế độ im lặng. Với form ngắn như đăng nhập, chuyển focus đến trường không hợp lệ đầu tiên hoạt động tốt, vì lỗi được liên kết của nó được đọc ngay khi nhận focus. Dù chọn mẫu nào, hãy tránh để nhiều vùng aria-live kích hoạt cùng lúc, vì thường chỉ vùng đầu tiên được nghe đáng tin cậy.

Cũng nên thận trọng khi vô hiệu hóa nút gửi cho đến khi mọi thứ hợp lệ. Khách truy cập có thể không hiểu vì sao nó không hoạt động. Để họ nhấn nút rồi giải thích những gì cần chú ý sẽ tử tế và rõ ràng hơn.

Giữ focus luôn nhìn thấy được

Đừng bao giờ bỏ outline mà không thay thế. Selector :focus-visible cho phép bạn hiển thị chỉ báo rõ ràng cho người dùng bàn phím mà không thêm nó vào mọi cú nhấp chuột.

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

Hãy đảm bảo thứ tự hiển thị khớp với thứ tự DOM. Nếu CSS sắp xếp lại các trường trên màn hình, người dùng bàn phím và trình đọc màn hình sẽ gặp chúng theo một trình tự khác với người nhìn được.

Kiểm thử bằng nhiều hơn một công cụ quét

Các công cụ kiểm tra tự động là lượt đầu tốt, nhưng bài viết của Smashing ước tính chúng chỉ bắt được khoảng 20 đến 25 phần trăm vấn đề và bỏ sót phần lớn hành vi tương tác. web.dev đề xuất một quy trình thủ công ngắn thay thế: hoàn thành form chỉ bằng bàn phím, chạy nó với một trình đọc màn hình như NVDA trên Windows hoặc VoiceOver trên Mac, và phóng to trang lên 200 phần trăm để xem cái gì hỏng. Làm việc này một lần cho mỗi template sẽ bắt được phần lớn những gì công cụ quét bỏ sót.

Nếu bạn muốn được hỗ trợ audit một theme hoặc bước thanh toán của cửa hàng theo các điểm này, hãy xem dịch vụ của chúng tôi; markup dễ tiếp cận cũng là điều chúng tôi hướng tới trong các theme của mình.