Simple test cases for HTML elements

Links (a)

A link to the bottom of the page.

A link to Google. NB: Once you've visited one, does a screen reader announce that?

Heading with a link in it: Google

Is the above link to google announced, or does the heading get in the way?

Abbreviations and Acronyms (abbr and acronym)

The next item is an abbreviation, W3C.

The next item is an acronym, NASA.

Whilst were at it, how about a title on a span element? The last word has a title of hello: span.

Address

The following block of text is in an address element:

Pre-formatted text block (pre)

The following block of text is in a pre:

getElementById("test");

Inline elements (b, i, strong, em)

Can you tell which items in this sentence have bold, italics, strong or emphasis on?

It can be quite difficult, this may help: the the the the.

How about if the next name is a cite? Alastair Campbell compared to Alastair Campbell. Or that this is a quote: To be or not to be.

Can you tell if this is code, compared to code. That this is deleted, that this is inserted, that this is a definition, or that this is Keyboard text, compared to keyboard text, teletype text, a variable.

Can you tell if this bit of text is red?

The next item is sort of an equation: E = MC², but not sure what this sub would mean: E= MC₂.

Blockquote

The following is a quote includes a title and cite attribute, and of course includes a paragraph for validity.

this Ajax application is usable by screen-reader users some of the time. They aren't totally shut out, but it isn't totally easy for them, either.

Line breaks (br)

Can you tell
where the
line breaks
are in this paragraph? I'm not sure if it particularly matters.

Lists

There are several types and complexities of list, we'll start simple and get more complex.

Unordered list, simple

• Item
• Item
• Item

Ordered list, simple

1. Item
2. Item
3. Item

Definition list, simple

term

definition

second term

second definition

Nested unordered list

• Item
  • Sub-Item
  • Sub-Item
• Item

Nested ordered list

1. Item
   1. Sub-Item
   2. Sub-Item
2. Item

Nested ordered list within unordered list

• Item
  1. Sub-Item
  2. Sub-Item
• Item

Forms

Tables

Frames

Not going to test framesets, but an iframe is included below:

Headings

You should have worked it out by now, but here are a couple more headings:

Heading level 4

Heading level 5

Horizontal rule (hr)

Can you tell there is a horizontal rule after this sentence?

This is after the horizontal rule.

Images

There are quite a few connotations, with the alt, title and links, so there are a few versions. I'll use the same image throughout, the Voiceover logo.

Image without alternative: .

Image with only alternative: .

Image without alternative, with title: .

Image with alternative and title: .

Object

***

The bottom of the page.