Entries Tagged as 'animation'

How to Fix Seizure Inducing Sequences In Videos.

July 19th, 2020 by zoltan · No Comments

In the past, I have been an accessibility lead on a project that had videos with scenes that could potentially cause seizures. When I approached the video creators about these issues, they said they didn’t know how to fix these issues. When I created my own music video that had problematic sequences in them, however, I found that these issues are not really that hard to fix. This article shows that it’s not too hard and you can fix these problems in no time.

[Read more »]

Tags: accessibility · animation · Color · Uncategorized · video

Using PEAT To Create Seizureless Web Animations

April 2nd, 2017 by zoltan · No Comments

Photosensitive Epilepsy should be a concern to anyone creating any type of animated media. As a matter of fact, in order to pass WCAG Level A, a web page cannot “contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds”. Testing this requirement may seem a little daunting at first, but luckily there is a free tool called PEAT that web developers can use to test if their animations and videos can cause an epileptic attack. This blog post talks about how to use PEAT, what it’s limitations are, and how to work around them.

[Read more »]

Tags: accessibility · animation · Color · Cygwin · Uncategorized

Animating Circular Paths Using CSS3 Animations.

March 3rd, 2013 by zoltan · 15 Comments

For the longest time I assumed that one couldn’t use CSS Transitions or animations to move DOM objects in anything but a straight path. Sure, a developer could use multiple keyframes to create a list of straight paths to simulate a curve, but I didn’t think one could just define a curve with just two keyframes. I was wrong. If you are coding for a modern web browser, then this is very doable!. This article will show you how it’s done in modern browsers, the math involved, and what to do with older versions of IE that don’t support CSS3 Animations.

[Read more »]

Tags: animation · animation · CSS · CSS3 · JavaScript · math · transform · transition