JavaScript Element ariaOrientation Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ARIAORIENTATION

Definition

In JavaScript, ariaOrientation reflects the aria-orientation attribute: a string that indicates whether a widget is horizontal, vertical, or orientation is undefined / ambiguous (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.ariaOrientation. Start with this line.

JavaScript
element.ariaOrientation
CallWhat it does
element.ariaOrientationPrimary signature.

Built into the browser. Read or assign el.ariaOrientation — no import required.

Library declarations
JavaScript
element.ariaOrientation

Parameters

ParameterDescription
ValueOptional. horizontal / vertical / undefined
Arrow-key JSRequired. Must match the orientation
Custom elementsOptional. ElementInternals.ariaOrientation

Return Value

Return ValueDescription
*The current value of el.ariaOrientation.

JavaScript Examples

Example 1 — Get and Set (MDN)

Read the current orientation, then switch the slider to horizontal.

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

How It Works

  1. Select the slider. It already has aria-orientation="vertical".
  2. Read ariaOrientation. Returns the string "vertical".
  3. Assign "horizontal". Updates the reflected attribute.
  4. Read again. Confirms the new orientation for AT.

Example 2 — Build a Vertical Slider Signal

Declare a slider and set orientation with value attributes.

JavaScript
const s = document.getElementById("zoom");
s.setAttribute("role", "slider");
s.ariaOrientation = "vertical";
s.ariaValueMin = "0";
s.ariaValueMax = "17";
s.ariaValueNow = "14";
console.log(s.ariaOrientation, s.ariaValueNow);
Try It Yourself

How It Works

  1. Set the role. slider identifies the control.
  2. Set ariaOrientation. Tells AT to expect vertical navigation.
  3. Set value attrs. Min / max / now describe the range.
  4. Wire arrow keys in your app so Up/Down change the value.

Example 3 — Property Reflects the Attribute

Show that ariaOrientation and aria-orientation stay in sync.

JavaScript
const el = document.getElementById("handle_zoomSlider");
el.ariaOrientation = "horizontal";
console.log(el.getAttribute("aria-orientation")); // "horizontal"
el.setAttribute("aria-orientation", "vertical");
console.log(el.ariaOrientation); // "vertical"
Try It Yourself

How It Works

  1. Write via the property. Attribute updates immediately.
  2. Read via getAttribute. Same value as ariaOrientation.
  3. Write via the attribute. Property reflects the change.
  4. Use exact tokens. horizontal, vertical, or undefined.
Compatibility

Browser Support

Element.ariaOrientation is marked Baseline Widely available on MDN (since October 2023). Logos use the shared browser-image-sprite.png sprite from this project.

✓ Baseline · Widely available

Element ariaOrientation

Reflects aria-orientation — horizontal, vertical, or undefined.

Widely Available
Google Chrome Full support · Desktop & Mobile
Full support
Mozilla Firefox Full support · Desktop & Mobile
Full support
Apple Safari Full support · macOS & iOS
Full support
Microsoft Edge Full support · Chromium
Full support
Opera Full support · Modern versions
Full support
Internet Explorer No Element.ariaOrientation
Not supported
ariaOrientation Baseline support

Bottom line: Safe in modern browsers. Pair the announced orientation with matching arrow-key behavior. See the MDN Element.ariaOrientation reference.

Frequently Asked Questions

It reflects the aria-orientation attribute as a string, indicating whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
No. MDN marks Element.ariaOrientation as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
The strings "horizontal" (element is horizontal), "vertical" (element is vertical), or "undefined" (orientation is unknown or ambiguous).
Common examples include slider, scrollbar, separator, listbox, menu, and toolbar. Match the value to how keyboard navigation should work (for example Up/Down on a vertical slider).
MDN sets aria-orientation="vertical" on a role="slider" element, reads "vertical" via ariaOrientation, then assigns "horizontal" to update the reflected attribute.
Yes. Reading and writing ariaOrientation updates the reflected aria-orientation attribute. Keep arrow-key behavior aligned with horizontal vs vertical.

Next: Element ariaOwnsElements

Learn how owned elements shape the accessibility tree for custom widgets.

ariaOwnsElements tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element ariaMultiSelectable Property JavaScript Element ariaOwnsElements Property