JavaScript

JavaScript đóng vai trò quan trọng trong hầu hết mọi thứ mà chúng tôi tạo ra—từ các kênh nhỏ hơn các thành phần động vào 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 này đã mang lại 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 HTML phi ngữ nghĩa và chèn HTML và CSS thông qua JavaScript. Và bạn có thể không chắc chắn về mức độ phù hợp của khả năng tiếp cận đối với từng phần này.

JavaScript có thể có ảnh hưởng lớn đến khả năng truy cập của trang web. Trong phần 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 nâng cao bằng JavaScript, cũng như các giải pháp cho các vấn đề về khả năng tiếp cận phát sinh từ bằ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 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 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 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 hành động JavaScript của mình, vì tính năng ả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 dùng trên phần tử HTML có ngữ nghĩa, chẳng hạn như <button> hoặc <a>, thì ứng dụng này tự nhiên bao gồm cả chức năng 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ử 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>

Hãy xem trước thông tin so sánh này trên CodePen.

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

Nếu sử dụng khung JavaScript, bạn cần xem xét cách bạn xử lý trang tựa đề. Đ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, dưới dạng quá trình chuyển đổi hoặc tuyến đường (trang thay đổi) 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 SPA thì tiêu đề sẽ không thay đổi theo mặc định.

Đối với SPA, thuộc tính document.title có thể được thêm vào theo cách thủ công hoặc bằng gói trợ giúp (tuỳ thuộc vào khung JavaScript). công bố tiêu đề trang mới đối với trình đọc màn hình, người dùng có thể mất thêm công sức bạn có các 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 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 thông báo cho người dùng khi họ đăng nhập vào trang web của bạn hoặc ứng dụng. Bạn muốn tin nhắn xuất hiện nổi bật trên nền trắng và nút chuyển tiếp thông báo: "Hiện bạ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 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;");

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

Đối với CSS, hãy bật/tắt các lớp CSS thay vì thêm các kiểu cùng dòng, như sau dễ dàng tái sử dụng và đảm bảo tính đơ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 của bạn, đảm bảo đơn giản và ngắn gọn và tất nhiên là dễ tiếp cận.

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

Trong Mô-đun tiêu điểm bàn phím, chúng ta đã đề cập đến tiêu điểm thứ tự và chỉ báo. Quản lý tiêu điểm là biết được thời điểm và vị trí cần bẫy tiêu điểm và thời điểm không nên giữ tiêu điểm.

Tính năng quản lý tiêu điểm đóng vai trò quan trọng đối với những 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ị kẹt trong một thành phần hoặc tâm điểm không được duy trì khi cần.

Một trong những mẫu phổ biến nhất khiến người dùng gặp phải vấn đề quản lý tiêu điểm nằm trong thành phần mẫu. Khi người dùng chỉ dùng bàn phím gặp một phương thức, người dùng có thể di chuyển giữa các phần tử có thể thao tác của cửa sổ phụ, nhưng chúng không được cho phép bên ngoài cửa sổ phụ nếu không loại bỏ một cách rõ ràng. JavaScript là yếu tố cần thiết để nắm bắt đúng cách trọng tâm này.

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. Đây là đặc biệt đúng ở những 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 để truy cập sang một trang khác trong ứng dụng của bạn, tiêu điểm sẽ được giữ nguyên hoặc có thể được đặt hoàn toàn ở một nơi nào đó.

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 tiêu điểm sẽ di chuyển khi trang tải.

Có nhiều kỹ thuật để đạt được đ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ập trung vào 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ập trung vào sẽ phụ thuộc vào khung làm việc mà bạn đang sử dụng và nội dung mà bạn muốn phân phát cho người dùng của mình. Thông tin này có thể là theo bối cảnh hoặc phụ thuộc vào 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 hiển thị 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ư được 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 được dùng để trợ giúp quản lý trạng thái của một phần tử.

Cấp thành phần

Tùy thuộc vào nội dung trang của bạn và thông tin 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 aria-expanded để cho người dùng biết liệu một trình đơn thả xuống hoặc danh sách được mở rộng hay đã thu gọn.

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

Bạn cần phải chọn lọc khi áp dụng các thuộc tính ARIA. Cân nhắc kỹ lưỡng 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

Các nhà phát triển thường sử dụng một khu vực trực quan ẩn được 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à gửi tin nhắn cảnh báo cho 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 đố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 bằng aria-live và khu vực cảnh báo do tính chất linh động. Thêm nội dung không đồng bộ vào DOM khiến AT khó xác định được khu vực và thông báo về khu vực đó. Để 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 hoán đổi một cách linh động.

Nếu bạn sử dụng khung JavaScript, tin vui là hầu hết các mã này đều có "phát thanh trực tiếp" thực hiện mọi công việc cho bạn và hoàn toàn dễ sử dụng. Không cần phải lo lắng về việc tạo khu vực trực tiếp và xử lý liên quan đến các vấn đề được mô tả trong phần trước.

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

• React: reac-aria-live và re-re-act-a11y- THÔNG BÁO
• Góc: LiveAnnouncer
• Vue: vue-a11y-utils

JavaScript hiện đại là 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 áp dụng kỹ thuật quá mức và do tiện ích bổ sung, các mẫu không thể truy cập được. Bằng cách làm theo các mẹo và mẫu 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 tất cả người dùng.

Kiểm tra kiến thức

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