Tiện ích cho phép người dùng tạo trải nghiệm duyệt web lý tưởng, phù hợp với khả năng và lựa chọn ưu tiên của từng cá nhân. Tiện ích phải bao gồm các thành phần hỗ trợ tiếp cận khuyến khích cơ sở người dùng toàn diện bằng cách tạo điều kiện cho người khiếm thị, suy giảm thính lực, bị hạn chế về tay và các khuyết tật khác có thể sử dụng tiện ích này.
Mọi người (không chỉ những người dùng có nhu cầu đặc biệt) đều có thể hưởng lợi từ bộ tính năng hỗ trợ tiếp cận. Những người dùng có thị lực kém, độ khéo léo thấp và những người dùng thành thạo đều được hưởng lợi từ phím tắt. Phụ đề và bản chép lời là thành phần cần thiết đối với người dùng khiếm thính nhưng cũng giúp ích cho người học ngôn ngữ.
Mọi người có thể tương tác với một tiện ích theo nhiều cách. Một số người dùng có màn hình, bàn phím và chuột tiêu chuẩn – hoặc họ có thể phụ thuộc vào kính lúp và có thể là trình đọc màn hình. Mặc dù không thể dự đoán những công cụ mà mọi người sẽ sử dụng để truy cập vào một tiện ích, nhưng mọi nhà phát triển đều có thể thực hiện một số bước để làm cho tiện ích đó dễ tiếp cận nhất có thể.
Tích hợp các thành phần điều khiển trên giao diện người dùng dễ tiếp cận
Nếu không thể truy cập vào các nút điều khiển giao diện người dùng, thì người dùng sẽ không thể sử dụng tiện ích. Cách dễ nhất để tạo một giao diện người dùng dễ tiếp cận là sử dụng thành phần điều khiển HTML tiêu chuẩn.
Chế độ điều khiển tiêu chuẩn
Bất cứ khi nào có thể, hãy sử dụng các chế độ kiểm soát giao diện người dùng HTML tiêu chuẩn. Các điều khiển HTML chuẩn là bàn phím có thể truy cập, dễ dàng chuyển tỷ lệ và thường được trình đọc màn hình hiểu.
WAI-ARIA trong các chế độ điều khiển tuỳ chỉnh
Sáng kiến hỗ trợ tiếp cận trên web – Ứng dụng Internet đa dạng thức có thể tiếp cận, WAI-ARIA, là quy cách để trình đọc màn hình có thể truy cập vào các chế độ điều khiển giao diện người dùng thông qua một bộ thuộc tính DOM chuẩn. 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.
Để thêm tính năng hỗ trợ WAI-ARIA vào các chế độ điều khiển tuỳ chỉnh, bạn cần sửa đổi các phần tử DOM của tiện ích để bao gồm các thuộc tính mà Chrome sử dụng để đưa ra sự kiện trong quá trình tương tác của người dùng. Trình đọc màn hình sẽ phản hồi các sự kiện này và mô tả chức năng của chế độ điều khiển. Thuộc tính DOM do WAI-ARIA chỉ định được phân loại thành các vai trò, trạng thái và thuộc tính.
<div role="toolbar">
Thuộc tính aria-activedescendant chỉ định tệp con nào của thanh công cụ sẽ nhận được tiêu điểm khi thanh công cụ đó nhận được tiêu điểm. Mã tabindex="0" chỉ định rằng thanh công cụ nhận tiêu điểm theo thứ tự tài liệu.
Hãy xem xét thông số kỹ thuật hoàn chỉnh cho một thanh công cụ mẫu dưới đây:
<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>
Sau khi các vai trò, trạng thái và thuộc tính của WAI-ARIA được thêm vào DOM của chế độ điều khiển, Google Chrome sẽ hiển thị các sự kiện thích hợp cho trình đọc màn hình. Do tính năng hỗ trợ WAI-ARIA vẫn đang trong quá trình hoàn thiện, nên Google Chrome có thể không đưa ra sự kiện cho mọi thuộc tính WAI-ARIA và trình đọc màn hình có thể không nhận ra tất cả sự kiện được đưa ra.
Để xem hướng dẫn nhanh về cách thêm các chế độ điều khiển WAI-ARIA vào các chế độ điều khiển tuỳ chỉnh, hãy xem bản trình bày của Dae Raggett trong www2010.
Tập trung vào các chế độ điều khiển tuỳ chỉnh
Tiêu điểm bàn phím là yếu tố cần thiết đối với những người dùng di chuyển trên web mà không cần chuột. Hãy đảm bảo các chế độ điều khiển thao tác và điều hướng (chẳng hạn như nút, hộp danh sách và thanh trình đơn) có thể nhận tiêu điểm bằng bàn phím.
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ằng bàn phím là neo, nút và các thành phần điều khiển biểu mẫu. Tuy nhiên, việc đặt thuộc tính HTML tabIndex thành 0 sẽ đặt các phần tử DOM theo trình tự thẻ mặc định, cho phép các phần tử đó nhận tiêu điểm bàn phím.
element.tabIndex = 0
element.focus();
Việc đặt tabIndex = -1 sẽ xoá phần tử khỏi trình tự thẻ nhưng vẫn cho phép phần tử nhận tiêu điểm bàn phím theo phương thức lập trình.
Hỗ trợ truy cập bằng bàn phím
Các tiện ích nên sử dụng được chỉ với bàn phím, cho phép những người dùng không sử dụng được chuột và cho phép những người dùng không sử dụng được các tiện ích đó.
Thao tác
Kiểm tra để đảm bảo rằng người dùng có thể di chuyển giữa các phần của tiện ích mà không cần dùng chuột. Kiểm tra để đảm bảo mọi trường hợp sử dụng cửa sổ bật lên đều có thể điều hướng bằng bàn phím. Sử dụng phím tắt của Chrome để xác định xem một tiện ích có thể di chuyển được hay không.
Đảm bảo dễ dàng thấy được phần nào của giao diện được đặt tiêu điểm bằng bàn phím. Thông thường, đường viền tâm điểm sẽ di chuyển xung quanh giao diện. Tuy nhiên, nếu CSS được sử dụng quá nhiều, đường viền có thể bị chặn hoặc độ tương phản bị giảm.
Phím tắt
Mặc dù chiến lược điều hướng bằng bàn phím phổ biến nhất là sử dụng phím Tab để xoay tiêu điểm thông qua giao diện của tiện ích, nhưng không phải lúc nào đây cũng là tuỳ chọn dễ nhất hoặc hiệu quả nhất.
Trình xử lý bàn phím JavaScript đơn giản có thể có dạng như sau. Lưu ý cách thuộc tính WAI-ARIA aria-activedescendant được cập nhật theo hoạt động đầu vào của người dùng nhằm phản ánh nút đang hoạt động trên thanh công cụ.
function optionKeyEvent(event) {
var tb = event.target;
var buttonid;
ENTER_KEYCODE = 13;
RIGHT_KEYCODE = 39;
LEFT_KEYCODE = 37;
// Partial sample code for processing arrow keys.
if (event.type == "keydown") {
// Implement circular keyboard navigation within the toolbar buttons
if (event.keyCode == ENTER_KEYCODE) {
ExecuteButtonAction(getCurrentButtonID());
// getCurrentButtonID defined elsewhere
} else if (event.keyCode == event.RIGHT_KEYCODE) {
// Change the active toolbar button to the one to the right (circular).
var buttonid = getNextButtonID();
// getNextButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else if (event.keyCode == event.LEFT_KEYCODE) {
// Change the active toolbar button to the one to the left (circular).
var buttonid = getPrevButtonID();
// getPrevButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else {
return true;
}
return false;
}
}
<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1"
onkeydown="return optionKeyEvent(event);"
onkeypress="return optionKeyEvent(event);">
<img src="buttoncut" role="button" alt="cut" id="button1">
<img src="buttoncopy" role="button" alt="copy" id="button1">
<img src="buttonpaste" role="button" alt="paste" id="button1">
</div>
Tiện ích có thể tạo phím tắt rõ ràng cho các phần tử quan trọng trên giao diện người dùng của tiện ích. Để triển khai các phím tắt này, hãy kết nối trình nghe sự kiện bàn phím với các chế độ điều khiển. Cho người dùng biết các phím tắt hiện có bằng cách cung cấp các phím tắt đó trên trang tuỳ chọn.
Cung cấp nội dung dễ tiếp cận
Việc cung cấp nội dung dễ tiếp cận là điều quan trọng đối với tất cả người dùng. Nhiều nguyên tắc sau đây nghe có vẻ quen thuộc, vì các nguyên tắc này phản ánh các phương pháp hay dành cho mọi nội dung trên web.
Văn bản
Các lựa chọn về phông chữ và kích thước văn bản ảnh hưởng đến mức độ dễ đọc của nội dung tiện ích. Người dùng gặp vấn đề về thị giác có thể cần tăng kích thước văn bản của tiện ích. Nếu bạn sử dụng phím tắt, hãy đảm bảo rằng các phím tắt đó không can thiệp vào các phím tắt thu phóng tích hợp trong Chrome.
Để thể hiện tính linh hoạt của giao diện người dùng của một tiện ích, hãy áp dụng thử nghiệm 200%; nếu kích thước văn bản hoặc mức thu phóng trang tăng lên 200%, thì liệu có còn sử dụng được không?
Tránh kết hợp văn bản vào hình ảnh. Người dùng không thể sửa đổi kích thước và trình đọc màn hình không thể diễn giải hình ảnh. Thay vào đó, hãy chọn phông chữ đã được tạo kiểu cho web, chẳng hạn như một trong các phông chữ có trong Google Font API. Phông chữ trên web có thể thay đổi tỷ lệ thành nhiều kích thước và người dùng có thể truy cập bằng trình đọc màn hình.
Màu sắc
Cần có đủ độ tương phản giữa màu nền và màu văn bản trong phần mở rộng. Sử dụng công cụ kiểm tra độ tương phản để kiểm tra xem màu nền trước và màu nền trước có độ tương phản phù hợp hay không.
Khi đánh giá độ tương phản, hãy xác minh rằng mọi phần của tiện ích dựa vào đồ hoạ để truyền tải thông tin đều hiển thị rõ ràng. Đối với hình ảnh cụ thể, bạn có thể sử dụng các công cụ như Coblis – Trình mô phỏng mù màu để xem hình ảnh sẽ trông như thế nào ở nhiều dạng thiếu màu.
Hãy cân nhắc cung cấp nhiều chủ đề màu sắc hoặc cho phép người dùng tuỳ chỉnh bảng phối màu để tạo độ tương phản tốt hơn.
Âm thanh
Nếu một tiện ích dựa vào âm thanh hoặc video để truyền tải thông tin, hãy đảm bảo rằng phụ đề hoặc bản chép lời có sẵn. Vui lòng xem Nguyên tắc về chương trình nội dung nghe nhìn được mô tả và có phụ đề để biết thêm thông tin về phụ đề.
Hình ảnh
Cung cấp văn bản thay thế giàu thông tin cho hình ảnh.
<img src="img.jpg" alt="The logo for the extension">
Hãy sử dụng văn bản thay thế để nêu mục đích của hình ảnh thay vì mô tả bằng chữ về nội dung của hình ảnh. Hình ảnh khoảng trống hoặc hình ảnh thuần tuý trang trí phải có văn bản thay thế "" trống hoặc phải được xoá hoàn toàn khỏi HTML và đặt trong CSS.
Nếu tiện ích phải sử dụng văn bản trong hình ảnh, hãy thêm văn bản hình ảnh đó vào văn bản thay thế. Bạn nên tham khảo bài viết trên WebAIM về văn bản thay thế thích hợp.
Tìm hiểu thêm
Tìm hiểu thêm về tính năng hỗ trợ tiếp cận trong Chrome bằng cách xem kênh A11ycasts và đọc Tài liệu kỹ thuật về tính năng hỗ trợ tiếp cận Chromium.