Accessibility Checklist
The following list outlines key Lighthouse Accessibility Recommendations aimed at improving the usability and accessibility of your website. These suggestions cover important areas such as keyboard navigation, screen reader compatibility, and color contrast, ensuring your site is inclusive and accessible to all users, including those with disabilities.
Elements and Labels
Provide Image Alt Text
Ensure that all images have descriptive alt attributes for screen readers.
Ensure Form Elements Have Associated Labels
Every form element (input, textarea, select) must have a label for better accessibility.
Use Descriptive Button Text
Buttons should have clear and descriptive text that explains their action (e.g., "Submit", "Search").
Ensure Links Have Descriptive Text
Links should contain text that clearly describes their destination or action.
Ensure Every iframe Has a Title
<iframe> elements must have a title attribute that describes its content.
Use ARIA Roles and Attributes Correctly
Ensure that ARIA (Accessible Rich Internet Applications) roles, states, and properties are used appropriately and correctly.
Keyboard Navigation and Focus
Ensure All Interactive Elements Are Focusable
Interactive elements (links, buttons, inputs) should be reachable and usable via keyboard navigation.
Maintain Visible Focus Indicators
Ensure that when users navigate through interactive elements, the focus indicator (outline or highlighting) is visible.
Avoid Keyboard Traps
Ensure users can navigate through interactive elements using only the keyboard without becoming stuck in a part of the page.
Ensure a Logical Tab Order
Make sure the tab order of interactive elements follows a logical and expected flow.
Color Contrast and Visual Accessibility
Ensure Sufficient Color Contrast
Text and background colors should have sufficient contrast to be readable by users with visual impairments.
Ensure Text is Resizable
Make sure the text on the page can be resized up to 200% without loss of functionality or readability.
Avoid Small Font Sizes
Font sizes should be legible, especially on smaller devices. Avoid very small text.
Provide Customizable Text Spacing
Ensure users can adjust text spacing without breaking the page layout.
Screen Reader and Assistive Technology Compatibility
Ensure Content is Readable by Screen Readers
All content should be accessible to users who rely on screen readers for navigation and interaction.
Ensure Proper Heading Structure
Headings should be used in a logical order (<h1> to <h6>) to provide a clear content structure for screen readers.
Set a Document Language
Ensure that the document's language is specified using the lang attribute on the <html> tag (e.g., lang="en" for English).
Ensure Role alert is Used for Important Notifications
If there are important status messages or notifications, ensure they are announced to assistive technology users via the role="alert".
ARIA Best Practices
Avoid Misuse of ARIA Roles
Ensure ARIA roles are not misused or applied unnecessarily. Native HTML elements should be preferred over ARIA when possible.
Ensure Accessible Names for ARIA Controls
Interactive elements that use ARIA attributes must have accessible names or labels for assistive technology.
Ensure ARIA Landmarks are Used Properly
Use ARIA landmarks (<header>, <nav>, <main>, <footer>) appropriately to help users understand the structure of the page.
Forms and Input Accessibility
Ensure Forms are Submittable via Keyboard
Make sure all form elements can be filled and submitted using the keyboard.
Provide Input Field Instructions
If input fields require specific formats (e.g., date or phone number), instructions should be provided in a clear and accessible manner.
Use Accessible Error Messaging
Form validation errors should be clearly explained and easy to understand, ensuring that screen readers can announce them.
Media and Animations
Provide Captions for Videos
Ensure that all videos have captions for users who are deaf or hard of hearing.
Provide Text Alternatives for Audio Content
If audio content is provided, ensure there is a text alternative available for users who cannot hear the audio.
Avoid Automatically Playing Audio
Do not play audio automatically when the page loads, as it can interfere with screen readers and other assistive technologies.
Ensure Animations are Accessible
Avoid using animations that may trigger seizures or other physical reactions in users sensitive to motion.
Other Accessibility Best Practices
Avoid accesskey Attributes
Do not use the accesskey attribute, as it can interfere with browser and assistive technology shortcuts.
Ensure Consistent Navigation
Ensure that navigational elements are consistent across different pages to provide a predictable user experience.
Use Landmarks for Easy Navigation
Implement landmarks (like <nav>, <main>, <header>, <footer>) to help screen readers and assistive technologies navigate the page structure.
Allow Sufficient Time for User Interaction
If there are time-limited interactions on the page, ensure users are given enough time to interact or provide a mechanism to extend the time.
Updated about 1 month ago