Xây dựng Web tốt hơn: Hướng dẫn về trợ năng dành cho nhà phát triển

Có rất nhiều tin đồn xung quanh khả năng truy cập web và internet có rất nhiều thông tin về chủ đề này. Khi WebAIM tiến hành nghiên cứu 1.000.000 trang web hàng đầu, họ đã tìm thấy tổng cộng 50.829.406 lỗi truy cập riêng biệt – trung bình có 50,8 lỗi trên mỗi trang . Các nỗ lực kiểm tra khả năng tiếp cận diễn ra ở giai đoạn cuối của quá trình phát triển sản phẩm tại nhiều công ty nhưng không phải tất cả. Do đó, bằng cách đào tạo các nhà phát triển và ưu tiên khả năng truy cập web trong quá trình phát triển, số lượng lỗi khả năng truy cập có thể giảm đáng kể.

Hiểu khả năng truy cập web

Nói một cách đơn giản nhất, khả năng truy cập web có nghĩa là những người khuyết tật có thể truy cập web. Dưới đây là một ví dụ để giúp hiểu thêm: Người dùng bị mù thường điều hướng máy tính với sự trợ giúp của trình đọc màn hình, đây là công cụ chuyển văn bản thành giọng nói đọc thông tin trên màn hình cho họ. Khi bạn làm cho trang web của mình có thể truy cập được, trình đọc màn hình có thể cung cấp thành công thông tin đó cho người dùng. Nếu trang web của bạn không thể truy cập được, trình đọc màn hình sẽ cung cấp thông tin không chính xác hoặc không đầy đủ cho người dùng. Nói cách khác, việc sử dụng các công nghệ hỗ trợ như trình đọc màn hình chỉ hoạt động tốt nếu các trang web mà họ đang tương tác được thiết kế có lưu ý đến khả năng truy cập.

Từ 'có thể truy cập' khác với 'có thể sử dụng'. Một trang web có thể truy cập được theo nghĩa là nó đáp ứng mức tối thiểu để một trang web tuân thủ pháp luật, nhưng nó vẫn có thể không có trải nghiệm thân thiện với người dùng nhất cho người khuyết tật. Do đó, điều quan trọng là ít nhất hãy thử đi xa hơn để làm cho trang web của bạn có thể truy cập và sử dụng được cho những người khuyết tật. Chúng tôi sẽ thảo luận thêm trong bài viết này làm thế nào để làm như vậy.

Năm cách để kết hợp khả năng truy cập vào trang web của bạn

• Thiết lập đường ống trợ năng tự động.

  Một trong những cách dễ nhất và nhanh nhất để bắt đầu nhúng khả năng truy cập vào ứng dụng của bạn là tuân theo triết lý Shift left – có nghĩa là thử nghiệm khả năng truy cập nên bắt đầu càng sớm càng tốt trong quá trình phát triển và không đợi đến giây phút cuối cùng. Hiện có nhiều công cụ kiểm tra khả năng truy cập khác nhau có thể giúp thiết lập kiểm tra khả năng truy cập tự động cho trang web của bạn – từ thứ mà bạn có thể chạy thủ công trong trình duyệt của mình đến các công cụ mà bạn có thể tích hợp vào hệ thống CI/CD của mình.

  
  

  Tiện ích mở rộng trình duyệt miễn phí bao gồm các công cụ như SÓNG Và Thông tin chi tiết về trợ năng . Sau khi cài đặt, bạn có thể chạy chúng bất cứ lúc nào trên trang web của mình và chúng sẽ hiển thị cho bạn các lỗi về khả năng truy cập trên trang web của bạn, từ thiếu nhãn ARIA cho biểu mẫu của bạn cho đến các vấn đề về độ tương phản màu sắc. Những công cụ này là một cách tuyệt vời để bắt đầu hành trình trợ năng tự động của bạn. Các nhà phát triển cũng có thể sử dụng các đoạn mã như rìu Khả năng tiếp cận Linter để nắm bắt các sự cố khi chúng đang mã hóa trong IDE của bạn. Theo Deque, các công cụ tự động hiện nắm bắt được 57 phần trăm các vấn đề về khả năng truy cập so với tỷ lệ được tin tưởng của ngành là 20 phần trăm.

