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 <div> and <span>) for interactive elements without roles or labels can confuse screen readers.

• Solution: Use semantic HTML elements (like <button>, <nav>, <header>) 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 <label> 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 (<h1>, <h2>, <h3>, etc.) in a logical order, and avoid skipping levels (e.g., jumping from <h1> to <h3>).

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 <track> 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 <video> elements.

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 (<th> with scope attribute) and captions. Avoid using tables for layout.

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.