Confusing UX with the tutorial and screen readers

[srallen]

Expected behavior

Current behavior

Please include any error messages from the browser console and/or screenshots

Original report:
https://www.zooniverse.org/projects/anaelisa24/sounds-of-new-york-city-sonyc/talk/1795/1143269?comment=1867713

https://www.zooniverse.org/talk/18/1145904

Hi, I'm totally blind and thought I'd try your project. I'm using Windows 10 and the NVDA screen reader. First I tried Firefox, that was a disaster, it froze my screen reader when I pressed the done and talk button, so I had to bring up Narrator and close Firefox completely. Also many things were hidden. I then tried Chrome and discovered I was missing important things with Firefox like the near and far questions entirely. They just weren't showing. So with Chrome I can play a sound, read through the choices, and pick one and click "Identify" and go on to the next sound I heard in the recording. After I've identified all the sounds I can press done and listen to another sound. But there's one problem. There's something on the page that seems to do absolutely nothing, and that is the 7 radio buttons for steps 1 through 7. I can't even guess what these are for because when I select #2 nothing changes. Also there is a button labelled task, and one labelled tutorial. These buttons also seem to do nothing. I thought when I pressed the tutorial button I would find a tutorial about how the site works, and if there's anything I need to do that I am missing, but I found no such thing. The one time I pressed done and talk and went to the talk page I thought that was what you were supposed to do each time you were done with a sound. One more thing. When using Chrome I identified a reverse beep, and it said something about the sound graph and how a reverse beep should look, and of course I can't see that, but it was obviously a truck backing up that I heard. But the curious thing was that there were 2 radio buttons for the reverse beep with no explanation or alt-text explaining what those were supposed to be. They just said 1 and 2. I assume there are supposed to be 2 kinds of reverse beeps and I'm supposed to identify which type it is, but I had no idea what to do there so I just left the 1 radio button checked.
Thanks.

Steps to replicate

Additional information

• Operating system:
  Windows 10
• Browser:
  Firefox and Chrome with NVDA (https://www.nvaccess.org/)

[eatyourgreens]

There’s a few different things going on here.

• NVDA + Firefox misses a bunch of stuff, including the near and far questions for each sound.
• Task and Tutorial aren’t marked up as tabs.
• changes to the task area content aren’t announced.
• radio buttons for the tutorial slides are confusing when read out of context.
• radio buttons for the example images, for each sound, are confusing.

[eatyourgreens]

The tutorial is marked up as a form, which will probably cause problems. In forms mode, a screen reader will ignore anything that isn't a form input or control.

[eatyourgreens]

The tutorial dialog doesn't have role="dialog", which seems to be a bug in modal-form as the role is specified here: https://github.com/zooniverse/modal-form/blob/b6e0e8e527f4c578cd42cc6961a0c18b5f776b61/dialog.js#L89-L96

[srallen]

We could move the tutorial from the new classifier to the react-components package and publish it. Then switch to that one here to the new one? This would also necessitate refactoring the http requests into a redux store here too I think.

Whichever is less of a headache/less time is probably the best option.

[eatyourgreens]

I think the new one still needs the fixes that are implemented here, but that sounds good.

Would that also mean getting the tutorial tab to work in PFE? I notice that the Task button does nothing in PFE (and the Tutorial button appears to do nothing) because PFE doesn't have the tutorial in a tab panel.

EDIT: sorry, the fixes that are implemented in #5535. I thought I was commenting on that PR.

[srallen]

Ah, I didn't realize the new tutorial has the same issue. Swapping the tutorial was what I saw as the other option if it was easier to fix it there and/or it was already working as expected.

[eatyourgreens]

#5535 is just some small markup changes to make the radio button labels more explicit, and to try and force the browser to announce when the tutorial content changes. Plus a bunch of linting.

Working on it, I realised we've essentially built a tabbed component which is presented as a tab panel inside another tabbed component.

[eatyourgreens]

I just came across this, from the same volunteer.

The step 1 through 4 radio buttons are always on the page whether I click tutorial or not, but when I click tutorial they seem to duplicate themselves down the page at least 3 times.

https://www.zooniverse.org/projects/vivitang/earthquake-detective/talk/1903/1140957?comment=1870674&page=1

I wonder if we're rendering duplicate tutorial controls for each step? Interesting that stuff is hidden visually but not hidden from the DOM.

[srallen]

Yeah, I think it's using a CSS technique for slide shows, which renders all the slides in the DOM and uses CSS to display the 'active' slide. I'll add the tutorial from the new classifier to the storybook so we can start testing it for these issues. I'm still of half a mind to focus on fixes there and just swap out the PFE tutorial for the new one so we have one less thing depending on modal-form.

[eatyourgreens]

Looking at the code, there's only ever one slide step rendered in the DOM, which I think is the same behaviour as the new tutorial.

Panoptes-Front-End/app/classifier/tutorial.jsx

Lines 259 to 320 in 3af6e6a

	return (
	<div
	ref={(component) => { this.div = component; }}
	className={className}
	lang={this.props.locale}
	style={tutorialStyle}
	>
	<MediaCard className="tutorial-step" src={mediaCardSrc}>
	<Markdown>{this.props.translation.steps[this.state.stepIndex].content}</Markdown>
	<hr />
	</MediaCard>
	<p style={{ textAlign: 'center' }}>
	{(this.state.stepIndex === this.props.tutorial.steps.length - 1) ?
	<button type="submit" className="major-button">
	<Translate content="classifier.letsGo" />
	</button> :
	<button type="button" className="standard-button" onClick={this.goNext.bind(this, totalSteps)}>
	<Translate content="classifier.continue" />
	</button>}
	</p>
	{totalSteps > 1 &&
	<div className="step-through-controls" style={{ position: 'relative' }}>
	<button
	type="button"
	className="step-through-direction step-through-previous"
	aria-label="Previous step"
	title="Previous"
	disabled={this.state.stepIndex === 0}
	onClick={this.goPrevious.bind(this, totalSteps)}
	>
	◀
	</button>
	<span className="step-through-pips">
	{allSteps.map(thisStep =>
	<label key={thisStep} className="step-through-pip" title={`Step ${thisStep + 1}`}>
	<input
	type="radio"
	className="step-through-pip-input"
	aria-label={`Step ${thisStep + 1} of ${totalSteps}`}
	checked={thisStep === this.state.stepIndex}
	autoFocus={thisStep === this.state.stepIndex}
	onChange={this.goTo.bind(this, totalSteps, thisStep)}
	/>
	<span className="step-through-pip-number">{thisStep + 1}</span>
	</label>
	)}
	</span>
	<button
	type="button"
	className="step-through-direction step-through-next"
	aria-label="Next step" title="Next"
	disabled={this.state.stepIndex === totalSteps - 1}
	onClick={this.goNext.bind(this, totalSteps)}
	>
	▶
	</button>
	</div>}
	</div>
	);

[eatyourgreens]

I've opened #5541 for the specific problem of navigating the tutorial. From what I remember, the new tutorial uses exactly the same setup: radio buttons beneath the tutorial to select the current step.

[eatyourgreens]

@srallen if you have a chance to look at the changes to the tutorial in #5535 that would be great. I think the PFE tutorial now behaves more like the new tutorial and some of the changes I've made there will need to be copied across to the new classifier.

[eatyourgreens]

Working on the tutorial again today, I realised that the mini-course uses almost exactly the same code so will have similar access issues.

[srallen]

Sorry I'm not gonna have time to look at this today.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

Closed by probot-stale due to a lack of recent activity. Please feel free to re-open if you wish to take on this change.