Ảnh động và chuyển động

Bạn đã bao giờ ngồi trên ô tô, thuyền hoặc máy bay và đột nhiên cảm thấy thế giới quay cuồng chưa? Hay bạn từng bị đau nửa đầu đến mức ảnh động trên điện thoại hoặc máy tính bảng (được tạo ra để "làm hài lòng" bạn) đột nhiên khiến bạn cảm thấy khó chịu? Hoặc có lẽ bạn luôn nhạy cảm với mọi loại chuyển động? Đây là ví dụ về các loại rối loạn tiền đình.

Đến tuổi 40, hơn 35% người trưởng thành sẽ gặp phải một số dạng rối loạn tiền đình. Điều này có thể dẫn đến tình trạng chóng mặt tạm thời, chóng mặt do chứng đau nửa đầu hoặc khuyết tật tiền đình vĩnh viễn hơn.

Ngoài việc gây chóng mặt, nhiều người còn cảm thấy nội dung chuyển động, nhấp nháy hoặc cuộn gây xao nhãng. Những người mắc ADHD và các rối loạn thiếu tập trung khác có thể bị các phần tử động của bạn làm xao lãng đến mức quên mất lý do họ truy cập vào trang web hoặc ứng dụng của bạn ngay từ đầu.

Trong mô-đun này, chúng ta sẽ xem xét một số cách để hỗ trợ tốt hơn cho những người mắc tất cả các loại rối loạn do chuyển động gây ra.

Nội dung nhấp nháy và chuyển động

Khi tạo ảnh động và chuyển động, hãy tự hỏi xem chuyển động của phần tử có quá mức hay không. Ví dụ: màu sắc nhấp nháy từ tối đến sáng hoặc chuyển động nhanh trên màn hình có thể gây ra cơn co giật ở những người bị chứng động kinh cảm quang. Ước tính có 3% người mắc bệnh động kinh bị nhạy cảm với ánh sáng, và tình trạng này phổ biến hơn ở phụ nữ và người trẻ tuổi.

Nguyên tắc về nội dung nhấp nháy của WCAG khuyến nghị không nên sử dụng những nội dung sau:

• Nhấp nháy hơn 3 lần trong 1 giây
• Nhấp nháy dưới ngưỡng nhấp nháy chung và ngưỡng nhấp nháy màu đỏ.

Những nhấp nháy này có thể khiến người dùng không sử dụng được trang web hoặc tệ hơn là dẫn đến bệnh tật.

Đối với mọi chuyển động cực đoan, bạn bắt buộc phải kiểm thử bằng Công cụ phân tích chứng động kinh nhạy cảm với ánh sáng (PEAT). PEAT là một công cụ miễn phí giúp xác định xem nội dung, video hoặc ảnh động trên màn hình có khả năng gây co giật hay không. Không phải nội dung nào cũng cần được PEAT đánh giá, nhưng nội dung có chứa các chuyển đổi nhấp nháy hoặc chuyển đổi nhanh giữa màu nền sáng và tối cần được đánh giá để đảm bảo an toàn.

Một câu hỏi khác mà bạn nên tự hỏi về ảnh động và chuyển động là liệu chuyển động của phần tử có cần thiết để hiểu nội dung hoặc hành động trên màn hình hay không. Nếu không cần thiết, hãy cân nhắc việc loại bỏ mọi chuyển động (kể cả chuyển động siêu nhỏ) khỏi phần tử mà bạn đang xây dựng hoặc thiết kế.

Giả sử bạn cho rằng chuyển động của phần tử không cần thiết nhưng có thể nâng cao trải nghiệm tổng thể của người dùng hoặc bạn không thể xoá chuyển động vì một lý do khác. Trong trường hợp đó, bạn nên tuân thủ các nguyên tắc của WCAG về chuyển động. Các nguyên tắc quy định rằng bạn phải tạo một lựa chọn để người dùng tạm dừng, dừng hoặc ẩn chuyển động đối với: các phần tử không cần thiết đang di chuyển, nhấp nháy hoặc cuộn bắt đầu tự động, kéo dài hơn 5 giây và là một phần của các phần tử khác trên trang.

Tạm dừng, dừng hoặc ẩn chuyển động

Thêm cơ chế tạm dừng, dừng hoặc ẩn vào trang của bạn để cho phép người dùng tắt ảnh động có thể gây ra vấn đề. Bạn có thể làm việc này ở cấp màn hình hoặc cấp phần tử.

Ví dụ: giả sử sản phẩm kỹ thuật số của bạn có nhiều ảnh động. Hãy cân nhắc việc thêm một nút bật/tắt JavaScript hỗ trợ tiếp cận để cho phép người dùng kiểm soát trải nghiệm của họ. Khi nút này được chuyển sang trạng thái "tắt chuyển động", mọi ảnh động sẽ bị đóng băng trên màn hình đó và tất cả các màn hình khác.

