Web Accessibility Principles
Accessibility guidelines and techniques are based on four core principles:
- Perceivable - Available through sight, hearing, or touch.
- Operable - Compatible with keyboard or mouse.
- Understandable - Easy to comprehend.
- Robust - Works across browsers, assistive technologies, mobile devices, old devices/browsers, etc. Follows standards.
- Every non-text element needs a text equivalent (often conveyed in the
altattribute) to provide an alternative to the image content.
altattribute should present the content and function of an image, but not necessarily a detailed description.
- If an image is decorative, or redundant to nearby text, it should have empty alternative text (
- If an image is a link or hotspot, the
alttext must describe the link’s function.
- Words like "picture of," "image of," or "link to" are redundant. Screen readers already identify images and links by default.
- Ensure alternative text is as succinct as necessary.
- Use the simplest language appropriate to your content and audience.
- Use white space (line length, text spacing) to improve readability.
- Supplement text with images and icons.
- Check spelling, grammar, and reading grade level.
- Position form labels adjacent to or near their controls, so the labels are associated visually.
<label>to associate labels with controls programmatically.
<legend>to group related controls (like radio buttons) with a higher-level label.
- Clearly identify required form elements. Don't make a field required if it is not necessary. Ensure all directions and cues are readily accessible.
- Ensure validation errors are obvious to screen reader users, and that users can easily make corrections and resubmit the form.
- For the most robust accessibility, use HTML instead of proprietary document formats.
- When only a document will do, PDF, Word, PowerPoint, and Excel provide basic accessibility features.
- If document content cannot be made fully accessible, provide an accessible alternative.
- Test document accessibility in a screen reader.
- Ensure that content reflows without breaking layout up to 400% zoom (from a 1280 pixel wide viewport).
- Ensure responsive layouts and structures are keyboard accessible.Provide a descriptive page
- Ensure functionality available to mouse users is also available via the keyboard.
- Make all scripted and dynamic content, dialog pop-ups, and page widgets available to screen readers. ARIA, when used appropriately, can be helpful.
- Ensure the web page language is defined (e.g.,
- Implement and test to the Web Content Accessibility Guidelines.