BlogAbout Me

Web Accessibility

Published in Web Development
January 09, 2021
8 min read
January 09, 2021
8 min read

Web accessibility là gì?

Web accessibility là khái niệm mô tả các các websites được phát triển để hỗ trợ những người khiếm khuyết có thể tiếp cận và thao tác dễ dàng, không gặp trở ngại nào.

Có những loại khiếm khuyết sau:

  • Khiếm khuyết thính giác: điếc hoặc nặng tai
  • Khả năng nhận thức
  • Khiếm khuyết về vận động: như liệt hoặc cụt tay không thể thao tác chuột hay bàn phím
  • Khiếm thị giác: người khiếm thị, mù màu, người mù.

Đôi khi những khiếm khuyết không phải do bẩm sinh mà thay đổi theo tuổi tác. Như khả năng nhìn hay nhận thức của người cao tuổi sẽ kém hơn người trẻ. Khả năng nghe, đọc hiểu của trẻ em cũng sẽ kém hơn người trưởng thành.

Do vậy việc nhận biết được những khiếm khuyết và những khó khăn diễn ra đối với những đối tượng này sẽ giúp cho chúng ta có thể áp dụng những chỉ dẫn cần thiết để đảm bảo website accessible.

Làm sao để phát triển website accessible?

Tổ chức W3C (World Wide Web Consortim) đã đưa ra bộ quy tắc diễn giải các quy chuẩn mô tả web content accessibility. Toàn bộ thông tin , chỉ dẫn được cung cấp thông qua địa chỉ https://www.w3.org/WAI/.

Bộ quy tắc được chia thành 4 nguyên tắc. Ứng với mỗi nguyên tắc là các hướng dẫn cùng với các tiêu chuẩn đánh giá.

4 Nguyên tắc Accessibility được đưa ra là:

  1. Perceivable information and user interface

Text alternatives for non-text content

Captions and other alternatives for multimedia

Content can be presented in different ways

Content is easier to see and hear

  1. Operable user interface and navigation

Functionality is available from a keyboard

Users have enough time to read and use the content

Content does not cause seizures and physical reactions

Users can easily navigate, find content, and determine where they are

Users can use different input modalities beyond keyboard

3. Understandable information and user interface

Text is readable and understandable

Content appears and operates in predictable ways

Users are helped to avoid and correct mistakes

4. Robust content and reliable interpretation

Content is compatible with current and future user tools

Chi tiết về 4 nguyên tắc bạn có thể tìm hiểu thêm tại đây: https://www.w3.org/WAI/fundamentals/accessibility-principles/

3 Mức đánh giá nội dung website theo tiêu chí accessibility

Có 3 mức đánh giá nội dung theo tiêu chí accessibility là A, AA, AAA.

  • Mức A là mức cơ bản mà website cần đáp ứng như alt text cho ảnh, audio and video description, link description, keyboard function support,
  • Mức AA là mức web site nên có ví dụ như: color contrast, focus visible, resizable text (zoom out, in), content hover and focus indicator
  • Mức AAA là mức nếu có thì rất tuyệt: support all functionality by keyboard, target pointer size at least 44px

Bạn có thể tham khảo danh sách các tiêu chí đánh giá accessibility thông qua các link bên dưới:

Công cụ kiểm tra website content accessibility

  • Axe Accessibility: https://www.deque.com/axe/ : có extension cho bài cài đặt trực tiếp vào trình duyệt chrome.
  • Dùng lighthouse tool trên chrome dev tools: công cụ sẽ kiểm tra những lỗi đơn giản A, AA từ nội dung html trên trang web của bạn.

Ngoài ra còn nhiều công cụ trả phí khác có thể đưa ra các đánh giá chi tiết hơn cho website của bạn.

Việc nhận biết website có đáp ứng được các tiêu chuẩn w3c hay không cần thực hiện bởi cả con người. Công cụ có thể giúp bạn chỉ ra được những lỗi cơ bản như thiếu mô tả cho ảnh, color contrast không hợp lệ, label cho form input.

Những chỉ dẫn cho developer để xây dựng accesibility website

Để xây dựng accessibility website thì chúng ta cần đề ra các tiêu chuẩn cho website trước và trong quá trình phát triển.

Dưới đây là một vài những lưu ý cần thiết khi phát triển:

