JavaScript Element ariaOrientation Property

What You’ll Learn

Element.ariaOrientation is an instance property that reflects the aria-orientation attribute. Learn the horizontal, vertical, and undefined tokens, how sliders and similar widgets use orientation for keyboard navigation, and how to get or set the property from JavaScript—with five examples and try-it labs.

Introduction

Sliders, scrollbars, menus, and separators can run horizontally or vertically. Assistive technologies need to know which axis matters so users know which arrow keys to expect.

aria-orientation carries that signal on the widget. ariaOrientation is the JavaScript reflection of that attribute.

const el = document.getElementById("handle_zoomSlider");
console.log(el.ariaOrientation); // "vertical"
el.ariaOrientation = "horizontal";

Understanding the Property

MDN: the ariaOrientation property of the Element interface reflects the value of the aria-orientation attribute, which indicates whether the element’s orientation is horizontal, vertical, or unknown/ambiguous.

• Reflected attribute — mirrors aria-orientation.
• Get / set — readable and writable string.
• Three tokens — horizontal, vertical, undefined.
• Baseline — widely available since October 2023 (MDN).

📝 Syntax

ariaOrientation

Value

A string with one of the following values:

📋 MDN Example Shape

MDN starts with a vertical slider, then updates orientation to "horizontal":

<div
  id="handle_zoomSlider"
  role="slider"
  aria-orientation="vertical"
  aria-valuemin="0"
  aria-valuemax="17"
  aria-valuenow="14"
  tabindex="0">
  <span>11</span>
</div>

let el = document.getElementById("handle_zoomSlider");
console.log(el.ariaOrientation); // "vertical"
el.ariaOrientation = "horizontal";
console.log(el.ariaOrientation); // "horizontal"

Examples Gallery

Examples follow MDN Element: ariaOrientation. Labs use a slider so you can safely read and write the property.

const el = document.getElementById("handle_zoomSlider");
console.log(el.ariaOrientation);

// HTML includes: role="slider" aria-orientation="vertical"

vertical

let el = document.getElementById("handle_zoomSlider");
console.log(el.ariaOrientation); // "vertical"
el.ariaOrientation = "horizontal";
console.log(el.ariaOrientation); // "horizontal"

vertical
horizontal

const slider = document.createElement("div");
slider.setAttribute("role", "slider");
slider.setAttribute("aria-label", "Zoom");
slider.setAttribute("aria-valuemin", "0");
slider.setAttribute("aria-valuemax", "100");
slider.setAttribute("aria-valuenow", "50");
slider.tabIndex = 0;
document.body.appendChild(slider);

slider.ariaOrientation = "vertical";
console.log({
  ariaOrientation: slider.ariaOrientation,
  attr: slider.getAttribute("aria-orientation")
});

{
  "ariaOrientation": "vertical",
  "attr": "vertical"
}

const el = document.createElement("div");
el.setAttribute("role", "slider");
el.setAttribute("aria-orientation", "vertical");
el.setAttribute("aria-label", "Volume");
document.body.appendChild(el);

el.ariaOrientation = "horizontal";
console.log({
  fromProperty: el.ariaOrientation,
  fromAttribute: el.getAttribute("aria-orientation"),
  same: el.ariaOrientation === el.getAttribute("aria-orientation")
});

{
  "fromProperty": "horizontal",
  "fromAttribute": "horizontal",
  "same": true
}

console.log({
  supported: "ariaOrientation" in Element.prototype,
  allowed: ["horizontal", "vertical", "undefined"],
  tip: "Match arrow keys to horizontal vs vertical sliders",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "allowed": ["horizontal", "vertical", "undefined"],
  "tip": "Match arrow keys to horizontal vs vertical sliders",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Custom vertical or horizontal sliders and scrollbars.
• Switching a widget layout between horizontal and vertical modes.
• Toolbars, menus, or listboxes where axis affects keyboard navigation.
• Keeping arrow-key behavior aligned with assistive technology expectations.
• Keeping script and markup aligned without manual setAttribute.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Prefer native range inputs when possible.
• Set orientation on the widget, not on individual items inside it.
• Related: ariaOwnsElements, ariaLabel, EventTarget, JavaScript hub.

💡 Best Practices