Accessibility improvements

We’ve released a series of accessibility improvements to Userflow.js, which makes it easier to use various Userflow elements in your app with keyboard and screen readers.

Watch the video for a full walkthrough:

List of improvements

• All content is now properly marked with role and aria- attributes.
• Steps are represented by alertdialog elements, which make screen readers announce them when they appear.
• We now auto-focus the first button (or question) in steps for modals, or if previous step also had focus (we keep focus inside the Userflow chrome).
• We trap focus on modal steps. When user Tabs with their keyboard, it’ll cycle around the Userflow buttons and won’t leave the modal.
• We moved toolbar buttons, such as the X-close-icon, last in the tab order.
• When Userflow closes, we automatically revert focus to the element in your app that was previously active.
• Pressing Escape now closes the flow (and reverts focus to your app).
• Accessibility of questions have been improved.
• Checklist and checklist launcher accessibility has been improved. Focus is now moved nicely between launcher and checklist when opened/minimized.

Future improvements

We have several ideas on how to improve accessibility of non-modal speech bubble steps and tooltips. Watch the video above to hear about that!

We always welcome feedback, so if there’s anything accessibility-wise that you’d love to see from Userflow, just reach out to us.