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 cho đến các sản phẩm đầy đủ chạy trên một 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 đã mang đến 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, việc sử dụng các phần tử HTML không theo ngữ nghĩa và việc 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ể ảnh hưởng 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ề khả năng hỗ trợ tiếp cận được JavaScript nâng cao, cũng như các giải pháp cho các vấn đề về khả năng hỗ trợ tiếp cận phát sinh từ việc sử dụng các khung JavaScript.
Điều kiện kích hoạt
Các sự kiện JavaScript cho phép người dùng tương tác với nội dung trên 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 về 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ì điều này ảnh hưởng đến tất cả những người dùng này.
Hãy xem xét một sự kiện nhấp chuột.
Nếu sự kiện onClick() được dùng trên một phần tử HTML ngữ nghĩa, chẳng hạn như <button> hoặc <a>, thì sự kiện này sẽ tự nhiên 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 được tự động áp dụng khi sự kiện onClick() được thêm vào một phần tử không có 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 ngữ nghĩa được dùng cho sự kiện kích hoạt, bạn phải thêm sự kiện keydown/keyup để phát hiện lượt nhấn phím Enter hoặc phím cách. Mọi người thường quên thêm các sự kiện kích hoạt vào các phần tử không theo ngữ nghĩa. 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ỉ sử dụng bàn phím sẽ không thể 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ông báo cho người dùng biết họ đang ở trang nào và liệu họ có chuyển đến một trang mới hay không.
Nếu sử dụng một khung JavaScript, bạn cần cân nhắc cách xử lý tiêu đề trang. Điều này đặc biệt quan trọng đối với ứng dụng một trang (SPA) tải từ một tệp index.html duy nhất, vì các hiệu ứng chuyển đổi hoặc tuyến đường (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 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 mới cập nhật cho người dùng trình đọc màn hình có thể tốn thêm 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 một 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ổi bật trên nền trắng và chuyển tiếp thông điệp: "Bạn hiện đã đăng nhập."
Bạn có thể 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 đã từng bị lạm dụng để 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:
| Có thể sử dụng sai | Cách sử dụng đúng |
|---|---|
| Kết xuất các đoạn HTML lớn không có ngữ nghĩa | Hiển thị các phần nhỏ hơn của HTML có ngữ nghĩa |
| Không cho phép công nghệ hỗ trợ nhận dạng nội dung động | Sử dụng độ trễ thời gian setTimeout() để cho phép người dùng nghe toàn bộ thông báo |
Áp dụng các thuộc tính kiểu cho onFocus() một cách linh động |
Sử dụng :focus cho các phần tử có liên quan trong biểu định kiểu CSS |
| Việc áp dụng kiểu cùng dòng có thể khiến biểu định kiểu của người dùng không được đọc đúng cách | Lưu giữ các kiểu trong tệp CSS để duy trì tính nhất quán của giao diện |
| Tạo các tệp JavaScript có kích thước rất lớn làm chậm hiệu suất tổng thể của trang web | Sử dụng ít JavaScript hơn. Bạn có thể thực hiện các chức năng tương tự trong CSS (chẳng hạn như hiệu ứng chuyển động hoặc thành phần điều hướng cố định), giúp phân tích cú pháp nhanh hơn và có hiệu suất cao hơn |
Đối với CSS, hãy bật/tắt các lớp CSS thay vì thêm kiểu nội tuyến, vì điều này cho phép khả năng tái sử dụng và tính đơn giản. Sử dụng nội dung bị ẩn trên trang và bật/tắt các lớp để ẩn và hiện nội dung cho HTML động. Nếu bạn cần sử dụng JavaScript để thêm nội dung vào trang một cách linh hoạt, hãy đảm bảo rằng nội dung đó đơn giản, ngắn gọn và tất nhiên là có thể truy cập được.
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í cần giữ tiêu điểm và thời điểm không cần giữ 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. Bẫy bàn phím xảy ra khi người dùng chỉ 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ề quản lý tiêu điểm là trong một thành phần phương thức. Khi gặp một phương thức, người dùng chỉ sử dụng bàn phím sẽ có thể nhấn phím tab giữa các phần tử có thể thao tác của phương thức, nhưng họ sẽ không bao giờ được phép rời khỏi phương thức mà không đóng phương thức đó một cách rõ ràng. JavaScript là yếu tố cần thiết để bẫy tiêu điểm này một cách thích hợp.
Cấp trang
Bạn cũng phải duy trì tiêu điểm 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, nơi không có thao tác làm mới trình duyệt và tất cả nội dung đều thay đổi linh hoạt. 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 của bạn, tiêu điểm sẽ được giữ nguyên ở cùng một vị trí 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 vị trí tiêu điểm 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. - Đưa tiêu điểm trở lại một đườ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 tiêu điểm sẽ phụ thuộc vào khung hình mà bạn đang sử dụng và nội dung bạn muốn cung cấp cho người dùng. 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 đóng 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ợ bị thị lực kém, mù hoặc vừa khiếm thính vừa khiếm thị.
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 xét một số loại thuộc tính ARIA phổ biến nhất được 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 cân nhắc khi truyền đạt thông tin về một thành phần cho 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 một trình đơn thả xuống hoặc danh sách có được mở rộng hay thu gọn hay không.
Hoặc bạn có thể dùng aria-pressed để cho biết rằng một nút đã được nhấn.
Bạn cần chọn lọc khi áp dụng các thuộc tính ARIA. Hãy suy nghĩ kỹ về quy trình của người dùng để hiểu rõ những thông tin quan trọng cần truyền đạt cho người dùng.
Cấp trang
Nhà phát triển thường sử dụng một vùng ẩn trực quan có tên 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). Bạn có thể kết hợp khu vực này với JavaScript để thông báo cho người dùng về các thay đổi linh hoạt đối với trang mà không cần 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 các vùng aria-live và cảnh báo do tính chất linh hoạt 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ó chọn vùng và thông báo vùng đó.
Để nội dung được đọc đúng cách, khu vực trực tiếp hoặc khu vực cảnh báo phải nằm trong DOM khi tải, sau đó văn bản có thể được thay thế linh hoạt.
Nếu bạn sử dụng một khung JavaScript, tin vui là hầu hết các khung này đều có một gói "thông báo trực tiếp" thực hiện mọi việc cho bạn và hoàn toàn có thể truy cập. Bạn không cần lo lắng về việc tạo một khu vực 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 các ứng dụng web mạnh mẽ. Điều này đôi khi dẫn đến việc thiết kế quá mức và do đó, các mẫu không thể truy cập. Bằng cách làm theo các mẫu và mẹo về JavaScript trong mô-đun này, bạn có thể giúp mọi người dùng dễ dàng tiếp cận ứng dụng của mình hơn.