1. Sử dụng các thẻ HTML đúng với chức năng và nhiệm vụ của nó.

Việc dùng sai chức năng của các thẻ sẽ gây khó khăn cho các công cụ search engine, screen reader hay các công cụ phấn tích website khác trong việc hiểu được nội dung trang web.

Và trong một số trường hợp thì bạn cần phải sử dụng thêm các thẻ aria-* attribute để cung cấp thêm ngữ nghĩa cho nội dung trang web. Giúp trình duyệt cũng như screen reader xử lý nội dung của bạn tốt hơn.

Bạn có thể tìm có thể tìm hiểu thêm aria ở đây: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

Ví dụ:

  • Thẻ a chỉ nên dùng để thể hiện liên kết đường dẫn tới resource trong trang hoặc liên kết tới trang khác.

Một số lỗi cơ bản mình thấy nhiều anh em hay sử dụng thẻ a để khai báo thay cho button như dưới đây

<a href="#">Button 1</a>
<a href="javascript:void(0)">Button 2</a>

Điều này sẽ gây ra nhầm lẫn cho screen-reader. Mặt khác trình duyệt cũng làm việc khác nhau giữa thẻ abutton.

  • Thẻ button chỉ nên dùng để thể hiện 1 hành động có thể được thực hiện bởi người dùng như submit form, bật hộp thoại.

Một số bạn hay có thói quen khai báo thẻ div thay cho button vì lý do dễ style hơn. Mặc định với thẻ div sẽ không focusable được. Điều này sẽ khiến site của bạn mất điểm accessibility. Để giải quyết việc style button theo ý muốn bạn có thể reset style mặc định của trình duyệt.

Liên kết tham khảo:

2. Tham khảo các hướng dẫn khi xây dựng các thành phần của trang web

Các thành phần cơ bản của trang web như: header, navigation menu, form input (checkbox, radio, dropdown select, custom inputs), modal dialog, table, tooltip, media (image, video, audio).

Bạn có thể tìm kiếm các chỉ dẫn từ các link bên dưới:

3. Đóng gói thành các component để dùng chung và giúp cho việc cải tiến, maintance sau này trở nên dễ dàng hơn.

Trong quá trình phát triển website thường chúng ta thường không chú trọng tới accessibility giai đoạn ban đầu. Vì việc này sẽ tốn nhiều effort cũng như thời gian của đội phát triển. Do đó chúng ta có xu hướng bỏ qua các lưu ý trong khi khai báo các thẻ html và dựng các thành phần của trang. Việc này sẽ làm gia tăng tech debt về sau. Nếu không đóng gói các thành phần thành component để dùng chung thì việc maintaince và improve sau này sẽ rất vất vả.

4. Sử dụng các thư viện được viết sẵn và hỗ trợ accesibility

Việc sử dụng thư viện viết sẵn giúp bạn tiết kiệm hàng trăm giờ cho việc phát triển thay vì viết từ đầu. Và chẳng ai mong muốn trả tiền cho bạn để hì hục test các chức năng liên quan đến accesibility trong khi bạn có thể sử dụng các open sources sẵn có.

Một điều chúng ta thường lăn tăn trong việc sử dụng các thư viện có sẵn vì nó thường đi kèm với design system, trong khi chúng ta mong muốn customize style theo ý muốn và tránh việc bị phụ thuộc vào style sẵn có. Các thư viện sẵn có thường đi kèm hàng tá features mà chúng ta không mong muốn và làm cho app size phình lên không cần thiết.

Để giải quyết vấn đề này có nhiều nhiều thư viện Headless UI được viết ra với mục đích cung cấp các components hỗ trợ accesibility và function cở bản, việc xử lý logic và style sẽ do developers quyết định.

Dưới đây là một số open source bạn có thể tham khảo:

Lời kết

Hi vọng bạn đã có được những thông tin cần thiết để bắt tay vào việc biến website trở lên dễ tiếp cận hơn.


Tags

accessibilitywebdevelopment
Next
DRY - đừng lặp lại những việc mà nhẽ ra có thể tự động được.

Hien Do

Software Engineer

Topics

Book
Web Development
System Design

Related Posts

Web Performance Optimization - Tối ưu tốc độ web ra sao và những kinh nghiệm thực tế
February 10, 2021
6 min
© 2021, All Rights Reserved.