HTML5 mang lại nhiều công nghệ và tiêu chuẩn, nhưng cũng lấy đi cơ hội tiếp cận thế giới Internet của hàng triệu người khuyết tật. Web Accessibility là những tiêu chuẩn nhằm mang lại quyền bình đẳng khi truy cập các website cho nhóm đối tượng này.
Web Accessibility là gì?
Bằng cách phân tích từ ngữ, ta có thể hiểu khái niệm này không quá khó. “Accessibility” có thể được hiểu là khả năng của bất kỳ ai không phân biệt điều kiện của họ, tới việc tiếp cận gì đó (như Internet, phương tiện công cộng,…)
Wikipedia nói: “Khả năng tiếp cận đề cập đến việc thiết kế các sản phẩm, thiết bị, dịch vụ hoặc môi trường dành cho người khuyết tật”.
Vì vậy, ta có thể hiểu ngắn gọn “Web Accessibility” là các phương án để làm cho mọi người, bao gồm cả người khuyết tật, đều có toàn quyền truy cập vào web và Internet.
Các loại hình khuyết tật
Các khuyết tật đơn giản có nghĩa là một tình huống hoặc điều kiện cản trở việc thực hiện một hành động mà người đó có thể dễ dàng làm nếu không gặp vấn đề đó.
Có ba kiểu khuyết tật:
Khuyết tật vĩnh viễn: Đây là khi bạn mất hoàn toàn chức năng, ví dụ như mù, điếc.
Khuyết tật tạm thời: Một hoặc vài khuyết tật về thể chất hay tinh thần gây cản trở cho bạn thực hiện khả năng trong một khoảng thời gian ngắn.
Khuyết tật có điều kiện hoặc tình huống: Các vấn đề chỉ xuất hiện khi bạn không thể thực hiện trong tình huống nào đó.
Tại sao Web Accessibility lại quan trọng
Web và Internet ngày càng đóng vai trò quan trọng trong cuộc sống của chúng ta, cung cấp nhiều nguồn tài nguyên và khả năng, từ công việc, tri thức cho tới giải trí và tiếp cận dịch vụ công của chính phủ. Điều này dẫn tới quyền bình đẳng của mọi người trong không gian mạng. Một trang web cung cấp chức năng cho người khuyết tật là điều nên làm nhằm tránh việc phân biệt đối xử này.
Thêm vào đó, một trang web hỗ trợ người khuyết tật sử dụng, có thể là cách tốt nhất vì nhiều người không thể in ra và đọc, hay khi mua sắm.
Ngoài ra, những gì cải thiện khả năng truy cập cũng sẽ được khuyến nghị trong các tài liệu thiết kế phiên bản mobile, tính tiện dụng và tối ưu SEO.
Website cần hỗ trợ cơ bản người khuyết tật như thế nào?
Tất nhiên, xét đến phương diện kỹ thuật, ta có nhiều yếu tố để cải thiện. Các mức này được xếp theo ba level:
- A – bắt buộc
- AA – cần hoàn thành
- AAA – có thể cần
Dưới đây là các yêu cầu đơn giản của level (A) bắt buộc:
Thẻ ảnh cần có alt tag
Rất nhiều lập trình viên biết đến thuộc tính này, nhưng lại hay quên sử dụng nó. Đ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.
Hãy luôn nhớ thêm alt để người dùng có thể hiểu nội dung bức ảnh.
<img src="/images/hero.jpg" alt="The Hero Image">
Tất nhiên, bạn có thể có thẻ alt="" rỗng, nhưng tốt nhất là có chỉ dẫn cho người đọc. Và chỉ dẫn này không nên quá đơn giản, ví dụ “Trẻ em”, mà nên cụ thể hơn, ví dụ “Một cô bé đang đọc sách”.
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.
Tham khảo thêm:
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.
Lạm dụng quá nhiều Javascript chỉ với các vấn đề có thể làm việc với markup cũng là điều không nên.
Chú thích
Các video, media hay ảnh trên website cần có chú thích. Nó không chỉ mang lại lợi ích cho người khuyết tật, mà còn phù hợp với ai không muốn bị quấy rầy bởi âm thanh, chẳng hạn như dân văn phòng.
Với các file âm thanh, việc cung cấp thêm nội dung chữ cũng giúp tăng khả năng SEO và giúp người dùng tiếp cận thông tin rõ ràng hơn. Google cũng rất thích điều này.
Sử dụng thẻ ARIA
Accessible Rich Internet Applications (ARIA) là một bộ thuộc tính HTML giúp xác định nội dung ứng dụng và web giúp tăng khả năng truy cập với người khuyết tật. Lấy ví dụ, ARIA cho phép truy cập vào menu, các widget Javascript, các hướng dẫn sử dụng form và thông báo lỗi,…
Các thuộc tính của ARIA xác định vai trò cụ thể của loại đối tượng, như là bài viết, cảnh báo, slider hay nút bấm. Các thuộc tính này cũng có thể bổ sung các thông tin hữu ích khác, như mô tả cho form hay tỷ lệ phần trăm của các bước đang tiến hành. Ngoài ra, phổ biến không kém là trạng thái hoạt động của đối tượng, đặc biệt là nút bấm.
Tham khảo thêm: Sử dụng thuộc tính arial-label (MDN)
Những công cụ hữu ích
Nếu bạn muốn tìm hiểu kĩ hơn và áp dụng cho website của bạn, dưới đây là các công cụ có thể giúp bạn:
- Nhận bản tổng hợp đánh giá miễn phí về khả năng truy cập website của bạn
- Checklist kiểm tra khả năng truy cập theo W3C 2.1
- Công cụ đánh giá khả năng truy cập trên Chrome của Google Accessibility
- Tìm mã màu tương phản giúp hiển thị nội dung rõ nét
- Đánh giá nhanh website của bạn
Nếu bạn muốn tham khảo thêm, thử Github này hoặc W3 Tools.
Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.
