In 2020 my team designed a website that contained, as a primary feature, an interactive video.
This experience leveraged the magic of PixiJS to draw the user through a narrative, giving them control over key interactions.
The experience also had a voice over, which we supported with closed captions both in the interactive video and within any accompanying non-interactive YouTube versions.
However when it came to screen orientation on mobile devices, we had to think carefully about WCAG 1.3.4 (Screen orientation guidelines) when designing for mobile interaction as one of our requirements was to meet AA accessibility standards wherever possible.
This is one of the challenges of working in a creative environment that wants to make the internet do New And Exciting Things — the UX team have to remind them that they also have to make things that are accessible. And there can be a tension between the two that requires some careful thought and discussion.
Note: images used here are for illustrative purposes and are not final UI or creative. Photo used in phone images is by @baileyzindel on Unsplash.
The interactive video’s controls for navigation, closed captions, sound etc were best experienced in landscape orientation on mobile devices, to provide maximum screen real estate, however my understanding of WCAG 1.3.4 is that forced screen rotation is not acceptable. Nevertheless, due to the nature of the content, a portrait mode version would limit both the interactivity of the experience, and (unfortunately) also limit access to in-video accessibility features.
This required further investigation and an assessment of the options available.
In order to make a decision to proceed with build, we had to explore a number of options and their implications for users, the message that the client business was trying to communicate, the creative intent of the team and of course technical feasibility.
To achieve this we had discussions as a team, I reviewed WCAG guidelines and I consulted with external accessibility experts from my own professional network.
