Example Accessible Web Page

This is an example of an accessible web page using valid HTML5 and CSS3. Compare with the inaccessible web page.

HTML Head Section

HTML5 and ARIA Semantic Elements

Formatting

Headings

The h1 main heading matches the page title, and the h2 and h3 subheadings are properly nested.

Links

Lists

Lists are used to display groups of items, including navigation in the header, footer and sidebar.

Ordered List

  1. List item 1
  2. List item 2

Unordered List

Definition List

Term 1
Definition 1
Term 2
Definition 2

Tables

Data Table

Tables containing organized data should have a caption, head, body, and headings with scoped rows and/or columns.

Caption
Heading 1 Heading 2 Heading 3
Value 1 Value 2 Value 3

Layout Table

1. Top Left 2. Top Center 3. Top Right
4. Middle Left 5. Middle Center 6. Middle Right
7. Bottom Left 8. Bottom Center 9. Bottom Right

Forms

The header contains a search form with a fieldset and legend, a labeled search box with placeholder text, and a search button.

Images

The header contains a linked image with a non-blank alt attribute.

Frames

This example inline frame has a title attribute (though not necessary for accessibility in this case).

Address

Email ACNS Middleware