Common Accessibility issues**
1. Missing or Inappropriate alt Text
• Issue: Images without descriptive alt text can create problems for users relying on screen readers.
• Solution: Add meaningful alt text to images. Use empty alt attributes (alt="") for decorative images that do not provide important information.
2. Poor Color Contrast
• Issue: Low contrast between text and background can make content difficult to read, especially for visually impaired users.
• Solution: Ensure a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (WCAG 2.1 standards). Use contrast-checking tools.
3. Missing or Incorrect Keyboard Navigation
• Issue: Users who rely on keyboards can’t navigate a website if interactive elements (links, buttons, forms) are not accessible via keyboard.
• Solution: Ensure that all interactive elements are keyboard-navigable using Tab, Enter, Space, and arrow keys.
4. Lack of Focus Indicators
• Issue: Without visible focus indicators, keyboard users may not know where they are on the page.
• Solution: Provide clear focus styles (e.g., borders or background color changes) for interactive elements when they are in focus.
5. Non-semantic HTML (Improper Use of ARIA)
• Issue: Using non-semantic HTML elements (like
) for interactive elements without roles or labels can confuse screen readers.• Solution: Use semantic HTML elements (like , , ) where possible. If using ARIA roles, use them appropriately to ensure compatibility.
6. Missing Form Labels
• Issue: Forms without associated labels make it difficult for screen readers to convey what information is required.
• Solution: Use elements for all form fields, and associate them with inputs using the for attribute. For complex forms, use ARIA attributes like aria-label or aria-labelledby.
7. Empty Links or Buttons
• Issue: Links or buttons without visible text or proper labels can confuse screen readers.
• Solution: Ensure that every interactive element has a meaningful label or aria-label.
8. Improper Heading Structure
• Issue: Skipping heading levels or using headings out of order can make it difficult for screen readers to navigate content.
• Solution: Use headings (
, , , etc.) in a logical order, and avoid skipping levels (e.g., jumping from to ).
9. Missing or Incorrect aria Attributes
, etc.) in a logical order, and avoid skipping levels (e.g., jumping from to ).
9. Missing or Incorrect aria Attributes
).
9. Missing or Incorrect aria Attributes
• Issue: Using ARIA attributes incorrectly can cause confusion for screen reader users.
• Solution: Use ARIA attributes (like aria-labelledby, aria-hidden, aria-live) as intended, and avoid overuse if native HTML elements can achieve the same purpose.
10. Dynamic Content Without Alerts
• Issue: Screen readers may not be aware of dynamic changes (e.g., modal pop-ups, form validation errors, AJAX updates).
• Solution: Use ARIA live regions (aria-live, role="alert") to inform screen readers of dynamic changes.
11. Non-descriptive Link Text
• Issue: Links with generic text like “Click here” or “Read more” don’t provide context for screen readers.
• Solution: Use descriptive link text that clearly indicates the destination or action, like “Read more about accessibility guidelines.”
12. No Skip Navigation Link
• Issue: Users who rely on keyboards may have to tab through many links before reaching the main content.
• Solution: Provide a “Skip to main content” link that allows users to bypass repetitive navigation.
13. Video/Audio Without Captions or Transcripts
• Issue: Videos and audio content without captions or transcripts are inaccessible to users with hearing impairments.
• Solution: Provide captions for videos and transcripts for audio content. Use elements for video subtitles or closed captions.
14. Automatic Media Playback
• Issue: Automatically playing audio or video can be disruptive, especially for users with cognitive impairments or screen reader users.
• Solution: Disable auto-play by default, or provide a clear option to stop/pause media. Use controls for
15. Improper Use of Tables
• Issue: Using tables for layout purposes can be confusing for screen readers, and improperly structured data tables can make information difficult to navigate.
• Solution: Use tables only for tabular data and ensure they have proper headers (
16. Flashing Content
• Issue: Flashing or rapidly changing content can cause seizures in users with photosensitive epilepsy.
• Solution: Avoid flashing content or ensure it follows the WCAG guidelines (flashing should not exceed 3 times per second).
17. Content That Requires a Mouse
• Issue: Interactive elements that rely on mouse actions, like hover menus, may not be accessible to keyboard-only users.
• Solution: Ensure that all interactions can be performed using keyboard controls.
18. PDF Accessibility Issues
• Issue: PDFs without proper tagging, structure, or alt text for images can be difficult for screen readers.
• Solution: Use tools like Adobe Acrobat Pro to check PDF accessibility, add tags, and provide text descriptions for images.
19. Non-responsive Design
• Issue: Fixed layouts that don’t adapt to different screen sizes can be problematic for mobile users or those with zoom requirements.
• Solution: Use responsive design techniques like CSS Flexbox/Grid and media queries to ensure content adapts to different screen sizes.
20. Inconsistent Focus Order
• Issue: An illogical or unpredictable focus order can disorient users relying on keyboard navigation.
• Solution: Ensure a logical and predictable tab order, and use the tabindex attribute when necessary to control focus flow.
Google Lighthouse to the rescue!!!!!
Google Lighthouse evaluates a webpage’s performance based on five main categories: Performance, Accessibility, Best Practices, SEO, and Progressive Web App (PWA). Below are the key parameters for each category:
1. Performance
• First Contentful Paint (FCP): Measures how long it takes for the first piece of content (text, image, etc.) to be visible.
• Largest Contentful Paint (LCP): The time it takes for the largest piece of content to load, crucial for user-perceived load speed.
• Speed Index: Shows how quickly the content is visually displayed during page load.
• Time to Interactive (TTI): Measures how long the page takes to fully interact.
• Total Blocking Time (TBT): Indicates the time between FCP and TTI where the main thread is blocked, preventing interaction.
• Cumulative Layout Shift (CLS): This measures the page's visual stability and indicates any unexpected layout shifts.
2. Accessibility
• Color Contrast: Checks if the text has sufficient contrast for readability.
• Alt Text: Ensures images have descriptive alt attributes for accessibility.
• ARIA Attributes: Verifies if ARIA attributes are correct and used appropriately for assistive technologies.
• Form Labels: Checks if form fields have appropriate labels for accessibility.
• Tab Order: Evaluate the logical navigation order for keyboard users.
3. Best Practices
• HTTPS Usage: Verifies if all resources are loaded securely over HTTPS.
• JavaScript Errors: Checks for any errors in JavaScript execution.
• Image Aspect Ratio: Ensures images have correct aspect ratios.
• Deprecation Usage: Flags deprecated APIs or web features.
4. SEO
• Meta Descriptions: Ensures every page has a unique and adequate meta description.
• Links Accessibility: Checks for the presence of link text that’s descriptive.
• Crawlable Pages: Ensures all pages are easily crawlable by search engines.
• Document Title: Verifies the presence of a descriptive and unique title tag.
• HTTP Status Code: Ensures that HTTP status codes are appropriate for the content (e.g., 200 for successful load).
5. Progressive Web App (PWA)
• Service Workers: Ensures service workers are registered for offline functionality.
• Installable: Checks if the app is installable as a PWA (manifest presence and correct settings).
• Fast Load: Evaluate how fast the app loads under a 3G network.
• Offline Access: Ensures the app works offline or in low connectivity situations.
• Responsive Design: Confirms that the app adjusts to various screen sizes and orientations.
Additional Settings for Custom Audits
• Simulated vs. Real-World Throttling: You can choose to simulate slow networks or use real-world data.
• Device Emulation: Mobile or desktop simulation options.
• Audit Options: Customize the audits (e.g., exclude certain metrics if needed).
These parameters allow for comprehensive analysis and are typically configurable based on your specific needs in Lighthouse.