COMM 223 -
Introduction to Web Site Design and Construction

Accessibility Guide

Tags.

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

role="main"

These role values are listed below:

• banner: A region that contains the prime heading or internal title of a page.
• main: Main content in a document. In almost all cases a page will have only one role="main".
• complementary: Any section of the document that supports the main content, yet is separate and meaningful on its own.
• contentinfo: A region that contains information about the parent document such as copyrights and links to privacy statements.
• navigation: A collection of links suitable for use when navigating the document or related documents (if you use the <nav> tag you won't need this).
• form: A region of the document that represents a collection of form-associated elements.

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">....an 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 https://wave.webaim.org/ or here https://validator.w3.org/.

This page will examine your CSS http://jigsaw.w3.org/css-validator/