Note Regarding Example
The example on this page uses the accessibility friendly Able Player. It is deliberately offset to the left to permit the transcript to be viewable to the right of the player.
1.3.4 Non-Conformance Shown with Non-Technical Explanation
The video orientation is fixed without a valid reason.
1.3.4 Non-Conformance CSS Markup and Technical Details
The following markup occurs in the Cascading Style Sheet applicable to this page:
@media (orientation:landscape){
video {
transform: rotate(90deg);
}
}
The @media rule is useful when querying several different media features. In the example above, the feature is orientation, wich is commonly used to impart the value portrait or landscape to a phone or tablet. Specifically, the orentation is set to landscape. The video HTML tag indicates that the orientation applies to HTML5 video elements. The transform property with the rotate function has a value that specifies in degrees of an angle how much roation occurs. In practical terms, it requires the device to stay in portrait mode.
Sometimes forcing the orientation is valid. A scrolling game might malfuction when confronted with a sudden and unexpected change in device orientation. In the non-conformance demo above, the required orientation is mere aesthetics. It forces an absurd change whose absurdity is seen even more clearly on a desktop.