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



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



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


Data Table

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

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


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


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


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


Email ACNS Middleware