JavaScript

JavaScript đóng vai trò quan trọng trong hầu hết mọi thứ chúng ta tạo ra, từ các thành phần động nhỏ hơn đến các sản phẩm đầy đủ chạy trên khung JavaScript, chẳng hạn như React hoặc Angular.

Việc sử dụng (hoặc sử dụng quá mức) JavaScript này đã đưa ra nhiều xu hướng đáng báo động, chẳng hạn như thời gian tải lâu do lượng mã lớn, sử dụng các phần tử HTML không mang nghĩa và chèn HTML và CSS thông qua JavaScript. Và bạn có thể không chắc chắn về cách tính năng hỗ trợ tiếp cận phù hợp với từng phần trong số này.

JavaScript có thể tác động rất lớn đến khả năng hỗ trợ tiếp cận của trang web. Trong mô-đun này, chúng ta sẽ chia sẻ một số mẫu chung về hỗ trợ tiếp cận được tăng cường bằng JavaScript, cũng như các giải pháp cho các vấn đề về hỗ trợ tiếp cận phát sinh khi sử dụng khung JavaScript.

Kích hoạt sự kiện

Sự kiện JavaScript cho phép người dùng tương tác với nội dung web và thực hiện một hành động cụ thể. Nhiều người, chẳng hạn như người dùng trình đọc màn hình, người bị khuyết tật kỹ năng vận động tinh, người không có chuột hoặc bàn di chuột và những người khác, dựa vào tính năng hỗ trợ bàn phím để tương tác với web. Điều quan trọng là bạn phải thêm tính năng hỗ trợ bàn phím vào các thao tác JavaScript, vì tính năng này ảnh hưởng đến tất cả những người dùng này.

Hãy xem một sự kiện nhấp chuột. Nếu sự kiện onClick() được sử dụng trên một phần tử HTML có ngữ nghĩa như <button> hoặc <a>, thì sự kiện đó sẽ bao gồm cả chức năng của chuột và bàn phím. Tuy nhiên, chức năng bàn phím không tự động được áp dụng khi sự kiện onClick() được thêm vào một phần tử không mang ngữ nghĩa, chẳng hạn như <div> chung.

<div role="button" tabindex="0" onclick="doAction()">Click me!</div>

<button onclick="doAction()">Click me!</button>

Xem trước nội dung so sánh này trên CodePen.

Nếu một phần tử không mang ngữ nghĩa được dùng cho sự kiện kích hoạt, thì bạn phải thêm một sự kiện nhấn phím/nhả phím để phát hiện thao tác nhấn phím enter hoặc phím cách. Việc thêm sự kiện kích hoạt vào các phần tử không mang ngữ nghĩa thường bị quên. Rất tiếc, khi bị quên, kết quả là một thành phần chỉ có thể truy cập bằng chuột. Người dùng chỉ dùng bàn phím sẽ không có quyền truy cập vào các thao tác liên quan.

Tiêu đề trang

Như chúng ta đã tìm hiểu trong mô-đun Tài liệu, tiêu đề trang là yếu tố cần thiết đối với người dùng trình đọc màn hình. Thành phần này cho người dùng biết họ đang ở trang nào và liệu họ đã chuyển đến trang mới hay chưa.

Nếu sử dụng khung JavaScript, bạn cần xem xét cách xử lý tiêu đề trang. Điều này đặc biệt quan trọng đối với các ứng dụng trang đơn (SPA) tải từ một tệp index.html duy nhất, vì quá trình chuyển đổi hoặc tuyến (thay đổi trang) không liên quan đến việc tải lại trang. Theo mặc định, mỗi khi người dùng tải một trang mới trong một SPA, tiêu đề sẽ không thay đổi.

Đối với SPA, bạn có thể thêm giá trị document.title theo cách thủ công hoặc bằng một gói trợ giúp (tuỳ thuộc vào khung JavaScript). Việc thông báo tiêu đề trang đã cập nhật cho người dùng trình đọc màn hình có thể mất thêm một chút công sức, nhưng tin vui là bạn có nhiều lựa chọn, chẳng hạn như nội dung động.

