Hỗ trợ tiếp cận (a11y)

Tiện ích cho phé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 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 hỗ trợ người khiếm thị, suy giảm thính lực, khả năng linh hoạt bị hạn chế và những người 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ừ các tính năng hỗ trợ tiếp cận. Người dùng khiếm thị, độ linh hoạt kém và người dùng thành thạo đều dùng phím tắt. Phụ đề và bản chép lời rất cần thiết đối với người dùng khiếm thính, đồng thời 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 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 chuẩn – hoặc họ có thể phụ thuộc vào trình phóng to màn hình và có thể là trình đọc màn hình. Mặc dù không thể dự đoán mọi người sẽ sử dụng công cụ nào để 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 các bước để làm cho một tiện ích dễ tiếp cận nhất có thể.

Tích hợp các chế độ điều khiển trên giao diện người dùng dễ tiếp cận

Nếu người dùng không thể truy cập vào các chế độ điều khiển trên giao diện người dùng, thì họ 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 chuẩn. Các thành phần điều khiển HTML tiêu chuẩn là bàn phím có thể truy cập, dễ dàng mở rộng và trình đọc màn hình thường hiểu được.

Ả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

WAI-ARIA trong 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ể truy cập, WAI-ARIA, là thông số kỹ thuật giúp 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 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 chế độ điều khiển tuỳ chỉnh, các phần tử DOM của tiện ích sẽ cần phải được sửa đổi để 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. Các thuộc tính DOM do WI-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 tâm điểm khi thanh công cụ đó nhận được tâm đ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 đầ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 thêm các vai trò, trạng thái và thuộc tính của WAI-ARIA vào DOM của chế độ điều khiển, Google Chrome sẽ đưa ra 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 một 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 nêu 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 Dave Raggett từ WW2010.

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 cho những người dùng điều hướng web mà không cần chuột. Hãy đảm bảo các chế độ điều khiển thao tác và thao tác, chẳng hạn như các 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àn phím là neo, nút và các đối tượng đ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 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 phải sử dụng được chỉ với bàn phím, 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 thể sử dụng được các tiện ích đó.

Kiểm tra để đảm bảo người dùng có thể di chuyển giữa các phần của một tiện ích mà không cần dùng chuột. Kiểm tra để đảm bảo rằng 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ể thao tác hay không.

Đảm bảo rằng người dùng dễ dàng thấy phần nào của giao diện có tâm điểm bằng 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 dùng quá nhiều, đường viền có thể bị chặn hoặc độ tương phản giảm.

Đường viền tiêu điểm trên nút Tìm kiếm

Đường viền tiêu điểm về một trong số các đường liên kết

Phím tắt

Mặc dù chiến lược di chuyển bằng bàn phím phổ biến nhất là sử dụng phím Tab để xoay tiêu điểm 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 để 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="button2">
  <img src="buttonpaste" role="button" alt="paste" id="button3">
</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. Hãy cho người dùng biết các phím tắt hiện có bằng cách cung cấp những 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à việc 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ì chúng phản ánh các phương pháp hay cho tất cả nội dung web.

Văn bản

Các lựa chọn về phông chữ và cỡ chữ sẽ ảnh hưởng đến mức độ dễ đọc của nội dung trong phần mở rộng. 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 phần mở rộng. 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 phím tắt thu phóng được tích hợp trong Chrome.

Bạn có thể áp dụng thử nghiệm 200% như một chỉ báo về tính linh hoạt của giao diện người dùng của một tiện ích; nếu kích thước văn bản hoặc mức thu phóng trang tăng 200%, thì chúng có còn sử dụng được không?

Tránh sử dụng 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ữ đã 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ể điều chỉnh theo tỷ lệ theo các kích thước khác nhau và những người sử dụng trình đọc màn hình có thể truy cập được.

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 tiện ích. 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ó độ 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ể 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 các chủ đề màu sắc khác nhau hoặc cho phép người dùng tuỳ chỉnh bảng phối màu để tạo ra độ tương phản tốt hơn.

Âm thanh

Nếu tiện ích dùng âm thanh hoặc video để truyền tải thông tin, hãy đảm bảo rằng có phụ đề hoặc bản chép lời. 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">

Sử dụng văn bản thay thế để nêu rõ mục đích của hình ảnh thay vì mô tả cố định nội dung của hình ảnh. Hình ảnh khoảng trống hoặc hình ảnh trang trí thuần tuý phải có văn bản thay thế "" trống hoặc đượ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 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 qua Tài liệu kỹ thuật về tính năng hỗ trợ tiếp cận của Chromium.