Canvas Test

Canvas Question #1 (Fallback not special focus attributes)

Here's an example with dynamic fallback content to test that keyboard access goes into the fallback, but can also be made to control the visuals using JavaScript. It also shows that HTML structure in the fallback content is communicated to AT.

While this has a level of accessibility, some issues remain. Specifically, tracking focus for:

  • Magnifiers
  • Scrolling with text-to-speech
  • Scrolling with voice control
  • Scrolling for keyboard access

It seem there will be new APIs to address these issues. But, this example doesn't test these. setElementPath or Shape, scrollPathIntoView, drawSystemFocusRing, drawCustomFocusRing will be tested with a copy of this example once I hear that they've been implemented somewhere.

Here's a link to the example itself: Pattern Question (opens in a new window)

Canvas Question #2 (with drawSystemFocusRing)

Here's the same exercise again, updated to use drawSystemFocusRing (opens in a new window). This has not been tested as it is not yet implemented in any browsers. (July 26, 2013) The reason to do this is that this attribute will hopefully:

Version to better highlight some odd things I see in Chrome Canary Dev Version. Aug 2.

  • Draw a focus ring that matches the rest of your focus rings.
    • If the Web author customized focus rings, it should take the style from the style of the corresponding element in the fallback content.
    • If the end user customized the focus indication, it will reflect that customization. (Note that on ordinary links customization available through ZoomText works regardless of any Web author customization, so this is consistent in that sense.)
  • Let assistive technologies know where the visual representation of the focus is. So, if you are using a lens in ZoomText, the lens can should move to surround the right element, once drawSytemFocusRing is implemented in browsers. Right now, in FireFox, ZoomText outlines the fallback items as they get focus as though they exist where they would in the normal flow, if they weren't fallback content, and, in Chrome, ZoomText doesn't outline anything when active fallback content has focus.

In order to use this attribute, I had to draw the rectangle as a real path. I switched from code like this: rc.strokeRect (725,165,140,120); to code like this:

                      rc.beginPath();
                      rc.moveTo(725,165);
                      rc.lineTo(865,165);
                      rc.lineTo(865,285);
                      rc.lineTo(725,285);
                      rc.lineTo(725,165);
                      rc.closePath();

Once you have a path like that, you can use path commands with it, like rc.stroke(); and rc.drawSystemFocusRing(element);.

That has to be set to happen onFocus. The trickier part is erasing the focus ring onBlur. We don't actually know how big the focus ring is, how far from the path it might extend, what other elements it might overlap, or whether it shades or reverses the colors inside the path:

A red rectangle focus indicator is shown and it is considerably larger than the button itself.

So, while before I erased my own focus ring using a 7 pixel wide white stoke rectangle and then just redrew a 2 pixel wide grey stroke rectangle, for this new version, I copy an area 20 pixels larger than the path all around and save it. Then, apply the focus ring, then, onBlur, put the entire rectangle I made a copy of back. Luckly, there are nice commands for copying and pasting rectangles of pixels: window.imgData1=rc.getImageData(255,145,200,160); ...rc.putImageData(window.imgData1,255,145);

Testing Results for Question #1 (Please note whether or not the canvas functionality itself works as well.)

