Make widgets readable by screen readers

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.

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

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! :-)

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 :-)

@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.

@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.

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?

related: #473396: Defining System-Wide Approaches to Remove, Make Invisible & Push Content Off-screen with CSS , btw why the way is different here?

to answer my question: Accessibility and Drupal.

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

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...

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.

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.

Sorry for the long delay here.

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

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: 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.

test bot seems to be broken for dependencies?

Happy to test if pointed to a test URL.

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

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

<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   at the end of the invisible text:
<div class="element-invisible">Vote Up&nbsp;</div>

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)

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

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 :-)

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.

@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)