Re: [WSG] Accessible modal windows / lightboxes
On Jan 20, 2011, at 4:44 AM, Steve Green wrote: > Yes, here's one we worked on - > http://htmltools.moneymadeclear.org.uk/mortgage-calculator/index.aspx > Have you tested it on Firefox? It doesn't seem to allow keyboard support for the modal window. Also, a usability glitch IMHO, the close button should be placed in the last keyboard control, reason is that, if the content in the modal window is intended for reading and there are links within it that depends on keyboard control, you won't want users to close the window before they even have a chance to tab through the content. Having the close button placed in the last keyboard control prevents users to close it - once you hit the "Get Started" (if you miss the enter key (the focus is not as obvious despite the outlined) when you are at the button) it doesn't allow you to go through the tab again to close the window. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Accessible modal windows / lightboxes
jQuery Fancybox has keyboard control using mousewheel plugin. No keyboard support for close window - this could be implemented with ARIA I guess. > > > I haven't been able to find any that will trigger a screen reader to actually > read the content within > Most of the lightbox-ish gallery use Title attribute for Caption. My guess is, if a screen reader has the read title enable, it should be able to read it. But if the image is replaced by the content, or you have the content place in the image container box along with the image, screen reader should be able to read it just fine. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Accessible modal windows / lightboxes
Here are a couple posts on using ARIA with YUI. This information could also go towards jquery. * http://www.yuiblog.com/blog/2008/07/30/tabview-aria/ * http://www.yuiblog.com/blog/2008/10/02/yui-aria/ http://www.yuiblog.com/blog/2009/08/03/aria-made-easier-with-yui-3/ * http://yuiblog.com/blog/2009/03/05/aria-grids/ * http://yuiblog.com/blog/2007/12/21/menu-waiaria/ * http://yuiblog.com/blog/2008/12/08/video-kloots-aria/ Ted Drake Yahoo! Accessibility Lab http://accessibility.yahoo.com On 1/20/11 4:13 AM, "James Grant" wrote: Hi WSG'ers, Does anybody have any experience with creating accessible modal windows, aka lightboxes? While I have seen some great lightbox experiments that do allow keyboard control, I haven't been able to find any that will trigger a screen reader to actually read the content within. My project is looking to use lightboxes for field-level help which can contain up to a few paragraphs of textual content, no unique images will appear within the modal window. Once the modal window is open, the only user controls will be to close the window by either selecting the 'close' option, or clicking outside of the content. Thanks! - Jimmy *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Accessible modal windows / lightboxes
Yes, here's one we worked on - http://htmltools.moneymadeclear.org.uk/mortgage-calculator/index.aspx The problem with most lightboxes is that the position of the focus is not controlled correctly. Typically the user has to tab through all the page content to get to the lightbox content because it has been inserted at the end of the DOM. When they close the lightbox, the focus is not returned to where they originally were on the page. Both of these issues are addressed in the link above, and the result is a seamless experience for anyone using keyboard navigation, including screen reader users. If you give focus to one of the Help buttons and press the Enter key, the lightbox opens and the Close button has focus. If you close the lightbox, the focus returns to the original link. A screen reader will read the contents of the lightbox immediately after the Close button. The only time the focus is not correctly controlled is when the 'Recommend to a friend' or 'Email results' forms are submitted. In these cases the focus returns to the top of the page. The developers tell us it's because they can't control the focus after an HTTP request. Steve Green Director Test Partners Ltd From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of James Grant Sent: 20 January 2011 12:14 To: wsg@webstandardsgroup.org Subject: [WSG] Accessible modal windows / lightboxes Hi WSG'ers, Does anybody have any experience with creating accessible modal windows, aka lightboxes? While I have seen some great lightbox experiments that do allow keyboard control, I haven't been able to find any that will trigger a screen reader to actually read the content within. My project is looking to use lightboxes for field-level help which can contain up to a few paragraphs of textual content, no unique images will appear within the modal window. Once the modal window is open, the only user controls will be to close the window by either selecting the 'close' option, or clicking outside of the content. Thanks! - Jimmy *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Accessible modal windows / lightboxes
Hi WSG'ers, Does anybody have any experience with creating accessible modal windows, aka lightboxes? While I have seen some great lightbox experiments that do allow keyboard control, I haven't been able to find any that will trigger a screen reader to actually read the content within. My project is looking to use lightboxes for field-level help which can contain up to a few paragraphs of textual content, no unique images will appear within the modal window. Once the modal window is open, the only user controls will be to close the window by either selecting the 'close' option, or clicking outside of the content. Thanks! - Jimmy *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
