ARIA roles and accessibility attributes

ARIA (Accessible Rich Internet Applications) is a set of HTML attributes that supplement native element semantics so screen reader users can understand and interact with your content. This article explains which ARIA attributes matter most in Site Designer projects and how to apply them.

What ARIA does (and doesn’t do)

ARIA adds meaning that HTML alone doesn’t convey — especially for dynamic content, custom widgets, and complex navigation. A screen reader user navigating with a keyboard needs to know: “Is this a modal? Is this accordion panel open or closed? Is this button a toggle?”

ARIA answers those questions. What ARIA does not do:

• Make elements keyboard-accessible (that’s tabindex and native focusable elements).
• Style anything visually.
• Substitute for correct semantic HTML — use real <button> elements, real <a> links, real <h1>–<h6> headings.

Landmark roles

Landmark roles map sections of your page to meaningful regions that screen reader users can jump to directly:

In practice: use HTML5 semantic elements and you get most landmarks for free.

Key attributes

aria-label

Provides a text alternative when visible label text is absent:

<button aria-label="Close navigation menu">
  <svg>…</svg><!-- icon only, no visible text -->
</button>

aria-labelledby

Links an element to an existing visible heading as its label:

<section aria-labelledby="pricing-heading">
  <h2 id="pricing-heading">Pricing</h2>
  …
</section>

aria-describedby

Points to additional descriptive text (longer than a label):

<input type="password" aria-describedby="pwd-hint">
<p id="pwd-hint">Must be at least 8 characters with one number.</p>

aria-hidden

Hides content from the accessibility tree — use for purely decorative elements:

<i class="icon-decorative" aria-hidden="true"></i>
<span class="sr-only">Upload file</span><!-- visible to screen readers only -->

aria-expanded

Communicates open/closed state of accordions, dropdowns, and navigation menus:

<button aria-expanded="false" aria-controls="panel1">Show details</button>
<div id="panel1" hidden>…panel content…</div>

Framework JavaScript (Foundation, Bootstrap, Materialize) updates aria-expanded at runtime automatically. Only add it manually for custom interactions.

aria-required

Marks a form field as required (supplements the required HTML attribute for older screen readers):

<input type="email" required aria-required="true">

aria-live

Announces dynamically updated content to screen readers without the user navigating to it:

<div role="status" aria-live="polite">Your file has been uploaded.</div>
<div role="alert" aria-live="assertive">Error: invalid email address.</div>

Use polite for non-urgent updates; assertive only for error messages that need immediate attention.

Interactive components

Modal dialog

<div role="dialog" aria-modal="true" aria-labelledby="modal-title" tabindex="-1">
  <h2 id="modal-title">Confirm deletion</h2>
  <p>This action cannot be undone.</p>
  <button>Cancel</button>
  <button>Delete</button>
</div>

The modal must trap keyboard focus when open and restore focus to the trigger element when closed. Framework modals handle this automatically.

Tab interface

<ul role="tablist">
  <li role="tab" aria-selected="true" aria-controls="panel1" tabindex="0">Tab 1</li>
  <li role="tab" aria-selected="false" aria-controls="panel2" tabindex="-1">Tab 2</li>
</ul>
<div role="tabpanel" id="panel1" aria-labelledby="tab1">…</div>
<div role="tabpanel" id="panel2" aria-labelledby="tab2" hidden>…</div>

Adding ARIA in Site Designer

All ARIA attributes are added through the Content pane → Attributes section:

1. Select the element on the canvas.
2. Open the Content pane.
3. Scroll to Attributes and click Add Attribute.
4. Enter the ARIA attribute name (e.g., aria-label) and value (e.g., Close dialog).

Testing with VoiceOver

On macOS, press ⌘ F5 to enable VoiceOver. Then:

• Tab through your page to verify every interactive element is reachable and announced correctly.
• Use VO + U to open the Rotor and check landmarks — your page structure should be clearly navigable.
• Trigger modals, accordions, and dropdowns to confirm state changes are announced.

If an element is skipped or announced incorrectly, check for missing ARIA attributes or incorrect semantic HTML.