New Rule: css-orientation-is-not-locked

[jeeyyy]

css-orientation-is-not-locked

The rule should test that the content is not locked to any specific display orientation, and functionality of the content is operable in all display orientations (portrait/ landscape).

Tags: wcag21, wcag262

Matcher

Element(s) to be tested is deciphered at run-time based on the tag(s) for which the orientation style is applied.

Checks

Needs review
Check media-queries targeting orientation, and look for transform styles applied to any elements, which aims to lock orientation.

An example snippet is as below:

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

Note: This should also cover portrait mode.

Proposal

Refer - #906

[WilcoFiers]

I don't really understand the checks you are proposing. What I would suggest is that we check if someone used this CSS orientation lock trick:

https://css-tricks.com/snippets/css/orientation-lock/
https://gist.github.com/visnup/2605440

[isner]

I think one of your tags in inaccurate. The Orientation success criterion in WCAG 2.1 is 2.6.2, not 2.6.1.

[isner]

It seems to me that an automated rule for this SC will only be able to raise a "needs review" at best because of the "essential" exemption:

Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.

Just an observation.

[jeeyyy]

Implementation Options:

Option 1:

• Iterate every DOM element.
• getComputedStyle for the element.
• Verify that an orientation lock is not applied via the css rule.

Option 2: (this is possible via an extension)

• Read all the stylesheets in the document, both local and external stylesheets. (External stylesheets can be read via extension, an example is here - https://chrome.google.com/webstore/detail/css-used/cdopjfddjlonogibjahpnmjpoangjfff?hl=en)
• Read the rules for any orientation lock.

[WilcoFiers]

I think option 2 would be best.

[jeeyyy]

Preliminary commits for these work are below:

• 7e953e1
• https://github.com/dequelabs/axe-core/tree/css-orientation-is-not-locked

[jeeyyy]

PR - #971

[jeeyyy]

#1081 merged. Closing issue.