The four principles

The overall goal for accessibility is to create web content that is perceivable, operable and understandable by the broadest possible range of users and compatible with their wide range of assistive technologies, now and in the future. These principles have numerous "techniques" that describe how to implement web accessibility.  The basic principles include:

Perceivable

Information and user interface elements must be presentable to users in ways they can perceive. This means that users must be able to perceive the information being presented. I cannot be invisible to all of their senses.

Common Perceivable issues

Operable

User interface elements and navigation must be operable. The user interface cannot require an action that a user cannot perform.

Understandable

Information and the operation of the user interface must be understandable. That means the user must be able to understand the information as well as the operation of the user interace. The content cannot be beyond their understanding.

Robust

Web content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies (AT). This means that users must be able to access web content as technologies advance. Software updates to user agents and AT should not matter when it comes to web content and accessibility.

WCAG

General Guidelines (for level A and AA)

Guideline 1.1

• All images, form image buttons, and image map hot spots have appropriate, equivalent alternative text.
• Images that do not convey content, are decorative, or contain content that is already conveyed in text are given null alt text (alt="") or implemented as CSS backgrounds. All linked images have descriptive alternative text.
• Equivalent alternatives to complex images are provided in context or on a separate (linked and/or referenced via longdesc) page.
• Form buttons have a descriptive value.
• Form inputs have associated text labels.
• Embedded multimedia is identified via accessible text.
• Frames are appropriately titled.

Guideline 1.3

• Semantic markup is used to designate headings (<h1>), lists (<ul>, <ol>, and <dl>), emphasized or special text (<strong>, <code>, <abbr>, <blockquote>, for example), etc. Semantic markup is used appropriately.
• Tables are used for tabular data. Where necessary, data cells are associated with their headers. Data table captions and summaries are used where appropriate.
• Text labels are associated with form input elements. Related form elements are grouped with fieldset/legend.

Guideline 1.4

• Color is not used as the sole method of conveying content or distinguishing visual elements.
• Color alone is not used to distinguish links from surrounding text unless the luminance contrast between the link and the surrounding text is at least 3:1 and an additional differentiation (e.g., it becomes underlined) is provided when the link is hovered over or receives focus.

• Text and images of text have a contrast ratio of at least 4.5:1.
• Large text (over 18 point or 14 point bold) has a contrast ratio of at least 3:1

• The page is readable and functional when the text size is doubled.

• If the same visual presentation can be made using text alone, an image is not used to present that text.

Guideline 2.1

• All page functionality is available using the keyboard, unless the functionality cannot be accomplished in any known way using a keyboard (e.g., free hand drawing).
• Page-specified shortcut keys and accesskeys (accesskey should typically be avoided) do not conflict with existing browser and screen reader shortcuts.

Guideline 2.4

• The web page has a descriptive and informative page title.

• The navigation order of links, form elements, etc. is logical and intuitive.

• Page headings and labels for form and interactive controls are informative. Avoid duplicating heading (e.g., "More Details") or label text (e.g., "First Name") unless the structure provides adequate differentiation between them.

• It is visually apparent which page element has the current keyboard focus (i.e., as you tab through the page, you can see where you are).

Guideline 3.2

• When a page element receives focus, it does not result in a substantial change to the page, the spawning of a pop-up window, an additional change of keyboard focus, or any other change that could confuse or disorient the user.

• When a user inputs information or interacts with a control, it does not result in a substantial change to the page, the spawning of a pop-up window, an additional change of keyboard focus, or any other change that could confuse or disorient the user unless the user is informed of the change ahead of time.

• Navigation links that are repeated on web pages do not change order when navigating through the site.

• Elements that have the same functionality across multiple web pages are consistently identified. For example, a search box at the top of the site should always be labeled the same way.

Guideline 3.3

• Required form elements or form elements that require a specific format, value, or length provide this information within the element's label.
• If utilized, form validation errors are presented in an efficient, intuitive, and accessible manner. The error is clearly identified, quick access to the problematic element is provided, and user is allowed to easily fix the error and resubmit the form.

• Sufficient labels, cues, and instructions for required interactive elements are provided via instructions, examples, properly positioned form labels, and/or fieldsets/legends.

• If an input error is detected (via client-side or server-side validation), provide suggestions for fixing the input in a timely and accessible manner.

Guideline 4.1

• Significant HTML/XHTML validation/parsing errors are avoided. Check at http://validator.w3.org/

• Markup is used in a way that facilitates accessibility. This includes following the HTML/XHTML specifications and using forms, form labels, frame titles, etc. appropriately.

Tools