Add appropriate alt attributes

[doug]

I recently had occasion to use roundcube with images turned off (while surfing over an agonizingly slow dial-up connection). Usability was drastically impaired thanks to missing alt attributes on image buttons. The only way to use the program was to hover over the spot where I guessed the image should be and read the tooltip (if one appeared). I assume fixing this bug might also help vision-impaired users.

Keep in mind that alt="" (which is present on each image discussed) is appropriate only when an image is used solely for decoration, but NOT when the image conveys information, as is the case with the image-based links in RCW. See ​the spec and ​QA Tip ("use text that fulfills the same function as the image").

The images and suggested alt attributes I identified are (in en-US):

In the message list toolbar

Create a new message

New message

Reply to the message

Reply

Reply to sender an all recipients

Reply to all (note typo)

Forward the message

Forward

Move message to trash

Delete (or Move to trash?)

Print this message

Print

Show previous set of messages

Previous

Show next set of messages

Next

In the message view toolbar

Back to message list

Back

Show source

Source (or Show source?)

In the address book toolbar

Create new contact card

New card

Delete selected contacts

Delete

Compose mail to

Compose

Print

Print

Export

Export

LDAP directory search

Search (or LDAP?)

Within the message list

This one's a little harder because long alt text can disrupt the table formatting. So I went with single character alt text that can be explained in the user's documentation:

attachment.png

A

dot.png

"" (if you consider this merely decorative, or • or r if you don't)

unread.png

asterisk (or U)

replied.png

← (or R)

(No icon for forwarded e-mails or e-mails that have been forwarded and replied to?)

I thought at first that this would be as easy as searching for alt="" and adding appropriate text, but it looks like the buttons are created with code along the lines of:

<roundcube:button command="compose" imageAct="/images/buttons/compose_act.png" imagePas="/images/buttons/compose_pas.png" width="32" height="32" title="writenewmessage" />

So I guess the function(s) that parse this command would have to be rewritten to interpret an alt attribute, which would have to refer to the language files. (Or would it work as is just by adding an alt attribute here?) If I knew more about how roundcube reads these templates, I would try it myself. Is there a place to learn this stuff without simply wading through the code? I've been using RCW for a while but this is my first time trying to edit the code.

BTW, I am calling this a bug rather than a feature request because RCW claims to use "the latest web standards such as XHTML and CSS 2" but without appropriate alt attributes, the XHTML is invalid (regardless of what a validator might report). Thanks for reading!

[Lou]

I believe we could modify the button method to use the same parameter as is used for the link title for the image alt attribute. That avoids some localization issues and should do the job sufficiently.

[seansan]

Seems like some ALT texts have been added. Does this still apply?

[doug]

Sorry for the lack of follow-up. Yes, the problem still exists. I am running v0.2-alpha.

If you have the ​Web Developer toolbar installed on Firefox, it's easy to see the problem. Simply click on Images->Display Alt Attributes to see that only the Delete button, the RoundCube logo and the quota display have alt attributes defined. Then click on Images->Disable Images->All Images to see what RC looks like with images turned off: It is unusable. You can get the same information without the Web Developer toolbar by opening the Media panel in Page Info.

---

For comparison, alt text is added in various ways in the code:

The RC logo alt attribute is hardcoded in the skin files header.html and error.html, which is a localization bug. Everywhere else, it is added with the following code: alt="<roundcube:object name='productname' />

The alt attribute on the Delete button is added using Javascript. Line 175 in app.js adds alt text to the Delete button like this:

this.set_alttext('delete', 'movemessagetotrash');

This and line 511 are the only two places this function is used, and the purpose seems to be to swap out the alt text when moving between the Trash folder and other folders, because the function of the button changes.

As far as I can tell, all other alt attributes are added using sprintf; e.g., the Rename and Delete buttons on the folder management page, the Remove Attachment button on the Compose page, and the quota display.

---

After digging some more in the code, I see that alt attributes are actually easy to add by adding the appropriate attribute to the <roundcube:button> element (and probably others as well). I tested this and it works.

I'd like to propose adding alt attributes to images, and I can help produce patches. But I recommend AGAINST simply repeating the title attribute as Lou suggests in comment 2. These attributes have different purposes and different behaviors and should not be mere duplicates of each other. This would mean adding additional values to the localization files, and I'd like to know how this work would be received before I dive in. (Localized text for the title attributes are already defined in the lables.inc files, starting at line 121 in the en_US file.) My proposals for alt attributes in English are above.

Thanks.

P.S. I am unable to reopen this bug.