Nội dung động

Một trong những chức năng mạnh mẽ nhất của JavaScript là khả năng thêm HTML và CSS vào bất kỳ phần tử nào trên trang. Nhà phát triển có thể tạo các ứng dụng động dựa trên hành động hoặc hành vi của người dùng.

Giả sử bạn cần gửi thông báo cho người dùng khi họ đăng nhập vào trang web hoặc ứng dụng của bạn. Bạn muốn thông báo này nổi bật so với nền trắng và truyền tải thông báo: "Bạn hiện đã đăng nhập".

Bạn có thể sử dụng phần tử innerHTML để đặt nội dung:

document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';

Bạn có thể áp dụng CSS theo cách tương tự, với setAttribute:

document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");

Quyền lực càng lớn thì trách nhiệm càng cao. Rất tiếc, việc chèn HTML và CSS bằng JavaScript trước đây đã bị sử dụng sai mục đích để tạo nội dung không truy cập được. Sau đây là một số trường hợp sử dụng sai phổ biến:

Đối với CSS, hãy bật/tắt các lớp CSS thay vì thêm kiểu cùng dòng, vì điều này cho phép sử dụng lại và đơn giản. Sử dụng nội dung ẩn trên trang và chuyển đổi giữa các lớp để ẩn và hiển thị nội dung cho HTML động. Nếu bạn cần sử dụng JavaScript để tự động thêm nội dung vào trang, hãy đảm bảo nội dung đó đơn giản và súc tích, đồng thời dễ truy cập.

Quản lý tiêu điểm

Trong mô-đun Tiêu điểm bàn phím, chúng ta đã đề cập đến thứ tự tiêu điểm và kiểu chỉ báo. Quản lý tiêu điểm là biết thời điểm và vị trí để chặn tiêu điểm cũng như thời điểm không nên chặn tiêu điểm.

Việc quản lý tiêu điểm là rất quan trọng đối với người dùng chỉ sử dụng bàn phím.

Cấp thành phần

Bạn có thể tạo bẫy bàn phím khi tiêu điểm của một thành phần không được quản lý đúng cách. Lỗi bẫy bàn phím xảy ra khi người dùng chỉ sử dụng bàn phím bị mắc kẹt trong một thành phần hoặc tiêu điểm không được duy trì khi cần.

Một trong những mẫu phổ biến nhất mà người dùng gặp phải vấn đề về việc quản lý tiêu điểm là trong thành phần phương thức. Khi người dùng chỉ sử dụng bàn phím gặp phải một cửa sổ bật lên, người dùng phải có thể nhấn phím tab giữa các thành phần có thể thao tác của cửa sổ bật lên, nhưng không bao giờ được phép nhấn phím tab bên ngoài cửa sổ bật lên mà không đóng cửa sổ đó một cách rõ ràng. JavaScript là yếu tố cần thiết để thu thập đúng tiêu điểm này.

Cấp trang

Tiêu điểm cũng phải được duy trì khi người dùng di chuyển từ trang này sang trang khác. Điều này đặc biệt đúng trong các SPA, trong đó không có hoạt động làm mới trình duyệt và tất cả nội dung đều tự động thay đổi. Bất cứ khi nào người dùng nhấp vào một đường liên kết để chuyển đến một trang khác trong ứng dụng, tiêu điểm sẽ được giữ nguyên hoặc có thể được đặt ở một vị trí hoàn toàn khác.

Khi chuyển đổi giữa các trang (hoặc định tuyến), nhóm phát triển phải quyết định tiêu điểm sẽ chuyển đến đâu khi trang tải.

Có nhiều kỹ thuật để thực hiện việc này:

