Hi, I am using JAWS. The problem is that chart never get focus inorder for jaws to read alt text. Pressing tab simply skips the control.
How do I gain focus to the chart?
My chart never has focus.
Screen Readers wont work unless the chart has focus and then can read the alt text.
Hello shaider,
Thank you for posting in our forum.
You can set a tab index to the img element runtime for example:
$(document).ready(function () {
var img = $("#UltraChart1_BaseImage");
img[0].tabIndex = 1;
});
Then you would be able to set focus on the image element on click.
You could also force the control to get focused by setting:
$("#UltraChart1_BaseImage").focus();
The id of the image would be the chart’s client id +”_BaseImage”. You could force this on tab.
Let me know if you have any further questions or concerns.
Best Regards,
Maya Kirova
Developer Support Engineer
Infragistics, Inc.
http://es.infragistics.com/support
Thank you Maya for responding.
This is what i have done: I have added the javascript on top of the aspx page where my chart is going to. But I get error: Microsoft JScript runtime error: Object expected
Please let me know what I am missing. Thanks
<script type="text/javascript"> $(document).ready(function () { var img = $get('UltraChart1_BaseImage'); img[0].tabIndex = 1; });
</script> <igchart:UltraChart ID="UltraChart" runat="server" Section508Compliant="true" Enabled="true" Tooltips-Display="Never" AcceptsFocus="True" EmptyChartText="Data Not Available. Please call UltraChart.Data.DataBind() after setting valid Data.DataSource" TabIndex = "43" Version="9.2" >
Hello shaider1964 ,
The get method ($get) is a shortcut for Sys.Application.findComponent( http://msdn.microsoft.com/en-us/library/bb397522%28loband%29.aspx ). This return the element or null if it doesn’t find it.
In the previous sample code I’ve mentioned I use the jQuery selector: $("#id”) which returns an array as the result of the selector. Which is why you get the image from img[0]- first result in that collection. If you get the image with $find or $get then you don’t need to get the first index. Juts use img.tabIndex. However keep in mind to check whether the method has returned the element and not null.
I’ve looked into this further and it seems that indeed there seems to be a limitation when the image has an usemap. Tabbing on the image automatically sets the tab to the areas of the map skipping the image. This seems to happen in both Ie and FireFox while in Chrome it seems to interpret the map differently and allows tabbing to set the focus on the image but not on the map areas. This doesn’t seem to be related to the IG chart. It’s due to the way the browser interpret the image with usemap and you could reproduce the same with a simple html page with an image with a usemap for example:
<img style="border-width: 0px; width: 400px; height: 300px;" id="UltraChart1_BaseImage"
title="title" tabindex="1" alt="Pie Chart - What type of services did I receive"
src="ChartImages/Chart_23.png?KxRx=0x01128" usemap="#RxActImg_UltraChart1" />
<map id="RxActImg_UltraChart1" tabindex="2" name="RxActImg_UltraChart1">
<area title="Custom Text" tabindex="3" shape="rect" alt="Custom Text" coords="372,78,388,207" >
<area title="Custom Text" tabindex="4" shape="rect" alt="Custom Text" coords="357,78,372,207">
<area title="Custom Text" tabindex="5" shape="rect" alt="Custom Text" coords="341,13,357,207">
<area title="Custom Text" tabindex="6" shape="rect" alt="Custom Text" coords="326,78,341,207">
(...)
</map>
Let me know if there’s anything else I can assist you with.
Another thing I noticed is that if I get rid of the USEMAP property from the image tag, the tabindex works fine. But it then looses the focus from the map area. But if USEMAP is there, the tabindex is not there. It does focus on the image and the map area but at the end. I need to go in the order of the form.
One More thing I noticed is that if I get rid of the USEMAP property from the img control, the tabindex works fine but ofcourse the area is not selected on the map. So, basically the tabindex wont work on img tag if the usemap is there.
Thank Maya for your quick response.
This is what I have found out:
JAWS is reading the image alternate text when i set the tabindex using the clientid of the img tag. But the tabindex is not set to the actual value but the last tabindex on the page.
e.g, if I want the tabindex to be 5, it will tab through the whole form and goto my chart map area at the last tab through the page. If I have 10 controls, and chart happens to be the 5th, it will skip the chart and then goto my chart at the end. But if I set the accesskey at the same time in JAVA script, and I hit ALT and use use accesskey, it goes to my image area map and announces th value.
Please see what is missing, since I need to to work using the tabs.
This is my code:
function pageLoad() { var img = document.getElementById("<%= this.UltraChart.ClientID %>" + "_BaseImage"); img.tabIndex = 40; img.accessKey = "V"; }
I’m not sure in what manner JAWs navigates trough the elements and reads them. However when you’ve set :
this.UltraChart1.Section508.ChartItems.TitleFormatString = "<ITEM_LABEL>: <DATA_VALUE:#>";
this.UltraChart1.Section508.ChartItems.AltTextFormatString = "<ITEM_LABEL>: <DATA_VALUE:#>";
Then the chart elements have an added alt and title attributes which it should be able to read. Those elements are actually <area> elements in a <map>.
Generally the chart is section 508 compliant in regard to (a) and (f) as described in the following document:
http://webaim.org/standards/508/checklist
Here a complete list of all our controls and their accessibility overview:
http://help.infragistics.com/NetAdvantage/ASPNET/2011.1/CLR4.0/?page=Web_Accessibility_Overview.html
Try testing whether JAWS can read through map elements by default. For example set in an html page:
<map id="RxActImg_UltraChart1”>
<area title="Custom Text" shape="rect" alt="Custom Text" coords="372,78,388,207">
<area title="Custom Text" shape="rect" alt="Custom Text" coords="357,78,372,207">
<area title="Custom Text" shape="rect" alt="Custom Text" coords="341,13,357,207">
<area title="Custom Text" shape="rect" alt="Custom Text" coords="326,78,341,207">
<area title="Custom Text" shape="rect" alt="Custom Text" coords="295,78,310,207">
<area title="Custom Text" shape="rect" alt="Custom Text" coords="279,99,295,207">
<area title="Custom Text" shape="rect" alt="Custom Text" coords="263,56,279,207">
<area title="Custom Text" shape="rect" alt="Custom Text" coords="248,121,263,207">
<area title="Custom Text" shape="rect" alt="Custom Text" coords="217,121,232,207">
<area title="Custom Text" shape="rect" alt="Custom Text" coords="201,142,217,207">
This would be basically the way the map of the chart would look like.
Test whether JAWS would be able to read the alt text or title. If it skips them then that’s probably some limitation of JAWS.
Let me know once you’ve had the chance to test this.