JavaScript

JavaScript đóng vai trò quan trọng trong hầu hết mọi thứ chúng tôi 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 lạm dụng) JavaScript đã dẫn đế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 lớn mã, sử dụng các phần tử HTML không có ngữ nghĩa cũng như chèn HTML và CSS thông qua JavaScript. Và có thể bạn sẽ không chắc khả năng hỗ trợ tiếp cận phù hợp với từng yếu tố này như thế nào.

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

Sự kiện kích hoạt

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, những người bị khuyết tật kỹ năng vận động nhỏ, những 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 sự hỗ trợ của 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 của mình, vì việc 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 bạn dùng sự kiện onClick() trên một phần tử HTML ngữ nghĩa, chẳng hạn như <button> hoặc <a>, thì sự kiện đó sẽ bao gồm cả chức năng chuột và bàn phím một cách tự nhiên. Tuy nhiên, chức năng của bàn phím không tự động được áp dụng khi thêm sự kiện onClick() vào một phần tử phi 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 thông tin so sánh này trên CodePen.

Nếu sử dụng phần tử không ngữ nghĩa cho một sự kiện kích hoạt, thì bạn phải thêm sự kiện nhấn phím/phím khoá để phát hiện thao tác nhấn phím Enter hoặc phím cách. Việc thêm các sự kiện kích hoạt vào các phần tử không có ngữ nghĩa thường bị quên. Thật không may, khi bạn quên thuộc tính này, 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 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à rất cần thiết đối với người dùng trình đọc màn hình. Báo cáo này cho người dùng biết họ đang ở trên trang nào và liệu họ đã điều hướng đến một trang mới hay chưa.

Nếu sử dụng khung JavaScript, bạn cần xem xét cách bạn xử lý tiêu đề trang. Điều này đặc biệt quan trọng đối với ứ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 (các thay đổi đối với trang) sẽ không liên quan đến việc tải lại trang. 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 theo mặc định.

Đố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ể thực hiện thêm một số thao tác, nhưng tin vui là bạn có thể sử dụng các tuỳ chọn, chẳng hạn như nội dung động.

Nội dung động

Một trong những chức năng JavaScript mạnh mẽ nhất 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 xuất hiện nổi bật trên nền trắng và chuyển tiếp thông báo: "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 logged 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;");

Sức mạnh đi kèm trách nhiệm lớn. Thật không may, việc chèn HTML và CSS vào JavaScript trước đây đã bị sử dụng sai mục đích để tạo ra nội dung không truy cập được. Sau đây là một số hành vi sử dụng sai mục đích 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 giúp việc sử dụng lại và xử lý đơn giản hơn. Sử dụng nội dung ẩ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 để tự động thêm nội dung vào trang của mình, hãy đảm bảo nội dung đó đơn giản, súc tích và tất nhiên là dễ truy cập.

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

Trong Mô-đun tiêu điểm bàn phím, chúng tôi đã đề cập đến các kiểu thứ tự tiêu điểm và chỉ báo. Khả năng quản lý tiêu điểm là biết được thời điểm và vị trí để giữ tâm điểm cũng như thời điểm không nên mắc kẹt.

Khả năng quản lý tiêu điểm 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 trap bàn phím khi tiêu điểm của 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ỉ sử dụng bàn phím bị kẹt trong một thành phần hoặc tâm điểm không được duy trì khi cần thiết.

Một trong những kiểu phổ biến nhất mà người dùng gặp phải các vấn đề về 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 một cửa sổ phụ, người dùng sẽ có thể tab giữa các phần tử có thể thao tác của cửa sổ phụ đó. Tuy nhiên, chế độ đó không bao giờ được cho phép bên ngoài phương thức đó nếu không phải loại bỏ một cách rõ ràng. JavaScript là yếu tố cần thiết để theo dõi đúng tiêu điểm này.

Cấp trang

Cũng phải duy trì tiêu điểm khi người dùng điều hướng từ trang này sang trang khác. Điều này đặc biệt đúng trong SPA, nơi khô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 của bạn, tiêu điểm sẽ được giữ ở cùng một vị trí hoặc có thể được đặt ở một nơi 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 nơi sẽ tập trung vào khi tải trang.

Có nhiều kỹ thuật để thực hiện điều 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 một đường liên kết để chuyển thẳng đế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.

Việc bạn quyết định tập trung vào đâu sẽ tuỳ thuộc vào khung mà bạn đang sử dụng và nội dung bạn muốn phân phát cho người dùng. Việc này có thể phụ thuộc vào ngữ 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 tiếp cận là quản lý trạng thái, hoặc khi trạng thái hình ảnh 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 khiếm thị hoặc bị mù.

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 cùng xem xét 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 trình đơn thả xuống hoặc danh sách được mở rộng hay thu gọn.

Bạn cũng có thể dùng aria-pressed để cho biết rằng một nút đã được nhấn.

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

Cấp trang

Các nhà phát triển thường sử dụng một khu vực ẩn về hình ảnh gọi là Khu vực trực tiếp của 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ể ghép nối khu vực này 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 toàn bộ trang tải lại.

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 tính 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ộ sẽ khiến AT khó chọn và thông báo khu vực. Để nội dung được đọc đúng cách, vùng 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 hoán đổi một cách linh động.

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

Sau đây là một số gói đang hoạt động cho các khung JavaScript phổ biến:

• Phản ứng: react-aria-live và react-a11y-anjectcer
• Góc: LiveAnnouncer
• Vue: vue-a11y-utils

JavaScript hiện đại là một ngôn ngữ mạnh mẽ cho phép các 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 sử dụng kỹ thuật quá mức và dẫn đến các mẫu không thể truy cập được. Bằng cách làm theo các mẫu và mẹo JavaScript trong mô-đun này, bạn có thể tăng khả năng hỗ trợ tiếp cận của ứng dụng cho mọi người dùng.

Kiểm tra mức độ hiểu biết của bạn

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