Links made with label do not have discernible text (accessibility WCAG Concern)

[carlicockrell]

Hello,

We love unilabel, and we really want to use it more. However, we are finding that our users who navigate sites with screen readers are having a difficult time with links that we may put in Grid and Carousel, for example.

We are finding that the links often fail the standard of having discernible text, and it may be addressed by using the Tile Title as the aria label? See https://dequeuniversity.com/rules/axe/4.10/link-name?application=AxeChrome for more details on how to fix this.

Thank you for considering our request!

[grabs]

Hi, thank you for bringing this up. In the new version I added aria-label attributes to certain elements. I hope I did that on the right places in the right way. Please let me know.

[carlicockrell]

Thank you so much for the quick reply, Andreas! I'll be testing this soon and will let you know if the results are better. It's wonderful to have someone willing to accept feedback on accessibility - we appreciate your partnership so much!

On Sat, Nov 16, 2024 at 10:23 AM Andreas Grabs @.***> wrote:

Hi, thank you for bringing this up. In the new version I added aria-label attributes to certain elements. I hope I did that on the right places in the right way. Please let me know.

— Reply to this email directly, view it on GitHub https://github.com/grabs/moodle-mod_unilabel/issues/50#issuecomment-2480674586, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZSBJRCRNJIVLFAXEOQAKJT2A55R3AVCNFSM6AAAAABR4A3I5CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIOBQGY3TINJYGY . You are receiving this because you authored the thread.Message ID: @.***>

-- Carli Cockrell Learning Designer

Moodle HQ - moodle.com [image: Moodle - Empowering educators to improve our world]

[carlicockrell]

Hi @grabs ,

We were able to test it, and this is a good start. We were wondering if the Title of the Tile in Grid, for example, could be made a aria-label or aria-labelledby, and then that is what is used in the code to say what the link is. Right now it reads off the URL, and to someone using a screen reader, that doesn't actually help them know what the link is to. I think this guidance will help: https://www.w3.org/TR/WCAG20-TECHS/H33.html

Here's a bit more from an AI related to code and accessibility that analyzed it:

Problem: Screen readers rely on text content to convey the purpose of a link. Without it, the link is essentially invisible to these users.

Solution:

1. Add descriptive text: The most straightforward solution is to add visible text within the tag that describes the link's destination. For example, if the link leads to a course page, you could add text like "View Courses".
2. Use aria-label: If adding visible text isn't feasible due to design constraints, you can use the aria-label attribute to provide a descriptive label that will be read by screen readers. For example: ....
3. Use aria-labelledby: If there's existing text on the page that describes the link, you can use aria-labelledby to associate the link with that text. This is useful when the descriptive text is not directly within the link element.

With the way it was corrected, it is reading off the URL which still isn't enough context to tell the user where that link will take them, and it really should be using the Title as that is the content the person needs to know what the URL is supposed to be taking them to.

Thank you for considering my feedback!

[grabs]

Hi thank you for the reply. Unfortunately I don't really understand all of this. Could you bring some real life examples how it is and how it should be? That would be a great help. Can you recommend a free screen reader (Windows) I can use for testing?

[carlicockrell]

Hi @grabs , I think I have a resource that can actually help you! Have you ever heard of the free Moodle Academy courses about developing plugins with accessibility in mind? You can sign up for free if desired. It is something you can work on as you have time, or you can also just look at the examples in there and get some clarification.

There is also a General Discussion forum in there where you can questions. You'll also see contact information in the block drawer for the developer with Moodle who created the course.

I like to test with Windows Narrator (free and already on Windows devices) or NVDA (also free, but takes some practice to get used to).

[grabs]

Hi, I'm sorry if I didn't express myself very well. Unfortunately, the general examples don't really help me. I need examples explicitly for the places in the plugin that bother you, preferably something like: This is how it currently looks and this is how it should be.

[carlicockrell]

Hi Andreas,

I apologize that I'm also not able to be as much of a help in that area because I'm not a developer, but I do accessibility testing in my day-to-day work. I'm limited in being able to provide exact examples of how it should be done. In addition, our developers are presently very busy, as I'm sure you are, too! One thing I can say is you can take code snippets and run them through AI using Chrome dev tools, or you can also use other AI platforms and ask how you can make the code for the links more accessible. Sometimes that gives the clue that is needed.

Thank you for understanding my skill set, as well. You've been very gracious in wanting to learn more, and I wish I could offer you specific code revision suggestions.

On Thu, Nov 21, 2024 at 2:41 AM Andreas Grabs @.***> wrote:

Hi, I'm sorry if I didn't express myself very well. Unfortunately, the general examples don't really help me. I need examples explicitly for the places in the plugin that bother you, preferably something like: This is how it currently looks and this is how it should be.

— Reply to this email directly, view it on GitHub https://github.com/grabs/moodle-mod_unilabel/issues/50#issuecomment-2490586263, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZSBJREDY2KCV3PO3V47QPT2BWTF7AVCNFSM6AAAAABR4A3I5CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIOJQGU4DMMRWGM . You are receiving this because you authored the thread.Message ID: @.***>

-- Carli Cockrell Learning Designer

Moodle HQ - moodle.com [image: Moodle - Empowering educators to improve our world]