-
Notifications
You must be signed in to change notification settings - Fork 0
Home
Objective: This is the minimum level of conformance, addressing the most basic web accessibility features. It includes criteria that must be met to ensure content is accessible to some users, but it may not be accessible to all. Impact: Web content at this level often prevents barriers that make it completely unusable for people with disabilities.
Objective: This level builds on Level A, addressing a wider range of accessibility issues. It is considered the acceptable level of accessibility for most web content and is the target for many regulatory standards. Impact: Level AA criteria ensure that web content is accessible to a broader audience of people with disabilities, including those with visual impairments, hearing impairments, and cognitive disabilities. Example Criteria: Contrast (Minimum): Text and images of text have a contrast ratio of at least 4.5:1. Resize Text: Text can be resized up to 200% without loss of content or functionality. Navigation: Provide multiple ways to navigate (e.g., site search or a sitemap).
Objective: This is the highest and most stringent level of conformance, addressing the most significant accessibility barriers. Achieving Level AAA makes web content accessible to the widest range of people with disabilities. Impact: Level AAA criteria cover all issues addressed by Level A and AA, plus additional criteria to make content accessible to individuals with more severe disabilities. Example Criteria: Contrast (Enhanced): Text and images of text have a contrast ratio of at least 7:1. Reading Level: Content is written at a lower reading level or an alternate version is provided. Extended Audio Description: Audio descriptions are provided for all pre-recorded video content.
Contrast (Minimum) - 1.4.3: Ensures text has a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Resize Text - 1.4.4: Text must be resizable up to 200% without loss of content or functionality. Labels or Instructions - 3.3.2: Ensures that labels or instructions are provided when content requires user input.
Contrast (Enhanced) - 1.4.6: Requires text to have a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. Identify Purpose - 1.3.5: Ensures that the purpose of UI components, icons, and regions can be programmatically determined. Reading Level - 3.1.5: Requires that content is readable and understandable, generally written at a lower secondary education level or providing supplemental content to help with comprehension.
Level A is the minimum requirement, addressing basic accessibility needs. Level AA is the recommended target for most web content, ensuring a good level of accessibility for a wide range of users. Level AAA is the highest level, providing the most comprehensive accessibility support but often more difficult to achieve.
Typography is crucial for readability and overall accessibility. WCAG provides guidelines to ensure text is easy to read and understand for all users, including those with visual impairments or cognitive disabilities.
Success Criterion 1.4.4 - Resize Text: Ensure that text can be resized up to 200% without loss of content or functionality. Recommendation: Use relative units (e.g., ems, rems) for font sizes to allow for better scalability.
Success Criterion 1.4.3 - Contrast (Minimum): Text and images of text should have a contrast ratio of at least 4.5:1. For large text (18pt or 14pt bold), the contrast ratio should be at least 3:1. Success Criterion 1.4.6 - Contrast (Enhanced): For AAA compliance, the contrast ratio should be at least 7:1 for normal text and 4.5:1 for large text.
Legibility: Use clear, simple, and legible fonts. Avoid overly decorative fonts that can be difficult to read. Consistency: Maintain consistent font usage throughout the site to provide a familiar reading experience.
Success Criterion 1.4.12 - Text Spacing: Ensure that users can override text spacing to at least 1.5 times the font size for line height, 0.12 times the font size for letter spacing, and 0.16 times the font size for word spacing.
Recommendation: Left-align text for languages that read left to right to improve readability. Avoid fully justified text as it can create irregular spacing between words and letters.
Buttons are interactive elements that must be designed to be accessible and operable by all users.
Success Criterion 2.1.1 - Keyboard: Ensure all functionality is operable through a keyboard interface. Focus Indicators: Provide visible focus indicators for buttons when they are in focus.
Success Criterion 2.4.6 - Headings and Labels: Use clear and concise labels for buttons to describe their purpose. Success Criterion 3.3.2 - Labels or Instructions: Provide instructions to help users understand the purpose and usage of buttons.
Success Criterion 1.4.3 - Contrast (Minimum): Ensure the button text has sufficient contrast against the button background.
Recommendation: Ensure buttons are large enough to be easily activated. A minimum touch target size of 44x44 pixels is recommended for touch interfaces.
Success Criterion 4.1.2 - Name, Role, Value: Ensure buttons have programmatically determinable states (e.g., pressed, disabled) and provide feedback on interaction (e.g., visual changes on hover and click).
Input fields are critical for forms and user interactions, requiring special attention to ensure accessibility.
Success Criterion 3.3.2 - Labels or Instructions: Provide clear and descriptive labels for all input fields. Success Criterion 2.4.6 - Headings and Labels: Ensure labels are associated with their respective input fields programmatically (e.g., using the label element in HTML).
Success Criterion 2.1.1 - Keyboard: All input fields must be accessible via keyboard. Focus Indicators: Ensure input fields have a visible focus indicator.
Success Criterion 3.3.1 - Error Identification: If an input error is detected, the error is identified and described to the user in text. Success Criterion 3.3.3 - Error Suggestion: If suggestions for correction are known, provide these suggestions to the user.
Success Criterion 1.4.11 - Non-text Contrast: Input field boundaries must have a contrast ratio of at least 3:1 against adjacent colors.
Success Criterion 1.3.5 - Identify Input Purpose: Use HTML5 input types and attributes to identify the purpose of input fields (e.g., email, tel, autocomplete). Success Criterion 3.3.5 - Help: Provide context-sensitive help and instructions for complex inputs.
Icons are often used for navigation and functionality, and must be accessible to all users, including those using screen readers.
Success Criterion 1.1.1 - Non-text Content: Provide alternative text for icons to describe their function. This can be achieved using aria-label, aria-labelledby, or the alt attribute if the icon is an image.
Success Criterion 2.1.1 - Keyboard: Icons that are interactive must be operable using a keyboard.
Success Criterion 2.4.7 - Focus Visible: Ensure that icons receive a visible focus indicator when navigated to via keyboard.
Success Criterion 1.4.11 - Non-text Contrast: Icons should have a contrast ratio of at least 3:1 against adjacent colors to be easily distinguishable.
Pagination controls are essential for navigation through multi-page content.
Success Criterion 2.1.1 - Keyboard: Ensure all pagination links and controls are navigable and operable using a keyboard.
Success Criterion 2.4.7 - Focus Visible: Provide a visible focus indicator for pagination links when focused.
Success Criterion 2.4.4 - Link Purpose (In Context): Use clear and descriptive text for pagination controls. For example, use “Next Page” and “Previous Page” instead of ambiguous terms.
Success Criterion 4.1.2 - Name, Role, Value: Ensure the current page in pagination is indicated and conveyed programmatically using aria-current="page".
Images are used extensively in web content and must be accessible to all users, including those using screen readers.
Success Criterion 1.1.1 - Non-text Content: Provide meaningful alternative text (alt attribute) for images. If the image is decorative, use an empty alt attribute (alt="").
Success Criterion 1.1.1 - Non-text Content: For complex images, charts, or diagrams, provide a detailed description using a longdesc attribute or linking to a detailed description.
Success Criterion 1.4.3 - Contrast (Minimum): Ensure text in images has sufficient contrast.
Checkboxes and radio buttons are interactive elements that must be accessible to all users.
Success Criterion 1.3.1 - Info and Relationships: Ensure each checkbox and radio button has a clear and associated label.
Success Criterion 2.1.1 - Keyboard: Ensure checkboxes and radio buttons are operable using a keyboard.
Success Criterion 2.4.7 - Focus Visible: Provide visible focus indicators for checkboxes and radio buttons.
Success Criterion 1.3.1 - Info and Relationships: Group related checkboxes and radio buttons using fieldsets and legends for better context.
Rating controls allow users to provide ratings or feedback and must be accessible.
Success Criterion 2.1.1 - Keyboard: Ensure rating controls are operable via keyboard.
Success Criterion 2.4.6 - Headings and Labels: Provide clear labels and instructions for rating controls.
Success Criterion 4.1.2 - Name, Role, Value: Use appropriate ARIA roles and properties, such as role="slider" and aria-valuetext, to convey the rating value.
Dropdowns are commonly used for form inputs and selections.
Success Criterion 2.1.1 - Keyboard: Ensure dropdowns are navigable and operable via keyboard.
Success Criterion 2.4.7 - Focus Visible: Provide visible focus indicators for dropdowns.
Success Criterion 3.3.2 - Labels or Instructions: Provide clear labels and instructions for dropdown menus.
Success Criterion 4.1.2 - Name, Role, Value: Ensure the dropdown states (expanded/collapsed) and selected values are conveyed programmatically using ARIA properties like aria-expanded and aria-selected.
Progress bars indicate the progress of a task and must be accessible to users, including those using screen readers.
Success Criterion 4.1.2 - Name, Role, Value: Use role="progressbar" and include aria-valuenow, aria-valuemin, and aria-valuemax to convey progress information.
Recommendation: Ensure progress bars do not require keyboard interaction but provide updates programmatically.
Success Criterion 1.4.3 - Contrast (Minimum): Ensure progress bars have sufficient contrast and are visually distinguishable.