Một nhà phát triển web đã tạo ra một thí nghiệm CSS sáng tạo có tên Drunk CSS, cố意 làm cho các trang web trở nên khó sử dụng hơn bằng cách mô phỏng những thách thức về thị giác và vận động mà ai đó có thể gặp phải khi bị say. Dự án này nhằm làm nổi bật các vấn đề về khả năng tiếp cận và khuyến khích thiết kế giao diện người dùng tốt hơn.
Ý tưởng này được xây dựng dựa trên quan điểm rằng nếu một trang web hoạt động tốt cho người dùng bị suy giảm khả năng, thì nó sẽ hoạt động xuất sắc cho tất cả những người khác. Bằng cách áp dụng các quy tắc CSS cụ thể, chế độ say rượu biến đổi bất kỳ trang web nào thành một trải nghiệm đầy thách thức với văn bản mờ, các phần tử bị xoay, liên kết nhảy nhót và phông chữ bị biến dạng.
Triển khai kỹ thuật đặt ra các câu hỏi về thiết kế
Việc triển khai CSS sử dụng một số kỹ thuật thông minh để tạo ra trải nghiệm bị suy giảm. Kết xuất phông chữ nhắm mục tiêu các ký tự cụ thể bằng cách sử dụng phạm vi unicode, làm cho các nguyên âm viết thường xuất hiện trong một kiểu chữ khác trong khi phần còn lại sử dụng phông chữ viết tay. Các phần tử hình ảnh được xoay và nghiêng ngẫu nhiên bằng cách sử dụng bộ chọn nth-child, trong khi toàn bộ trang nhận được bộ lọc làm mờ và bão hòa màu sắc. Các liên kết trở nên gần như không thể nhấp vào khi chúng liên tục nhảy lên xuống.
Tuy nhiên, phản hồi từ cộng đồng cho thấy những phản ứng trái chiều về độ chính xác của mô phỏng này. Nhiều người dùng có kinh nghiệm thực tế với việc bị suy giảm khả năng chỉ ra rằng các hiệu ứng hình ảnh không thực sự đại diện cho những thách thức nhận thức liên quan. Mô phỏng này tập trung chủ yếu vào biến dạng hình ảnh thay vì các vấn đề về ra quyết định và phối hợp, những đặc điểm đặc trưng hơn của việc suy giảm khả năng thực sự.
Các Kỹ Thuật CSS Được Sử Dụng Trong Chế Độ Say Rượu:
- Thao tác phông chữ sử dụng unicode ranges cho các nguyên âm viết thường (U+61, U+65, U+69, U+6F, U+75)
- Xoay phần tử sử dụng nth-child selectors (các mẫu 3n, 5n, 7n)
- Bộ lọc hình ảnh: làm mờ 1px và độ bão hòa màu 2.5x
- Liên kết nhảy có hoạt ảnh với thời lượng 4 giây
- Kiểu phông chữ nghiêng ở góc -12 độ
- Kích thước chữ cái đầu tiên giảm xuống 0.5em
Kiểm tra khả năng tiếp cận khơi mào cuộc tranh luận rộng hơn
Dự án đã châm ngòi cho các cuộc thảo luận về các phương pháp kiểm tra khả năng tiếp cận phù hợp. Trong khi một số nhà phát triển ca ngợi cách tiếp cận sáng tạo để làm nổi bật các vấn đề về khả năng sử dụng, những người khác lại cho rằng việc kiểm tra khả năng tiếp cận chính thức đòi hỏi phải làm việc với những người thực sự trải qua những thách thức này hàng ngày.
Đeo một cặp Glaucoma Goggles sẽ cho bạn ý tưởng về việc bị suy giảm thị lực như thế nào. Nhưng nó sẽ không mang lại cho bạn trải nghiệm sống như vậy trong nhiều tháng hoặc nhiều năm.
Cuộc trò chuyện đã mở rộng ra ngoài ý tưởng ban đầu để bao gồm các cuộc thảo luận về thiết kế cho người dùng lớn tuổi, những người bị suy giảm nhận thức và những người có kiến thức kỹ thuật hạn chế. Các thành viên cộng đồng đề xuất rằng nguyên tắc người dùng say rượu nên được áp dụng rộng rãi hơn để tạo ra các giao diện hoạt động cho những người dùng căng thẳng, mệt mỏi hoặc bị phân tâm trong các tình huống thực tế.
Mối quan ngại của cộng đồng về Drunk CSS:
- Các hiệu ứng hình ảnh không thể hiện chính xác sự suy giảm nhận thức
- Việc triển khai trên thiết bị di động đẩy văn bản ra khỏi màn hình
- Công cụ chuyển đổi giao diện khó truy cập trên thiết bị di động
- Mô phỏng tập trung vào méo mó hình ảnh thay vì thách thức trong việc ra quyết định
- Có thể không phản ánh được nhu cầu khả năng tiếp cận trong thế giới thực
Trải nghiệm di động tiết lộ những thách thức trong triển khai
Người dùng kiểm tra chế độ say rượu trên thiết bị di động đã gặp phải các vấn đề khả năng sử dụng bổ sung. Định dạng văn bản nghiêng đẩy nội dung ra khỏi màn hình, làm cho nó hoàn toàn không thể đọc được thay vì chỉ khó khăn. Điều này làm nổi bật cách các tính năng khả năng tiếp cận đôi khi có thể tạo ra những rào cản mới khi không được triển khai đúng cách trên các thiết bị và kích thước màn hình khác nhau.
Trải nghiệm di động cũng tiết lộ các vấn đề điều hướng, với bộ chuyển đổi chủ đề khó tìm và sử dụng trên màn hình nhỏ hơn. Những vấn đề này chứng minh cách các cân nhắc về khả năng tiếp cận phải tính đến các phương pháp tương tác khác nhau và hạn chế của thiết bị.
Thí nghiệm Drunk CSS thành công trong việc tạo ra nhận thức về những thách thức khả năng tiếp cận, ngay cả khi nó không mô phỏng hoàn hảo việc suy giảm khả năng thực sự. Nó đóng vai trò là điểm khởi đầu cho các cuộc trò chuyện về thiết kế bao trùm trong khi làm nổi bật tầm quan trọng của việc привлечение những người thực sự bị khuyết tật vào quá trình kiểm tra.
Tham khảo: Drunk CSS