Tiện ích giú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 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 những người khiếm thị, khiếm thính, hạn chế về sự khéo léo và các khuyết tật khác truy cập vào tiện ích.
Mọi người, chứ không chỉ người dùng có nhu cầu đặc biệt, đều có thể hưởng lợi từ các tính năng hỗ trợ tiếp cận. Những người dùng có thị lực kém, kém linh hoạt và người dùng chuyên nghiệp đều được hưởng lợi từ phím tắt. Phụ đề và bản chép lời là yếu tố thiết yếu đối với người dùng khiếm thính, nhưng cũng giúp ích cho những người học ngôn ngữ.
Mọi người có thể tương tác với tiện ích theo nhiều cách khác nhau. 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 màn hình và có thể là trình đọc màn hình. Mặc dù không thể dự đoán công cụ mà mọi người sẽ sử dụng để truy cập vào một tiện ích, nhưng có những bước mà bất kỳ nhà phát triển nào cũng có thể thực hiện để giúp một 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 giao diện người dùng hỗ trợ tiếp cận
Nếu không thể truy cập vào các chế độ điều khiển giao diện người dùng, 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ễ truy cập là sử dụng một thành phần điều khiển HTML chuẩn.
Các chế độ điều khiển tiêu chuẩn
Bất cứ khi nào có thể, hãy sử dụng các thành phần điều khiển giao diện người dùng HTML chuẩn. Các thành phần điều khiển HTML tiêu chuẩn có thể truy cập bằng bàn phím, dễ dàng điều chỉnh theo 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
Web Accessibility Initiative – Accessible Rich Internet Applications (Tiến trình 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à một quy cách để giúp trình đọc màn hình truy cập được các thành phần điều khiển trên giao diện người dùng thông qua một tập hợp các 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ế độ điều khiển trên trang web.
Để thêm tính năng hỗ trợ WAI-ARIA vào các thành phần đ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 để thêm các thuộc tính mà Chrome sử dụng để tạo 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 này. 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 phần tử 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ụ sẽ nhận tiêu điểm theo thứ tự tài liệu.
Hãy xem xét thông số kỹ thuật đầy đủ cho thanh công cụ mẫu 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 thành phần điều khiển, Google Chrome sẽ gửi các sự kiện thích hợp đến trình đọc màn hình. Vì dịch vụ hỗ trợ WAI-ARIA vẫn đang trong quá trình hoàn thiện, nên Google Chrome có thể sẽ không đưa ra sự kiện cho mọi thuộc tính WAI-ARIA, đồng thời trình đọc màn hình có thể không nhận ra tất cả các sự kiện đang được đưa ra.
Để xem hướng dẫn nhanh về cách thêm các thành phần điều khiển WAI-ARIA vào các thành phần điều khiển tuỳ chỉnh, hãy xem bản trình bày của David Raggett tại WWW2010.
Tiêu điểm trong các chế độ điều khiển tuỳ chỉnh
Tiêu điểm bàn phím là tính năng cần thiết đối với những người dùng duyệt web mà không cần 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, những phần tử 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 vào trình tự thẻ 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 trình tự thẻ, nhưng vẫn cho phép phần tử này nhận tiêu điểm bằng 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 tiện ích, cho phép những người dùng không thể sử dụng chuột và những người dùng không muốn sử dụng chuột truy cập vào tiện ích.
Di chuyển
Kiểm tra để đảm bảo 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 sử 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ể điều hướng bằng bàn phím. Sử dụng phím tắt của Chrome để xác định xem có thể điều hướng tiện ích hay không.
Đảm bảo người dùng dễ dàng thấy được 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 bạn sử dụng CSS 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 đâ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ể có dạng như sau. Lưu ý cách cập nhật thuộc tính WAI-ARIA aria-activedescendant để phản hồi hoạt động đầu vào của người dùng nhằm phản ánh nút thanh công cụ đang hoạt động hiện tại.
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="button2">
<img src="buttonpaste" role="button" alt="paste" id="button3">
</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. Cho người dùng biết các lối tắt có sẵn 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 tất cả 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 gặp 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 rằng các phím tắt đó không ảnh hưởng đến phím tắt thu phóng tích hợp sẵn trong Chrome.
Để biết mức độ linh hoạt của giao diện người dùng của một tiện ích, hãy áp dụng kiểm thử 200%; nếu kích thước văn bản hoặc mức thu phóng trang tăng 200%, thì giao diện người dùng đó 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ữ web có kiểu, chẳng hạn như một trong các phông chữ có trong API Phông chữ của Google. Phông chữ trên web có thể thay đổi kích thước theo nhiều kích thước và người dùng có thể truy cập được bằng trình đọc màn hình.
Màu
Có đủ độ tương phản giữa màu nền và màu văn bản trong tiện ích. 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ạo độ tương phản thích 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 các 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 khiếm khuyết về màu sắc.
Cân nhắc cung cấp nhiều giao diện 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 tiện ích đó có phụ đề hoặc bản chép lời. Hãy xem Nguyên tắc của Chương trình nội dung nghe nhìn có lời 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ế chứa 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 rõ 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 chỉ mang tính trang trí phải có văn bản thay thế "" trống hoặ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ế. Một tài nguyên hay để 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.