Description

Here are some usability and accessibility issues for the TWikiDrawPlugin (which seem to be of minor importance, however they are of big importance for AccessibleMoin):

• If you turn of image display in your browser, the alt texts do not explain enough:

  • On Firefox for clickable(!) drawings the alt text is completely lost!! Could not fix that, seems so be a browserbug?

  • On other browsers: for clickable drawings with image maps, only "Picturename" is displayed as alt. This is not very talkativ and doesn't help much. I changed this in "Clickable drawing: Picturename" (Same naming convetion as in FeatureRequests/ShowFilesizeForAttachmentsAndAltForImages).

  • For non clickable drawings only a link "Picturename" is displayed as alt text. Again this is not very talkative and doesn't explain what's happening if you click on that link. I changed the alt in "Edit drawing Picuturename"
• There seem to be some problem with the correct display of title texts as well:

  • Non clickable drawings: if you move with the mouse over a non-clickable drawing you get the title"Picturename" displayed, but I think the title "Edit drawing Picturename" is wanted so as to tell the user to click on the image to edit it. I changed this.(This is again caused by a nesting of <a title=Edit pic> <img title=Picname..> </a> like in MoinMoinBugs/MakeIconLinkLosesAltTitle)

  • For clickable drawings with image maps: on non clickable regions in the image always the title"Picturename" is displayed. I found this quite disturbing in using the map and turned this of. Now only titles are displayed for the clickable regions to ease navigation and make it more clear that the drawing is an image map and not just an image. However that's a matter of taste..
• Editing of a drawing opens a new window. It is an accessibility must to tell that to the user since blind people have no chance to get a clue what going on. "Edit drawing Picturename" is therefore replaced by "Edit drawing Picturename (opens in new window)" (The same _('Create new drawing "%(filename)s (opens in new window)"')). Missing hints like these often leads to the evaluation of a site as badly accessible.

Steps to reproduce

1. Go to WikiSandBox and create two new images: a normal one and on with an image map.

2. Explore both pictures with the mouse and look at the title texts.
3. Turn if image display in your browser and watch the result. Use Firefox and another browser to see the missing alt for clickble images in Firefox

Example

Component selection

• MoinMoin.formatter.text_html.attachment_drawing

Details

Workaround

Discussion

Here's a changed version of text_html.py (moin-1-6-main-7c58e8af1a97)

   1 --- text_html_old.py	2007-02-18 22:01:18.000000000 +0100
   2 +++ text_html.py	2007-02-19 12:25:38.000000000 +0100
   3 @@ -682,7 +682,7 @@
   4  
   5          # check whether attachment exists, possibly point to upload form
   6          if not os.path.exists(fpath):
   7 -            linktext = _('Create new drawing "%(filename)s"')
   8 +            linktext = _('Create new drawing "%(filename)s (opens in new window)"')
   9              return wikiutil.link_tag(
  10                  self.request,
  11                  ('%s?action=AttachFile&rename=%s%s' %
  12 @@ -713,21 +713,23 @@
  13                  # add alt and title tags to areas
  14                  map = re.sub('href\s*=\s*"((?!%TWIKIDRAW%).+?)"', r'href="\1" alt="\1" title="\1"', map)
  15                  # add in edit links plus alt and title attributes
  16 -                map = map.replace('%TWIKIDRAW%"', edit_link + '" alt="' + _('Edit drawing %(filename)s') % {'filename': self.text(fname)} + '" title="' + _('Edit drawing %(filename)s') % {'filename': self.text(fname)} + '"')
  17 +                map = map.replace('%TWIKIDRAW%"', edit_link +
  18 +                                  '" alt="' + _('Edit drawing %(filename)s (opens in new window)') % {'filename': self.text(fname)} +
  19 +                                  '" title="' + _('Edit drawing %(filename)s (opens in new window)') % {'filename': self.text(fname)} + '"')
  20                  # unxml, because 4.01 concrete will not validate />
  21                  map = map.replace('/>', '>')
  22 -                return (map + self.image(
  23 -                    alt=drawing,
  24 -                    src=AttachFile.getAttachUrl(
  25 -                    pagename, filename, self.request,
  26 -                    addts=1),
  27 -                    usemap='#'+mapid, css="drawing"))
  28 +                return (map + self.image(alt="%s" % (_('Clickable drawing: %(filename)s') % {'filename': self.text(fname)}),
  29 +                                         title="",
  30 +                                         src=AttachFile.getAttachUrl(pagename, filename, self.request,addts=1),
  31 +                                         usemap='#'+mapid, css="drawing"))
  32 +  
  33          else:
  34              return wikiutil.link_tag(self.request,
  35                                       edit_link,
  36 -                                     self.image(alt=url,
  37 +                                     self.image(alt="%s" % (_('Edit drawing %(filename)s (opens in new window)') % {'filename': self.text(fname)}),
  38 +                                                title="%s" % (_('Edit drawing %(filename)s (opens in new window)') % {'filename': self.text(fname)}),                                             
  39                                                  src=AttachFile.getAttachUrl(pagename, filename, self.request, addts=1), css="drawing"),
  40 -                                     title="%s" % (_('Edit drawing %(filename)s') % {'filename': self.text(fname)}))
  41 +                                     title="%s" % (_('Edit drawing %(filename)s (opens in new window)') % {'filename': self.text(fname)}))
  42  
  43  
  44      # Text ##############################################################

-- OliverSiemoneit 2007-02-19 11:37:37

Thank you very much for implementing this in Moin1.6! This moves an accessibility-aficinado to tears . All works fine on http://test.wikiwikiweb.de. Maybe two things to mention:

• There is an optical mistake with the doulbe quote in the above patch with the text 'Create new drawing "%(filename)s (opens in new window)"': it might be better to write 'Create new drawing "%(filename)s" (opens in new window)' or 'Create new drawing %(filename)s (opens in new window)'.

• The perfect solution would be to hide the text "(opens in new window)" for normal users so it's only visible for screenreader users for whom this hint it thought (Sorry that I haven't come up with this earlier but I noticed this only some weeks ago when a was looking closely at websites awarded for their accessibility). So on the screen you can read 'Create new drawing %(filename)' but screereaders will read 'Create new drawing %(filename) (opens in new window)'. That would be perfect and the extra text which is quite ugly wouldn't bother seeing users anymore. This could be easily done by moving the text "(opens in new window)" in a css class "hidden" like <span class="screenreader_info">(opens in new window)</span> with

{{{.screenreader_info {

• position: absolute; top: -10000px; left: -10000px;

• }

}}}

This is a common technique in accessible webdesign as you can see here: http://webaim.org/techniques/css/invisiblecontent/. This technique is also used to make the new inline-comments accessible and useable when css is disabled (MoinMoinBugs/1.6devCommentSectionsNotAccessibleByScreenreaderOrWithCssDisabled). This css class is also a must for so called "skip links" as implemented in ThemeMarket/SimpleMente. In AccessibleMoin there is no way round for that. This is a legitime and reliable solution and state-of-the-art. So in my eyes this css class will be sooner or later part of Moin anyway.

new_patch.diff

-- OliverSiemoneit 2007-04-18 13:47:51

Plan

• Priority:

• Assigned to: ThomasWaldmann

• Status: fixed in 1.6 by changeset 1997: 1bf17e0dd6f1 (please someone with java plugin test it on http://test.wikiwikiweb.de/WikiSandBox )

CategoryMoinMoinBugFixed