Deck 6 - Accessibility + Semantics + ARIA

Question 1

Deck 6 - Accessibility + Semantics + ARIA (objective)

Answer 1

Goal: spot and fix a11y/semantic issues (WCAG-minded) without over-ARIA.
You practice: semantic HTML, labeling, keyboard support, focus management, and ARIA patterns.
Output style: 1 verdict sentence + 2-3 issues + safest fix approach.

Question 2

A11y baseline rule (most important).

Answer 2

Use semantic HTML first; add ARIA only to fill gaps. Avoid role overrides that break native semantics.

Question 3

WCAG in practice (what evaluators look for).

Answer 3

Keyboard access, visible focus, proper labels/names, correct roles/states, readable structure, and announced async changes.

Question 4

Accessible name (definition).

Answer 4

The label screen readers use for a control. Sources: <label>, aria-label, aria-labelledby, and sometimes text content.</label>

Question 5

Labeling inputs (best practice).

Answer 5

Prefer <label>. Alternatives: aria-label or aria-labelledby. Placeholder is not a label.</label>

Question 6

Buttons vs divs (rule).

Answer 6

Clickable UI should be <button> (or <a>) not <div onClick>. If custom, must add role, tabIndex, and keyboard handlers.</a></button>

Question 7

Links (rule).

Answer 7

Use <a> for navigation, <button> for actions. Do not use <a> for actions.</a></button></a>

Question 8

Headings (structure).

Answer 8

Use h1-h6 in order to create a logical outline. Do not skip levels for styling.

Question 9

Lists and tables (semantics).

Answer 9

Use <ul>/<ol>/<li> for lists. Use tables for data grids, with proper <th scope> and captions when needed.

Question 10

Images (alt text).

Answer 10

Meaningful images need alt text; decorative images should use alt=’’ and aria-hidden=’true’ when appropriate.

Question 11

ARIA roles (when to use).

Answer 11

Use ARIA roles for custom widgets only. Do not add role=’button’ to <button>, role=’link’ to <a>, etc.</a></button>

Question 12

aria-* states (common).

Answer 12

aria-expanded for toggles, aria-pressed for toggle buttons, aria-selected for tabs/options, aria-disabled (avoid if native disabled works).

Question 13

Keyboard interaction patterns (baseline).

Answer 13

Enter/Space activate buttons; arrow keys for menus/tabs; Escape closes popovers/modals; Tab moves focus.

Question 14

Focus management (common).

Answer 14

On open: move focus into modal/popover. On close: restore focus. Trap focus in modal. Avoid focus loss on rerenders.

Question 15

Dialogs/modals (baseline).

Answer 15

Use role=’dialog’ with aria-modal=’true’, label via aria-labelledby, and focus trap/restore.

Question 16

Live regions (async updates).

Answer 16

Use aria-live=’polite’ for non-urgent updates; role=’alert’ for errors. Keep messages concise.

Question 17

Form validation messaging.

Answer 17

Associate errors with inputs (aria-describedby). Use aria-invalid when invalid. Do not rely on color alone.

Question 18

Disabled vs aria-disabled.

Answer 18

Prefer native disabled (removes from tab order). aria-disabled keeps focusable; use only when needed.

Question 19

Avoiding duplicate IDs (React).

Answer 19

IDs must be unique. Use useId() for stable unique IDs across server/client rendering.

Question 20

Testing a11y basics (RTL).

Answer 20

getByRole + name is an a11y assertion. Ensure elements are reachable and labeled; role=alert for errors.

Question 21

Gotcha: clickable div without keyboard.

function X() {
  return <div onClick={save}>Save</div>;
}

Answer 21

Verdict: FAIL
- Issue: non-semantic interactive element; not keyboard accessible.
- Fix: use <button>Save</button> (or implement role+tabIndex+keys if custom).

Question 22

Gotcha: missing label for input.

<input id='q' placeholder='Search' />

Answer 22

Verdict: FAIL
- Issue: placeholder is not a label.
- Fix: add <label>Search</label> or aria-label.

Question 23

Gotcha: label not associated.

<label>Search</label>
<input id='q' />

Answer 23

Verdict: FAIL
- Issue: missing htmlFor.
- Fix: <label>Search</label>.

Question 24

Gotcha: button missing type in a form.

<form>
  <button onClick={onCancel}>Cancel</button>
</form>

Answer 24

Verdict: PARTIAL FAIL
- Issue: default type is submit.
- Fix: type=’button’ for non-submit buttons.

Question 25

Gotcha: anchor used for action. ``` Logout ```

Answer 25

Verdict: FAIL - Issue: wrong semantics for action. - Fix: Logout.

Question 26

Gotcha: icon-only button has no name. ``` ```

Answer 26

