JavaScript với khả năng tiếp cận tư tưởng

Hôm nay mình muốn giới thiệu với mọi người về một bài viết về JavaScript https://www.sitepoint.com/writing-javascript-with-accessibility-in-mind/

Các mẹo của JavaScript mục đích để cải thiện khả năng truy cập của các thanh phần JavaScript và cung cấp cho người dùng các phương thức tương tác tốt hơn để nâng cao trải nghiệm người dùng trên các trang web hoặc ứng dụng web.

Ở trong bài viết trước, tác giả đã viết làm sao để có thể viết HTML tiếp cận gần với tâm lý người dùng và một vài cách nhằm cải thiện trang web để có thể tiếp cận dễ dàng hơn. Và chúng ta đưa ra hai quy tắc bất di bất dịch: Tìm hiểu những điều cơ bản và lên kế hoạch viết HTML. Dựa trên đó, chúng ta có thể nâng cao lợi ích của website đối với người dùng và cả người thiết kế.

May mắn thay, HTML không phải là ngôn ngữ duy nhất để thiết kế website, những điều tưởng chừng như vô cùng đơn giản cũng sẽ dễ dàng sai, và JavaScript có thể trở nên vô cùng phức tạp. Mặc dù chức năng vẫn hoạt động bình thường, nhưng chúng ta có thể không để ý đến những người dùng tương tác với hệ thống k phải bằng chuột hay touchpad, ... . Ví dụ như những người chỉ sử dụng bàn phím và màn hình. Trong bài viết này, tôi đã tập hợp dược một số mẹo để cân nhắc khi viết JavaScript và làm thế nào để các thành phần JavaScript của bạn dễ dàng tiếp cận hơn đến người dùng.

Trước khi mọị người đọc các mẹo dưới đây, tôi muốn chỉ ra một điều quan trọng, làm cho một trang web dễ dàng tiếp cận không có nghĩa là bạn phải quyết định ở việc bạn có sử dụng JavaScript hay không. Khả năng tiếp cận của trang web là làm cho nôi dung có sẵn cho càng nhiều người dùng càng tốt, bao gồm cả nhưng người dùng máy tính cũ, hay nhưng người kết nối internet chậm, hay các hạn chế về bảo mật,... trong các điều kiện mà JavaScript không thể hoạt động hay thời gian load quá dài, có thể không phải điều kiện lý tưởng nhưng nó vẫn được coi là tốt nếu website vẫn có thể truy cập và sử dụng được.

Nếu JavaScript được thực thi hay thậm chí nó có thể được sử dụng để cải thiện khả năng tiếp cận. Sare Soueidan đã viết về những kinh nghiệm của cô ấy khi tạo ra tooltip widget trong bài viết Building a fully-accessible help tooltip… is harder than I thought. Cô ấy giải thích tại sao không dùng JS solution sẽ gây ảnh hưởng xấu đến trải nghiệm người dùng và tại sao JavaScript lại quan trọng đối với khả năng tiếp cận của trang web.

Marco Zehe đã viết nhiều về JavaScript và khả năng truy cập trong các bài viết của mình,...

Điều quan trọng ở đây là đảm bảo rằng các trang web của hcúng tôi có thể điều hướng bằng bàn phím. Rất nhiều người dùng dựa vào bàn phím khi họ lướt web. Trong số đó có cả người khuyết tật, người mù, và những người khoogn có tay hoặc không thể sử dụng chuột hoặc track pad vì bất cứ lý do gì. Điều hướng một trang web thông qua bàn phím có nghĩa là nhảy từ phần tử này đến một phần tử khác trong DOM. Điều nay thường được thực hiện bằng phím Tab cho chiều đi và Shift + Tab cho hướng ngược lại. Các yếu tố có thể tập trung là link, buttons, form elements. Chúng có thể được select bằng phím Enter và đôi khi là sử dụng phims Spacebar. Bằng cách forcus và select theo các cách khác nhau, chúng có các chức năng mặc định rất hữu ích. Vì thế nó có các ý nghĩa chính xác và viết cùng với logic HTML.

