Tổ chức Y tế Thế giới Khuyết tật cho biết: ”Hơn một tỷ người, khoảng 15% dân số thế giới, bị một số dạng khuyết tật” và từ 110 triệu đến 190 triệu người trưởng thành gặp khó khăn đáng kể trong hoạt động.
Bên cạnh những đối tượng là người dùng bình thường, lành lặn có đầy đủ tay chân mắt mũi miệng thì cũng có phần không nhỏ lượng người dùng kém may mắn hơn đang cần được hổ trợ từ những nhà phát triển ra web. Từ đó accessibility ra đời để giúp đỡ những người dùng đặc biệt này.
Overview
Nhân dịp gần đây mình có vài task liên quan đến a11y và hông ai thèm nói chiện dới mình nên mình đi viết blog 😥
Theo cách hiểu đơn giản, một trang web có accessibility tốt là trang web có thể được nhiều người sử dụng nhất có thể. Mọi người đều có thể truy cập và enjoy web, kể cả người cao tuổi, người khuyết tật hoặc cả những người không thể sử dụng một số input thông thường trên máy tính như chuột, touchpad,…
Content
Nội dung bài viết này sẽ chia sẻ cho các bạn một cái nhìn tổng quan về a11y - theo ngôn ngữ của mình. Một số best practive mà mình biết, tools và khái niệm liên quan.
WCAG - Web Content Accessibility
The World Wide Web Consortium (W3C) một tổ uy tín, lâu đời được thành lập từ những năm 1994 đã đưa ra một bộ tiêu chuẩn nhằm xác định nội dung web dễ tiếp cận hơn cho người khuyết tật gọi tắt là WCAG. Trong đó tập trung chính vào các yếu tố sau:
- Perceivable: có thể nhận biết có thể kể đến các thuộc tính như
alt,… - Operable: có hể hoạt đông ví dụ như các nút bấm (button, form,…)
- Understandable: tính dễ hiểu, như cách trình bày sắp xếp UI không gây rối cho user
- Robust: Strong + clear về cách đặt tên, các message được hiển thị,…
Có thể nói một trang web tốt là một trang web POUR 🥲
WCAG
Các nguyên tắc này được chia làm 3 mức độ:
- A - mức độ căn bản nhất, đây sẽ là tập hợp những nguyên tắc bắt buộc - không thể thiếu nếu site của các bạn có hổ trợ a11y
- AA - Mức độ cần hoàn thành, nếu không có guidelines này thì người dùng sẽ tương đối khó tiếp cận đến với các tính năng trên site.
- AAA - có thể cần, đây là mức độ cao nhất cũng là phần phức tạp nhất. Nếu đáp ứng mức độ này site của bạn sẽ dễ truy cập hơn
A good foundation of a11y
- Delivering nội dung nhiều nhơn 1 cách, có thể kể đến như: text-to-speech hoặc video,..
- Nội dung dễ hiểu, sử dụng ngôn ngữ đơn giản dễ tiếp cận.
- Tập trung vào các nội dung quan trọng. Giảm thiểu đến mức tối đa phân tán sự tập trung của người dùng vào các nội dung không quan trọng hoặc quảng cáo (if any)
- Bố cục webpage thuận tiện, dễ điều hướng thân thiện với người dùng
- Sử dụng các “Familiar elements” như underline link, màu xanh khi chưa bấm vào link. Màu tím khi đã bấm điều hướng.
- Giao diện xác thực người dùng (login,..) càng đơn giản càng tốt tuy nhiên không làm phá vỡ bảo mật của web.
- Làm cho các form (biểu mẫu) trong trang dễ dàng để có thể hoàn thành nhanh, ví dụ sử dụng các thông báo lỗi rõ ràng đơn giản,…
Và còn nhiều yếu tố khác nữa tuy nhiên cá nhân mình đánh giá nếu site bạn có đầy đủ các yếu tố kể trên thì đã rất gì là này nọ rồi, vjp pro 👌👌
WAI - ẢIA 🙈 (Web Accessibility Initiative - Accessible Rich Internet Applications)
Buồn ngủ quá mai mốt viết tiếp…
To be continue…
What’ next?
- ảia
- Keyboard compatibility
- Best practices
- A11Y in React
- Tools for A11Y
Summary
Cảm ơn các bạn năm vừa rồi đã luôn yêu thương mình! Luv you guys 😍