DMXzone Tabs Support Product Page

In progress

Tab Accessibility

Reported 01 May 2013 09:55:45
1
has this problem
01 May 2013 09:55:45 Juan Olarte posted:

Hi I am having some problems with the tabs accessibility. Basically users using screen readers use the tab key to navigate the site, when they reach the tab box the screen reader reads the first item in the #dmxTabs1-1, however when they hit the tab key again the next thing the screen reader reads is the information in the dmxTabs1-1 content area, rather than going to the next item like dmxTabs1-2.

I’ve tried adding the tabindex="0" to the link and to the <li> but nothing works. Do you have any sugestios?

Thanks

Juan

Replies

Replied 03 May 2013 11:05:54
03 May 2013 11:05:54 Juan Olarte replied:
Can any one help with this?
Replied 07 May 2013 06:43:44
07 May 2013 06:43:44 Vulcho Vulev replied:
Hello Juan.

Can you please provide us with link to the problem page?

Regards:Vulcho.
Replied 07 May 2013 07:11:43
07 May 2013 07:11:43 Juan Olarte replied:
Hi Vulcho–

Thanks for getting back, here is the link: www.myabilitylink.com/M/Service-Providers/SPD1.php?Org_MI_ID=100054854

Thanks

Juan
Replied 15 May 2013 07:52:44
15 May 2013 07:52:44 Vulcho Vulev replied:
Hello Juan.

Can you specify the browser tat you are using while creating the problem ?

Regards: Vulcho.
Replied 15 May 2013 13:34:01
15 May 2013 13:34:01 Juan Olarte replied:
Hi Thanks for getting back to me. In terms of browsers I am testing with IE, Firefox, chrome and safari. In terms of assistive technologies I am using JWAS and ZoomText.
As mention the problem is when users are navigating the page using the keyboard, when using the tab key, it should go from About to Articles to Events, and when the enter key is hit it should take the user to the beginning of that content.

Thanks

Juan
Replied 17 May 2013 07:21:49
17 May 2013 07:21:49 Vulcho Vulev replied:
Hello Juan.

I see that keyboard navigation is working good within the tabs. The problem of the combination with the JWAS and ZoomText must be when you hit enter.
You can bind custom javascript function which will triger on Enter Click and will scroll to specific container in which the content is loaded.
For example:

The javascript:

<script type="text/javascript">
function scrollToElement(selector, callback){
    var animation = {scrollTop: $(selector).offset().top};
    $('html,body').animate(animation, 'slow', 'swing', function() {
        if (typeof callback == 'function') {
            callback();
        }
        callback = null;
    });
}
$(document).keypress(function(e) {
    if(e.which == 13) {
        scrollToElement('#ScrollDiv');
    }
});
</script>


The HTML:

<div id="ScrollDiv">
<!------Your Content Goes Here------------>
</div>


Regards:Vulcho.
Replied 22 May 2013 08:01:57
22 May 2013 08:01:57 Juan Olarte replied:
Thanks Vulcho!

Reply to this topic