Các thành phần như <p> <h2> hay <div> không được mặc định forcus. Vậy nên, các thẻ như thế thường được dùng để tạo các thành phàn tùy chỉnh được hỗ trợ với JavaScript, điều này có thể gây khó khăn cho người dùng bàn phím

Focus các phần tự không được mặc định focus

Như chúng ta đã nói ở trên, các phần tử như <p> <h2> hay <div> sẽ không bị focus nếu ta sử dụng phím Tab hay Shift + Tab, vậy thì làm sao chúng ta có thể focus chúng. Chúng ta sẽ thêm một thuộc tính tabindex với một giá trị nguyên vào đó. Nếu ta setting giá trị 0, phần tử sẽ trở thành tiêu điểm và có thể truy cập thông qua bàn phím. Nếu ta set giá trị là số âm, phần tử có thể được định hướng theo chương trình (Ví dụ với JavaScript) Nhưng không thể truy cập qua bàn phím. Bạn cũng có thể sử dụng một giá trị lớn hơn 0, nhưng điều đó sẽ làm thay đổi trật tự Tab và sẽ được coi là anti-pattern.

<h2 tabindex="0">A focusable heading</h2>

Nếu bnaj muốn tìm hiểu rõ hơn về tabindex, có thể xem A11ycast episode Controlling focus with tabindex của Rob Dodson

Focus các thành phần với JavaScript

Ngay cả khi các phần từ có thể được định hướng, đôi khi chúng không nằm trong trật tự DOM phù hợp. Để ví dụ, tôi đã tạo ra một thành phần modal đơn giản với HTML, CSS và JS Nếu bản sử dụng phím Tab để chuyển sáng button và ấn Enter, một cửa sổ modal sẽ bật lên. Nếu bạn ấn Tab một làn nữa, tiêu điểm sẽ nhảy đến phần tử tiếp theo ở phía sau modal. Trong khi đó, hành vi mong muốn là sẽ focus phần từ ở trong modal khi modal bật lên chứ khải là nhảy tiếp tới phần tử nằm ở dưới khung hình sau modal. Đề khắc phục vấn đề này, bạn cần tập trung vào cửa sổ modal bằng JavaScript

<div class="modal" id="modal2" tabindex="0">
  ...
</div>

function showModal() {
  var modal = document.getElementById('modal2');
  modal.focus();
  ...
}

bạn có thể thấy rằng hành động trong ví dụ được cập nhật, sau khi Tab vào nút select và Enter, modal hiện lên và bạn ấn tiếp Tab thì các phần tử trong modal sẽ được focus. Điều này thật tuyệt nhưng nó lại nảy sinh ra hai vấn đề mới Một là nếu bạn đống cửa sổ chế độ bằng cách nhấn Esc thì tiêu điểm sẽ bj mất đi. Lý tưởng là nó sẽ nhảy trở lại button mà nó đã được Enter trước khi mở modal. Và để làm được điều đó, bạn phải lưu lại phần tử forcus cuối cùng trong vùng đó vào một biến. Chúng ta có thể sử dụng document.activeElement để lấy phần tử hiện tại bị focus

var lastFocusedElement;

function showModal() {
  lastFocusedElement = document.activeElement;

  var modal = document.getElementById(modalID);
  modal.focus();
  ...
}

Bây giờ, bạn tham chiếu đến button focus một lần nữa khi modal đóng lại

function removeModal() {
  ...
  lastFocusedElement.focus();
}