Sử dụng truy vấn đa phương tiện

Ngoài việc chọn lọc các ảnh động, cho phép người dùng chọn tạm dừng, dừng, ẩn chuyển động và tránh các vòng lặp ảnh động vô hạn, bạn cũng có thể cân nhắc việc thêm một truy vấn nội dung nghe nhìn tập trung vào chuyển động. Nhờ đó, người dùng có nhiều lựa chọn hơn về nội dung hiển thị trên màn hình.

@prefers-reduced-motion

Tương tự như truy vấn phương tiện tập trung vào màu sắc trong mô-đun màu, truy vấn phương tiện @prefers-reduced-motion sẽ kiểm tra các chế độ cài đặt hệ điều hành của người dùng liên quan đến ảnh động.

Người dùng có thể đặt lựa chọn ưu tiên về màn hình để giảm chuyển động. Các chế độ cài đặt này khác nhau giữa các hệ điều hành và có thể được trình bày theo hướng tích cực hoặc tiêu cực. Với @prefers-reduced-motion, bạn có thể thiết kế một trang web tôn trọng những lựa chọn ưu tiên này.

Trên macOS và Android, người dùng bật chế độ cài đặt này để giảm chuyển động. Trên macOS, người dùng có thể đặt chế độ Giảm chuyển động trong phần Cài đặt > Hỗ trợ tiếp cận > Màn hình. Chế độ cài đặt của Android là Xoá hiệu ứng động. Trên Windows, chế độ cài đặt này được đóng khung tích cực là Hiện ảnh động và được bật theo mặc định. Người dùng phải tắt chế độ cài đặt này để giảm chuyển động.

Để đảm bảo khả năng hỗ trợ tiếp cận cho những người gặp khó khăn khi chuyển động, ngay cả những ảnh động ngắn hơn ngưỡng 5 giây được nêu trong nguyên tắc WCAG 2.0 AA cũng cần được tiếp cận một cách thận trọng. Phương pháp đáng tin cậy nhất là trao quyền cho những người dùng đã cho biết họ muốn giảm chuyển động bằng cách cung cấp cho họ quyền kiểm soát riêng đối với ảnh động, cho phép họ bắt đầu và dừng ảnh động bằng các chế độ điều khiển chuyên dụng, chẳng hạn như nút phát và nút tạm dừng.

Cải tiến tăng dần cho chuyển động

Là nhà thiết kế và nhà phát triển, chúng ta có rất nhiều lựa chọn cần đưa ra, bao gồm cả trạng thái chuyển động mặc định và mức độ chuyển động cần hiển thị. Hãy xem lại ví dụ cuối cùng về chuyển động.

Giả sử chúng ta quyết định rằng ảnh động là không cần thiết để hiểu nội dung trên màn hình. Trong trường hợp đó, chúng ta có thể chọn đặt trạng thái mặc định thành ảnh động giảm chuyển động thay vì phiên bản chuyển động đầy đủ. Trừ phi người dùng yêu cầu cụ thể về ảnh động, còn không thì ảnh động sẽ bị tắt.

Chúng tôi không thể dự đoán mức độ chuyển động nào sẽ gây ra vấn đề cho những người bị động kinh, rối loạn tiền đình và các rối loạn thị giác khác. Ngay cả một lượng nhỏ chuyển động trên màn hình cũng có thể gây chóng mặt, mờ mắt hoặc thậm chí tệ hơn. Vì vậy, trong ví dụ sau, chúng ta sẽ mặc định không có ảnh động.

Truy vấn đa phương tiện theo lớp

Bạn có thể sử dụng nhiều truy vấn về phương tiện để cung cấp cho người dùng nhiều lựa chọn hơn nữa. Hãy cùng nhau sử dụng @prefers-color-scheme, @prefers-contrast và @prefers-reduced-motion.

Cho phép người dùng chọn

Mặc dù việc tích hợp ảnh động vào các sản phẩm kỹ thuật số để làm hài lòng người dùng có thể rất thú vị, nhưng điều quan trọng là chúng ta phải nhớ rằng một số người sẽ bị ảnh hưởng bởi những thiết kế này. Độ nhạy với chuyển động có thể ảnh hưởng đến bất kỳ ai, từ cảm giác khó chịu nhẹ đến gây ra bệnh tật hoặc co giật nghiêm trọng.

Bạn có thể sử dụng một số công cụ khác nhau để cho phép người dùng quyết định điều gì là tốt nhất cho họ, thay vì đoán xem mức chuyển động nào là quá nhiều. Ví dụ: thêm một nút bật/tắt để bật hoặc tắt ảnh động trong trang web hoặc ứng dụng web của bạn. Hãy cân nhắc đặt nút bật/tắt đó ở trạng thái tắt theo mặc định.