Configuration Does Keyboard Access interact with the canvas? Does Canvas Functionality Work? Does Fall-back Content appear visually on the Screen? Is Fall-back Content Read by the Screen Reader? Result Notes
JAWS 11 & IE 9 Yes, however there is a javascript error where the question box is not drawn on the canvas, which causes the keyboard access to fail. YesNoYesIE v.9.0.8112 Windows 7
JAWS 11 & FF 19 Yes YesNoYesFF 19.0 Windows 7
JAWS 11 & Chrome 25 Yes JAWS announced the heading and the "New Pattern" button, but nothing inside the canvas.NoNo JAWS does not read fall back content.Chrome 25 Windows 7
JAWS 12 & IE 9 Yes, however there is a javascript error where the question box is not drawn on the canvas, which causes the keyboard access to fail. YesNoYesIE v.9.0.8112 Windows 7
JAWS 12 & FF 19 Yes YesNoYesFF 19.0 Windows 7
JAWS 12 & Chrome 25 Keyboard can tab through the options in the canvas but enter does not evoke a response. However, tabbing to the "New Pattern" button and pressing the "enter" key redraws the canvas with a new pattern. JAWS announced the heading, all items within the canvas, and the "New Pattern" button. When clicking on the answer (not using Keyboard) JAWS announced the alert window.NoYes JAWS reads all fall back content but it connects list items, ignoring end of list item and reading each as one continuous sentence. Confusing with strange pronunciation.Chrome 25 Windows 7
JAWS 13 & IE 8 ??    
JAWS 13 & IE 9 Yes, however there is a javascript error where the question box is not drawn on the canvas, which causes the keyboard access to fail. YesNoYesIE v.9.0.8112 Windows 7
JAWS 13 & FF 19 Yes Yes. When using the mouse to click the options in the canvas, a wrong answer changes focus to the h1 heading and not back to the option selected. When using the mouse to click the correct answer, the alert window then sends focus to the "New Pattern" button, as expected.NoYesFF 19.0 Windows 7
JAWS 13 & Chrome 25 Keyboard can tab through the options in the canvas but enter does not evoke a response. However, tabbing to the "New Pattern" button and pressing the "enter" key redraws the canvas with a new pattern. YesNoYes JAWS reads all fall back content but it connects list items, ignoring end of list item and reading each as one continuous sentence. Confusing with strange pronunciation.Chrome 25 Windows 7
JAWS 14 & IE 9 Yes, however there is a javascript error where the question box is not drawn on the canvas, which causes the keyboard access to fail. Yes. When using the mouse to click the options in the canvas, a wrong answer changes focus to the h1 heading and not back to the option selected. When using the mouse to click the correct answer, the alert window then sends focus to the "New Pattern" button, as expected.NoYesIE v.9.0.8112 Windows 7
JAWS 14 & FF 19 Yes Yes. JAWS repeats "clickable" on every list item in the canvas, and each button in the canvas. When using the mouse to click the options in the canvas, a wrong answer changes focus to the h1 heading and not back to the option selected. When using the mouse to click the correct answer, the alert window then sends focus to the "New Pattern" button, as expected.NoYesFF 19.0 Windows 7
JAWS 14 & Chrome 25 Keyboard can tab through the options in the canvas but enter does not evoke a response. However, tabbing to the "New Pattern" button and pressing the "enter" key redraws the canvas with a new pattern. JAWS announced the headings, and the "New Pattern" button. The other list items are read as one continuous sentence and sometimes out of order. It is very hard to understand, and makes no sense at all. When clicking on the answer (not using Keyboard) JAWS announced the alert window. If the answer is correct, the focus is then announced on the "New Pattern" button, but it is visible on the option last clicked in the canvas. If the answer is incorrect, the focus is announced on the h1 heading at the top of the page, but it is visible on the last item clicked in the canvas.NoYes JAWS reads all fall back content but it connects list items, ignoring end of list item and reading each as one continuous sentence. Confusing with strange pronunciation.Chrome 25 Windows 7
WindowEyes 7.5.3 & IE 9 ??    
WindowEyes 7.5.3 & FF 10 ??    
Chrome VOX Windows Yes YesNoYesChrome v.25 Windows 7
VoiceOver & Safari Keyboard can access the "New Pattern" button. Keyboard cannot access the options within the canvas area. VO announces the heading and the button. VO does not announce the canvas, it calls it an image. It will announce alt text when supplied. NoNoSafari 6.0.2 OS 10.7.5
VoiceOver & Safari in iOS for iPad Gestures do not access the canvas VO announces the heading and the button. VO does not announce the canvas, it calls it an image. NoNoSafari iOS 6.1.2
Chrome VOX Mac OS Yes Chrome Vox announced the heading, all items within the canvas, and the "New Pattern" button. Chrome VOX did not announce the alert window.NoYesChrome v.25 OS 10.7.5
NVDA 2012.3.1 & IE 8 ?    
NVDA 2012.3.1 & IE 9 Yes, however there is a javascript error where the question box is not drawn on the canvas, which causes the keyboard access to fail. NVDA can only announces whatever the mouse icon is hovering over. When using the mouse to click the options in the canvas, a wrong answer changes focus to the top of the page and not back to the option selected. When using the mouse to click the correct answer, the alert window then sends focus to the "New Pattern" button, as expected. NoYes NVDA reads all fall back content, if the mouse if hovering over the canvas.IE v.9.0.8112 Windows 7
NVDA 2012.3.1 & FF 19 Yes Yes. Using the arrow keys to access the buttons in the canvas does not work. However, using the arrow keys to access the "New Pattern" button and the enter key does work. When using the mouse to click the options in the canvas, a wrong answer changes focus to the h1 heading and not back to the option selected. When using the mouse to click the correct answer, the alert window then sends focus to the "New Pattern" button, as expected. NVDA also announces whatever the mouse icon is hovering over.NoYes NVDA reads all fall back contentFF 19.0 Windows 7
NVDA 2012.3.1 & Chrome 25 No NVDA announced the headings, and the "New Pattern" button. The other list items are read as one continuous sentence and sometimes out of order. When clicking on the answer (not using Keyboard) NVDA announced the alert window. Then the focus is announced on the h1 heading at the top of the page.NoYes NVDA reads all fall back content but it connects list items, ignoring end of list item and reading each as one continuous sentence. Confusing with strange pronunciation.Chrome 25 Windows 7

Older Less Realistic Example

With which configurations, if any, is the fall back content read? In this case, the fall back content is static and does not change dynamically: Open Static Fall Back Content Test in a new window.

Results (Please note whether or not the canvas functionality itself works as well.)

Configuration Does Canvas Functionality Work? Does Fall-back Content appear visually on the Screen? Is Fall-back Content Read by the Screen Reader? Result Notes
JAWS 11 & IE 8 ?    
JAWS 12 & IE 9 ?    
JAWS 13 & IE 8 ?    
JAWS 13 & IE 9 ?    
JAWS 12 & FF 10 ?    
JAWS 11 & FF 10 ?    
JAWS 13 & FF 10 ?    
JAWS 13 & Chrome 17 ?    
WindowEyes 7.5.3 & IE 9 ?    
WindowEyes 7.5.3 & FF 10 ?    
VoiceOver & Safari Yes, but the canvas is not announced by VO NoNo it is not read by VOSafari 5.1.2 OS 10.6.8
VoiceOver & Safari in iOS 5.0.1 for iPad ?    
Chrome VOX Mac OS Yes when the button "Draw on the Canvas" is clicked Chrome announces "clicked" NoYes it is read by VOXChrome 17.0.963.79 OS 10.6.8
NVDA 2012.1beta2 & IE 8 ?    
NVDA & IE 9 ?    
NVDA & FF 10 ?