tôi đã cập nhật thêm và khả năng tiếp cận đã tốt hơn trước, nhưng vẫn còn chỗ cho cải tiến. Đó là khuyến khích để giữ cho sự focus trong cửa sổ modal khi nó được mở ra. Ngay bây giờ, vẫn có thể Tab ra khỏi chế độ. Tôi sẽ không đi vào chi tiết ở đây, nhưng vì lợi ích của sự hoàn chỉnh, tôi đã làm một bản hoàn chỉnh hơn (Demo and editable Pen). Như các bạn thấy trong bản này, khi modal được bật lên, thì Tab chỉ hoạt động trong khu của Tab. Nếu bạn so sánh từ Demo đầu tiên cho đến Demo cuối cùng, bạn sẽ nhận ra là nó không có nhiều mã bổ sung. Tuy nó chưa thể coi là hoàn hảo nhưng giải pháp cuối cùng là tốt hơn cả để sử dụng. Có một ví dụ khác về phương thức tiếp cận modal và một bài viết tuyệt vời sử dụng tabindex được viết bởi một nhân viên trong Google. Nếu bạn muốn học nhiều hơn về keyboard testing, bạn hãy ghé thăm WebAIM website. Chúng cung cấp danh sách "các tương tác trực tuyến phổ biến nhất, các phím tổ hợp tiêu chuẩn cho tương tác và thông tin bổ sung về những điều cần cân nhắc trong quá trình thử nghiệm."

Đề biết nhiều hơn các ví dụ về quản lý tập trung, hãy xem vi deo egghead.io Quản lý tập trung sử dụng CSS, HTML và JavaScript bởi Marcy Sutton hoặc tập A11ycasts episode What is Focus? được viết bởi Rod Dodson.

Tôi đã viết bài về Button trong các bài viết đầu tiên, nhưng dường như rất nhiều người sử dụng các phần tử chung chung để làm button. Vì vậy, tôi đoán nó không có hại để viết một số chi tiết về chủ đề đó. Tôi đã làm một ví dụ để minh họa một số vấn đề của việc sử dụng <span> hoặc <div> như một <button> trên một phần tử <button> hoặc <input>. Nếu bạn Tab thông qua trạng bạn sẽ cảm tháy rằng bạn có thể tập trung ở button đầu tiên, nhưng không phải là một trong hai thẻ được đánh tabindex ở sau đó. việc này là tất nhiên, nút đầu tiên là một <button> và nút thứ hai là một <div>. còn đương nhiên nếu bạn không đánh tabindex cho <div> thì đương nhiên sẽ không Tab vào được

 
<button class="btn">I'm a button</button>

 
<div class="btn">I'm a div</div>

 
<div class="btn" tabindex="0">I'm a div</div>

 
<div class="btn" tabindex="0" role="button">I'm a div</div>

Nút <div> thực sự được định hướng nhưng vẫn hoạt động giống như một <div>, ngay cả khi bạn cho thêm vai trò của một <button> vào cho nó. Để minh họa cho điều đó, tôi đã thêm một trình xử lý sự kiện nhấp chuốt đơn giản vào các phần tử .btn (button). Nêu bạn nhấp vào các button, một hộp cảnh báo sẽ hiện lên, nhưng nếu bạn có gắng sử dụng cùng một phím (Enter hay Spacebar), thì chỉ có button đầu tiên được kích hoạt sự kiện. Bạn sẽ phải thêm một trình sử lý sự kiện quan trọng vào các button div để bắt chước đầy đủ hành vị của button default, có vẻ như điều đó thực sự là rất không cần thiết, đó là lý do bạn nên sử dụng phần tử <button> nếu bạn cần một button

Xem tập A11ycasts "Just use button" được viết bởi Rob Dodson hoặc đọc về Links, Buttons, Submits, và Divs, oh Hell bởi Adrian Roselli để biết thêm chi tiết và các ví dụ

Qua bài này chúng ta phần nào hiểu rõ hơn tại sao các thẻ button lại được sinh ra và JavaScript còn có thể làm thêm điều tuyệt vời nào nữa.

Hẹn gặp các bạn trong bài viết tới

Thank you and see you