Làm cho tiện ích của bạn dễ tiếp cận

Đối với nhiều người dùng, hỗ trợ tiếp cận chính là giao diện người dùng và các tính năng của giao diện này thường có thể hữu ích cho những người không cần phương thức chính để tương tác với tiện ích của bạn. Kỹ thuật rất đa dạng. Ít nhất, văn bản phải có độ tương phản cao. Video phải có phụ đề. Hình ảnh phải chứa các thuộc tính alt.

Nhưng như đã nói, đây chỉ là mức tối thiểu. Các kỹ thuật khác được mô tả trong phần sau đây.

Có một vài cách để triển khai khả năng hỗ trợ tiếp cận, nhưng cách dễ nhất là sử dụng một thành phần điều khiển HTML chuẩn, đặc biệt là các phần tử đầu vào. Hình ảnh sau đây cho thấy các chế độ kiểm soát này.

Ảnh chụp màn hình và mã cho nút, hộp đánh dấu, đài, văn bản, lựa chọn/tuỳ chọn và đường liên kết
Ảnh chụp màn hình và mã cho nút, hộp đánh dấu, chọn, văn bản, chọn/tuỳ chọn và đường liên kết.

Để truy cập được vào các phần tử khác, hãy dùng thuộc tính ARIA. Các thuộc tính này cung cấp thông tin cho trình đọc màn hình về chức năng và trạng thái hiện tại của các chế độ điều khiển trên trang web. Sau đây là một ví dụ.

<div role="toolbar" tabindex="0" aria-activedescendant="button1">
  <img src="buttoncut.png" role="button" alt="cut" id="button1">
  <img src="buttoncopy.png" role="button" alt="copy" id="button2">
  <img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>

Theo mặc định, các thành phần duy nhất trong DOM HTML có thể nhận tiêu điểm bàn phím là neo, nút và các thành phần điều khiển biểu mẫu. May mắn là việc đặt thuộc tính tabIndex trên một phần tử HTML sẽ cho phép phần tử này nhận tiêu điểm bàn phím. Ví dụ:

<div tabindex="0">I can receive focus with the tab key.</div>

Để biết hướng dẫn triển khai các kỹ thuật này và các kỹ thuật khác, hãy xem bài viết Hỗ trợ khả năng hỗ trợ tiếp cận.