Some icons lack mouseovers

AI-generated summary

The discussion focuses on the lack of mouseover text for certain icons in the Discourse interface, highlighting usability and accessibility concerns. jidanni points out that icons like the arrow, cog wheel, and bell with an exclamation mark lack helpful tooltips, which could confuse users, especially those unfamiliar with the interface or relying on screen readers. Lilly supports this, suggesting clear labels like “reply options” or “more posting options.” twofoursixeight emphasizes that mouseovers aid accessibility, particularly for visually impaired users. jidanni argues for an automated check before releases to ensure all icons have mouseovers, noting that even if clicking reveals functionality, the absence of a tooltip is a developer oversight. jidanni shares an example where the bell icon’s function became clear only after clicking, but a mouseover like “Watching - click for details” would improve clarity. anon65426961 adds that some users might misinterpret the icon as an emergency alarm, underscoring the need for clear labeling. denvergeeks clarifies that this feature is known as a tooltip or link title. anon65426961 suggests the missing mouseovers are likely an oversight and easy to fix in future updates.

Examining the mouseovers here,


we find each icon happily has a mouseover, like Quote whole post you see here.

Almost each item.

For instance this curious arrow lacks a mouseover.

Nor does the cog wheel.

Nor does the site logo.

Sure, you might say anybody with a Internet driver’s licence should know what the cog wheel stands for. And yes I do. But, believe it or not, some people aren’t as smart as me. So a mouseover wouldn’t hurt.

And no, I admit I don’t know for sure what the arrow will do. You never know these days. So do add a mouseover.

3 Likes

you are not wrong IMO. the arrow should have a mouseover that says something like “reply options” and the cog should be “more posting options” or something. although both of these buttons pop up more options when clicked, they should still have mouseover descriptions.

3 Likes

Mouseovers can also be used to help the blind, since images with mouseovers will be read to the user, meaning more can be understood about the topic.

3 Likes

In fact e.g., html-tidy always reminds users when if finds images without ALT attributes.

So as a standard step before each Discourse release, a mouseover checker should be automatically run.

Even one item that lacks a mouseover should bar the release.

1 Like

Here we see two icons.


On the left, the arrow has a mousover explanation.
But on the right the mysterious bell with the “!” in it doesn’t.

The HTML is
<svg class="fa d-icon d-icon-d-watching svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#discourse-bell-exclamation"></use></svg>
I recommend there be a regular automatic check to see that all icons have mouseover explanations.

Seen on https://community.bitwarden.com/ and many sites including meta.

Yes, bell has something to do with notification. And “!” probably means urgent or something. Or from the SVG name we see it has something to do with watching.

Wait!
I clicked it because I wanted to unwatch the thread and maybe this is what to click, I thought.

Now I see


which makes it super clear.

However, you still 100% need a mouseover.

The mousover can say “Watching - click for details”.

No, no mouseover doesn’t mean “click me to see what happens.”

It means “the developers forgot the mouseover.”

Yes, even if clicking it gives the user the grand prize.

But s/he doesn’t know that before they click it.

2 Likes

That is probably wise, although not everyone has mice.

Could be someone thinks it’s an emergency alarm bell and will never click unless there is a mouse-over explanation.

The mouse over works for the alert setting link at the end of a thread, and the explanation for what setting this is at is also posted so it can be read without a mouse.

Yes, someone might think it is to “immediately report abuse” and not want to click to find out more.

And indeed, at the bottom of a thread there is the icon again with full explanation.

So perhaps the designers assume people’s eyes will first visit the bottom, then remember what the symbol means as their eyes drift back up or something.

For further reference this is also called a Tool Tip or a Link Title

1 Like

Most likely you were correct to say it may have just been an oversight to write in the mouseover info display. Seems like that would probably be easy to correct if it can just be written in to new version.

The scroll bar on the side seems to only be there for desktop/tablet view.

A bell icon usually does mean alert setting, not like a flag or exclamation mark to report something to a boss.