7 mẹo hữu ích để cải thiện Web accessibility (Khả năng truy cập web )
Trong quá trình phát triển trang web, bạn luôn muốn đảm bảo rằng người dùng có trải nghiệm sử dụng website tốt nhất . Tuy nhiên, với những người kiếm khuyết thì việc sử dụng website sẽ gặp nhiều khó khăn hơn so với những người dùng khác. Chính vì vậy khái niệm Web accessibility ra đời, nó sẽ cung cấp các cách thiết kế website giúp bất kỳ ai cũng có thể sử dụng nó mà không gặp khó khăn gì.
Thật không may, vẫn có những trang web không sử dụng các phương pháp hay nhất để hỗ trợ khả năng truy cập website dễ dàng cho người khuyết tật. Nên bạn hãy ghi nhớ một số điều quan trọng bên dưới trong quá trình phát triển web để giúp cải thiện UX (trải nghiệm người dùng) cho tất cả người dùng, bao gồm cả những người dùng có các hạn chế về hoạt động.
1. Thêm Alt Text (văn bản thay thế ) vào hình ảnh :
Bạn có thể đã nghe nói về tầm quan trọng của việc thêm văn bản thay thế vào thẻ hình ảnh trong HTML5. Vậy làm thế nào để bạn sử dụng chúng? Bạn có cần phải cung cấp văn bản thay thế cho mọi hình ảnh trên trang web của mình không?
Văn bản thay thế hình ảnh giúp người khiếm thị dễ dàng hiểu nội dung của trang web hơn. Nhưng bạn chỉ nên thêm văn bản thay thế cho hình ảnh có chứa thông tin quan trọng để giúp người kiếm thị hiểu nội dung. Bạn sẽ có thể mô tả những gì chúng hiển thị trong một vài từ của văn bản thay thế.
Hình ảnh chỉ dùng trang trí thì để văn bản thay thế trống. Điều này giúp cho các chương trình đọc màn hình (screen reader) biết rằng các hình ảnh không quan trọng không cần đọc.
Giả sử bạn đang tạo một một bài viết về cách tập thể dục tại nhà và bạn sử dụng hình ảnh sau trong bài viết của mình. Một số mẹo hữu ích mà bạn có thể sử dụng để cải thiện web accessibility.
Hình ảnh này được cho là để truyền tải một thông điệp đến người đọc blog về những thứ bạn cần cho một bài tập thể dục . Văn bản thay thế cho hình ảnh này có thể giống như sau
Văn bản thay thế mà bạn cung cấp cho hình ảnh của mình giúp người dùng khiếm thị biết rõ ràng thông điệp mà hình ảnh củabạn truyền tải.
Mặt khác, hình ảnh trang trí phục vụ mục đích duy nhất là trang trí trên trang web
Các hình biểu tượng icon là một ví dụ tuyệt vời về hình ảnh trang trí. Trang chủ Airbnb có một thanh điều hướng với nhiều biểu tượng (giống như biểu tượng trong vòng tròn màu đỏ) cho biết các loại phòng hoặc nhà khác nhau có sẵn tại Airbnb. Các biểu tượng được sử dụng trong thanh điều hướng dành cho mục đích trang trí và bạn có thể để trống văn bản thay thế của chúng.
Để kiểm tra việc dùng văn bản thay thế của bạn đã chính xác chưa theo cách dùng của người khiếm thị, bạn có thể dùng các chương trình đọc màn hình dưới đây:
Các chương trình này sẽ đọc nội dung của website, giúp cho những người khiếm thị nghe và hiểu nội dung website của bạn.
2. Duy trì cấu trúc phân cấp tiêu đề (Heading)
Nếu bạn không sử dụng chính xác phân cấp các tiêu đề (từ – <h1> lớn nhất – đến <h6> – nhỏ nhất), thì chương trình đọc màn hình có thể cho rằng một số nội dung bị thiếu.
Vì vậy, tốt nhất là chỉ sử dụng <h1> cho tiêu đề chính, <h2> cho các tiêu đề đứng sau tiêu đề chính, <h3> cho các tiêu đề phụ sau <h2>, v.v.
Hãy xem xét ví dụ dưới đây: chúng tôi có một trang web với một vài tiêu đề. <h1> được sử dụng cho tiêu đề tài liệu , <h2> cho đầu đề tài liệu cấp hai , <h3> cho các tiêu đề phụ và <h4> cho các tiêu đề nhỏ (tiêu đề xuất hiện sau <h3> )
Dưới đây là code cho trang web này. Lưu ý các thẻ tiêu đề khác nhau trong đó:
3. Sử dụng thuộc tính aria hoặc thẻ label cho các thẻ input
Thuộc tính aria-label hoặc thẻ <label> cho chương trình đọc màn hình biết loại thông tin cần điền vào trường nhập liệu. Nếu không có chúng, chương trình đọc màn hình sẽ không biết mục đích sử dụng của trường nhập liệu, điều này sẽ cung cấp trải nghiệm không tốt cho người dùng, khiến người dùng bối rối không biết cần cung cấp thông tin gì cho các trường nhập liệu này
4. Cung cấp chức năng chạy hàm sự kiện bằng bàn phím (keyword function) :
Không phải tất cả người dùng đều có thể sử dụng chuột để nhấp vào các nội dung như đường link, nút button… nhưng rất nhiều trang web không cung cấp chức năng thao tác việc nhấp đó bằng bàn phím cho người dùng. Điều này sẽ khiến những người hay sử dụng bàn phím để thao tác trên giao diện web sẽ không bao giờ trở lại dùng trang web của bạn nữa.
Hãy xem ví dụ dưới đây:
Ví dụ 1 : Sử dụng sự kiện onclick trên nút sunmit. Khi người dùng nhấn phím enter trên bàn phím sẽ không thể gửi thông tin từ biểu mẫu vào hệ thống của web.
Ví dụ 2 : Sử dụng sự kiện onsubmit. Bằng cách này, một cú nhấp chuột hoặc nhấn vào nút enter đều chạy hàm handleSubmit giúp gửi thông tin.
5. Sử dụng bảng màu phù hợp cho website
Màu sắc có độ tương phản kém sẽ phá hỏng trải nghiệm sử dụng website của người dùng. Vì vậy, điều quan trọng là phải có được độ tương phản và màu sắc bổ sung chính xác khi thiết kế trang web của bạn.
Có những công cụ kiểm tra độ tương phản sẽ giúp bạn hiểu liệu màu sắc của bạn có đủ tương phản để hiển thị đúng cách hay không. Độ tương phản màu dễ nhìn sẽ giúp người có thị lực kém phân biệt giữa các yếu tố trên một trang web. Xem bên dưới các ví dụ về sự kết hợp màu sắc tốt và xấu.
Khối nội dung đầu tiên có nền màu xanh đậm giúp chữ màu trắng dễ đọc hơn. Mặt khác, hộp thứ hai có nền màu xanh lá cây với dòng chữ màu hồng làm khó đọc và gây mỏi mắt.
Một số công cụ giúp kiểm tra độ tương phản màu theo chuẩn Web Accessibility:
- https://color.adobe.com/create/color-contrast-analyzer
- https://coolors.co/contrast-checker/112a46-acc8e5
- https://webaim.org/resources/contrastchecker/
6. Cung cấp các lựa chọn thay thế cho nội dung âm thanh và video
Người dùng không thể nghe hoặc nhìn rõ có thể gặp khó khăn khi truy cập nội dung âm thanh và video của một trang web.
Để cung cấp cho họ trải nghiệm tốt hơn, hãy cung cấp lời (lyric) cho bất kỳ âm thanh nào bạn sử dụng và thêm phụ đề dễ đọc vào nội dung video của bạn.
7. Đảm bảo nội dung dễ hiểu
Nội dung dễ hiểu sẽ không có từ chuyên ngành và cụm từ kỹ thuật không giải thích được.
Giả sử bạn điều hành một công ty phân tích và là một chuyên gia trong lĩnh vực khoa học dữ liệu. Nhưng người dùng của bạn có thể bao gồm khách hàng hiện tại hoặc tiềm năng và người tìm kiếm việc làm. Những người này có thể không có đủ kiến thức kỹ thuật để hiểu nội dung của các từ ngữ chuyên ngành.
Chúng tôi là một nhóm gồm các chuyên gia phân tích, những người thành thạo trong việc tổng hợp dữ liệu từ tất cả các kho có sẵn, phát hiện sự bất thường, thực hiện xử lý hàng loạt trên khối lượng dữ liệu lớn và áp dụng các thuật toán mạnh mẽ để giải quyết nhu cầu kinh doanh của bạn.
Văn bản trên đầy những thuật ngữ phân tích mà không phải ai cũng có thể hiểu được. Điều này khiến bạn mất lượt truy cập – tại sao họ lại đầu tư vào bạn nếu họ không thể hiểu những gì bạn làm?
Hãy xem phiên bản đơn giản hóa dưới đây của cùng một văn bản sử dụng các thuật ngữ dễ tiếp cận hơn mà mọi người đều có thể hiểu được:
Chúng tôi là một nhóm chuyên gia chuyên thu thập dữ liệu từ tất cả các nguồn có sẵn, xác định lỗi trong dữ liệu đó, xử lý khối lượng dữ liệu lớn trong thời gian ngắn hơn với độ chính xác cao hơn và đưa ra dự đoán định hướng phát triển kinh doanh cho bạn.
Tóm lại
Có rất nhiều điều cần làm để tăng Web accessibility (Khả năng truy cập web ). Nhưng với những mẹo và thủ thuật trên, bạn có thể cải thiện đáng kể UX của trang web hoặc ứng dụng của mình.
Mình hy vọng những mẹo này sẽ giúp bạn cung cấp trải nghiệm người dùng tốt hơn trong các dự án sắp tới của bạn.
Tham khảo: https://www.freecodecamp.org/news/improve-website-accessibility-with-these-tips/
