Tiện ích giúp người dùng tạo nên trải nghiệm duyệt web lý tưởng, phù hợp với khả năng và sở thích của họ. Tiện ích phải bao gồm 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, 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. Thị lực người dùng bị suy yếu, độ linh hoạt thấp 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 rất cần thiết với người khiếm thính mà còn giúp ích cho 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 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 có một số bước bất kỳ nhà phát triển nào cũng có thể làm cho một tiện ích mở rộng 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. Dễ nhất cách tạo giao diện người dùng truy cập được là sử dụng chế độ điều khiển HTML 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 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 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
Sáng kiến về khả năng tiếp cận web - Ứng dụng Internet đa dạng thức có thể truy cập, WAI-ARIA, là một thông số kỹ thuật để giúp trình đọc màn hình có thể truy cập các điều khiển giao diện người dùng thông qua một tập hợp 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à dòng điện trạng thái kiểm soát 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, các phần tử DOM của tiện ích mở rộng cần phải là sửa đổi để thê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 phản hồi các sự kiện này và mô tả chức năng của thành phần điều khiển. Thuộc tính DOM được chỉ định bởi WAI-ARIA được phân loại thành vai trò, trạng thái và tài sản.
<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ố đầy đủ cho 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 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 giai đoạn phát triể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 ghi nhận tất cả các sự kiện đã xảy 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 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à yếu tố thiết yếu đối với những người dùng điều hướng trên 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, các phần tử duy nhất trong DOM HTML có thể nhận tiêu điểm bàn phím là neo, nút,
và 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 trong
trình tự tab mặc định, cho phép chúng 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
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.
Hãy đảm bảo bạn có thể dễ dàng xem phần nào của giao diện có tiêu điểm bằng bàn phím. Thường là đường viền trọng tâm di chuyển xung quanh giao diện, tuy nhiên, nếu CSS được sử dụng quá nhiều thì đường viền có thể bị chặn hoặc độ tương phản giảm đi.
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 liên quan đến việc sử dụng phím Tab để xoay tiêu điểm thông qua giao diện của tiện ích, đó không phải lúc nào cũng là tuỳ chọn dễ dàng nhất 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="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ử giao diện người dùng quan trọ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 về bằng cách cung cấp các phím tắt này trong 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 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 mức độ dễ đọc của nội dung 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 tính năng 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 tích 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 trên web, chẳng hạn như một trong các phông chữ có trong Google Font API. Phông chữ web có thể điều chỉnh theo tỷ lệ cho nhiều kích thước và mọi người có thể truy cập 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 trước và nền sau có khiến màu sắc độ tương phản phù hợp.
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 phần mở rộng sử dụng âm thanh hoặc video để truyền tải thông tin, hãy đảm bảo rằng phụ đề hoặc 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ả nội dung hình ảnh theo nghĩa đen. Hình ảnh khoảng trống hoặc hình ảnh trang trí đơn thuần 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 có thể tham khảo 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.