Định nghĩa Accessibility (a11y) là gì?
Lịch sử hình thành
1995: Tiến sĩ Cynthia
Tiến sĩ Cynthia Waddel đã xuất bản tiêu chuẩn trợ năng thiết kế web cho Văn phòng Đảm bảo Bình đẳng của Thành phố San Jose. Một trong những yêu cầu trong tiêu chuẩn là tất cả các hình ảnh phải có văn bản thay thế. Đây là một trong những quy tắc vẫn còn hiệu lực cho đến ngày nay. Một đề xuất khác là tất cả các trang phải hỗ trợ trình duyệt văn bản. Đó không phải là điều chúng tôi hướng tới nữa, mặc dù các trình duyệt văn bản vẫn tồn tại.
Các tiêu chuẩn của cô ấy đề ra đã trở thành điểm khởi đầu quan trọng cho các tiêu chuẩn và hướng dẫn nổi tiếng khác, cô ấy được biết đến nhiều hơn với phần mềm kiểm tra khả năng tiếp cận Cynthia Says.
1996: Bobby
Phần mềm kiểm tra khả năng tiếp cận Bobby đã được phát hành trước Cynthia Says vài năm. Bobby đã hoạt động giống như cách mà nhiều công cụ kiểm tra hiện tại đang hoạt động. Mã HTML đã được kiểm tra dựa trên một bộ quy tắc và kết quả là một danh sách các vấn đề. Thay vì một tiện ích mở rộng trình duyệt không tồn tại vào thời điểm đó, bạn đã tải lên một tệp HTML cục bộ.
1997: Sáng kiến hỗ trợ truy cập web (WAI)
Sáng kiến Hỗ trợ Tiếp cận Web bắt đầu như một dự án W3C vào năm 1996. Sáng kiến này chủ yếu được biết đến với Nguyên tắc Hỗ trợ Tiếp cận Nội dung Web (WCAG). Họ cũng cung cấp nhiều chiến lược và tài nguyên cho khả năng truy cập web.
1999: Nguyên tắc về Trợ năng Nội dung Web (WCAG) 1.0
Tim Berners-Lee thành lập World Wide Web và muốn mọi người có quyền truy cập bình đẳng vào nó. W3C đã phát hành 14 hướng dẫn và 65 điểm kiểm tra về khả năng truy cập web. Nhiều người trong số họ vẫn là một phần của WCAG. Chúng tôi sẽ đi sâu vào chi tiết hơn về WCAG trong module sau.
2001: Làn sóng
Một công cụ kiểm tra khả năng tiếp cận khác. Được phát hành lần đầu tiên bởi Tiến sĩ Len Kasday và sau đó được WebAIM tiếp quản vào năm 2003. Vẫn là một công cụ phổ biến của nhiều nhà phát triển và chuyên gia trợ năng.
2005: Trình đọc màn hình VoiceOver
Nhiều người mù sử dụng trình đọc màn hình, một công cụ chuyển thông tin trên màn hình thành giọng nói. VoiceOver là trình đọc màn hình gốc dành cho các sản phẩm của Apple. Ngày nay VoiceOver là trình đọc màn hình phổ biến nhất cho thiết bị di động và phổ biến thứ ba trên máy tính để bàn và máy tính xách tay. VoiceOver không phải là trình đọc màn hình đầu tiên, thậm chí không đóng. Đó là một phần của lịch sử khả năng truy cập web ngắn gọn này, vì thị phần thống trị trên thiết bị di động. VoiceOver chỉ dành cho các sản phẩm của Apple.
2007: Trình đọc màn hình NVDA
Một trình đọc màn hình phổ biến khác đã được phát hành để thay thế cho các trình đọc màn hình đắt tiền như Jaws. Vào năm 2019, nó đã trở thành trình đọc màn hình chính phổ biến nhất cho máy tính để bàn và máy tính xách tay. NVDA chỉ dành cho máy tính Microsoft Windows.
2008: WCAG 2.0
Phiên bản thứ hai của hướng dẫn là phiên bản cập nhật của WCAG 1.0. Nó đã phân loại các hướng dẫn thành bốn nguyên tắc: có thể hiểu được, có thể hoạt động, dễ hiểu và mạnh mẽ.
2018: WCAG 2.1
Đây là hướng dẫn được sử dụng nhiều nhất hiện nay và là phiên bản hiện tại. Đây là điều mà các tổ chức cố gắng tuân thủ. Phiên bản cập nhật có các hướng dẫn mới về màn hình cảm ứng và thiết bị di động, cũng như các hướng dẫn khác về khuyết tật nhận thức.
Tại sao Accessibility lại quan trọng như vậy?
Accessibility là thiết yếu
Accessibility mang lại nhiều lợi ích cho người dùng
Cách áp dụng trong code
Thẻ ảnh cần có alt tag
<img src="/images/hero.jpg" alt="The Hero Image">
Đây là thuộc tính phổ biến, nhưng lại hay bị quên sử dụng. Điều này có ảnh hưởng nhiều tới góc độ khi ảnh không hiển thị, nhưng cũng là vấn đề cho người khuyết tật nếu họ không nhìn được.
Di chuyển bằng bàn phím
Tốt nhất bất kỳ thứ gì bạn đưa lên website nên có thể truy cập thông qua bàn phím. Điều này có nghĩa bạn cần có thứ tự khi điều hướng người dùng.
Về vấn đề này, tôi sẽ nói rõ hơn trong một bài viết tiếp theo về Accessibility. Bạn có thể tìm hiểu thêm qua:
Sử dụng tag HTML mặc định
Việc tuân thủ cơ bản những quy định cũng là cách để các trình đọc dành cho người khuyết tật hiểu được nội dung trên website của bạn.
Chẳng hạn, sử dụng <button> trong <form>, sử dụng <a href=""> với chỉ hướng xác định (thay vì dẫn liên kết đến #), hoặc sử dụng nhiều hơn các thẻ heading h2, h3, h4 đều là điều nên làm.
Ví dụ như:
<form action="" class="">
<button class="btn-search" type="submit">Gửi đi</button>
<input type="text" placeholder="Tìm kiếm ..." class="form-control" id="input-search-header">
</form>
<a href="codetutam.com">Học hỏi thêm kiến thức</a>
Bài viết này tôi chỉ giới thiệu qua định nghĩa và một số thẻ, thuộc tính của Accessibility để mọi người hiểu hơn về vấn đề này. Trong các bài tiếp theo tôi sẽ giới thiệu các thuộc tính cần dùng để cải thiện phạm vi sử dụng website của bạn cho người dùng.
Mong bài viết có thể giúp ích cho các bạn!