Verdict: FAIL - Issue: missing accessible name. - Fix: add aria-label='Close' or visible text.

Question 27

Gotcha: aria-label conflicts with visible text.

Answer 27

Verdict: PARTIAL FAIL - Issue: inconsistent accessible name. - Fix: align aria-label with visible label or remove it.

Question 28

Gotcha: role='button' on native button. ``` Save ```

Answer 28

Verdict: PARTIAL - Issue: redundant ARIA. - Fix: remove role and rely on native semantics.

Question 29

Gotcha: custom control missing tabIndex. ```

Save

```

Answer 29

Verdict: FAIL - Issue: not focusable via keyboard. - Fix: prefer ; otherwise add tabIndex=0 + key handlers.

Question 30

Gotcha: aria-hidden contains focusable control. ```

Click

```

Answer 30

Verdict: FAIL - Issue: hidden content should not be focusable. - Fix: do not hide interactive elements this way.

Question 31

Gotcha: duplicate ids. ``` Name Email ```

Answer 31

Verdict: FAIL - Issue: duplicate ids break label wiring. - Fix: unique ids; use useId() for lists.

Question 32

Gotcha: missing aria-expanded on disclosure. ``` Filters {open &&

...

} ```

Answer 32

Verdict: PARTIAL - Issue: state not announced. - Fix: aria-expanded={open} aria-controls='panel'.

Question 33

Gotcha: aria-controls references missing id. ``` Toggle

...

```

Answer 33

Verdict: PARTIAL FAIL - Issue: aria-controls points to missing target. - Fix: set id='panel' on controlled region.

Question 34

Gotcha: custom checkbox without keyboard. ```

X

```

Answer 34

Verdict: FAIL - Issue: not tabbable; no Space toggle. - Fix: prefer native checkbox or add tabIndex=0 + onKeyDown Space.

Question 35

Gotcha: aria-disabled instead of disabled. ``` Save ```

Answer 35

Verdict: FAIL - Issue: still clickable. - Fix: use disabled and block handler.

Question 36

Gotcha: focus outline removed in CSS.

Answer 36

Verdict: FAIL - Issue: invisible focus indicator. - Fix: keep :focus-visible styles.

Question 37

Gotcha: modal missing role/label/focus. ``` {open &&

...

} ```

Answer 37

Verdict: FAIL - Issue: missing dialog semantics and focus management. - Fix: role='dialog' aria-modal + aria-labelledby; trap/restore focus.

Question 38

Gotcha: no focus restore on close.

Answer 38

Verdict: FAIL - Issue: keyboard users lose place. - Fix: restore focus to trigger element on close.

Question 39

Gotcha: positive tabindex used.

Answer 39

Verdict: PARTIAL FAIL - Issue: breaks natural tab order. - Fix: avoid positive tabindex; use 0/-1 only when needed.

Question 40

Gotcha: input error not associated. ```

Invalid email

```

Answer 40

Verdict: PARTIAL FAIL - Issue: helper not linked. - Fix: aria-describedby='emailHelp' and aria-invalid when invalid.

Question 41

Gotcha: aria-invalid always true.

Answer 41

Verdict: PARTIAL FAIL - Issue: announces invalid always. - Fix: set conditionally.

Question 42

Gotcha: error message not announced. ``` {error &&

{error}

} ```

Answer 42

Verdict: PARTIAL - Issue: not announced. - Fix: role='alert' for error region.

Question 43

Gotcha: aria-live used for large content.

Answer 43

Verdict: PARTIAL FAIL - Issue: SR spam. - Fix: announce only status text, not whole content.

Question 44

Gotcha: placeholder-only form. ``` ```

Answer 44

Verdict: FAIL - Issue: missing label. - Fix: label/aria-label.

Question 45

Gotcha: headings skipped. ```

Title

Section

```

Answer 45

Verdict: PARTIAL FAIL - Issue: heading structure. - Fix: use h2 for next level; style via CSS.

Question 46

Gotcha: list rendered as divs. ```

Item 1

Item 2

```

Answer 46

Verdict: PARTIAL FAIL - Issue: missing list semantics. - Fix:

• ...

.

Question 47

Gotcha: image missing alt. ``` ```

Answer 47

Verdict: FAIL - Fix: add descriptive alt or provide text alternative.

Question 48

Gotcha: decorative image has noisy alt. ``` ```

Answer 48

Verdict: PARTIAL - Fix: alt='' for decorative images.

Question 49

Gotcha: using for button-like actions.

Answer 49

Verdict: FAIL - Fix: use for actions.

Question 50

Gotcha: invalid ARIA role value.

Answer 50

Verdict: FAIL - Issue: invalid ARIA. - Fix: use valid roles only; prefer semantics.

Question 51

Gotcha: table missing headers for tabular data.