• Đặt tiêu điểm vào vùng chứa chính bằng thông báo aria-live.
• Đặt tiêu điểm trở lại đường liên kết để chuyển đến nội dung chính.
• Di chuyển tiêu điểm đến tiêu đề cấp cao nhất của trang mới.

Nơi bạn quyết định tập trung vào sẽ phụ thuộc vào khung bạn đang sử dụng và nội dung bạn muốn phân phát cho người dùng của mình. Phương thức này có thể phụ thuộc vào bối cảnh hoặc hành động.

Quản lý trạng thái

Một khía cạnh khác mà JavaScript có vai trò quan trọng đối với khả năng hỗ trợ tiếp cận là quản lý trạng thái, hoặc khi trạng thái trực quan hiện tại của một thành phần hoặc trang được chuyển tiếp đến người dùng công nghệ hỗ trợ có thị lực kém, người bị mất thị lực hoặc người bị mất thị lực.

Thông thường, trạng thái của một thành phần hoặc trang được quản lý thông qua các thuộc tính ARIA, như đã giới thiệu trong mô-đun ARIA và HTML. Hãy xem lại một số loại thuộc tính ARIA phổ biến nhất dùng để giúp quản lý trạng thái của một phần tử.

Cấp thành phần

Tuỳ thuộc vào nội dung trang và thông tin mà người dùng cần, có nhiều trạng thái ARIA cần xem xét khi chuyển tiếp thông tin về một thành phần đến người dùng.

Ví dụ: bạn có thể sử dụng thuộc tính aria-expanded để cho người dùng biết liệu trình đơn thả xuống hoặc danh sách đã mở rộng hay thu gọn.

Hoặc bạn có thể sử dụng aria-pressed để cho biết rằng một nút đã được nhấn.

Bạn cần phải chọn lọc khi áp dụng các thuộc tính ARIA. Hãy suy nghĩ kỹ về luồng người dùng để hiểu thông tin quan trọng nào cần được truyền tải đến người dùng.

Cấp trang

Nhà phát triển thường sử dụng một khu vực ẩn được gọi là khu vực trực tiếp ARIA để thông báo các thay đổi trên màn hình và thông báo cảnh báo cho người dùng công nghệ hỗ trợ (AT). Khu vực này có thể được ghép nối với JavaScript để thông báo cho người dùng về các thay đổi động đối với trang mà không yêu cầu tải lại toàn bộ trang.

Trước đây, JavaScript gặp khó khăn trong việc thông báo nội dung trong aria-live và các khu vực cảnh báo do bản chất linh động của nó. Việc thêm nội dung vào DOM một cách không đồng bộ khiến AT khó nhận ra và thông báo vùng đó. Để nội dung được đọc chính xác, khu vực trực tiếp hoặc cảnh báo phải nằm trong DOM khi tải, sau đó văn bản có thể được tự động hoán đổi.

Nếu bạn sử dụng khung JavaScript, thì tin vui là hầu hết tất cả các định dạng này đều có gói "phát thanh viên trực tiếp" giúp thực hiện mọi công việc cho bạn và có thể truy cập đầy đủ. Bạn không cần phải lo lắng về việc tạo vùng phát trực tiếp và xử lý các vấn đề được mô tả trong phần trước.

Sau đây là một số gói trực tiếp cho các khung JavaScript phổ biến:

• React: react-aria-live và react-a11y-announcer
• Angular: LiveAnnouncer
• Vue: vue-a11y-utils

JavaScript hiện đại là một ngôn ngữ mạnh mẽ cho phép nhà phát triển web tạo ra các ứng dụng web mạnh mẽ. Điều này đôi khi dẫn đến việc thiết kế quá kỹ thuật và mở rộng các mẫu không thể truy cập. Bằng cách làm theo các mẫu và mẹo JavaScript trong mô-đun này, bạn có thể giúp tất cả người dùng dễ dàng tiếp cận ứng dụng của mình hơn.

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về Javascript