Quick Navigation by Semantic HTML Elements with Screen Readers (original) (raw)
Images
aria-labelledby
Pennybacker Bridge via aria-labelledby
aria-label
alt attribute
title attribute
no accessible name
alt value set empty, alt=""
alt attribute and longdesc
Pennybacker Bridge via longdesc
Headings
Heading Level 1 Example
Heading Level 2 Example
Heading Level 3 Example
Heading Level 4 Example
Links
Form Controls
Outside Form Element
Outside Checkbox Wrapped
Outside Radio 1
Outside Radio 2
Data Tables
td scope=row does NOT work with VO
| Quarter | Apples | Oranges | Bananas |
|---|---|---|---|
| Q1 | 100 | 200 | 250 |
| Q2 | 120 | 180 | 230 |
| Q3 | 110 | 120 | 210 |
| Q4 | 140 | 150 | 300 |
using th as row and column headers works with VO
| Quarter | Apples | Oranges | Bananas |
|---|---|---|---|
| Q1 | 100 | 200 | 250 |
| Q2 | 120 | 180 | 230 |
| Q3 | 110 | 120 | 210 |
| Q4 | 140 | 150 | 300 |
omitting a TH in the top left cell causes bugs where VO incorrectly reads the wrong headers
| | Apples | Oranges | Bananas | | | --------- | ------- | ------- | --- | | Q1 | 100 | 200 | 250 | | Q2 | 120 | 180 | 230 | | Q3 | 110 | 120 | 210 | | Q4 | 140 | 150 | 300 |
using headers="id1 id2" does NOT work with VO
| Quarter | Apples | Oranges | Bananas |
|---|---|---|---|
| Q1 | 100 | 200 | 250 |
| Q2 | 120 | 180 | 230 |
| Q3 | 110 | 120 | 210 |
| Q4 | 140 | 150 | 300 |
using th as row and column headers in the second row and second column does NOT work with VO
| 0 | 1 | 2 | 3 | 4 |
|---|---|---|---|---|
| 1 | Quarter | Apples | Oranges | Bananas |
| 2 | Q1 | 100 | 200 | 250 |
| 3 | Q2 | 120 | 180 | 230 |
| 4 | Q3 | 110 | 120 | 210 |
| 5 | Q4 | 140 | 150 | 300 |
using headers to point to row headers in 2nd colum does not work in VO or JAWS, only works in NVDA/Firefox, this test is to determine link purpose using a programmatically determined context
| Report | Quarter | Apples | Oranges | Bananas |
|---|---|---|---|---|
| Q1 | 100 | 200 | 250 | |
| Q2 | 120 | 180 | 230 | |
| Q3 | 110 | 120 | 210 | |
| Q4 | 140 | 150 | 300 |
Lists (with CSS)
- Bulleted item 1
- Bulleted item 2
- Bulleted item 3
- Numbered item 1
- Numbered item 2
- Numbered item 3
- Numbered item 1
- Numbered item 2
- Numbered item 3
- Nested Numbered item 1
- Nested Numbered item 2
- Unordered list-style:none; item 1
- Unordered list-style:none; item 2
- Unordered list-style:none; item 3
Landmarks
iframed in Example
Standard Landmarks
....
... Ottawa is the capital of Canada ...
Landmarks with Names via aria-labelledby
Landmarks with Names via aria-label
HTML5 Header Container
HTML5 Main Container
Left Navigation