Web accessibility. Web is for everyone

Thường thì những gì mà devloper chúng ta quan tâm nhất là làm sao phát triển sản phẩm một cách nhanh nhất có thể. Các framework để phát triển web cũng thường quảng cáo với những từ khóa kiểu rapid development, easy to learn .etc chính là phản ánh rõ rệt nhất. Chúng ta thường mặc định người dùng cũng sử dụng web giống như mình và bỏ qua khả năng những người khuyết tật có thể sử dụng trang web của mình. Thực tế thì có rất nhiều người dù không nhìn thấy gì vẫn đang sử dụng internet hàng ngày, dù là Youtube, Facebook, Twitter hay Reddit.

How do they use the website

Người không nhìn thấy được thì dùng screen reader như NVDA và dùng bàn phím để di chuyển, typing (of course) .etc. Người không dùng được tay thì dùng công cụ hỗ trợ như eye tracking. Vậy chúng hãy tạo ra những website để các công cụ hỗ trợ kia hoạt động tốt nhất. Bạn có thể đọc How to ở đây. Trong bài này chúng ta hãy cũng thử xem qua những thứ đơn giản chúng ta có thể làm để tăng khả năng accessibility của trang web nhé.

Keyboard usability

Điều quan trọng nhất đầu tiên là website của bạn phải có thể sử dụng được chỉ với bàn phím. Nếu bạn dùng được chuột thì làm gì còn khó khăn gì nữa đâu. Vì không dùng được chuột nên bạn mới phải dùng bàn phím. Cụ thể là dùng 4 phím mũi tên, phím tab/shift + tab để di chuyển, phím enter để chọn .etc.

Tab key:

Bạn cần đảm bảo khi di chuyển bằng tab thì người dùng sẽ không bị focus phải những cái vô nghĩa như icon .etc. Khi tạo các component bằng JavaScript, bạn cũng cần chú ý khi dùng event liên quan đến phím tab. Ví dụ như autocomplete box hay tag input. Trong component tag input như của Viblo chẳng hạn. Nếu bạn dùng phím tab để insert tag thay vì enter thì người dùng sẽ không bao giờ thoát khỏi cái input box được.

Bạn có thể dùng thuộc tính tabindex để quyết định element tiếp theo được focus là cái nào. Nếu tabindex="-1" thì element đó sẽ không bao giờ được focus bằng phím tab. tabindex="0" thì nó sẽ được focus theo thứ tự của nó trong document. Ngoài ra đảm bảo thứ tự của DOM element và thứ tự của tab giống nhau cũng quan trọng nữa.

Clickable elements:

Có nhiều button hoàn toàn không có chữ mà chỉ có mỗi cái icon. Mình cũng hay dùng tag <a> khi muốn có một cái icon click được nữa. Tuy nhiên nếu người dùng focus đến mấy cái này thì sẽ chẳng biết nó để làm gì hết. Hãy thêm thuộc tính title và aria-label cho nó nữa để screen reader có thể đọc được nó.

Ngoài ra thì với screen reader, link là link, link không phải là button. Icon cũng không phải là button. Chỉ có button mới là cái gì đó có thể click vào được. Vì thế nếu bạn muốn một cái gì đó click được thì hãy dùng tag <button> và set style display cho nó tùy theo ý muốn.

Form label, images:

Form là một phần khá là quan trọng trong trang web. Hãy đảm bảo bạn có thể dùng tab để di chuyển trong form. Mỗi input cũng nên có id và label có thuộc tính for tương ứng để screen reader có thể đọc được label cho input đó. Nhớ dùng tag <form> hoặc <div role="form"> nữa để screen reader biết được các input nào nằm trong form.

Với image thì nhớ set thuộc tính alt cho nó. Nhớ set cho nó một cái gì đó có nghĩa như image caption chẳng hạn. Nếu mà set cho nó giá trị như kiểu tên file ảnh với một đống chữ với số thì thà đừng set còn hơn.

Semantic HTML:

Các tag như <header>, <main>, <section>, <table>, <form>, <footer> thực sự rất là hữu ích với screen reader. Bạn cũng có thể dùng thuộc tính role cho <div> thay cho các tag kia. Ví dụ như<div role="form">. Nó sẽ cho screen reader biết mục đích của element đó để làm gì. Cũng cần chú ý là mỗi element thì chỉ được có 1 role thôi. Và tất nhiên tag kiểu như <form role="button"> cũng không được chấp nhận.

ARIA attributes

Đã có lúc, mình từng nghĩ mấy cái attribute aria- hay role gì đó thật là vô dụng. Nhìn bọn nó làm mất đi vẻ gọn gàng của đống markup, mình không thể kiềm được mà xóa ngay bọn nó đi.

Các thuộc tính aria- cung cấp thông tin cho screen reader biết nên làm gì với element đó. Ví dụ như đọc ra label của nó chẳng hạn. Có khá nhiều thuộc tính aria-, bạn có thể đọc ở https://www.w3.org/TR/wai-aria/states_and_properties

Color contrast

Có vài tiêu chuẩn về độ tương phản nhưng có cái dễ nhất mà bạn có thể áp dụng đó là đừng chỉ dùng màu sắc để thể hiện trạng thái. Luôn thêm text gì đó. Ví dụ với nút switch chẳng hạn, hãy thêm text như ON/OFF thay vì chỉ dùng màu sắc.

TL;DR

• Trang web phải dùng được chỉ với bàn phím. Tránh focus những element vô nghĩa, component mà không thể tab ra ngoài được.
• Luôn có miêu tả bằng text cho các component được biểu diễn bằng hình ảnh