• Tìm hiểu từ kết quả trợ năng tự động của bạn.

  Bạn đã thiết lập kiểm tra khả năng truy cập tự động cho trang web của mình – điều đó thật tuyệt. Tuy nhiên, bạn có đang học hỏi từ các lỗi trợ năng bị bắt gặp không? Ví dụ – nếu bạn đang gặp phải nhiều lỗi liên quan đến việc thiếu nhãn cho biểu mẫu hoặc thiếu văn bản thay thế cho hình ảnh – thì điều quan trọng là phải đảm bảo bạn không lặp lại những lỗi đó trong tương lai. Nếu bạn đang tìm thấy nhiều vấn đề về độ tương phản trên trang web của mình, bạn nên trao đổi với nhóm thiết kế để đánh giá màu sắc và chủ đề của trang web.

  
  

  Một cách khác để đảm bảo rằng bạn không lặp lại các lỗi truy cập đơn giản là thông qua đánh giá mã – đảm bảo tìm kiếm mã không thể truy cập trong quá trình đánh giá mã! Một số lỗi dễ phát hiện là thiếu nhãn ARIA cho các phần tử không có nhãn hiển thị rõ ràng, thiếu văn bản thay thế cho hình ảnh và thiếu tiêu đề trang. Sử dụng các công cụ kiểm tra tự động là rất tốt, nhưng hiệu quả của nó có thể được cải thiện hơn nữa nếu bạn khắc phục trước các vấn đề mà nó thường mắc phải.

  
  

• Điều hướng bàn phím + Kiểm tra trình đọc màn hình

  Nếu bạn muốn tiến thêm một bước so với kiểm tra khả năng truy cập tự động – hãy đảm bảo kiểm tra trang web của bạn bằng bàn phím. Tất cả các yếu tố tương tác phải có thể truy cập được thông qua các phím tab và các yếu tố như menu thả xuống phải có thể truy cập được thông qua các phím mũi tên. Thông tin thêm về các tổ hợp phím thích hợp cho các thành phần giao diện người dùng khác nhau có thể được tìm thấy tại đây: https://webaim.org/techniques/keyboard/

  
  

  Nếu bạn thấy rằng một cái gì đó không thể truy cập được qua bàn phím, hãy tự hỏi: Cái này có thể truy cập được không? Các phần tử chẳng hạn như ô bảng tĩnh không cần phải truy cập được qua bàn phím. Nếu đó là một phần tử tương tác tùy chỉnh bắt buộc phải truy cập được qua bàn phím và không phải vậy, thì bạn sẽ cần phải lập trình để có thể truy cập được phần tử đó. Điều này có thể được thực hiện bằng cách thêm chỉ mục tab bằng 0, chỉ mục này sẽ thêm phần tử vào thứ tự tab của trang web, sau đó xác định trình xử lý sự kiện, chẳng hạn như “onKeyPress”, sẽ gọi hành động cần thiết khi nhấn phím.

  
  

  Ví dụ: đoạn mã này thêm chỉ mục tab bằng 0 vào thành phần nút, làm cho thành phần này có thể đặt tiêu điểm và truy cập được qua bàn phím. Trình xử lý sự kiện lắng nghe sự kiện "keydown" và kích hoạt nhấp chuột vào nút nếu nhấn phím Enter.

  
  

  <button id="myButton">Click me</button>

   

  const button = document.getElementById("myButton");

  button.tabIndex = 0;

    

  button.addEventListener("keydown", function(event) {

  if (event.key === "Enter") {

  button.click();

  }

  });

  
  

  Nếu bạn muốn tiến thêm một bước, hãy thử sử dụng trình đọc màn hình để kiểm tra trang web của mình. Đây có thể là một ý tưởng hay nếu trang web của bạn không thông qua bất kỳ nhà cung cấp khả năng truy cập cuối cùng nào của bên thứ ba để kiểm tra thủ công. Bạn không cần thực hiện kiểm tra trình đọc màn hình chi tiết với tư cách là nhà phát triển, nhưng bạn có thể thử điều hướng trang web bằng trình đọc màn hình. Kiểm tra những thứ như liệu các nhãn thích hợp cho các phần tử biểu mẫu có được công bố hay không, nếu có bất kỳ thông tin dư thừa nào đang được chuyển tải, nếu thông tin trong bảng có thể truy cập được, v.v.

  
  

  Windows Narrator và Voiceover cho Mac là những lựa chọn tốt cho trình đọc màn hình miễn phí. Trình đọc màn hình đồng bộ hóa với các lệnh điều hướng bàn phím thông thường nhưng ngoài ra còn có các lệnh cụ thể để điều hướng các thành phần khác nhau của trang web. Ví dụ: đối với VoiceOver, bạn có thể tra cứu các lệnh đó tại đây: https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts .

  
  

