One of the primary ways to insure accessibility is utilizing correct semantic markup, which basically means using the right HTML tags for the right jobs. HTML tags, when used correctly, provide meaning and content structure (not to be confused with CSS which controls layout only). Proper markup ensures that the content is read accurately and efficiently regardless of layout.

HTML 5 provides a number of new semantic tags for content, examples include <header>, <footer>, <nav>, <article>, <section>, <aside>, and <figure>. These new elements assist users that require special devices, like screenreaders, in navigating the content on a page.

Sample web page layouts

Page layout samples: a typical page layout (left) and a typical page layout after styling (right)

HTML Page Structure

  • Compliant HTML: Use well-formed, semantically correct, compliant HTML5.
  • Page Titles: Web pages have titles that describe topic or purpose of individual page. The page title is what appears in the Bookmarks, Tab bar, and is the first thing read by the screenreader. Keep the page title succinct and page specific (It is common to describe the site and not the page).
  • Headings: Section headings are used to describe sections of a web page. Screenreader users rely on headings to jump to different sections of a page. (Tags: <H1> to <H6>).
  • Language of Page: The default human language of each web page can be programmatically determined. (e.g. For screenreader pronunciation). The same applies for passages of text on a web page in another language. eg <html lang=”en”>, <span lang=”de”>
  • Elements: Use existing elements instead of creating new ones (e.g. Buttons), and if you must create fake buttons, links, etc. for some reason, make sure to add the appropriate WAI-ARIA and JavaScript to give them all the same accessibility of the native elements. http://www.456bereastreet.com/archive/201302/making_elements_keyboard_focusable_and_clickable/

Sample HTML Code

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>Your Website</title>
</head>

<body>

<header>
<h1> Site title </h1>
<nav>
<ul>
<li>Your menu</li>
</ul>
</nav>
</header>
<section>

<article>
<header>
<h2>Article title</h2>
</header>
<p>Sample article text Sample article text Sample article text Sample 
article text Sample article text </p>
</article>
<article>
<header>
<h2>Article title</h2>
</header>
<p>Sample article text Sample article text Sample article text Sample 
article text Sample article text </p>
</article>

</section>

<aside>
<h2>Sidebar Title</h2>
<p>Sidebar text</p>
</aside>

<footer>
<p>Copyright 2013 Your name</p>
</footer>

</body>
</html>