COMM 223 -
Introduction to Web Site Design and Construction

Accessibility Guide


Always use proper h1-h6 tags! Use <h1> for the main heading of the page. For most pages, there will be only one <h1>. Use <h2> for subheadings beneath the main heading. Use additional levels of headings (<h3> through <h6>) as needed if there are additional levels of sub-headings within your web page content. Ensure headings form an outline of your page content; avoid skipping heading levels.

Use the ALT tag.

Provide text alternative for non-text elements, such as: images, embedded objects, audio/video content, etc. Exception! A decorative graphic just needs a blank ALT tag so screen readers will ignore the image. For example, the HTML for a divider bar could be:

<img src="purplebar.gif" alt=""> 

Use Title tags

Every valid HTML document must have the <title> tag as the title tag is used by Screen Readers. Also: The title appears in the title bar of the browser window and tabs. The title identifies the page when it is added to favorites The title identifies the page in search engine results The best structure for your title is the name of the site and the page. Like this:

<title>My Super-Duper Web Site! | What Make Me So Good?</title> 

Use Landmarks (roles)

Landmarks are inserted into the page using the role attribute on an element that marks the section. The value of the attribute is the name of the landmark. Format like this


These role values are listed below:

Simple Role examples:

<div id="header" role="banner">A banner image and introductory title</div>
<div id="content" role="main"> ... your main content...</div> <div id="rightsideadvert" role="complementary"> advertisement here...</div> 
<div id="footer" role="contentinfo">...your contact and/or copyright info</div>

Tables are for data, not layout

Add row and column headers to distinguish the heading text from the data area of the table.

Extra: Software helpers

There is accessibility testing software such as A-Prompt, Bobby, and WAVE (available as a Chrome plug-in); they will point out elements that could be inaccessible.

You can also test your HTML here or here

This page will examine your CSS