- From: Gunderson, Jon R <jongund@illinois.edu>
- Date: Thu, 19 Nov 2015 20:45:48 +0000
- To: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com>, Michiel Bijl <michiel@agosto.nl>
- CC: Protocols and Formats Working Group <public-pfwg@w3.org>
- Message-ID: <D2739089.47BAA%jongund@illinois.edu>
Another model we have been developing at illinois for the carousel is using a tab panel widget and we have added it to the PayPal accessibility plug-in: http://presentations.cita.illinois.edu/examples/bootstrap-carousel/index.html Jon From: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com<mailto:bryan.garaventa@ssbbartgroup.com>> Date: Thursday, November 19, 2015 at 1:40 PM To: Michiel Bijl <michiel@agosto.nl<mailto:michiel@agosto.nl>> Cc: "public-pfwg@w3.org<mailto:public-pfwg@w3.org>" <public-pfwg@w3.org<mailto:public-pfwg@w3.org>> Subject: RE: Possible Carousel demo for the APG, please review. Resent-From: "public-pfwg@w3.org<mailto:public-pfwg@w3.org>" <public-pfwg@w3.org<mailto:public-pfwg@w3.org>> Resent-Date: Thursday, November 19, 2015 at 1:40 PM Okay, I think this may do the trick. I’ve added a Stop/Resume button at the top right, which includes dynamic CSS generated tooltips for sighted keyboard-only users. This is reviewable at http://whatsock.com/tsg/Coding%20Arena/Carousels,%20Slideshows,%20and%20Wizards/Carousel%20(Flat%20from%20XML%20with%20Overrides)/demo.htm<https://urldefense.proofpoint.com/v2/url?u=http-3A__whatsock.com_tsg_Coding-2520Arena_Carousels-2C-2520Slideshows-2C-2520and-2520Wizards_Carousel-2520-28Flat-2520from-2520XML-2520with-2520Overrides-29_demo.htm&d=BQMGaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=SavccQkhkLPa5d-mGpyZAQRcFXPj2fShpsKOCa7zOqw&s=k8C6HbcNMmy49Zq4shWl1LDdQaIl_AjOPqcHhzDLxbA&e=> I modified the Carousel module slightly to provide better granularity for detecting the difference between paused versus stopped states, where paused occurs when you mouse over or set focus into the carousel, but stopped stays stopped no matter where the mouse or focus is. I also added the margin-top CSS for the second slide which has a different height than the others to center this better within the slide pane. Please let me know if this fixes the offset issue, or if there are any other issues. This too is downloadable as a single archive at http://whatsock.com/test/Carousel%20(Flat%20from%20XML%20with%20Overrides).zip<https://urldefense.proofpoint.com/v2/url?u=http-3A__whatsock.com_test_Carousel-2520-28Flat-2520from-2520XML-2520with-2520Overrides-29.zip&d=BQMGaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=SavccQkhkLPa5d-mGpyZAQRcFXPj2fShpsKOCa7zOqw&s=vS3CcYZnDEcbBB_GkrtcPq1B_3MhBLY7SHqrx5kugNU&e=> I’ll update all of the relevant GitHub projects with the new code shortly as well. I also tracked down the bug when using JAWS16 in IE11, which appears with the Stop button as well. If you have an active element that includes a role such as ‘button’, plus a valid labeling technique such as aria-label, plus the use of aria-hidden=’true’ to hide the inner text from the naming calculation, the entire element disappears in JAWS. E.G <a title="Stop rotation" class="stopBtn" role="button" aria-label="Stop rotation" href="#"><span aria-hidden="true">X</span></a> Hopefully this doesn’t occur in JAWS17. From: Bryan Garaventa Sent: Wednesday, November 18, 2015 10:40 AM To: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com<mailto:bryan.garaventa@ssbbartgroup.com>>; Michiel Bijl <michiel@agosto.nl<mailto:michiel@agosto.nl>> Cc: Protocols and Formats Working Group <public-pfwg@w3.org<mailto:public-pfwg@w3.org>> Subject: RE: Possible Carousel demo for the APG, please review. Hi, as a quick update, I think I figured out the offset display issue, which I think I’ve corrected by doing the following: Within files\carousel.xml, I added the following markup to surround the smaller image with a surrounding div. <slide announce="Frente - Labour of Love" ><![CDATA[ <div class="slide slide2"> <img src="img/music/ar_f_ll.jpg" alt="Frente - Labour of Love" title="Frente - Labour of Love" /> </div> ]]></slide> This image was previously aligning at the top when rendered, so I added the following classes within custom.css at the bottom: div.slide { width: 100%; } div.slide.slide2 img { margin-top: 22px; } This may fix the visual issue you mentioned, hopefully. Also, I’m working on the Stop/Resume button, but am not sure which symbols are best for this. I’m thinking O for Play and X for Stop? I’m basing this on a WalkMan I remember having about 25 years ago, so I may not be exactly up-to-date on the most widely used icons for stuff like this. Does this sound right? Thanks, Bryan From: Bryan Garaventa [mailto:bryan.garaventa@ssbbartgroup.com] Sent: Tuesday, November 17, 2015 4:21 PM To: Michiel Bijl <michiel@agosto.nl<mailto:michiel@agosto.nl>> Cc: Protocols and Formats Working Group <public-pfwg@w3.org<mailto:public-pfwg@w3.org>> Subject: RE: Possible Carousel demo for the APG, please review. Excellent thanks :) In the short term I’ve zipped and uploaded the working code to http://whatsock.com/test/Carousel%20(Flat%20from%20XML%20with%20Overrides).zip<https://urldefense.proofpoint.com/v2/url?u=http-3A__whatsock.com_test_Carousel-2520-28Flat-2520from-2520XML-2520with-2520Overrides-29.zip&d=BQMGaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=SavccQkhkLPa5d-mGpyZAQRcFXPj2fShpsKOCa7zOqw&s=vS3CcYZnDEcbBB_GkrtcPq1B_3MhBLY7SHqrx5kugNU&e=> This is designed to be a scalable widget, so it may help for me to briefly explain the files it contains. >From demo.htm, it references the CSS and JavaScript files as normal. E.G First it loads jQuery, Second it loads the AccDC normalization plugin for jQuery Third it loads the Carousel module, Fourth it loads the general setup.js file that configures the carousel functionality, which is reflected in the attached ReadMe.txt file. So the place where the offset positioning is controled is within the carousel_module.js module file, where it begins with the following code lines runBefore: function(dc){ dc.cssObj.height = bDiv.clientHeight; dc.cssObj.width = bDiv.clientWidth; And so on within that code block. This is where it calculates the height and width of each slide panel as well as the starting top and left properties. It seems likely though that the problem may stem from the issue that all of the images are not actually the same height and width, which I didn’t notice till now. The markup for these is contained within the text file: files/carousel.xml, where it includes the markup that is rendered in each slide like so: <slide announce="Emiliana Torrini - Love in the Time of Science" ><![CDATA[ <img src="img/music/ar_et_lts.jpg" alt="Emiliana Torrini - Love in the Time of Science" title="Emiliana Torrini - Love in the Time of Science" /> ]]></slide> It might be more useful to add markup like so instead <slide announce="Emiliana Torrini - Love in the Time of Science" ><![CDATA[ <div class=”slide1”> <img src="img/music/ar_et_lts.jpg" alt="Emiliana Torrini - Love in the Time of Science" title="Emiliana Torrini - Love in the Time of Science" /> </div> ]]></slide> And then to add padding values in the CSS file custom.css to adjust for the different image height and width ratios between each slide. That may do the trick. Within the file setup.js, the DOM positioning and additional controls are configured within the function ‘renderFn’, which is how the numerical buttons and keyboard functionality is setup. If it makes sense, I can add another div node and place this before centerDiv (which is where the slides are dynamically generated), and add an O icon positioned in the top right corner for doing this, or if you wish to give it a swing you are welcome as well :) I’m not sure where the best positioning for something like this would be. E.G To make the same code equally compatible across jQuery, Dojo, and MooTools, the syntax would be like the following: Var topDiv = $A.createEl(‘div’, { // Attribute1: ‘value1’, // Attribute2: ‘value2’ // etc. }, { // CSSProp1: ‘value1’, // CSSProp2: ‘value2’ // etc. }, ‘className clearfix whateverHere’, optionalDomNodesToAppend); It’s just an event binding to stop the carousel, like so: $A.bind(buttonDOMNode, { click: function(ev){ var dc = $A.reg['carouselId']; dc.enableAuto(false); ev.preventDefault(); } }); Plus a redundant keyDown handler of course if this is a simulated element. Also, if it’s desirable to change something like a class or content when the carousel starts or stopps rotating, this can be configured using the ‘stopStateChange’ handler like so: stopStateChange: function(isStopped, dc){ // isStopped = true or false // do something }, This too is documented in the attached ReadMe file too. I’ve added this in case it’s helpful, but I will of course add these things to save time since I can usually do this fairly quickly. If you can help me get the CSS issue worked out though, that would really be appreciated. I think the key is the markup within the XML file and adding a fixed padding for differently sized images within the CSS file, but any insights would be great. All the best, Bryan From: Michiel Bijl [mailto:michiel@agosto.nl] Sent: Tuesday, November 17, 2015 3:00 PM To: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com<mailto:bryan.garaventa@ssbbartgroup.com>> Cc: Protocols and Formats Working Group <public-pfwg@w3.org<mailto:public-pfwg@w3.org>> Subject: Re: Possible Carousel demo for the APG, please review. No problem Bryan. Once you post the code I can have a look at the offset bug. A button before the carousel itself would work. Not sure what the guide or WCAG says, but should the carousel autoplay, or should the button perhaps say “play”? I’m for/against either, just a question. —Michiel On 17 Nov 2015, at 19:19, Bryan Garaventa <bryan.garaventa@ssbbartgroup.com<mailto:bryan.garaventa@ssbbartgroup.com>> wrote: Thanks, I’ll package up a copy of the regular code in a bit for download. It’s difficult for me to track down strictly visual stuff like the offsets, so if you could help with this that would be awesome. I can show you where this is in the code. Adding a pause element is no problem, it takes me longer to figure out where to put this in the layout. All the best, Bryan From: Michiel Bijl [mailto:michiel@agosto.nl] Sent: Tuesday, November 17, 2015 4:27 AM To: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com<mailto:bryan.garaventa@ssbbartgroup.com>> Cc: Protocols and Formats Working Group <public-pfwg@w3.org<mailto:public-pfwg@w3.org>> Subject: Re: Possible Carousel demo for the APG, please review. This looks like a good start! Found some issues: * No visual way to pause the slider, this is needed to satisfy WCAG 2.2.2; * Offset of slides goes out of sync after a while. Could you provide a un-minified version of the slider code? Some VoiceOver testing with Safari 9 on OS X 10.10 Yosemite: * Title for content is spoken when focused on slide itself (image portion); * Didn’t hear it group next/prev buttons, but not sure what that should sound like; * All buttons are spoken correctly. —Michiel On 16 Nov 2015, at 21:03, Bryan Garaventa <bryan.garaventa@ssbbartgroup.com<mailto:bryan.garaventa@ssbbartgroup.com>> wrote: Also, this exposes a bug in JAWS16 in IE11 where it won’t recognize the shared button grouping between the Prev and Next buttons, though there is no reason why this should be the case since this is simply a role=”group” with embedded role=”button” elements. Confirmed using JAWS16 + IE11 + Win7. I’m not sure if this occurs in JAWS17 however or in later OS versions. This also makes use of the new aria-current attribute within the numerical indicators as well, though there is currently no browser or AT support for this as yet. This can be examined within the DOM using a DOM viewer utility. From: Bryan Garaventa [mailto:bryan.garaventa@ssbbartgroup.com] Sent: Monday, November 16, 2015 11:48 AM To: 'PF' <public-pfwg@w3.org<mailto:public-pfwg@w3.org>> Subject: Possible Carousel demo for the APG, please review. Hi, I've been working on a carousel demo that uses different concepts than those previously explored such as Tabs and Listboxes, which I find to be more intuitive from a UX perspective. This is meant to be in accordance with the guidance at http://www.w3.org/WAI/tutorials/carousels/<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.w3.org_WAI_tutorials_carousels_&d=BQMGaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=SavccQkhkLPa5d-mGpyZAQRcFXPj2fShpsKOCa7zOqw&s=3qAjOVeZ1eECkE0qJry3q6izpP12X_JdUPhUyw12UB8&e=> This is live at http://whatsock.com/tsg/Coding%20Arena/Carousels,%20Slideshows,%20and%20Wizards/Carousel%20(Flat%20from%20XML%20with%20Overrides)/demo.htm<https://urldefense.proofpoint.com/v2/url?u=http-3A__whatsock.com_tsg_Coding-2520Arena_Carousels-2C-2520Slideshows-2C-2520and-2520Wizards_Carousel-2520-28Flat-2520from-2520XML-2520with-2520Overrides-29_demo.htm&d=BQMGaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=SavccQkhkLPa5d-mGpyZAQRcFXPj2fShpsKOCa7zOqw&s=k8C6HbcNMmy49Zq4shWl1LDdQaIl_AjOPqcHhzDLxbA&e=> This uses standard button roles plus named region and group to identify associated button groupings, plus CSS tooltips for added keyboard-only user accessibility support, plus a one tab stop scrollable slide region for single keypress navigation if desired for keyboard-only users. The slides just include images at the moment as placeholders, but can be anything from multiple images, combinations of images and links and form fields, etc. Please let me know if I’ve missed anything or if anything looks off. Thanks, Bryan
Received on Thursday, 19 November 2015 20:46:29 UTC