Google-mail is using option #2. They'll assume the user knows (because of the mouse pointer) that a star is clickable and will toggle the state.

Personally, I'm feeling more for option #1, describing the functionality. I assume that the user knows that "click to mark as ..." means that the star is the opposite before the click. After a click, the users can see again the invitation "click to ..." (the opposite), so feedback is ensured and returning back after an incidentally wrong click is easy.

Option #3 is always possible of course, but I think it's not needed. - Maybe a better place to explain everything is in the "users manual".

BTW, I don't know research results about the % visitors who read all tooltips! And if the design and functionality of a site is intuitive, nobody will complain about the text in a tooltip.If you can't decide after a while, a dice can make the decision: I think it's not very-very important (a tooltip is only assistance, and shouldn't be a condition for use).

DoubleDee
—
2014-01-08T04:26:00Z —
#3

Francky said:

If you can't decide after a while, a dice can make the decision: I think it's not very-very important (a tooltip is only assistance, and shouldn't be a condition for use).

I think you are missing the bigger point...

Not only do I want a website that is intuitive for regular users, I don't want to stymie someone who has a disability.

I thought the TITLE attribute was not only used as a "Tool Tip" but also by screen-readers to announce what an Image or Icon is?

Maybe I am mixing TITLE and ALT up again?! :-/

Regardless, what I want is to make sure that my nifty new "PM Stars" are usable if Images are turned off, or someone is visually impaired, or whatever.

Follow me?

Sincerely,

Debbie

TechnoBear
—
2014-01-09T16:16:37Z —
#4

DoubleDee said:

I thought the TITLE attribute was not only used as a "Tool Tip" but also by screen-readers to announce what an Image or Icon is?

Maybe I am mixing TITLE and ALT up again?! :-/

Yes, I think you are. Alt(ernative) text is what the browser displays if the image is unavailable, and what a screen reader uses in place of an image. http://webaim.org/techniques/alttext/

A screen reader will also read out title text, so you don't want to have the same text in both. To quote from another thread:

Paul_O_B said:

Don't use the same alt and title text in the image as that will annoy screen readers greatly as they read out the same information twice. Also do not include the word picture or imafe in the alt text because screenreaders announce that it is an image before the text is read out so users don;t want to hear "Image", "Image of .....".

I've never been able to figure out what those dumb stars are, especially since it turns out they can have like 8 colours. Or something.

Never rely on title text: not all screen reader setups will read it out (especially, usually if there is both alt and title, only one is read out unless you've changed your settings), but all keyboard and touch users will not have access to title either, due to browsers being dippy-dumb and the W3C members not willing to fix title.

They're also not willing to fix alt, which is broken visually in many browsers. Chrome will not show alt unless it fits within the dimensions of the image; Opera will show something always but cuts off text that overflows outside image dimensions. So far as I can tell, only Firefox/Gecko does it right (allows image to remain an inline element and alt text is never truncated).

I'd say the alt text needs to state the state/meaning of the star. So, marked as important! Not marked as important! etc.

Since the stars are clickable, you can have the title show mouse users what the thing does: while not foolproof, you can make a general assumption that someone using a mouse can probably see something of the stars, and so then hopefully the state reflected by size, colour, outline, whatever. Remember colour-blind dudes. So the title can show the function, and off-screen text or label could offer the non-title variant.<text>Change</state><img alt="not marked as important">

But as a clickable thingie, HTML-wise they're probably a button (something that can run a script when cliked) or possibly a "fake" button (something like a span dressed up like a button). We of course prefer the former, so we don't have to manually add in all the focusable and keyboard and role junk. But anyway you can have a hidden/offscreen label for the star stating the function. A cool idea with this is, like Gmail, you could offer users later the ability to forego icons entirely and use text... meaning you could, with css and a state remembered by javascript and a cookie, swap the text and image.

You might also be able to use a checkbox. These have labels stating what they do/mean, and a state (checked, not checked). There've been some working and fairly accessible attempts to disguise checkboxes and radios as images of other things, while the control itself is still completely clickable and useable. That way you could have[ ] Mark as important

[•] Mark as important

Here, the state of being checked or not is part of the control by default. You know that the second one IS marked as important, and you have a pretty good guess what unchecking it means. Here you don't need text to describe what state you're in, if there are only two options, only the label text (what the control affects).

So that might be an option, maybe an easier one. The technique for adding stars would use something like this http://csscheckbox.com/ (except make sure focus is visually obvious for keyboarders). I've used the CSSninja method (which is very very similar but the image sits on the label) in our ecommerce stuff for "custom" checkboxes and radios. The important thing here is that visually you get what you want, but the browser can take care of allll the other crap for you and it just works like always as a benefit of using a default control (and yeah, these aren't forms but an interface, but nobody will be too confused by checkboxes outside a form if you're in an interface).

DoubleDee
—
2014-01-11T18:19:06Z —
#7

You've said a lot Stomme!

Let me see if I can address your points...

Stomme_poes said:

I've never been able to figure out what those dumb stars are, especially since it turns out they can have like 8 colours. Or something.

My stars are 2-state: Either Light Gray to denote "Marked as Normal" (i.e. "Marked as NOT Important") or Red to denote "Marked as Important".

Stomme_poes said:

I'd say the alt text needs to state the state/meaning of the star. So, marked as important! Not marked as important! etc.

Okay, so you are saying the ALT tag should define the current state of the Star ("Marked as Important", "Marked as Normal"), right?

And, are you also saying that all screen-readers should read that ALT text?

Stomme_poes said:

Since the stars are clickable, you can have the title show mouse users what the thing does: while not foolproof, you can make a general assumption that someone using a mouse can probably see something of the stars, and so then hopefully the state reflected by size, colour, outline, whatever. Remember colour-blind dudes. So the title can show the function, and off-screen text or label could offer the non-title variant.<text>Change</state><img alt="not marked as important">

You lost me here.

So based on my OP, what are you saying the TITLE attribute should show?

Option #1: What action to take. ("Click to mark as Important", "Click to mark as Normal")

Option #2: What the current state of the Star is. ("Marked as Important", "Marked as Normal")

(Since I believe you are suggesting Option #1 for the ALT attribute, then using good web design, it would seem that for the TITLE attribute you'd say use Option #2, since you're not supposed to have the same verbiage for the ALT and TITLE attributes...)

Stomme_poes said:

But as a clickable thingie, HTML-wise they're probably a button (something that can run a script when cliked) or possibly a "fake" button (something like a span dressed up like a button). We of course prefer the former, so we don't have to manually add in all the focusable and keyboard and role junk. But anyway you can have a hidden/offscreen label for the star stating the function. A cool idea with this is, like Gmail, you could offer users later the ability to forego icons entirely and use text... meaning you could, with css and a state remembered by javascript and a cookie, swap the text and image.

You might also be able to use a checkbox. These have labels stating what they do/mean, and a state (checked, not checked). There've been some working and fairly accessible attempts to disguise checkboxes and radios as images of other things, while the control itself is still completely clickable and useable. That way you could have[ ] Mark as important

[•] Mark as important

What I did was to simply use a Form Button and put the Star in as a Background Image like this...

I agree with poes. (I'd be daft not to - she knows more about all this than I do. )

The alt text should convey the same information which the image conveys - therefore "marked as important" or "marked as normal".

I would expect a mouse tooltip (i.e. title) to tell me what something does, so "Click to mark as important", etc. And as poes is pointing out that not all screen readers will read both alt text and title, and keyboard users also don't get to see tool tips, then an equivalent label for the buttons should provide them with the same information.

Francky
—
2014-01-11T19:46:46Z —
#9

Stomme_poes said:

I'd say the alt text needs to state the state/meaning of the star. So, marked as important! Not marked as important! etc.

Since the stars are clickable, you can have the title show mouse users what the thing does. (...)So the title can show the function, and off-screen text or label could offer the non-title variant.

DoubleDee said:

Option #1: What action to take. ("Click to mark as Important", "Click to mark as Normal")Option #2: What the current state of the Star is. ("Marked as Important", "Marked as Normal")

(Since I believe you are suggesting Option #1 for the ALT attribute, then using good web design, it would seem that for the TITLE attribute you'd say use Option #2, since you're not supposed to have the same verbiage for the ALT and TITLE attributes...)

My interpretation of Stomme Poes is just the opposite.

=======Other point: a background-image can't have the Alt-attribute.If you use a background-image for the star (in order to get the hover-effect), then there is no foreground-image to hang on the alt="Marked as Important" / alt="Marked as Normal".To get the hook, you can have a transparent image as foreground-image: that can have the Alt.

Stomme_poes
—
2014-01-24T13:26:31Z —
#10

DEAR FORUMS I AM VERY NOT LIKING THE LOGGING OUT OF MY PERSON WHILE I BUSY TYPING 5000 LOC AND THE ASKING OF THE PAGE REFRESHES FOR GREAT LOSS!!!1Luckily I copied and pasted this crap into a text editor before Opera lost it all.

I was very unclear... I started typing as ideas came to me, and still prefer the last one I said

This is how I deal with graphics-monkeys insisting on special form controls instead of the ones made by the browser (and so in this case, they can be stars):

I have divs or something wrapping the label-input pairs. They need a class.

I also have some Javascript I took from PacielloGroup for detecting if the user is mousing around or not, so that outlines and other crap I add for keyboard don't show for mousers who click something in browsers who hold the focus state on that element (firefox esp).

The span's there just if you want some more flexibility in showing/hiding/styling the label text without moving the label itself. You can't move the label here--it's holding an image covering up the real form control!

This is a lot of crufty code: I blame LESS, which another dev at my work had started using. Since I must in LESS, I've gotten lazy and more verbose in my CSS. It does NOT encourage good practice. Bleh.

If you have disableds, then you'll add background positions for disabled-unchecked and disabled-checked states.

In addition to this, I have even m0aR code for when mouse is detected like.mouseDetected .starz:not(#ie8) input:focus+label { outline or border or whatever we set: 0;}This might be a must if there's no visible label and you're using a star colour to show that it's focussed on, because in something like Firefox the checked state won't show, only the focussed state! So I'd like an outline: 2px solid #somecolour myself.

This right here is pretty close to hitting everyone nicely.

Because the star is an image or image sprite, this doesn't scale on zoom. SVG and em widths could maybe help this, but I have no good stories about SVG to share yet.This also fails if the image doesn't load for some reason. Detection of image loading and removing the styles could help, but I have no good stories of content-negotiation to share yet.

Because the radio button is the usual available control, it's accessible to everyone as much as regular ones are, because this is a regular radio button. The label, even if you took the span text and hid it, is available to anyone with scripts off/user stylesheets, screen readers, stuff like Dragon, etc.The radio button can give its state and whether it's being focussed on to the browser, who can pass that on to anything asking for it. So a screen reader user for example knows if "Mark as important" is checked or not.

The :not(#ie8) thing is because IE8 doesn't know the :checked css state. However, if you're javascripting this stuff, you could add a class of .checked instead and then you don't need the nots. Me, since I do this for graphics monkeys, I let IE8 just look normal.

Hope this helps.

@Francky: "If you use a background-image for the star (in order to get the hover-effect), then there is no foreground-image to hang on the alt="Marked as Important" / alt="Marked as Normal". To get the hook, you can have a transparent image as foreground-image: that can have the Alt."

It's clunky but if it's already built into your setup it seems to be okay. It does mean 2 requests, but you can reuse the trans anywhere and let the browser stretch it into the needed dimensions.Back when I was young and stupid, instead of just being stupid, I used to make different-sized trans images. Because, wut.

Long ago I was young and had to serve IE6 as well without the IE png-hack extra's (to get the grey transparent). Since then instead of a transparent.png I'm using a transparent.gif. Modern browsers don't explode with it.

Stomme_poes
—
2014-01-24T21:02:31Z —
#12

The trick for IE6 (tho a gif for this case was fine) was to make sure the Gimp had set in the palette for the background colour the same colour as the area where the image would be. Not in the image, just the settings in the toolbar at the time of saving.

Gimp would ask, "save background color?" And if you did that, IE6 would, in place of the transparency, show that colour instead. Dunno if this worked in other editors, but prolly did since bgcolor was part of teh image metadata and I guess IE6 was reading that.