Just a few thoughts.
It would be better if the keyboard link had an id reference in it.
<a id="openPopup1" href="#popup1">pop-up</a>
And the associated div had an id:
<div id="popup1">...
The close link references the opening link:
<a href="#openPopup1">Close</a>
Also shift the pop-up off-screen rather than display:none
#popup1 {position: absolute; left:-500em; top:0}
Or at very least check JavaScript is enabled before hiding it using display:none
.hasJS #popup1 {display:none}
Add the .hasJS class to the html element like so:
<script
type="text/javascript">/*<![CDATA[*/document.documentElement.className="hasJS";/*]]>*/</script>
Which should be the first line in the head section.
I wouldn't personally use the second non-keyboard method.
Regards
Mike Foskett
http://websemantics.co.uk/
-----Original Message-----
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of tee
Sent: 23 February 2011 10:21
To: wsg@webstandardsgroup.org
Subject: [WSG] screen reader friendly and keyboard accessible popup?
Please take a look at this example. The first example is keyboard accessible
however I am also concern with the empty link that may create extra noise for
screen reader, e.g if every single page has a popup, it will have two empty
links, one is the popup trigger and the other the close link. Sure it's just
two empty links, as I started using VoiceOver more frequent to test the sites,
I find the two links quite annoying.
http://jsbin.com/efimu5
Is there a much better approach that works great for both keyboard and screen
reader user? Was looking up the "keypress" and "focus" events, but not certain
they are good for such function.
Thanks!
tee
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
This is a confidential email. Tesco may monitor and record all emails. The
views expressed in this email are those of the sender and not Tesco.
Tesco Stores Limited
Company Number: 519500
Registered in England
Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL
VAT Registration Number: GB 220 4302 31
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
