# Screen Reader Content Order Map

Compare visual layout with meaningful DOM reading order and keyboard focus order for assistive technology users across responsive and dynamic states.

## Usage note

Use this map with the rendered interface, keyboard, accessibility tree, and at least one relevant screen reader. Visual position created by CSS does not automatically change DOM or reading order. This worksheet helps document relationships but does not replace testing by experienced assistive-technology users or a complete technical accessibility evaluation.

## How to use this template

1. Define the task, viewport, state, screen reader, browser, and interface version.
2. Number meaningful elements in visual, DOM reading, and keyboard focus order.
3. Compare sequence with content relationships, instructions, dependencies, and expected task flow.
4. Test responsive and dynamic states, including focus entry, announcements, and return.
5. Document defects, responsible component, remediation, verification, and regression scope.

## Blank template

### Test context

- **Page/component and build:** [URL/version]
- **Primary task:** [User goal]
- **Viewport and zoom:** [Dimensions/percentage]
- **Browser and screen reader:** [Names and versions]
- **Starting state:** [Collapsed, signed in, errors, other]
- **Relevant landmarks:** [Header, main, navigation, aside, footer]
- **Tester and date:** [Name; YYYY-MM-DD]
- **Applicable standard/process:** [Reference]

### Order record

- **Element ID:** [Stable label]
- **Visible element:** [Text/control]
- **Visual position:** [Sequence]
- **DOM/read sequence:** [Sequence and announcement]
- **Focus sequence:** [Sequence]
- **Associated instruction/status:** [Relationship]
- **Expected order:** [Reason]
- **Issue:** [Confusing, premature, missing, trapped, return failure]
- **Responsible component:** [Source]

### Verification checks

- [ ] Main content and landmarks provide efficient navigation.
- [ ] Reading sequence preserves visual and semantic relationships.
- [ ] Focus order follows task dependencies.
- [ ] Instructions occur before governed inputs or actions.
- [ ] Status and error messages are announced in useful context.
- [ ] Modals manage entry, containment, close, and return.
- [ ] Responsive layouts retain coherent order.
- [ ] Shared fixes are retested across affected states and pages.