Quick Navigation by Semantic HTML Elements with Screen Readers

Images

aria-labelledby

Pennybacker Bridge via aria-labelledby

aria-label

alt attribute

Pennybacker Bridge via alt attribute

title attribute

no accessible name

alt value set empty, alt=""

alt attribute and longdesc

Pennybacker Bridge via alt attribute

Pennybacker Bridge via longdesc

Headings

Heading Level 1 Example

Heading Level 2 Example

Heading Level 3 Example

Heading Level 4 Example

Links

Google

Apple

Yahoo

Form Controls

Fieldset/Legend Construct


radio group fieldset/legend



non-label text placed to above input

non-label text placed to left of input

non-label text placed to right of input


Radio Link 2 no label just aria

Outside Form Element



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
print Q1 100 200 250
print Q2 120 180 230
print Q3 110 120 210
print Q4 140 150 300

Lists (with CSS)

  1. Numbered item 1
  2. Numbered item 2
  3. Numbered item 3
  1. Numbered item 1
  2. Numbered item 2
  3. Numbered item 3
    1. Nested Numbered item 1
    2. Nested Numbered item 2

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

Buttons

Inside FORM Element




Outside FORM Element