RE: [WSG] screen reader friendly and keyboard accessible popup?
Hi Tee, > 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 I'd use buttons instead of links, or I'd add role="button" to the links. I'd also add role="alertdialog " to the modal, making sure that the focus goes to the "close" button/link within the modal and also making sure that when the user closes the modal, focus is brought back to the original trigger. See: http://www.w3.org/TR/wai-aria/roles -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] screen reader friendly and keyboard accessible popup?
>pop-up
>
> And the associated div had an id:
>
>...
>
> The close link references the opening link:
>
>Close
>
> Also shift the pop-up off-screen rather than display:none
>
>#popup1 {position: absolute; left:-500em; top:0}
Thanks Mike and Chad,
Curious, is there particular benefit to assign ID for such function concerning
accessibility and AT?
>>
>>
>>
> Pop-ups are a hard thing to get correct for accessibility.
> As is the case for everything else some screen readers handle them better
> then others.
>
Maybe true in the old dasy.
The use of such Popup is more of a design consideration (e.g. spacing saving)
and it obscures no accessibility as far as content is concerned, therefore I
do not see the real needs to assign ID (though part of the reason is that I try
to avoid inserting more codes into template files and write extra lines of
javascript).
P/s. There is no display none in the example's markup. I never picked up that
bad habit.
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] screen reader friendly and keyboard accessible popup?
On 2/23/2011 10:37 PM, Foskett, Mike wrote:
Just a few thoughts.
It would be better if the keyboard link had an id reference in it.
pop-up
And the associated div had an id:
...
The close link references the opening link:
Close
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:
/**/
Which should be the first line in the head section.
I don't think hiding the display of the pop up will be necessary, as
mobile device users could use the keyboard functionality as well.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] screen reader friendly and keyboard accessible popup?
On 2/23/2011 9:20 PM, tee wrote: 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. Pop-ups are a hard thing to get correct for accessibility. As is the case for everything else some screen readers handle them better then others. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] screen reader friendly and keyboard accessible popup?
Just a few thoughts.
It would be better if the keyboard link had an id reference in it.
pop-up
And the associated div had an id:
...
The close link references the opening link:
Close
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:
/**/
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
***
[WSG] Mary-Anne Nayler is out of the office. [SEC=No Protective Marking Present]
I will be out of the office starting 10/02/2011 and will not return until 31/01/2012. Please be advised that as of Monday the 14th of Feb 2010 I will no longer be using this email address. My new email address is mary-anne.nay...@centrelink.gov.au Any day is a good day to talk about organ and/or tissue donation. DonateLife Week, 20-27 February 2011. Go to www.donatelife.gov.au to find out more. __ NOTICE - This message is intended only for the use of the addressee named above and may contain privileged and confidential information. If you are not the intended recipient of this message you are hereby notified that you must not disseminate, copy or take any action based upon it. If you received this message in error please notify Medicare Australia immediately. Any views expressed in this message are those of the individual sender, except where the sender specifically states them to be the views of Medicare Australia. Please consider the environment before printing this e-mail *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Out of Office AutoReply: WSG Digest
I am currently out of office. I will be back in the office on Thursday, 24 February 2011. For MSI/MSIS web enquiries please contact: Papinder Hamid (x77756) p: +61 2 8237 7756 e: papinder.ha...@macquarie.com For MIM web enquiries please contact: Sophia Rahmani (x72060) p: +61 2 8237 2060 e: sophia.rahm...@macquarie.com Notice: The information contained in this email is confidential. If you are not the intended recipient, you may not disclose or use the information in this email in any way. If you received it in error, please tell us immediately by return email and delete the document. Macquarie does not guarantee the integrity of any emails or attached files and is not responsible for any changes made to them by any other person. Macquarie does not warrant or guarantee that information contained in any email or attached file is free of viruses, worms, trojan horses or anything else having contaminating or destructive properties and has not been intercepted and interfered with during transmission. It is your sole responsibility to protect yourself against such risk and, by opening any email or attached file you agree to assume all risks associated with electronic data transmission. Electronic communications carried within the Macquarie system may be monitored. Macquarie Funds Group services are provided by Macquarie Bank Limited ABN 46 008 583 542 or one of its related entities. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[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 ***
