Kilotest: Diagnoses of CSS bans page rotation violation by HTML element 0 on Hesperian Health Guides page

Basics

About the Hesperian Health Guides page

URL: https://hesperian.org/
Tested 4 days ago by job glp on 2026-05-28 at 22:54

About HTML element 0

Tag name: HTML
Text: [not applicable]
Start tag: <html dir="ltr" lang="en-US" prefix="og: https://ogp.me/ns#" class="html_stretched responsive av-preloader-disabled html_header_top html_logo_left html_main_nav_header html_menu_right html_custom html_header_sticky_disabled html_header_shrinking_disabled html_header_topbar_active html_mobile_menu_phone html_header_searchicon html_content_align_center html_header_unstick_top_disabled html_header_stretch html_elegant-blog html_modern-blog html_av-overlay-full html_157 html_av-submenu-noclone html_entry_id_25058 av-cookies-no-cookie-consent av-no-preview av-default-lightbox html_text_menu_active av-mobile-menu-switch-default avia_desktop js_active avia_transform avia_transform3d avia-webkit avia-webkit-148 avia-chrome avia-chrome-148 no-touch-device pointer-device-fine pointer-device-coarse">
XPath: /html
Bounding box: x = 0, y = 0, width = 1920, height = 2845

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

Diagnoses

Here is how tools diagnose the CSS bans page rotation issue for HTML element 0 of the Hesperian Health Guides page.

You have defined <acronym title="Cascading Style Sheets">CSS</acronym> orientation media feature <code>only screen and (orientation: landscape) and (max-width: 989px)</code> in <acronym title="Cascading Style Sheets">CSS</acronym> (location: <code>https://hesperian.org/wp-content/uploads/dynamic_avia/avia-merged-styles-594cc774af761cd5721a7c500da656d0---69d929daabf28.css</code>, cssText: <code>@media only screen and (orientation: landscape) and (max-width: 989px) { #top #av-burger-menu-ul { [...]</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://hesperian.org/wp-content/uploads/dynamic_avia/avia-merged-styles-594cc774af761cd5721a7c500da656d0---69d929daabf28.css</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