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

Có bao giờ bạn đang lái xe, thuyền hoặc máy bay và đột nhiên cảm nhận thế giới quay? Hoặc bị chứng đau nửa đầu nghiêm trọng đến mức ảnh động trên điện thoại hoặc máy tính bảng của bạn, được tạo thành "delight" bạn đột nhiên làm bạn phát bệnh? Hoặc có lẽ bạn luôn là 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.

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

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

Trong học phần này, chúng ta sẽ xem xét một số cách để hỗ trợ mọi người hiệu quả hơn có tất cả các loại rối loạn do vận động.

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

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

Hướng dẫn về 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 đèn flash chung và đèn flash màu đỏ.

Tốt nhất là những nhấp nháy này có thể khiến bạn không thể sử dụng một trang web hoặc, tệ nhất là gây ra bệnh tật.

Đối với bất kỳ chuyển động cực đoan nào, bạn bắt buộc phải kiểm tra nó bằng cách sử dụng Công cụ phân tích động kinh cảm quang (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. Không phải nội dung nào cũng cần được PEAT đánh giá, nhưng nội dung có ánh sáng nhấp nháy hoặc chuyển đổi nhanh giữa sáng và tối màu nền sẽ được đánh giá, để 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 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 không cần thiết, hãy cân nhắc xoá tất cả chuyển động (kể cả các chuyển động nhỏ) khỏi thành phần 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ử là không cần thiết nhưng có thể tăng cường trải nghiệm chung của người dùng hoặc bạn không thể xoá chuyển động cho lý do. Trong trường hợp đó, bạn nên làm theo hướng dẫn về chuyển động. Nguyên tắc nêu rõ rằng bạn phải tạo một lựa chọn để người dùng tạm dừng, ngừng hoặc ẩn chuyển động đối với: các phần tử chuyển động, nhấp nháy hoặc cuộn không cần thiết tự động bắt đầu, kéo dài hơn 5 giây và là một phần của trang khác phần tử.

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

Thêm tạm dừng, dừng hoặc ẩn cho trang của bạn để cho phép người dùng tắt các chức năng có thể có vấn đề ảnh động chuyển động. 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 việc thêm một nút bật/tắt JavaScript có thể truy cập để cho phép người dùng kiểm soát trải nghiệm của mình. Khi nút này được chuyển thành "tắt chuyển động," tất cả ảnh động đều bị treo trên màn hình đó và tất 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 ảnh động, việc cung cấp cho người dùng các tuỳ chọn để tạm dừng, dừng, ẩn chuyển động và tránh vòng lặp hoạt ảnh vô hạn, bạn có thể bạn cũng nên 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 nhiều lựa chọn hơn đối với 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 đa phương tiện @prefers-reduced-motion sẽ kiểm tra chế độ cài đặt hệ điều hành của người dùng liên quan đến ảnh động.

Giao diện người dùng của chế độ cài đặt Màn hình MacOS, trong đó tính năng Giảm chuyển động đang bật.

Người dùng có thể thiết lập các lựa chọn ưu tiên của màn hình để giảm chuyển động. Các chế độ cài đặt này khác nhau trên các hệ điều hành và có thể được đóng 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ế trang web để tuân thủ các lựa chọn ưu tiên này.

Hỗ trợ trình duyệt

Nguồn

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ể thiết lập chế độ Giảm chuyển động trong phần Cài đặt > Hỗ trợ tiếp cận > Hiển thị. Chế độ cài đặt của Android là Xoá hiệu ứng động. Trên Windows, chế độ cài đặt này được hiển thị trong khung tích cực là Hiển thị ảnh động (được bật theo mặc định). Người dùng phải bật chế độ này tắt để giảm chuyển động.

Ngoài ra, như trong tập ví dụ tiếp theo, bạn có thể mã hoá 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.

Nâng cao dần khả năng vận động

Là nhà thiết kế và nhà phát triển, chúng ta có nhiều lựa chọn để đưa ra, bao gồm cả 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 ả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 chuyển động thu nhỏ thay vì phiên bản chuyển động đầy đủ. Ảnh động sẽ bị tắt, trừ phi người dùng yêu cầu cụ thể về ảnh động.

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

Truy vấn về nội dung nghe nhìn theo lớp

Bạn có thể sử dụng nhiều truy vấn đa phương tiện để mang đến 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 tất cả ở cùng một nơi.

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

Việc lồng ghép ảnh động vào các sản phẩm kỹ thuật số của chúng tôi có thể sẽ rất thú vị người dù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 các thiết kế này. Độ nhạy chuyển động có thể ảnh hưởng đến bất cứ ai, từ cảm giác khó chịu nhẹ cho đến gây gổ một căn bệnh suy yếu hoặc co giật.

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

Kiểm tra kiến thức

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

Chúng ta có thể xây dựng công cụ gì thể hiện chế độ cài đặt chuyển động của hệ điều hành?

@prefers-reduced-motion

Có! Truy vấn nội dung nghe nhìn này cho phép bạn quyết định mức chuyển động sẽ sử dụng dựa trên chế độ cài đặt Hiển thị của người dùng. Các chế độ cài đặt này khác nhau trên các hệ điều hành, vì vậy, hãy cân nhắc triển khai lựa chọn cho chuyển động bên cạnh truy vấn nội dung đa phương tiện này.

Bật/tắt JavaScript

Chưa đúng. Nút bật/tắt cho phép người dùng đưa ra lựa chọn sau khi truy cập vào trang web của bạn, nhưng không thể đọc các chế độ cài đặt của người dùng.