Web Accessibility Principles
- Principles of Accessibility
- Provide appropriate alternative text
- Content is well structured and clearly written
- Help users navigate to relevant content
- Provide headers for data tables
- Do not rely on color alone to convey meaning
- Ensure users can complete and submit all forms
- Ensure links make sense out of context
- Caption and/or provide transcripts for media
- Ensure accessibility of non-HTML content
This resource is designed to be printed as a one page PDF file. An HTML version is also available below.
Principles of Accessibility
- Perceivable - Available through sight, hearing, or touch.
- Operable - Compatible with keyboard or mouse.
- Understandable - User-friendly, easy to comprehend.
- Robust - Works across browsers, assistive technologies, mobile devices, old devices/browsers, etc. Follows standards.
Provide appropriate alternative text
- Every non-text element needs a text alternative (alt text) that provides an equivalent to the image content.
- Alt text should present the content and function, not necessarily a description, of an image.
- If an image has no relevant content or function, is decorative, or the alternative text is provided in nearby text, then the image should have an empty alternative text value (
- If an image is a link (or hotspot), the alt text must describe the link’s function.
- Avoid words like "picture of," "image of," or "link to."
- Use the fewest number of words necessary.
Content is well structured and clearly written
- Use the simplest language appropriate for your content.
- Organize your content using true headings (e.g.,
<h1>) and lists.
- Use empty (white) space to improve readability.
- Use illustrations, icons, etc. to supplement text.
- Check spelling, grammar, and readability.
Provide headers for data tables
- Identify all data table headers using the
- Provide an appropriate scope attribute:
<th scope="col">for column headers or
<th scope="row">for row headers.
- If appropriate, add a table
<caption>for the data table.
Do not rely on color alone to convey meaning
- The use of color can enhance comprehension, but do not use color alone to convey information. Be especially cautious of red/green color combinations.
- Make sure that color contrast is strong, especially between text and background.
Ensure users can complete and submit all forms
- Put form labels adjacent to or near their controls, so the labels are associated visually.
- Use the
<label>element to associate labels and controls.
- Group similar elements (such as checkboxes or radio buttons) together using
- Clearly identify required form elements. Don't make a field required if it is not necessary. Ensure all directions and cues are readily accessible.
- If there are errors in a form that has been submitted, alert the user in an accessible way (especially to a screen reader user) and make it easy to fix the incorrect information and resubmit the form.
Ensure accessibility of non-HTML content
- HTML content will almost always be more accessible than content in any other format.
- PDF, Microsoft Word and PowerPoint files, OpenOffice.org, and Adobe Flash provide basic accessibility features.
- Provide accessible alternatives when non-HTML content cannot be made fully accessible.
- Test the accessibility of non-HTML content in assistive technologies.
- Ensure that the page is readable and usable when fonts are enlarged 150-200%.
- Provide a descriptive page
- When using scripting, ensure events are available with both mouse and keyboard. Make all scripted content and page updates/changes available to screen readers.
- Limit pop-up windows and notify users when pop-ups are used.
- Provide a descriptive title for all frames (e.g.,
- Follow HTML and CSS coding standards.
Related WebAIM Resources
- Quick Reference: Testing Web Content for Accessibility