This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Достъпност
Как се изключва анимацията при експлоатация?
Паралакс ефекти при превъртане, елементи, които летят нагоре при щракване, страници, които се въртят при превключване: При хора с вестибуларни нарушения такива движения предизвикват замайване, гадене и главоболие. Критерий 2.3.3 от ниво AAA изисква анимации, задействани от дадена операция, да бъдат изключени, освен ако анимацията не е от съществено значение за функцията или информацията.
Какво изисква критерият
Всяко движение, което се случва в резултат на операция (превъртане, щракване, писане, завъртане) може да бъде изключено без да се губи функцията. Нежен свитък към котвата се превръща в скок, водеща меню се появява веднага, паралакс фон стои неподвижно. Изключват се съществени анимации: индикатор за напредъка, показващ последователност или симулация, чието съдържание е движение.
Изпълнение чрез системата
Операционните системи имат настройка за движение "редуци," която браузърът приема като медиа-непрекъснато движение. Стил, който определя всички преходи и анимации до нула по този въпрос отговаря на критерия за всичко, което е анимирано чрез CSS. За JavaScript анимации, същата заявка се оценява преди началото. Отделен превключвател на страницата е добавка за хора, които не знаят настройката на системата.
Така се справяме с това
Измерването може да провери дали стилният лист съдържа правило за предпочитане на ниското движение и дали анимации завършват под него; Ако JavaScript анимации го слушат, рецензент ще види кога работи с настройката. Критерият принадлежи към категория ААА с познания.
Beispiele
Паралакс без изключване
.held { background-attachment: fixed; }
.karte { transition: transform 0.6s; }
.karte:hover { transform: translateY(-20px) rotate(2deg); }@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.held { background-attachment: scroll; }
}Настройката на системата за движение на "Reduce" изключва всички движения, които не са необходими за функцията.
- Добавете блок за предпочитане на ниското движение към стилния лист, който поставя преходи и анимации до 0.01 ms продължителност и превъртане-поведение към автомобил.
- Оценете заявката в JavaScript (matchMedia) и започнете паралакс и ефекти на полета само ако движението е разрешено.
- Тест с настройката на системата: Нищо не е позволено да се плъзга, лети или върти вече.
- Оферта за видима подвижен бутон, който запазва избора в браузъра.
