In our June 1 IRC session on accessibility, two participants who use screen readers were puzzled as to why comments now have points associated with them. When sighted participants explained the Vote Up/Down widget, the screen reader users tried again to find it. Neither could do so.

The attached image shows that the WAVE toolbar failed to tag this widget — in other words, it cannot perceive it. This is the same problem encountered by screen readers and people who must rely on them. They cannot perceive the widget, so they can neither interpret it nor use it.

To be accessible to all, features and content must first be perceptible. If this widget is to continue to be a part of drupal.org and groups.drupal.org, it must be modified to allow who use either of these sites to participate.

Files: 
CommentFileSizeAuthor
#33 vote_up_down-widget.patch871 bytesadr_p
FAILED: [[SimpleTest]]: [MySQL] Invalid patch format in vote_up_down-widget.patch.
[ View ]
#31 0001-815984-follow-up-by-marvil07-droplet-Make-widgets-re.patch5.67 KBmarvil07
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch 0001-815984-follow-up-by-marvil07-droplet-Make-widgets-re.patch.
[ View ]
#29 vote_up_down.patch2.14 KBdroplet
FAILED: [[SimpleTest]]: [MySQL] 107 pass(es), 8 fail(s), and 10 exception(es).
[ View ]
#27 0001-bug-815984-by-mgifford-marvil07-Cliff-Make-widgets-r.patch2.87 KBmarvil07
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch 0001-bug-815984-by-mgifford-marvil07-Cliff-Make-widgets-r.patch.
[ View ]
#19 vud-widgets-a11y-v2.patch7.26 KBmarvil07
FAILED: [[SimpleTest]]: [MySQL] 107 pass(es), 8 fail(s), and 21 exception(es).
[ View ]
#8 vote_up_down_a11y1.patch6.25 KBmgifford
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch vote_up_down_a11y1.patch.
[ View ]
up-downFAIL.png435.95 KBCliff

Comments

Cliff’s picture

Of course, that should be "to allow everyone who uses either of these sites." Doh!

mgifford’s picture

Thanks for reporting this Cliff. This is a problem for the community as it is being used in a Drupal community site. The code that's spit out is:

<div class="vote-up-down-widget">
      <span id="vote_up_71473" class="vote-up-inact"></span>
    <span id="vote_down_71473" class="vote-down-inact"></span>
</div>

I'm guessing the images are just added with CSS & javascript is being used to mange the voting.

For a screen reader to see it there must be something other than a blank span tag there. You can insert hidden text so that screen readers can use it. There are examples of using element-invisible in D7 that are being brought over to Drupal 6 modules.

Everett Zufelt’s picture

Out of curiousity, does / how does this function with JS disabled?

marvil07’s picture

Title:Vote Up/Down Widget is imperceptible to people relying on screen readers» Make widgets readable by screen readers
Category:bug» task
Priority:Critical» Normal
Status:Active» Postponed (maintainer needs more info)

Fisrt, thanks for reporting!

I am not completely sure about it, but I think the actual version of vote up/down installed on g.d.o is 6.x-1.0-beta6.

In the actual version mentioned in this issue: 6.x-2.0-beta1, vote up/down relies on ctools, so: it use always a anchor for voting and it works with js disabled(because of ctools do that :-)).

So, it would be great to have this revision aganist the 6.x-2.0-beta1 version.

The relevant code I think you want to review is the widgets templates:

widgets/alternate/widget.tpl.php
widgets/plain/widget.tpl.php
widgets/updown/widget.tpl.php

All suggestions about how to show the widget would be great! :-)

marvil07’s picture

Like I mentioned in the last comment, this should be fixed in 2.x, and I actually tried using the default screen reader in the GNOME desktop with all the widgets:

I think they works like expected (plain, upanddown, updown) because I was able to hear the titles "vote up"/"vote down" except in the alternate widget, where we are using a "+" and a "-" inside the links, so I hear the names of that signs instead of the titles.

