Kilotest: Diagnoses of CSS bans page rotation
violation by HTML element 0 on 350 Sacramento page
Here is how tools diagnose the CSS bans page rotation
issue for HTML element 0 of the 350 Sacramento page.
Basics
- About the
CSS bans page rotation
issue- Why it matters: User must read sideways after rotating a device
- Priority: highest
- Related WCAG standard: 1.3.4
- About the 350 Sacramento page
- URL:
https://350sacramento.org/ - Tested on 2026-04-02 at 14:10
- URL:
- About HTML element 0
- Tag name:
HTML - Text: [not applicable]
- Start tag:
<html lang="en-US" class="js" data-uw-w-loader=""> - XPath:
/html - Bounding box: x = 0, y = 0, width = 1920, height = 6075
- Tag name:
Diagnoses
- You have defined <acronym title="Cascading Style Sheets">CSS</acronym> orientation media feature <code>only screen and (min-width: 481px) and (max-width: 1025px) and (orientation: landscape)</code> in <acronym title="Cascading Style Sheets">CSS</acronym> (location: <code>https://350sacramento.org/wp-content/cache/autoptimize/css/autoptimize_single_3ab5d231630399796490743041526683.css?ver=18.0.2</code>, cssText: <code>@media only screen and (min-width: 481px) and (max-width: 1025px) and (orientation: landscape) {
# [...]</code>).
Make sure that there is no message telling the user to reorient the device. The entirety of the author-controlled content needs to be re-oriented in order to meet the Success Criteria.
Note about location: If the style sheet is a linked style sheet, the value of its attribute is its location. For inline style sheets, the value of this attribute is <code>null</code>.
Tool: ASLint (eSSENTIAL Accessibility)
Rule:
orientation - You have defined <acronym title="Cascading Style Sheets">CSS</acronym> orientation media feature <code>only screen and (min-width: 481px) and (max-width: 1025px) and (orientation: landscape)</code> in <acronym title="Cascading Style Sheets">CSS</acronym> (location: <code>https://350sacramento.org/wp-content/cache/autoptimize/css/autoptimize_single_81095e72e42d12b0cd04ec9973c3f17b.css?ver=72091</code>, cssText: <code>@media only screen and (min-width: 481px) and (max-width: 1025px) and (orientation: landscape) {
. [...]</code>).
Make sure that there is no message telling the user to reorient the device. The entirety of the author-controlled content needs to be re-oriented in order to meet the Success Criteria.
Note about location: If the style sheet is a linked style sheet, the value of its attribute is its location. For inline style sheets, the value of this attribute is <code>null</code>.
Tool: ASLint (eSSENTIAL Accessibility)
Rule:
orientation - You have defined <acronym title="Cascading Style Sheets">CSS</acronym> orientation media feature <code>screen and (max-width: 800px) and (orientation: landscape)</code> in <acronym title="Cascading Style Sheets">CSS</acronym> (location: <code>https://350sacramento.org/wp-content/cache/autoptimize/css/autoptimize_single_3de4483c1da99fd3a391c5ebabdc3699.css?ver=8.6.0</code>, cssText: <code>@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
[...]</code>).
Make sure that there is no message telling the user to reorient the device. The entirety of the author-controlled content needs to be re-oriented in order to meet the Success Criteria.
Note about location: If the style sheet is a linked style sheet, the value of its attribute is its location. For inline style sheets, the value of this attribute is <code>null</code>.
Tool: ASLint (eSSENTIAL Accessibility)
Rule:
orientation