Accessibility Issues in Immersive Reader

Accessibility Issues in Immersive Reader

Summary

The Immersive Reader iframe contains accessibility violations that prevent compliance with WCAG 2.1 accessibility standards. These issues are detected by automated accessibility testing tools (e.g., Lighthouse) and impact users who rely on assistive technologies.

Accessibility Issues Identified

When running accessibility audits (Lighthouse) on pages that launch Immersive Reader, the following violations are reported within the Immersive Reader iframe:

1. Missing ARIA attributes: [aria-*] attributes do not match their roles

   • Elements within the Immersive Reader UI lack proper ARIA attributes or have mismatched ARIA roles

2. Missing accessible names: Button, link, and menuitem elements do not have accessible names

   • Interactive elements within the Immersive Reader interface lack proper accessible labels/names for screen readers

3. Insufficient touch targets: Touch targets do not have sufficient size or spacing

   • Interactive elements do not meet the minimum 44x44px touch target size requirement for mobile accessibility

Expected Behavior

When running accessibility audits using tools like Lighthouse, there should be no accessibility errors reported for the Immersive Reader iframe content. All interactive elements should:

• Have proper ARIA attributes that match their roles
• Include accessible names/labels for screen readers
• Meet minimum touch target size requirements (44x44px)

Actual Behavior

Accessibility audits report multiple violations within the Immersive Reader iframe, indicating non-compliance with WCAG 2.1 accessibility standards.

Steps to Reproduce

1. Integrate Immersive Reader SDK (v1.4.0) into a web application
2. Launch Immersive Reader using ImmersiveReader.launchAsync()
3. Run an accessibility audit (e.g., Chrome DevTools Lighthouse) while the Immersive Reader iframe is open
4. Review the accessibility audit results

Environment

• SDK Version: @microsoft/immersive-reader-sdk@1.4.0
• Browser: Chrome/Edge (latest versions)
• Testing Tool: Lighthouse accessibility audit
• Platform: Web application

Impact

These accessibility issues:

• Prevent organizations from achieving full WCAG 2.1 compliance
• Create barriers for users who rely on assistive technologies (screen readers, keyboard navigation, etc.)
• Impact the user experience for users with disabilities

Additional Context

• The Immersive Reader iframe is hosted and controlled by Microsoft's service
• These issues cannot be resolved through SDK configuration options
• The current SDK options do not provide controls for accessibility attributes within the iframe
• This affects all implementations using Immersive Reader, not just our specific use case

Request

We request that Microsoft address these accessibility issues in the Immersive Reader service to ensure WCAG 2.1 compliance. Specifically:

1. Add proper ARIA attributes to all interactive elements
2. Ensure all buttons, links, and menu items have accessible names
3. Ensure all touch targets meet minimum size requirements (44x44px)

Related Documentation

• Immersive Reader JavaScript SDK reference
• WCAG 2.1 Guidelines

---

Note: We understand that Immersive Reader is designed to improve accessibility for reading. However, the interface itself must also be accessible to ensure it can be used by all users, including those who rely on assistive technologies.

No repository file or test is identified, and the report says the violations occur in Microsoft's hosted Immersive Reader iframe. Reproduce the issue with @microsoft/immersive-reader-sdk@1.4.0 and a Lighthouse audit, then verify whether the service addresses the ARIA, accessible-name, and touch-target findings; done means the iframe reports no listed accessibility violations.