[Fwd: inbetween after page]

-------- Original Message --------
Subject: inbetween after page
From: J.S. Poorta <jspoorta@gmail.com>


Hi all,

For the log of the discussion I had with Michael on the in-between
pages see the attachment discussion_light_boxes.txt.
See the zip-file for an inbetween_after page. The zip-file also
contains some icons.

I could not get the script working properly for multiple annotations.
The problem has to do with that the onclick events of the
annotation-links do not pass the correct id to the function hiding or
showing the annotation. It also doesn't seem to work in Internet
Explorer.

Comments are welcome.

Jan Sjoerd


-- 
Shadi Abou-Zahra - http://www.w3.org/People/shadi/ |
   WAI International Program Office Activity Lead   |
  W3C Evaluation & Repair Tools Working Group Chair |

[16:19:53] jspoorta says: hello Micheal
[16:19:58] jspoorta says: are you available?
[16:20:19] jspoorta says: you said you had some ideas about the light boxes for the in-between page
[16:20:45] jspoorta says: (badtf)
[16:21:08] Michael Stenitzer says: hi jan
[16:21:46] Michael Stenitzer says: can you give me a few minutes to get ready for a short discussion
[16:22:03] jspoorta says: ok
[16:22:07] jspoorta says: take your time
[16:26:07] Michael Stenitzer says: ok. here we go.
[16:26:28] Michael Stenitzer says: i'll try a mental sketch of it:
[16:27:13] Michael Stenitzer says: * place icons in the page at the places were accessibility issues has been fixed.
[16:27:35] Michael Stenitzer says: * those icons should be linked to a short description of the issue and the fix
[16:28:03] Michael Stenitzer says: * this description might include links to techniques, SC of WCAG 2 etc.
[16:28:35] Michael Stenitzer says: * all the isssues might be arranged at the end of the page (code-wise)
[16:29:13] Michael Stenitzer says: * those issues are hidden by default with a soft-hiding technique (put outside the viewport)
[16:29:32] Michael Stenitzer says: * therefore they are accessible by screenreaders
[16:31:01] Michael Stenitzer says: * if you click on the icon a progessive enhancing JS moves positions the description in a lightbox in front of the page near the icon.
[16:31:40] Michael Stenitzer says:  This message has been removed
[16:32:27] Michael Stenitzer says: * if the lightbox is visible only the styles are changed, but the code is keept still in the list of issues at the end of the page.
[16:34:03] Michael Stenitzer says: * you have to take care that the you can move the reading focus with screenreaders and in the tab order to the lightbox when you make it visible.
[16:35:20] Michael Stenitzer says: * to close the lightbox visually might be the same link / icon which brings the focus back to the original position (issue-icon within the page).
[16:36:31] Michael Stenitzer says: any additional visual effects and styling might be a good idea just to show, that accessible websites can use modern style, dynamic web-features.
[16:37:10] Michael Stenitzer says: i think, that's most of it.
[16:37:22] jspoorta says: ok
[16:37:37] Michael Stenitzer says: shall i put it in an email and send it to you?
[16:37:59] jspoorta says: i'm recording the chat history so it's ok
[16:38:08] Michael Stenitzer says: fine
[16:38:46] jspoorta says: i didn't understand the focus-with-screenreaders-part
[16:39:01] Michael Stenitzer says: ok.
[16:39:18] jspoorta says: do you suggest i should use the tabindex-attribute to move along the icons?
[16:39:32] Michael Stenitzer says: i don't think you have to.
[16:41:08] Michael Stenitzer says: can you talk? that might help ;)
[16:41:37] jspoorta says: not sure, i'll look for a microphone
[16:41:45] Michael Stenitzer says: np. i'll write it
[16:47:17] Michael Stenitzer says: if you have a link on the issue icon (href="#issue1"". 
the link has an additional event handler for the progessive enhancement part.
this part makes the issue description visible (lightbox).
therefore it gets an "visual focus" by placing it in the foreground.
usually when you capture the activate/click event you return a "false" to stop event execution (=following the link).
if you do so, the tab order / focus is not set to the visual focus (the lightbox).
therefore you have to ensure that the keyboard-focus also moves to that.
and will be moved back when you close the lightbox.
you have to test that with different screenreader / browser combinations to ensure that it works.
[16:48:49] Michael Stenitzer says: we might help with the implementation...
[16:51:02] jspoorta says: ok
[16:51:29] Michael Stenitzer says: do you understand what i mean? no problem to retry again ;)
[16:51:32] jspoorta says: i'll make sure the basic stuff is there before the next call on tuesday
[16:51:56] Michael Stenitzer says: great. that reminds me to send my mockup to the list.
[16:52:18] jspoorta says: sorry, tuesday should be wednesday!
[16:53:17] jspoorta says: ok thank you
[16:53:28] Michael Stenitzer says: you are welcome

http://www.w3.org/Amaya/annot.gif

http://commons.wikimedia.org/wiki/Category:Nuvola_icons