Tiện ích giúp người dùng tạo ra 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 có các thành phần hỗ trợ tiếp cận để khuyến khích một cơ sở người dùng toàn diện bằng cách cho phép người khiếm thị, người bị mất thính lực, người có khả năng vận động hạn chế và người khuyết tật khác truy cập vào tiện ích.
Mọi người, không chỉ 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. Người dùng có thị lực kém, người dùng có khả năng thao tác kém và 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à những yếu tố không thể thiếu đối với người dùng khiếm thính, đồng thời cũng giúp ích cho người học ngoại 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ể dùng 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à người dùng sẽ sử dụng để truy cập vào một tiện ích, nhưng nhà phát triển nào cũng có thể thực hiện các bước để giúp tiện ích dễ tiếp cận nhất có thể.
Tích hợp các chế độ kiểm soát giao diện người dùng hỗ trợ tiếp cận
Nếu không truy cập được vào các chế độ kiểm soát 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 giao diện người dùng hỗ trợ tiếp cận là sử dụng một thành phần điều khiển HTML tiêu chuẩn.
Chế độ kiểm soát 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 chuẩn. Các chế độ điều khiển HTML tiêu chuẩn có thể truy cập bằng bàn phím, dễ dàng mở rộng quy mô và thường được trình đọc màn hình hiểu.
WAI-ARIA trong các chế độ kiểm soát tuỳ chỉnh
Sáng kiến về khả năng tiếp cận trên web – Ứng dụng Internet đa dạng có thể truy cập (WAI-ARIA) là một quy cách giúp các trình đọc màn hình truy cập được 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 tiêu 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ế độ kiểm soát trên một trang web.
Để thêm chế độ hỗ trợ WAI-ARIA vào các chế độ kiểm soát tuỳ chỉnh, bạn sẽ cần sửa đổi các phần tử DOM của một tiện ích để thêm các thuộc tính mà Chrome dùng để tăng sự kiện trong quá trình tương tác của người dùng. Trình đọc màn hình phản hồi các sự kiện này và mô tả chức năng của chế độ kiểm soát. Các thuộc tính DOM do WAI-ARIA chỉ định được phân loại thành vai trò, trạng thái và thuộc tính.
<div role="toolbar">
Thuộc tính aria-activedescendant chỉ định trẻ nào của thanh công cụ nhận tiêu điểm khi thanh công cụ nhận 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 toàn bộ quy cách cho một ví dụ về thanh công cụ bên dưới:
<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 WAI-ARIA được thêm vào DOM của một chế độ kiểm soát, Google Chrome sẽ tạo ra các sự kiện thích hợp cho trình đọc màn hình. Vì chế độ hỗ trợ WAI-ARIA vẫn đang trong quá trình phát triển, nên Google Chrome có thể không tạo 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ả các sự kiện đang được tạo.
Để xem hướng dẫn nhanh về cách thêm chế độ kiểm soát WAI-ARIA vào chế độ kiểm soát tuỳ chỉnh, hãy xem bài trình bày của Dave Raggett tại WWW2010.
Tiêu điểm trong các chế độ kiểm soát 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 duyệt web mà không dùng chuột. Đảm bảo các thành phần đ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àn phím.
Theo mặc định, các phần tử duy nhất trong DOM HTML có thể nhận tiêu điểm bàn phím là các thẻ liên kết, nút và đối tượng kiểm soát 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 vào trình tự phím Tab mặc định, cho phép các phần tử này nhận tâm điểm bàn phím.
element.tabIndex = 0
element.focus();
Việc đặt tabIndex = -1 sẽ xoá phần tử khỏi chuỗi thẻ nhưng vẫn cho phép phần tử nhận tâm điểm bàn phím theo phương thức lập trình.
Hỗ trợ quyền truy cập bằng bàn phím
Người dùng chỉ cần dùng bàn phím là có thể sử dụng các tiện ích này. Nhờ đó, những người dùng không thể dùng chuột và những người dùng thành thạo không muốn dùng chuột đều có thể truy cập vào các tiện ích này.
Di chuyển
Kiểm tra để đảm bảo người dùng có thể di chuyển giữa các phần khác nhau của tiện ích mà không cần dùng chuột. Kiểm tra để đảm bảo mọi hoạt động sử dụng cửa sổ bật lên đều có thể thao tác 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ể thao tác được hay không.
Đảm bảo bạn có thể dễ dàng thấy những phần nào của giao diện có tiêu điểm bàn phím. Thông thường, đường viền tiêu đ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 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 đây không phải lúc nào cũng là lựa chọn dễ dàng hoặc hiệu quả nhất.
Một trình xử lý bàn phím JavaScript đơn giản có thể trông như sau. Lưu ý cách thuộc tính WAI-ARIA aria-activedescendant được cập nhật để phản hồi hoạt động đầu vào của người dùng nhằm phản ánh nút hiện đ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>
Các 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. Giúp người dùng biết các lối tắt hiện có bằng cách cung cấp các lối tắt đó trong trang tuỳ chọn.
Cung cấp nội dung dễ tiếp cận
Việc cung cấp nội dung hỗ trợ tiếp cận là rất quan trọng đối với tất cả người dùng. Nhiều nguyên tắc sau đây có thể quen thuộc với bạn vì chúng phản ánh các phương pháp hay cho mọi nội dung trên web.
Văn bản
Lựa chọn phông chữ và kích thước văn bản ảnh hưởng đến khả năng đọc nội dung của tiện ích. Người dùng có vấn đề về thị lực có thể cần tăng kích thước văn bản của tiện ích. Nếu sử dụng phím tắt, hãy đảm bảo các phím tắt đó không ảnh hưởng đến các phím tắt thu phóng được tích hợp trong Chrome.
Để biết mức độ linh hoạt của giao diện người dùng của 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ì tiện ích có còn dùng được không?
Tránh đưa 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ữ web có kiểu, 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ể điều chỉnh theo nhiều kích thước và người dùng trình đọc màn hình có thể truy cập vào phông chữ này.
Màu
Màu nền và màu văn bản trong một tiện ích phải có độ tương phản thích hợp. Sử dụng công cụ kiểm tra độ tương phản để kiểm tra xem màu nền 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 những 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 trông như thế nào trong nhiều dạng thiếu hụt màu.
Cân nhắc việc cung cấp nhiều giao diện màu 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 tiện ích đó có phụ đề hoặc bản chép lời. Hãy xem Nguyên tắc về chương trình truyền thông có nội dung mô tả và phụ đề để biết thêm thông tin về phụ đề.
Hình ảnh
Cung cấp văn bản thay thế mang tính thông tin cho hình ảnh.
<img src="img.jpg" alt="The logo for the extension">
Sử dụng văn bản thay thế để nêu mục đích của hình ảnh thay vì mô tả theo nghĩa đen nội dung của hình ảnh. Hình ảnh khoảng trắng hoặc hình ảnh chỉ mang tính trang trí phải có văn bản thay thế "" trống hoặc bị xoá hoàn toàn khỏi HTML và được đặ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 trong hình ảnh vào văn bản thay thế. Một nguồn tài nguyên hữu ích mà bạn có thể tham khảo là bài viết của WebAIM về văn bản thay thế phù 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ề hỗ trợ tiếp cận của Chromium.