• Làm quen với một số công cụ gỡ lỗi trợ năng.

  Các công cụ như Cây khả năng truy cập trình duyệt có thể giúp bạn xem các trạng thái và thuộc tính khả năng truy cập của các phần tử giao diện người dùng trên trang web của bạn. Công cụ này đặc biệt hữu ích để sửa các lỗi trợ năng, vì nó có thể cho bạn biết những thuộc tính trợ năng nào đang được hiển thị với các công nghệ hỗ trợ, chẳng hạn như trình đọc màn hình. Để xem cây Trợ năng trong Google Chrome, hãy mở Devtools trên trình duyệt của bạn và nhấp vào Ngăn trợ năng. Cái này phải ở bên cạnh Ngăn Bố cục.

  
  

  Tìm hiểu thêm về Cây trợ năng tại đây:https://developer.chrome.com/blog/full-accessibility-tree/#what-is-the-accessibility-tree

  
  

  Một công cụ hữu ích khác mà bạn có thể sử dụng là các dấu trang của Paul cũng làm nổi bật vai trò, trạng thái và thuộc tính của các phần tử. Điều này cũng hoạt động trên điện thoại di động. Cả hai công cụ đều hữu ích để biết thông tin nào đang được chuyển đến các công nghệ hỗ trợ và do đó cực kỳ hữu ích trong việc sửa bất kỳ lỗi nào.

  
  

• Tài khoản cho một loạt các khuyết tật khác

  Ngoài kiểm tra trình đọc màn hình và bàn phím, có thể giúp ích cho những người mù hoặc khuyết tật vận động, bạn cũng nên cân nhắc đáp ứng nhu cầu của những người khuyết tật khác. Nếu trang web của bạn có video, hãy đảm bảo bao gồm chú thích chính xác cho chúng. Đối với những người khuyết tật về nhận thức, WCAG có một hướng dẫn tuyệt vời về cách làm cho nội dung có thể truy cập được cho họ. Cũng xem xét các khuyết tật khác như mù màu. Trình phân tích độ tương phản màu của TPGi có Trình mô phỏng mù màu , đây có thể là một công cụ tuyệt vời để đảm bảo trang web của bạn đang sử dụng các màu và chủ đề có thể truy cập được.

  
  

  Cuối cùng, nếu trang web của bạn có chức năng chuyển giọng nói thành văn bản tùy chỉnh, hãy đảm bảo người khuyết tật về giọng nói có thể truy cập được. Một cách để làm như vậy có thể là cung cấp thời gian hợp lý để những người mắc chứng rối loạn ngôn ngữ nói hết những gì họ phải nói.

Phần kết luận

Khả năng truy cập kỹ thuật số rất quan trọng để một tỷ người khuyết tật trên hành tinh này có thể truy cập web một cách công bằng. Nhìn vào trạng thái hiện tại của khả năng tiếp cận kỹ thuật số - chúng tôi có thể không hoạt động tốt. Theo một báo cáo gần đây của UsableNet , “Năm 2022 đánh dấu một năm nữa có hơn 4.000 vụ kiện [khả năng tiếp cận].” Bằng cách sử dụng một số chiến lược được nêu ở trên, nhà phát triển có thể nhúng khả năng truy cập vào quy trình phát triển, đồng thời phát hiện và sửa nhiều lỗi nhất có thể trước khi ai đó có trải nghiệm khó chịu.