6 mẹo giúp cải thiện tính tiếp cận của Website

‍

Tính tiếp cận (Accessibility) đã luôn là một chủ đề quen thuộc trong thiết kế trải nghiệm người dùng (UX Design). Tính tiếp cận là khả năng truy cập được của một ứng dụng, website hoặc phần mềm đối với không chỉ những người khỏe mạnh mà còn cả những người mang khiếm khuyết về mặt thị giác, thính giác, nhận thức hoặc các chức năng vận động. Sản phẩm có tính tiếp cận (Accessibility) là sản phẩm có thể phục vụ cho càng nhiều người dùng càng tốt.

Tìm hiểu thêm về Tính tiếp cận (Accessibility) tại đây: https://capidemy.com/news/kham-pha/tinh-tiep-can-accessibility-trong-ux-design-tinh-tiep-can-la-gi

Hiện có rất nhiều ứng dụng, website đang được thiết kế và phát triển liên tục, nhưng chưa tối ưu được tính tiếp cận, mang nhiều rào cản sử dụng cho nhiều người dùng. Tạo nên một giao diện thiết kế mang tính tiếp cận không phải là dễ dàng, nhưng từng bước từng bước nhỏ chúng ta cải thiện nó sẽ mang lại nhiều giá trị cho người dùng.

Cùng Capi Demy tìm hiểu 6 mẹo “nhỏ nhưng có võ” dưới đây giúp bạn cải thiện tính tiếp cận của Website nhé!

1. Sử dụng tính năng pinch-to-zoom

Chúng ta vẫn thường có thói quen dùng ngón tay thu phóng giao diện màn hình (pinch-to-zoom) để điều chỉnh kích thước nội dung để nhìn rõ hơn, đọc dễ hơn, v..v. Tính năng này trở nên vô cùng phổ biến và hữu ích, đặc biệt đối với những người có tuổi hoặc có thị lực kém.

Vậy nên, hãy sử dụng tính năng này bằng cách xoá bỏ tham số user-scalable=”no” khỏi thẻ <meta> viewport và để maximum-scale tối thiểu là 5. Viewport, hay khung nhìn, là khu vực mà người dùng có thể nhìn thấy nội dung của trang web. Các nhà thiết kế web có thể kiểm soát viewport qua HTML5.

‍

2. Nhìn là biết đường link ở đâu

Phân biệt đường link với nội dung thường chỉ bằng thay đổi màu sắc có lẽ sẽ không đủ để người dùng nhận ra. Thông thường, gạch chân đường link chính là cách phân biệt rõ ràng và dễ hiểu nhất.

‍

3. Tạo các trạng thái khác nhau cho Button

Mỗi trạng thái của Button nên được thiết kế khác nhau tương ứng với từng hành động tương tác của người dùng với nó, ví dụ như khi lướt qua (nhấn giữ) sẽ hiện trạng thái Hover, khi đã bấm vào hiển thị trạng thái Pressed (đang load hoặc hoàn thành). Những trạng thái “có thể thấy được” như vậy sẽ dễ dàng truyền tải nội dung, giúp người dùng nắm bắt rõ hành động hiện tại và có thể đoán trước hành động tiếp theo.

‍

4. Thêm Alt Attribute cho ảnh

Thuộc tính Alt (Alt Attribute) là một từ hoặc cụm từ mô tả một hình ảnh trên website. Công cụ tìm kiếm của Google vốn chỉ xác định nội dung hình ảnh qua trong thẻ Alt, chứ không phải hình ảnh đó. Không chỉ để hỗ trợ SEO website, trong trường hợp người dùng không xem được hình ảnh do lỗi mạng, lỗi ảnh,..., thẻ Alt sẽ giúp họ biết được nội dung bức ảnh là gì.

Ví dụ: <img src="img_capidemy.jpg" alt="Capi Demy" width=...

Nếu hình ảnh chỉ mang tính chất minh hoạ, bạn nên để alt text trống: alt=" "

‍

5. Đừng để autoplay các tệp âm thanh

Những tệp video, âm thanh tự động bật (autoplay) khi vừa bước vào website hay vừa lướt đến sẽ khiến nhiều người dùng bất ngờ. Điều này sẽ gây khó chịu, thậm chí gây phản ứng không tốt đối với một số người thần kinh yếu, dễ giật mình. Hơn nữa, chế độ này cũng có thể gây mâu thuẫn với Screen Reader, một ứng dụng phần mềm xác định và giải thích những gì đang được hiển thị trên màn hình. Vậy nên, hãy để người dùng làm chủ hành động của họ, để họ luôn chuẩn bị tinh thần và có thể đoán trước các tương tác với website, trừ khi bạn muốn họ bất ngờ có chủ đích.

‍

6. Kiểm tra độ tương phản màu sắc

Hiển nhiên, một trong những nguyên tắc cơ bản nhất của thiết kế giao diện là phải đảm bảo được độ tương phản màu sắc. Nếu website của bạn có độ tương phản màu sắc thấp, như màu chữ quá mờ hoặc tệp với màu nền, chính mình nhìn vào thôi cũng thấy “mỏi ứa nước mắt” chứ huống gì người dùng.

Bạn có thể kiểm tra độ tương phản màu sắc bằng rất nhiều công cụ. Lưu và tham khảo ngay một số công cụ hữu ích sau nha:

• + Contrast Ratio: https://contrast-ratio.com/
• + Contrast Checker - Coolors: https://coolors.co/contrast-checker
• + Contrast - Figma Plugin: https://www.figma.com/community/plugin/748533339900865323
• + Color Oracle: https://colororacle.org/

‍

‍

Chần chừ gì nữa mà không áp dụng ngay 6 mẹo trên vào dự án thiết kế của bạn! Đừng quên theo dõi Capi Demy để được cập nhật thêm nhiều kiến thức hữu ích và thí vị về UI/UX nha.

Nguồn: tổng hợp từ @ui_gradient và @gabrielemalaspina

Tổng hợp bởi đội ngũ Capi Demy. 

Nếu bạn có câu hỏi nào đừng ngần ngại kết nối với đội ngũ Capi Demy nhé, chúng mình luôn ở đây và làm điểm tựa vững chắc cho các bạn!

Thông tin liên hệ tư vấn: 

Fanpage: Capi Demy

Email: capidemy@gmail.com

Website:

Capidemy.com

Địa chỉ:

Cơ sở 1 HN: Tầng 6, số 35 Tô Vĩnh Diện, Khương Trung, Thanh Xuân, Hà Nội

Cơ sở 2 HN: Tầng 2 số 2 ngách 28, ngõ 93, Hoàng Văn Thái, Thanh Xuân, Hà Nội.

‍