Add icon title for icons

[rugk]

Problem

I always wonder, what these icon are. Or actually, I know most, as I am using traewelling for a while, but I still have no idea what this highscore icon means. (I thought it maybe means that you appear on that shared pages/highscore lists etc.)

Thus, I try hovering it and usually you get a hint (aka title) then. Here you don't get anything.

Solution

I even looked into the source and it's this:

                                           <label class="btn btn-sm btn-outline-mastodon" for="chainPost_check" style="">
                                                <i class="fa-solid fa-list-ol"></i>
                                                <span class="visually-hidden-focusable">
                                                    An den letzten geposteten Checkin anhängen
                                                </span>
                                            </label>                                   

Oh, apparently I am wrong. (Also, why does it have .btn-outline-mastodon – that sounds wrong, too)

Anyway, also for accessibility reasons, this is a good idea. Now that I see the span, I'm still unsure whether this is best practise. Here is how Firefox shows it:

Possibly a little bit duplicated and I am not sure whether the icon will be read properly:

Firefox 122