@mgifford: it would be great if you can point me to one of the examples you mention :-)

marvil07’s picture

@Everett Zufelt: it works like expected(thanks to ctools js fallback), it make a reload to actually vote. Pleas note that I am referring to the 2.x version.

Cliff’s picture

Everett, Mike:

Can you give @marvil07 some feedback on whether the 2.x version of this widget works?

If it does, perhaps we need to close this issue and ping the d.o and g.d.o webmasters to update their version of vote up/down.

mgifford’s picture

StatusFileSize
new6.25 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch vote_up_down_a11y1.patch.
[ View ]

@marvil07 I haven't actually tested this or version 2.x. I'm just looking at the code from 6.x-2.0. I really should be looking at least at the DOM layer to see this. What I see from the Widgets though is that the text is included as a title tag in the link. I'm not sure if Gnome reads this or not, but it doesn't generally work for most screen readers. The best way is to actually use hidden text.

This is the patch I'm proposing. It's a bit rough and again, I just coded it & haven't actually implemented it.

This is important for accessibility but especially since it is being used in G.D.O and we want this to be a forum where everyone can participate.

Hope this helps.

marvil07’s picture

Version:6.x-2.0-beta1» 6.x-2.0
Status:Postponed (maintainer needs more info)» Needs review

The patch looks good.

I am kind of new on a11y, can you please point me some screen readers I can use on my linux box to test this?

Status:Needs review» Needs work

The last submitted patch, vote_up_down_a11y1.patch, failed testing.

marvil07’s picture

marvil07’s picture

to answer my question: Accessibility and Drupal.

btw the patch just need a different -pN but test bot only understand patches made for -p0

mgifford’s picture

There are times I wished I still was using Linux....

The Accessibility & Drupal page didn't mention Orca I think - http://live.gnome.org/Orca

you can also get a good sense of issues by tabbing through the site. You can configure various browsers to tab through the links. Here are some instructions for the Mac that should be mostly convert-able I would hope:
http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigatio...

Everett Zufelt’s picture

I haven't looked at the 2.0 version of this widget, if someone can point me to an example site I would be happy to.

Orca is the only screen-reader for gnome.

The best approach is to have the images actually be images using the img element and an alt attribute for the textual equivalent. Apart from that using invisible text like @mgifford has suggested is a good idea. This can be done by backporting /modules/system/system-behaviours.css : .element-invisible from D7 to your module, you might need to see if there is an RTL class as well.

Also, for keyboard only users you need to make sure that without a screen-reader that the links / images can receive focus. Some screen-readers have difficulty when click functions are attached to an element in the DOM. All functionality should be achievable through keyboard or mouse. And when the up / down buttons are focused they should appear visually to be focused so that sighted keyboard only users can tell that they have received focus.

Everett Zufelt’s picture

Category:task» bug
Priority:Normal» Critical

Just revisiting this issue. Changing to a critical bug since this essentially breaks functionality for a set of users.

Would still be happy to test an example page of v.2.0.

marvil07’s picture

Sorry for the long delay here.

Everett Zufelt: There is a test site of 6.x-2.x on http://vud.marvil07.net/

Everett Zufelt’s picture

Took a look. The links have the text + and -. I tink this needs to be more meaningingful like "vote up" and "vote down".

Thanks.

Cliff’s picture

I agree with Everett. And changing the text of the alt attribute should be trivial, right? In other words, a quick fix whenever you get the chance?

Thanks!

marvil07’s picture

StatusFileSize
new7.26 KB
FAILED: [[SimpleTest]]: [MySQL] 107 pass(es), 8 fail(s), and 21 exception(es).
[ View ]

