Add visually hidden info to learn more buttons

[EmmaDawsonDev]

What would you like to share?

On the profile pages with milestones, there are several buttons/links which say learn more. This is not very helpful to screen reader users. We could add some visually hidden text so that screen reader users get more context about what they will learn more about when clicking on the button.

Additional information

No response

[github-actions[bot]]

It's great having you contribute to this project

Welcome to the community :nerd_face:

If you would like to continue contributing to open source and would like to do it with an awesome inclusive community, you should join our Discord chat and our GitHub Organisation - we help and encourage each other to contribute to open source little and often 🤓 . Any questions let us know.

[87prashant]

I think possible the solution could be:

• Adding extra brief text with lean more e.g. Learn more (visit Youtube channel/Github profile)

@emmalearnscode could you suggest other effective ways to achieve this.

[msabirz]

There can be couple of things:

1. Add small tooltip popover for short info
2. Small one liner beside the button element.

[Yoshemith]

Hi everyone 🙋🏻‍♂️, I'm a newcomer trying to contribute in this OSS project and I was thinking if i can work on this issue. I'm planning on adding a small tooltip popover just as @msabirz suggested with the extra info as @87prashant mentioned.

[87prashant]

Very nice, go for it👏

[EmmaDawsonDev]

Unfortunately a tooltip pop up will only make this more inaccessible.

[msabirz]

Another way is we can have small 'i' icon which will have toggle functionality and on click it will show small desp.

[Yoshemith]

Like @msabirz mentioned, that could be another way to do it. What I was doing was something like this, look:

Basically a small one liner describing where we're going (like on hover). But another solution would be something like this:

Or wouldn't it be better a "Check it out here" button instead of "Learn more"?

What do you think @emmalearnscode?

[EmmaDawsonDev]

Ideally the buttons will say where the link leads as in the second image. But I’m not sure if we have something in the data that could be used already as the text.

‘Check it out here’ is no more useful than ‘learn more’. Imagine you cannot see the page and are cycling through a list of links. 5 links all titled ‘check it out here’ mean nothing without the visual context clues, just as ‘learn more’ needs visual context to be understood.

[Yoshemith]

Ohh, I finally see what you mean. Reading some documentation of Prime React it seems that right now there is no accessibility support for the buttons. But I was thinking in using just a normal button and using the attribute aria-label for accessibility and work from there.

Regarding the text, I didn't find something in the data to use it as the displayed text. What I did was, basically doing something similar as the GetIcons.js component passing the icon name and with a switch function returned the required text, e.g. if the icon is github the displayed text would be "Learn more visiting the Github profile", etc.

Let me know what you think @emmalearnscode.

[Yoshemith]

So far, what I've been doing is creating a normal button (no libraries) and making the UI of the button as similar as the prior button (primereact/button). Check it out:

How it looks like:

I'd like to know if I'm on the right track or if you have more suggestions @emmalearnscode

[EmmaDawsonDev]

So far, what I've been doing is creating a normal button (no libraries) and making the UI of the button as similar as the prior button (primereact/button). Check it out:

How it looks like:

I'd like to know if I'm on the right track or if you have more suggestions @emmalearnscode

It’s an interesting idea but I think we will run into trouble with things like dollar, globe, book etc as that won’t make sense.

We are considering moving away from prime react although I think it should be possible to add an aria label. we should also be using links not buttons.

This is a tricky little problem, let’s keep thinking and discussing

[Yoshemith]

You're right, it is possible to use aria-label attribute of the button just as it was before (my bad, didn't try that til' now). Now, I'm thinking of using a default text for things like dollar, globe, book, etc. The default text could be "Learn more on this website". It's just a thought, I'd like to know what you think.

[eddiejaoude]

hey everyone, apologies for my slow reply. The new version of the LinkFree project is out now using NextJS and TailWind

Now the whole block is clickable, not sure if this is better? I will close this issue and we can create a new one that is more relevant to the latest app version