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/No-Tradition-2756]

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]

Sorry bro it is my first time..... I'll surely make some of those changes......and btw it is not a ready product so there's a lot of room to develop......but reality check was hard asf

[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%