Answer 51

Verdict: PARTIAL FAIL - Fix: use where applicable.

Question 52

Gotcha: checkbox uses onKeyPress (deprecated).

Answer 52

Verdict: PARTIAL FAIL - Fix: use onKeyDown and handle Space/Enter.

Question 53

Gotcha: button has no visible focus styles due to outline: none.

Answer 53

Verdict: FAIL - Fix: provide visible focus ring (focus-visible).

Question 54

Gotcha: error message color-only indicator.

Answer 54

Verdict: PARTIAL FAIL - Fix: include text/icon and programmatic cues (aria-invalid, describedby).

Question 55

Gotcha: aria-describedby points to missing id.

Answer 55

Verdict: PARTIAL FAIL - Fix: ensure describedby id exists in DOM and is unique.

Question 56

Gotcha: landmark missing main region.

Answer 56

Verdict: PARTIAL - Fix: wrap primary content in

.

Question 57

Gotcha: useId not used for SSR-safe ids (when SSR present).

Answer 57

Verdict: PARTIAL - Fix: use useId() for stable unique ids.

Question 58

Gotcha: custom tabs missing roles/keyboard.

Answer 58

Verdict: FAIL - Fix: implement tablist/tab/tabpanel roles + arrow-key nav, or use a library.

Question 59

Gotcha: aria-expanded set on wrong element.

Answer 59

Verdict: PARTIAL FAIL - Fix: put aria-expanded on the toggle button that controls the panel.

Question 60

Gotcha: aria-modal missing on dialog.

Answer 60

Verdict: PARTIAL - Fix: aria-modal='true' (plus focus trap).

Question 61

Scenario: verdict + 3 issues. ``` return (

); ```

Answer 61

Verdict: FAIL 1) non-semantic interactive element 2) not keyboard accessible 3) missing accessible name; use

Question 62

Scenario: best fix for icon-only Close button.

Answer 62

Use (or visible text). Ensure it is focusable and reachable.

Question 63

Scenario: placeholder vs label.

Answer 63

Placeholder is not a label. Provide , aria-label, or aria-labelledby.

Question 64

Scenario: role='alert' vs aria-live='polite'.

Answer 64

Use role='alert' for errors/urgent messages; aria-live='polite' for non-urgent status updates.

Question 65

Scenario: disclosure toggle for panel.

Answer 65

Use and give the panel id='panelId'.

Question 66

Scenario: custom checkbox minimum.

Answer 66

tabIndex=0; Space toggles; role='checkbox' + aria-checked; prefer native checkbox when possible.

Question 67

Scenario: modal essentials.

Answer 67

role='dialog', aria-modal='true', labeled (aria-labelledby), focus in, trap focus, restore focus on close.

Question 68

Scenario: validation message wiring.

Answer 68

Render error with id; set aria-describedby to that id; set aria-invalid when invalid.

Question 69

Scenario: headings for styling only.

Answer 69

Use correct heading levels for structure; style with CSS (do not skip levels).

Question 70

Scenario: meaningful vs decorative images.

Answer 70

Meaningful: descriptive alt. Decorative: alt='' (and optionally aria-hidden).

Question 71

Scenario: why getByRole in tests helps a11y.

Answer 71

It enforces correct roles and accessible names; catches unlabeled or non-semantic widgets.

Question 72

Scenario: link vs button.

Answer 72

Navigation => . Action => . Avoid links for actions.

Question 73

Scenario: focus outline removed - one-liner.

Answer 73

FAIL - Removing focus indicators breaks keyboard navigation; keep visible focus (use :focus-visible).

Question 74

Scenario: duplicate ids in repeated fields.

Answer 74

Generate unique ids per item (useId or stable ids) so labels associate correctly.

Question 75

Scenario: one-liner for over-ARIA.

Answer 75

PARTIAL FAIL - ARIA is used where native semantics already apply; remove redundant roles and rely on semantic HTML.

Question 76

Checklist: a11y review top 5.

Answer 76

1) Semantic HTML first 2) Keyboard support 3) Accessible names 4) Focus management for dialogs 5) Announce errors/status (alert/live)

Question 77

Checklist: labeling quick rules.

Answer 77

aria-label for icon-only aria-labelledby for composed labels Placeholder != label IDs must be unique

Question 78

Checklist: common ARIA states.

Answer 78

aria-expanded aria-pressed aria-selected aria-invalid aria-describedby

Question 79

Checklist: modal essentials.

Answer 79

role='dialog' + aria-modal aria-labelledby focus in trap focus restore focus

Question 80

Checklist: evaluator wording for a11y issues.

Answer 80

Name issue (non-semantic/unlabeled/not keyboard), impact (inaccessible), fix (semantic element + label + focus/ARIA).