Web Accessibility Basics: ARIA guesswork pagh

ARIA mistake common wrong attribute lo' pagh - ARIA lo' (native HTML element free solve laH 'ach). ARIA (Accessible Rich Internet Applications) custom widgets describe (HTML built-in element ghajbe'), <div> <button> stand-in patch pagh. ARIA first rule (spec authors): ARIA lo' Qo' (poQbe'DI').

div-button Qagh

component libraries Daq reH:

<div class="button" onclick="submitForm()">Submit</div>

visually button. screen reader vaD unlabeled non-interactive text chunk - Tab focusable pagh, button announce pagh, Enter Space activate pagh. ARIA JavaScript rap patch laH:

<div
  class="button"
  role="button"
  tabindex="0"
  onclick="submitForm()"
  onkeydown="if (event.key === 'Enter' || event.key === ' ') submitForm()"
>
  Submit
</div>

pagh element already Hoch Qu' lo':

<button onclick="submitForm()">Submit</button>

keyboard support, focus handling, accessible name, correct role - Hoch free, browser screen reader Hoch consistent, JavaScript zero. <button>, <a href>, <input>, <select> wa'DIch; HTML native semantics tlhoch neH HTML element ghajbe' Dochmey build vaj (tab panel, autocomplete combobox).

ARIA place earn: labeling

native elements rap, visible text convey pagh context poQ. icon-only button classic:

<button aria-label="Close dialog">
  <svg><!-- X icon --></svg>
</button>

aria-label pagh vaj screen reader "button" neH announce - focusable activatable 'ach user nuq Qu' Sov pagh. aria-label visible text pagh vaj accessible name nob. visible text nearby ghaj 'ach button Daq pagh vaj aria-labelledby ID point (duplicate pagh):

<h2 id="billing-heading">Billing Address</h2>
<button aria-labelledby="billing-heading">Edit</button>

"Edit, Billing Address" announce - bare "Edit" law' useful (page five identical edit buttons five sections).

custom widgets state describe

ARIA real load-bearing work: custom components state changes announce poQ (native elements automatically handle). collapsible section:

<button aria-expanded="false" aria-controls="panel-1" id="toggle-1">
  Show details
</button>
<div id="panel-1" hidden>
  ...
</div>

const toggle = document.getElementById('toggle-1');
const panel = document.getElementById('panel-1');

toggle.addEventListener('click', () => {
  const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
  toggle.setAttribute('aria-expanded', String(!isExpanded));
  panel.hidden = isExpanded;
});

aria-expanded JavaScript Daq actual visible state rap sync keep poQ - ARIA attributes choH pagh, assistive technology vaD informational neH. aria-expanded="false" set 'ej update pagh vaj screen reader user panel collapsed forever (open 'ach).

live regions dynamic updates

content choH page navigation pagh focus change pagh (form validation error, "saved" toast, search results update) - sighted users legh 'ach screen reader current focus tlhoch announce reason pagh (jatlh pagh vaj).

<div aria-live="polite" id="save-status"></div>

document.getElementById('save-status').textContent = 'Changes saved.';

aria-live="polite" assistive technology jatlh: user pause vaj change announce - status messages vaD. aria-live="assertive" interrupt poQ Dochmey neH (session-expiry warning). overuse vaj page exhausting (update Hoch reading cut).

bugs most catch rule

wa' habit: role pagh aria-* chel qaSDI' native element nuq avoid ask. <div> role="button" → <button>. generic wrapper role="navigation" → <nav>. text input aria-required="true" → required attribute (assistive tech same convey + free browser validation).

ARIA keep: screen reader wa'logh run. VoiceOver Mac Hoch rap (Cmd+F5), NVDA Windows free. five minutes keyboard 'ej ear own interface navigate - ARIA spec cover to cover read law' real problems catch. unlabeled icon button pagh never-firing live region immediately notice (SoH silence confuse).

yaj

ARIA HTML semantics supplement (HTML cover pagh cases) - right element replace pagh. native HTML wa'DIch, aria-label/aria-labelledby accessible name obvious pagh vaj chel, aria-expanded state attributes reality rap sync vaj lo', live regions user focus tlhoch hear poQ updates vaD reserve.