♿️(course glimpse) improve global accessibility of a course glimpse

[manuhabitela]

Purpose

Make a course glimpse more understandable when using a screen reader.

Proposal

A few stuff can be done:

• add alt text to meaningful icons
• reorder the DOM
• change the structure with the one <a> wrapping everything

Note: some improvements are already added via #1611 (most notably, the removal of redundant title attributes)

[manuhabitela]

Creating this PR early to talk about one thing that would require some notable changes @jbpenrath @sampaccoud

The fact that each course glimpse is a big <a> wrapping everything is a bit of a problem.

With a screen reader, when navigating in the course glimpse, each thing is announced as a "link". It's not obvious at all that each thing is a link to the course itself, and not a link to the thing it describes.

For example, when hearing "link, organization, [organization name]", we expect to be redirected to the organization, not the course.

And with a mouse, one big anchor wrapping everything also breaks the selection of text, preventing copy/pasting stuff.

Proposals to fix this:

• wrap everything with a classic <div>, then put the <a> only around the course name. But this would mean now only the title is clickable.
• wrap everything with a classic <div>, then re-organize the internal wrappers inside, to have one <a> wrapping both the cover and the title. This would mean we can click most of the view, as usually intended for such blocks.

I wouldn't personally recommend trying to keep the exact same current behavior ("being able to click the whole block wherever to activate the link"), as it would require some dirty JS tricks to make it kind of accessible.

[jbpenrath]

Creating this PR early to talk about one thing that would require some notable changes @jbpenrath @sampaccoud

The fact that each course glimpse is a big <a> wrapping everything is a bit of a problem.

With a screen reader, when navigating in the course glimpse, each thing is announced as a "link". It's not obvious at all that each thing is a link to the course itself, and not a link to the thing it describes.

Hmm.. I believed that screen reader cannot navigate within a course glimpse. From my side I used Voice Over to test it and I cannot navigate within the glimpse by using tab key. So I'm not sure to take your point.

For example, when hearing "link, organization, [organization name]", we expect to be redirected to the organization, not the course.

And with a mouse, one big anchor wrapping everything also breaks the selection of text, preventing copy/pasting stuff.

Proposals to fix this:

• wrap everything with a classic <div>, then put the <a> only around the course name. But this would mean now only the title is clickable.

The click area will be too much reduced, not a fan of this suggestion.

• wrap everything with a classic <div>, then re-organize the internal wrappers inside, to have one <a> wrapping both the cover and the title. This would mean we can click most of the view, as usually intended for such blocks.

Pros: We could add link to Organization or Categories on glimpses
Cons: This change will modify the behavior of the course glimpse that will be something very confusing for our users.

I wouldn't personally recommend trying to keep the exact same current behavior ("being able to click the whole block wherever to activate the link"), as it would require some dirty JS tricks to make it kind of accessible.

Yes use custom JS here is not the right way.
However I wonder if we could not use some css to expand the click area of a link to the whole glimpse.
e.g : Wrap only the course title within a link but use the pseudo-element :before positioned absolutly.

[manuhabitela]

Hmm.. I believed that screen reader cannot navigate within a course glimpse. From my side I used Voice Over to test it and I cannot navigate within the glimpse by using tab key. So I'm not sure to take your point.

With a screen reader, the usual way of navigating in the content is more to use arrow keys than tab keys. Because the tab key, like without a screen reader, only makes focusing "focusable" things possible (links, buttons, inputs, etc.), contrary to the arrow keys that lets you focus any content. So you could check by using the VO key+arrows instead of tab.

However I wonder if we could not use some css to expand the click area of a link to the whole glimpse.
e.g : Wrap only the course title within a link but use the pseudo-element :before positioned absolutly.

Yes, I think we could have an invisible, absolutely positioned a on top of the whole glimpse, that is only clickable (not focusable). And have a a in the h3 for keyboard users. This would be OK for screen readers and we would keep current behavior for mouse users. Didn't talk about it though because this behavior keeps the problem of "not being able to select any text in the glimpse", which I think is kind of a bummer. It's not an RGAA rule to actually have any text selectable, but it's usually a good thing to do to keep it that way. Some people have way less trouble copy/pasting stuff than retyping it.

And this would prevent the bonus of adding links on organization/categories ;)

[manuhabitela]

My proposal to handle the big wrapping <a>:

• replace the wrapping <a> containing everything by a <div>
• have a <a> around the media. This one is unfocusable and hidden from screen readers. It's here only to have a big clickable zone for mouse users
• have a <a> inside the title <h3>. This one is focusable normally.
• when you hover or focus the media or title, we toggle a class on the wrapper to keep the behavior with the card shadow.
• the title anchor has padding/margin trick to make it go outside it's container in order to have a bigger clickable zone.

The result is:

• while the clickable zone obviously is smaller than before, it's still pretty decent
• the organization/code/date text is selectable normally, and we'll be able to add a link on the organization if we want later
• screen reader users have stuff announced in a clearer way

demo-course-glimpse.mp4

What do you think? If you think it's OK I'll reproduce this in the django templates.

[sveetch]

Just to notice than since Bootstrap 5.0 there is the stretched link feature which is somewhat to implement the "link wrapper around container" behavior without to use a link wrapper, but a simple link instead. However it may not work in some context and i don't know about its accessibility.

[manuhabitela]

This should be good for review with the changes made on TS and django template code @jbpenrath 👌

[manuhabitela]

Hey @jbpenrath if you have time to review this today I'd appreciate it :)

[jbpenrath]

Great works 👏