Missing semantic differentiation between status and heading

[swashbuck]

fixes #118

• Change plus icon to checkmark once the item has been visited.
• Use visited instead of complete/incomplete

[oliverfoster]

Could I have a rationale for the parentheses please? How does it change the way the screen reader reads?

[swashbuck]

Could I have a rationale for the parentheses please? How does it change the way the screen reader reads?

The company that did our external accessibility testing recommended using parentheses to ensure that there's a pause in the screenreader's reading. Some screenreaders (JAWS maybe?) will sort of skip over commas or semicolons. Periods may be sufficient, though, and we could do some further testing if that's preferred?

[joe-replin]

Could I have a rationale for the parentheses please? How does it change the way the screen reader reads?

Hello, we've tried a few configurations including a semi-colon. Here's the quote from the testing that came back to us.

The addition of the semi-colon to the table of contents heading has inconsistent output with different screen readers. JAWS announces the status as "complete semicolon, [Course Title]", while NVDA announces the semicolon with a slight pause that does not make the semantic distinction as clear.
In addition, the text complete by itself at the beginning of the heading can still make the purpose of the heading misleading without additional context. Consider moving status text to the end of the heading with context as to what the status represents (ex"[Course Title], course completed")

Additionally, the 'status parenthesis' was approved and committed to headings.hbs in core. We were looking to normalize this structure across the individual component items as well.

[oliverfoster]

I mean. I strongly disagree with the whole notion of moving the completion status to the end of the sentence as it dramatically slows down completion checking in a course.

If, for example, I'm navigation with the "H" key, to iterate back and forth through the headers, I now have to wait for each header to read before I can determine the section's completion status, hugely elongating the time required to determine what I have / haven't completed, it's also inverse to the visual appearance of the status bar and title in the course.

It is worth noting that the recommendation to move it to the end isn't supported by the wcag standard, as completion reporting isn't featured in the wcag standard, the recommendation is therefore a personal preference argument. It is worth noting that any unusual UI component will be confusing to a user, but the placement at the start was intended as a tool for quick navigation. There has so far been no competing use-related argument for changing it. I don't understand how it is less confusing at the end of the title than at the beginning but I do understand how it is less useful being there.

Adding an extra pause with parenthesis is mind blowing to me, is that meant to further reduce confusion?

Standardising it is a good idea. If adding parenthesis gives an intended pause, then that's fine, I'm just curious.

[swashbuck]

I know that it was recommended to use parentheses, but it seems that periods pause more consistently across screenreaders. JAWS actually reads out the parentheses, which seems odd since we're just trying to add a pause. What is everybody's opinion on this?

https://www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/

[oliverfoster]

You'd need to test a double period. The content may end with a period, if you're adding another in the template then it'll have two before the status.

Generally speaking, trying to change the intonation of a screen reader is a fools game. As you've already said, they all read differently and some read differently in different browsers and some will read differently in different languages.

[swashbuck]

I've reverted the following changes:

• Switch aria-label to visited status instead of complete/incomplete.
• Move visited status after item title and wrap in parentheses when it exists.

Then, I've added period after the status so that it reads:

[status]. [title]

[oliverfoster]

you need to do the complete/incomplete > visited conversion

[swashbuck]

you need to do the complete/incomplete > visited conversion

Apologies, I misread that chat yesterday. Should be good now.

[joe-allen-89]

Tested with FW v5.20.1, screen reader NVDA in chrome, all seems to be working as expected/described in the comments.

[cahirodoherty-learningpool]

👀

[github-actions]

🎉 This PR is included in version 7.2.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