Accessibility review of Tour module, and some ideas for improvements.

Tour button in toolbar:

- "tour" label is kind-of informative, but could be better.
- ... an aria-describedby? Maybe to associate some help text like "show tips about important features on this page"
- ... indicate a dialog will appear with aria-has-popup="dialog"
- Now press it.
- when it has keyboard focus, activatin the button makes the tooltip appear, but focus is still on hte toolbar button. Sighted keyboard user can see the first tip, but effectively cannot advance to the next tip. Focus will move from tour toolbar button to user acount link. The actual tips are at the end of the document.
- Should move focus to start of dialog.
- For assitive tech, there's no indication that anything has happened. There is an aria-pressed="false", but this DOES NOT CHANGE when pressing it. With screen reader, when you arrive at the button, it says "tour, button, not pressed". Press it, the dialog appears, but focus remoans on the toolbar button, and the screen reader says "button, not pressed". Note, if
- We would expect it to announce a "dialog". Actually it has a dialog role, but it isn't announced because focus hasn't moved there. If you use a mouse when running a screen reader, you can hear the dilaog being announced. Press the toolbar button, then click inside the tooltip. The dialog role will be announced. So this will hopefully be OK if we move the focus when the tour is invoked.

Tip dialogs:

- There's no indication to assistive tech for "what is this tip pointing to?" The tooltip association is purely a visual indication. Not easy to solve this...
- basically, we're looking for the opposite of aria-descibedby. "This dialog describe such-and-such control".
- If a programatic associuation is not possible, then an invisible span could say this, e.g. the tooltip is pointing to the file upload button.
- If we can implement dialog role semantics, then the invisible "describes file upload button" could be at the start of the dialog, and maybe the ting that gets focus when a new tip appears.
- on dismissing dialog, where should focus go?
- return focus to where it was when tour was first invoked?
- or move focus to whatever thing is being described by the current tip? Would need to make it clear for assistive tech. Does the tip always point to a focusable control?
- WOuld expect ESCAPE key to dismiss a dialog. If a sighted keyboard user invokes the tour, they can't get past the first tip, and they can't dismiss it either.

Idea:
- indicate tour milestones in the UI, even when tour is not active. Like, some "what's this?" markers. Clicking one of those would invoke to tour, starting mid-way though, at the relevant tip. Metaphor: sightseeing bus tours in cities sell tickets which are valid for "hop on, hop off" use. This would be an alternative route to access the tour tips, whcih could be a lot easier to access for assistive tech users. (Compare with WCAG 2.0 "multiple ways", which isn't really about this scenario, but the principle still applies somewhat).
- It's only possible to move forward in the tour. Should moving backwards be an option? It would make sense to do this if we allow users to join the tour half-way though.

TODO:
- assess how this works with browser zoom, including mobile. Does it re-flow nicely, and preserve the visual association, with the speech-bubble-stalk in the right place? Go maximum zoom.
- assess how well this works for screen magnifiers
- CONFIRM: does WCAG 2.1 Content on Hover or Focus apply here? Seems it's neither of these things, since it's invoked with an explicit button press, and dismissed with an explicit button
- Compare with tooltip-dialog pattern in W3C WAI-ARIA authoring practices - is this relevant? If so, is there any behaviour we'd need to implement?
- Various forms of balloon help have been around in desktop OS for ages. Review how these work, to see if there are any a11y features that can be implemented in a webpage tour?
- assess whether each improvement needs changes in Drupal code, versus fixes in the upstream Joyride library.
- Add a focus style for the tour tip close button. We'll need that once we have the keyboard accessibility working. Use a square outline like the ones for our other dialogs, per #2863354: Add border to dialog [x] close button for hover and focus states.

Comments

andrewmacpherson created an issue. See original summary.

andrewmacpherson’s picture

I don't know if tour module got much accessibility review before D8.0.0, but there are a lot of ways it could be improved. At the moment it's really only usable by sighted pointer users.

To start with, these are my notes after tinkering with tour module, browser dev tools, and a screen reader. There's a plan in there, but it needs tidying up.

andrewmacpherson’s picture

andrewmacpherson’s picture

Issue summary: View changes

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

andrewmacpherson’s picture

Adding the help-overhaul plan as a parent for this.

I'm wondering if he new help-topics system might be a way to implement the inline "hop-on/hop-off" way of accessing the tour help. These are short bits of help text which can live on multiple help pages.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Gábor Hojtsy’s picture

With #3051766: Deprecate and replace jQuery Joyride (for tours) in and an entirely new tour implementation as a result, which of the listed problems still apply?

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

quietone’s picture

Status: Active » Postponed

This extension is being deprecated, see #3336033: [Meta] Tasks to deprecate Tour module. It will be removed from core and moved to a contrib project, #3376099: [11.x] [Meta] Tasks to remove Tour.

This is now Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.

quietone’s picture

Project: Drupal core » Tour
Version: 11.x-dev » 1.0.x-dev
Component: tour.module » Code