Course cards containing 2 links to course (accessibility issue)

[dermuck]

The standard course-cards contain 2 links pointing at the same destination. The first one containing the course image, the second one containing the course title. When using accessibility tools (e.g. screen reader software) both links will be displayed/read out to the user. As the first link only contains an image, there is no useful description the accessibility software can output for this link.

I would propose the following solution: Modify method coursecat_coursebox_content in course_renderer.php, combine course-image and the card-body-div in ONE -tag.

As I'm new to moodle and github, could anyone please point out which way to go? Should I submit a pull request containing my solution or will this have to be discussed and assigned prior to filing a fix? Thanks for any help!

Hi @dermuck ,

The problem with your approach is that there may be times where the body may contain additional links which would result in a situation where you have a link inside a link. An example of this is when you also see a link to the category displayed on the card.

I propose an alternative solution where the image's link be modified in two ways:

1. The link be taken out of the tab order (tabindex="-1") so that it is no longer accessible to keyboard only users.

2. That an aria-hidden="true" attribute be added so that the image's link is no longer read by screen readers.

The result is that the image remains clickable to mouse users, the image is not disruptive to screen and keyboard users, and the course name and any additional links which may appear in the card still work as expected.

Best regards,

Michael

[dermuck]

Hi @michael-milette, thanks you for your answer and sorry for my delay. I did not expect such a quick response and was off for a few days...

We tested the alternative you proposed and this sems to be a very good solution. As some automatic testing tools tend to criticize links without text even when attribute aria-hidden="true" is set, we found out it may help if we additionally set aria-label="$coursename". I'll try to provide a pull-request with a fix for this issue, but as I'm new to GitHub it may take some time to figure out how to manage this. Hope this is okay.

Best regards Markus

[michael-milette]

Hi @dermuck ,

Sounds good. Basically you:

1. Fork the theme in Github to your own account on GitHub.
2. If you plan on submitting more than one pull request, create a new branch from master. I usually name the branch fix- followed by the issue number that it addresses. Example: fix-101.
3. Save the change to your fork of the code.
4. Go to the home page of your fork. There should be an option to create a pull request near the top of the page.
5. complete the form and submit the request. It will automatically end up at the source if all went well.

Let me know if you have any questions. I will be happy to help you out with this.

Best regards,

Michael

[dermuck]

Hi @michael-milette , thank you very much! Were currently perfoming accessibility tests on our new moodle system, so there might be more issues to come. Thanks to your help I should be able to provide fixes for some of this issues on my own. Really appreciate this!

Best regards, Markus

[michael-milette]

Hi @dermuck

I am so grateful for your efforts to help make Trema accessible. Accessible themes are still hard to find today. It is really nice to have a useful alternative available like Trema.

Let me know if you might be interested in meeting together. I would be happy to share some of the CSS fixes that I had to implement in order to address some accessibility issues that are not yet fixed in Trema yet.

You can also check some of the commits that Rodrigo integrated into the Moodle 4.0 version of the theme. He has fixed several accessibility and display issues in Trema for Moodle 4.0 that I reported to him offline.

Looking forward to seeing more of your accessibility fixes.

Best regards,

Michael