Handicap symbol blue wheelchair sign

HTML for Accessibility

With HTML5, web developers can build websites that are accessible to everyone. By using meaningful tags, the correct HTML semantics increase web accessibility. Heading tags should be reserved for headings, and snippets of code should be surrounded by code tags. Listed below are some examples:

  • For a complete set of content information, use <article>  instead of <div<
  • For content that deserves emphasis, use <em>  instead of <h4>
  • For ancillary content, use <aside>
  • For captions under images, use <caption>  instead of <p>

Additional information regarding ARIA roles can be found by visiting the University of Washington ARIA Landmark Roles web page.

ARIA Landmark Roles

There are eight ARIA Landmark Roles. They are as follows:

  • role=”banner”
  • role=”navigation” (menu)
  • role=”main” (main content of the page)
  • role=”complementary” (sidebar)
  • role=”contentinfo” (information about the page, like a copyright statement)
  • role=”search”
  • role=”form”
  • role=”application” (a web application with its own keyboard interface)
When a role is used multiple times on a page, the aria-label attribute should be used to further describe the role: <div role="search" aria-label="Site search"> <div role="search" aria-label="Member search">

Clear Language

For all website visitors, it is important to declare the language within the HTML following the doctype declaration at the top of the HTML file. For English, the HTML declaration statement should be <html lang="en">.

To improve the website experience for a person who is visually impaired, it is also critical to use clear, descriptive language within the page content. For example, the visible text for links should be descriptive. A link that says "Go to Membership Page" is much more descriptive than a one-word link that simply says "Membership". Abbreviations and slang should be avoided. Use "Butler County" instead of B.C. For screen readers, sentences should be as short and direct as possible. Try not to use dashes or other symbols. For example, use the word "dollars" instead of the "$" dollar sign symbol. And write "4 to 5 astronauts" instead of using the dash symbol "4-5 astronauts."

Link titles should be included with all links, and they should communicate the specific purpose or result of clicking on the link. Use "action words" in each title, like "go" or "visit" as in "Go to the mobile site" or "Visit the photo gallery."

For all images, alternative text should be provided. The text should either describe the image, or describe what the image is trying to convey. For example: <img href="pic.jpg" alt="Young child eating giant vanilla and chocolate ice cream cone">  instead of <img href="pic.jpg" alt="ice cream">