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
Steps are represented by
alertdialogelements, 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.
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.