Ả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 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 khó chịu? Hoặc có thể 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.

Khi đến tuổi 40, hơn 35% người lớn sẽ trải qua 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 rối loạn tiền đình vĩnh viễn.

Ngoài việc gây chóng mặt, nhiều người cảm thấy nội dung chuyển động, nhấp nháy hoặc cuộn gây mất tập trung. Những người mắc ADHD và các chứng rối loạn thiếu chú ý khác có thể bị các phần tử động của bạn phân tâm đến mức họ quên luôn 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 giúp hỗ trợ tốt hơn những người mắc mọi loại rối loạn do chuyển động kích hoạt.

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

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á nhiều hay không. Ví dụ: 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 co giật ở những người bị chứng động kinh cảm quang. Theo ước tính, 3% số 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à những người trẻ tuổi.

Nguyên tắc về việc nhấp nháy của WCAG không khuyến khích những việc sau:

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

Đối với mọi chuyển động cực đoan, bạn 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 hiệu ứng 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 xoá mọi chuyển động – ngay cả chuyển động vi mô – khỏi phần tử mà bạn đang tạo 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ì lý do khác. Trong trường hợp đó, bạn nên tuân thủ nguyên tắc về chuyển động của WCAG. Nguyên tắc 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 cho: các thành phần di chuyển, 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 các thành phần 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 để cho phép người dùng tắt ảnh động chuyển động có thể gây ra sự cố. 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 nút bật/tắt JavaScript dễ 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", tất cả ảnh động sẽ bị treo trên màn hình đó và tất cả màn hình khác.

Sử dụng truy vấn nội dung nghe nhìn

Ngoài việc chọn ảnh động, cho phép người dùng lựa chọn tạm dừng, dừng, ẩn chuyển động và tránh lặp lại ảnh động vô hạn, bạn cũng có thể cân nhắc thêm truy vấn nội dung nghe nhìn tập trung vào chuyển động. Điều này giúp người dùng có thêm 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 đa phương tiệ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 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ể đặ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 định hướng 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 thủ các lựa chọn ưu tiên này.

Hỗ trợ trình duyệt

  • Chrome: 74.
  • Edge: 79.
  • Firefox: 63.
  • Safari: 10.1.

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ể đặ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à Show animation (Hiện ảnh động) (đượ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 nhóm ví dụ tiếp theo, bạn có thể mã hoá để tất cả ảnh động của mình dừng di chuyển trong vòng 5 giây trở xuống thay vì phát trên một vòng lặp vô hạn.

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, bao gồm cả trạng thái di chuyển mặc định và mức độ di chuyển 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 giảm thay vì phiên bản chuyển động đầy đủ. Trừ phi người dùng yêu cầu ảnh động, ảnh động sẽ bị tắt.

Chúng tôi không thể dự đoán mức độ chuyển động 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 chuyển động nhỏ trên màn hình cũng có thể gây chóng mặt, mờ mắt hoặc trầm trọng hơn. Vì vậy, trong ví dụ sau, chúng ta mặc định không có ảnh động.

Truy vấn nội dung đa phương tiệ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 cùng 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ố của chúng tôi để 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 tôi 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 cảm 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 bệnh 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à phù hợp nhất với họ, thay vì đoán số lượng chuyển động 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. Hãy cân nhắc đặt trạng thái mặc định của nút bật/tắt đó thành tắt.

Kiểm tra mức độ hiểu biết

Kiểm tra kiến thức của bạn về khả năng hỗ trợ tiếp cận của ảnh động và chuyển độ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 lượng chuyển động cần sử dụng dựa trên chế độ cài đặt Màn hình của người dùng. Các chế độ cài đặt này khác nhau tuỳ theo 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 ngoài truy vấn nội dung nghe nhìn này.
Nút 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 chế độ cài đặt của người dùng.