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

Bạn đã bao giờ ngồi trên ô tô, thuyền hoặc máy bay mà bỗng nhiên cảm thấy xoay chuyển chưa? Hay bạn từng bị chứng đ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 để "làm bạn thích" bỗng nhiên làm bạn bị ốm? Hoặc có lẽ bạn luôn nhạy cảm với tất cả các loại chuyển động? Đây là ví dụ về các loại rối loạn tiền đình.

Ở độ tuổi 40, hơn 35% người lớn sẽ gặp phải một số dạng rối loạn chức năng tiền đình. Tình trạng này có thể dẫn đến 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.

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

Trong học phần này, chúng ta sẽ xem xét một số cách để giúp hỗ trợ tốt hơn cho những người về tất cả các loại rối loạn do vận động gây ra.

Cài đặt ROM và di chuyển nội dung

Khi xây dựng ảnh động và chuyển động, bạn nên tự hỏi xem chuyển động của thành phần 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 co giật ở những người bị chứng động kinh cảm quang. Theo ước tính, 3% người bị động kinh mắc chứng nhạy cảm với ánh sáng và tình trạng này phổ biến hơn ở phụ nữ và thanh niên.

Hướng dẫn về việc cài đặt ROM của WCAG đề xuất những điều sau:

• Nhấp nháy hơn 3 lần trong một giây bất kỳ
• Nhấp nháy dưới ngưỡng flash chung và đèn flash màu đỏ.

Các đèn nhấp nháy này nhiều nhất có thể khiến người dùng không sử dụng được trang web hoặc tệ nhất là dẫn đến tình trạng ốm đau.

Đối với bất kỳ chuyển động quá lớn, bạn bắt buộc phải kiểm tra bằng Công cụ phân tích động kinh cảm quang (PEAT). PEAT là một công cụ miễn phí để 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 để đảm bảo an toàn, bạn nên đánh giá nội dung 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.

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

Giả sử bạn cho rằng chuyển động của thành phần 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 làm theo hướng dẫn về chuyển động của WCAG. Nguyên tắc này nêu rõ rằng bạn phải tạo một tuỳ 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ử di chuyển, nhấp nháy hoặc cuộn không cần thiết sẽ tự động bắt đầu, kéo dài hơn 5 giây và là một phần của các phần tử trang khác.

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 chuyển động có thể có vấn đề. Bạn có thể thực hiện 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 thêm nút bật/tắt JavaScript dễ truy cập để 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 "tắt chuyển động", tất cả ảnh động sẽ bị treo trên màn hình đó và tất cả các ảnh động khác.

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

Ngoài việc chọn lọc ảnh động, cung cấp cho người dùng các lựa chọn tạm dừng, dừng, ẩn chuyển động và tránh vòng lặp ảnh động vô hạn, bạn cũng có thể cân nhắ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ư các truy vấn nội dung nghe nhìn tập trung vào màu sắc trong mô-đun màu, truy vấn nội dung đa phương tiện @prefers-reduced-motion kiểm tra 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ể thiết lập các lựa chọn ưu tiên về hiển thị để giảm chuyển động. Những chế độ cài đặt này sẽ khác nhau trên các hệ điều hành và có thể được định khung 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 tuân theo các 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 Reduce Motion (Giảm chuyển động) trong Settings > Accessibility > Display (Cài đặt > Hỗ trợ tiếp cận > Hiển thị). Chế độ cài đặt của Android là Xoá ảnh động. Trên Windows, chế độ cài đặt này được lấy khung tích cực dưới dạng Show ảnh động (Hiện ảnh động), và tuỳ chọn này đượ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.

Ngoài ra, như trong loạt ví dụ tiếp theo, bạn có thể lập trình cho tất cả ảnh động để ngừng di chuyển trong vòng 5 giây trở xuống thay vì phát trong một vòng lặp vô hạn.

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

Là nhà thiết kế và nhà phát triển, chúng tôi có rất nhiều lựa chọn, chẳng hạn như trạng thái chuyển động mặc định và lượng 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 không cần ảnh động để 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 chuyển động được thu gọn thay vì phiên bản chuyển động đầy đủ. Trừ khi người dùng yêu cầu cụ thể về ảnh động, các ảnh động sẽ bị tắt.

Chúng tôi không thể dự đoán mức độ vận động sẽ gây ra vấn đề cho người bị co giật, 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 nghiêm trọng hơn. Vì vậy, trong ví dụ sau, chúng tôi đặt mặc định là không sử dụng ảnh động.

Truy vấn nội dung nghe nhìn được phân lớp

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

Cho phép người dùng của bạn chọn

Mặc dù việc lồng ghé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 chúng tôi cần 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 cứ ai, từ cảm giác hơi khó chịu cho đến gây ra bệnh suy yếu hoặc co giật.

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 có bao nhiêu chuyển động là quá nhiều. Ví dụ: thêm nút bật/tắt để bật hoặc tắt ảnh động trong trang web hoặc ứng dụng web. Hãy cân nhắc đặt nút bật/tắt đó thành tắt theo mặc định.

Kiểm tra mức độ hiểu biết của bạn

Kiểm tra kiến thức của bạn về khả năng hỗ trợ tiếp cận chuyển động và ảnh động.