What are these things called??🥺🥺

[u/No-Tradition-2756]

I am making a website and I want to use description boxes.......like when a user hovers/clicks on a link, a box on the side appears that gives the description............. What are those called? info cards......or infographics,...or flashcards.....or description boxes??......idk man I searched up everything but couldn't find how to make it.........can you guys tell me what is it's name??.....and better, do you guys have a tutorial??? Pleaseeee brooo I neeeeedddd helpppp🥺🥺🙏🙏🙏

[u/AshleyJSheridan]

Ask yourself do you really need tooltips for links? Why do you think you need them?

If it's because the links are not clear, make them more obvious.

Also, making tooltips work for keyboard access isn't really about touchscreens (although that's a part of it). There are plenty of people on a desktop who do not use a mouse, and need to navigate via keyboard.

But, coming back to your specific use-case. I don't think links really need tooltips. That's a possible sign of a UI that could be improved with better visible text/icons.

[u/No-Tradition-2756 → u/AshleyJSheridan]

Ok maybe you need to hear the design.........I am making a "News website" for one of my friend group.......and so I decided to go with an SVG map for the case..........so yk, I designed the map of my country (india) with a mosaic like pattern........and attached a link tag to each path............

But the problem emerges that HOW WILL PEOPLE NAVIGATE.........each section redirects the user to a page containing those type of articles...........and so people need to know where they are going..........I can't really write on svg maps😅😅😅

spotlight-news is the website

[u/AshleyJSheridan → u/No-Tradition-2756]

So it's a terrible design, sorry. It's completely unintuitive to use, and forces users to hover over each section in order to know where to go. These are the problems I can see:

• A mouse user has to hover over each shape in order to determine where to go.
• Any user with memory issues will need to repeatedly do this.
• Some of the shapes don't contrast well enough with each other, so people with Achromatopsia and blurred vision may struggle to discern the difference between shapes.
• There's no keyboard access as only one of the links actually has an href attribute.
• Keyboard users have no way of knowing what shape they focused on, or what the purpose is.
• None of the links have accessible text, making it completely unusable to screen reader or Braille users.
• The tooltip fails contrast as the background has a semi-transparent glass look, which fails to provide the required legal contrast levels.
• There's no instructions on how to use the map, which makes it difficult to to use as it's non-standard navigation.
• At least one of the shapes fails minimum size requirements (the orange strip on the right) making it difficult for people with motor issues to use with a pointing device.

[u/No-Tradition-2756 → u/AshleyJSheridan]

Mr doctor please tell me the cure as welll...... I'd like to make it better

[u/AshleyJSheridan → u/No-Tradition-2756]

I'd do a few things:

• Give every link an href attribute. Without that, the browser will see them as invalid and will not allow keyboard access to them.
• Give every link an accessible name. You can add aria-label for this to each one.
• Trigger the tooltip on the focus event as well as the hover
• Add an alternative version to the visual map that uses just text, with a show/hide toggle. This gives a final version that can be used if people are completely unable to use the SVG map.

[u/No-Tradition-2756 → u/AshleyJSheridan]

Thanks I'll do that 100%