Improve Accessibility to Meet WCAG Standards – Checklist

[Faryad8]

To ensure Intro.js provides an accessible experience aligned with WCAG guidelines, we need to implement and verify the following checklists.

This issue collects both UI/UX-focused and Development-focused accessibility requirements to ensure all interactive elements in Intro.js tours are usable by all users, including those relying on screen readers or keyboard navigation.

UI/UX Accessibility Checklist

• Color contrast between text and background is sufficient in both normal and dark modes.
• Buttons (Next, Skip, Done, etc.) are large enough and clearly clickable.
• Instructions are clear, simple, and free of ambiguous terminology.
• Only one central message per step is shown; users should not get distracted by multiple messages.
• Buttons and tour elements display a visible focus style (e.g., outline) when navigated by keyboard (Tab).
• Order of elements in the DOM and their visual presentation is predictable and consistent.
• Close icon (×) is clearly visible and recognizable.
• The tour remains readable and usable on mobile devices without requiring horizontal scrolling.
• Animations are reduced or disabled when the user has the “reduce motion” preference enabled.

Development Accessibility Checklist

• All buttons use <button>, or if <a> is used, they include role="button" and tabindex="0".
• All interactive elements (buttons, bullets) have accessible names via aria-label or readable text.
• All interactive elements can be focused using the Tab key.
• The Tab order is logical and matches the visual flow of the tour.
• Focus automatically moves to the tooltip or first button when a step opens.
• The entire tour can be completed using keyboard-only navigation.
• aria-live or aria-describedby is used to notify screen readers of new content during the tour.
• When the tour ends, focus returns to the element that was focused before the tour started.
• aria-hidden="true" is applied to elements not relevant to the current step.

Why this matters:
Providing a fully accessible experience ensures that Intro.js can be used by everyone, including those who rely on assistive technologies. Meeting these accessibility requirements will make Intro.js compliant with WCAG 2.1 standards, improve usability, and broaden the audience who can benefit from interactive product tours.