@Cliff: I am really not sure about what alt attribute are you mention :-(

Here it is a patch that:

  • fix a minor typo on the original patch("vote down" on down link).
    +++ vote_up_down.new/widgets/upanddown/widget.tpl.php 2010-08-04 08:09:30.000000000 -0400
    @@ -11,14 +11,14 @@
    -      <a href="<?php print $link_down; ?>" rel="nofollow" class="<?php print "$link_class_down $class_down"; ?>" title="<?php print t('Vote down!'); ?>"></a>
    +      <a href="<?php print $link_down; ?>" rel="nofollow" class="<?php print "$link_class_down $class_down"; ?>" title="<?php print t('Vote down!'); ?>"><div class="element-invisible"><?php print t('Vote up!'); ?></div></a>
  • add the same modifications to the updown widget.

I tried it with Orca with the expected results \o/

It would be great if you can confirm it is also working on other environments before commit it.

Powered by Dreditor.

marvil07’s picture

Status:Needs work» Needs review

Status:Needs review» Needs work

The last submitted patch, vud-widgets-a11y-v2.patch, failed testing.

marvil07’s picture

Status:Needs work» Needs review

test bot seems to be broken for dependencies?

Everett Zufelt’s picture

Happy to test if pointed to a test URL.

marvil07’s picture

@Everett Zufelt: I have just applied the patch on the demo site: http://vud.marvil07.net ;-)

marvil07’s picture

just to avoid forgetting it, I should make a 2.1 tag after this get in

Everett Zufelt’s picture

<div class="up-inactive" title="Vote up!">+</div><div class="element-invisible">Vote up!</div>

This is reading strangely with JAWS. After "Vote Up!" is read the anchor for "-" is read immediately without pause. I am wondering if we can try two things to fix this.

1. remove the first div and use the title attribute of the anchor for the tooltip. This would look like:
<a ... title="Vote Up!">+<div class="element-invisible">Vote Up!</div></a>

2. Try putting an &nbsp; at the end of the invisible text:
<div class="element-invisible">Vote Up&nbsp;</div>

marvil07’s picture

Version:6.x-2.0» 6.x-2.x-dev
Status:Needs review» Fixed
StatusFileSize
new2.87 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch 0001-bug-815984-by-mgifford-marvil07-Cliff-Make-widgets-r.patch.
[ View ]

Maybe this is specific for JAWS, let me share how it sounds in orca: http://bit.ly/ahoI85

I think it's ok for now, I mean the real problem was that screen readers were not noticing the vote, now that's resolved.

Please create an specific issue about JAWS.

The following patch was committed to 3.x and 2.x. (sorry for the credits on the first commit :-(, I did not change the message before syncing cvs from my git repo)

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

droplet’s picture

Status:Closed (fixed)» Needs review
StatusFileSize
new2.14 KB
FAILED: [[SimpleTest]]: [MySQL] 107 pass(es), 8 fail(s), and 10 exception(es).
[ View ]

fix the upanddown widget's "Vote up" as well and add .element-invisible class

Status:Needs review» Needs work

The last submitted patch, vote_up_down.patch, failed testing.

marvil07’s picture

Status:Needs work» Fixed
StatusFileSize
new5.67 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch 0001-815984-follow-up-by-marvil07-droplet-Make-widgets-re.patch.
[ View ]

Mmm.. this was actually a bigger problem, somehow I ended up applying only the changes for updown widget :-/ (see the difference between my last two patches).

So, the current patch is committed to 3.x and 2.x.

Thanks for pointing this out :-)

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

adr_p’s picture

Status:Needs work» Needs review
StatusFileSize
new871 bytes
FAILED: [[SimpleTest]]: [MySQL] Invalid patch format in vote_up_down-widget.patch.
[ View ]

Because <div class="invisible-element" /> was placed inside the <a> tag it generates xhtml errors. The attached patch doesn't solve all the places the problem exists, but might be helpful.

Version:6.x-2.x-dev» 6.x-2.1
Status:Closed (fixed)» Needs work

The last submitted patch, vote_up_down-widget.patch, failed testing.

marvil07’s picture

Status:Needs review» Closed (fixed)

@adr_p: Thanks for reporting it, can you please open another bug issue for it please?

(this is a long issue, and was closed months ago, so IMHO it's better to open a new one)