Improve the aural interface for tour tips

Created on 22 September 2024, 2 months ago

Problem/Motivation

in the a11y office hour on september 19th 2024 @mgifford, @itmaybejj, and myself discussed also the following issue. Problem is that the layout of the tips makes it sort of cumbersome for screenreader users to get aside the title also the actual tip aka the body field announced. In aural_interface.mp4 you get an idea about the basic problems. per default if the tour is started or you switch to a new tip you get announced the tip title automatically. for the first tip you have auto focus on the next button while from the second tip on the initial focus is on the previous button. if you tab the previous, next and close button are included in the tabindex. the body and the step counter are sort of invisible on the first look. in the video. and the previous and next button are located AFTER the title, close button, body and step counter. therefore an autoannounce doesnt work you have to get to the top of the tip first. that is the reason why i tab to the close button in the video then press VO-left arrow to get the title into the voiceover cursor and i then press VO-a to automatically read the entire tip which is cumbersome and clunky.

Steps to reproduce

start a tour and try to get all the elements on a tip getting announced in a screenreader of your choice

Proposed resolution

@itmaybejj suggested the followingm, he was not sure if it is generated by the tour module or within shepherd but he would change aria-describedby="add_content-description" aria-labelledby="add_content-label" to aria-labelledby="add_content-label add_content-description". that way the title and body would be auto announced. question is how annoying that might be. it would be necessary to get some feedback from actual fulltime screenreader users.

Remaining tasks

User interface changes

API changes

Data model changes

Feature request
Status

Active

Version

2.0

Component

User interface

Created by

🇩🇪Germany rkoller Nürnberg, Germany

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @rkoller
  • 🇩🇪Germany rkoller Nürnberg, Germany
  • 🇩🇪Germany rkoller Nürnberg, Germany
  • 🇺🇸United States smustgrave

    Those values come from shepherd jsut fyi

  • 🇺🇸United States smustgrave

    Try this

  • 🇩🇪Germany rkoller Nürnberg, Germany

    thanks! i've quickly recorded a brief screencast with voiceover and keycastr (see voiceover.mp4). there are two aspects to note:

    1. the announced output for a tip is sort of redundant an confusing orderwise. tip two reads:

    Edit tour Here you can choose what actions to apply to your tour. 2 of 3, web dialog, with 7 items, Previous, button, Edit tour Here you can choose what actions to apply to your tour. 2 of 3

    you cant really distinguish between the title and the body text. maybe adding a brief pause between the two? and the steps "2 of 3" are position wise, without any context, just based on the announced text, hard to comprehend. maybe if everything after previous button would be cut if that is possible. that would tackle the redundancy. but another level of complexity for example in tip 3 of 3 on admin/config/user-interface/tour where you have three headings and after the first two a body text (probably more of an editorial problem and the tour tip should be broken up and improved sticking to the style guide - sticking to the one heading one short body pattern). and one detail that is sort of odd but i always missed to mention is, that the default element in focus on a new tip modal is the previous button. shouldnt that be the next button instead to keep the user in flow?

    2. if you navigate with the arrow key the tour tip is not announced, you only get:

    You are currently on a button, inside of a content information. To click this button, press Control-Option-Space. To exit this group, press Control-Option-Shift-Up Arrow.

    which is sort of odd.

  • 🇺🇸United States smustgrave

    Not gonna lie this feels like it shouldn’t be fixed. We’re removing aria attributes that serves a specific purpose. Now we are trying to add everything into a single attribute which could end up long

  • 🇺🇸United States smustgrave

    Actually am going to push back on this one some. The aria attributes were added for a reason to shepherd. So unless we are saying all of shepherd isn’t compliant not sure what we are doing differently that make it any different.

    If we are doing something to break shepherd accessibility we should address that obviously

    And from what I can tell these aria attributes are being used correctly and definitely do not want to get into the business of redefining accessibility haha

  • 🇺🇸United States smustgrave

    Okay shepherd js has been updated to latest version. This needs to be re-evaluated

  • Status changed to Closed: outdated 12 days ago
Production build 0.71.5 2024