• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to skip custom navigation and go to a specific item on a page

Explorer ,
Nov 13, 2017 Nov 13, 2017

Copy link to clipboard

Copied

Hello,

I have a built a course that needs to be 508-compliant. The course has custom navigation buttons at the top of the page, and one of the requirements is that a user using a keyboard and a screenreader needs to be able to skip over those repetitive navigation elements and go right to the "content" on the page. So if the user selects this button, which is the first thing in the tab order, it will skip over the navigation and the keyboard focus will be on the content. I don't know how to do this in Captivate. Has anybody been able to do this?

Thanks

Views

1.5K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Explorer , Nov 17, 2017 Nov 17, 2017

OK so here is what worked. Thanks for all the suggestions:

document.getElementById("insert name of your button").onkeypress = function() {myFunction()};

function myFunction() {

var elem = document.getElementById("insert name of the item on the page you want to skip to");

$(elem).focus();}

Votes

Translate

Translate
Guide ,
Nov 13, 2017 Nov 13, 2017

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 14, 2017 Nov 14, 2017

Copy link to clipboard

Copied

Hi,
I know how to change the tab order, but what i need is a button that will skip over all the nav items and take the learner to the content on the page. Please let me know if I'm not being clear.

Thanks

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 14, 2017 Nov 14, 2017

Copy link to clipboard

Copied

I think what Eric is saying is that, even though your navigation buttons happen to be located at the very top of the slide, that doesn't necessarily mean they will be the first thing encountered by a disabled user navigating the content via their keyboard (or a screenreader software app).

You can configure the content (via the tab ordering) so that when the learner reaches the slide their tabs will take them to successive content objects on the slide, with the navigation buttons being the last items they reach.  For navigation to be possible for these users, the nav buttons just need to be available SOMEWHERE on the slide.  You the designer determine whether that is first up or last.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 14, 2017 Nov 14, 2017

Copy link to clipboard

Copied

Hi Rod,

I did actually have it set up that way, but the way the client (government) requires it to be set up is that the tabbing order is in the same order as it appears to a sighted user. Therefore they would like a button to be able to skip the navigation. Here is an example of a web page where this is implemented - if you go to this page and hit the tab key you will see the skip navigation and go to content link HHS.gov

I know that  Lectora has the ability to do this, I wasn't sure if this is possible with Captivate.

Thanks

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Nov 14, 2017 Nov 14, 2017

Copy link to clipboard

Copied

I've never seen that option required before for 508. Is it a new thing?

Regardless, can you just make a 'Skip to Main Content' button? That's all the site is doing...

What would it do though - send the tab to the content? set the focus? highlight the screen content?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 14, 2017 Nov 14, 2017

Copy link to clipboard

Copied

The Skip to Content button on that site appears to be jumping to an HTML anchor coded into the page just at the beginning of the content section.

Are you publishing to SWF or HTML5?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 15, 2017 Nov 15, 2017

Copy link to clipboard

Copied

Hi,

I'm not sure if this is a new requirement but from my experience different agencies implement 508 differently.

So if I could have an anchor on that page that would be great. I have to publish to HTML5 as flash is strictly not allowed for this project. The way that Captivate compiles the code I'm not sure if i can get into the HTML for individual pages. Any thoughts on how I could have the button that says "Skip Navigation" go to the content on the page (so skipping over the 5 navigation items that are actually next in the tab order).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Nov 15, 2017 Nov 15, 2017

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 15, 2017 Nov 15, 2017

Copy link to clipboard

Copied

Hi Erik,

This is promising - I am not sure if I'm not doing this correctly? When i press shift+enter to select that button it doesn't seem to do anything. This is what I have entered into my advanced actions - maybe I'm missing something obvious as I am not that familiar with Captivate and javascript.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 17, 2017 Nov 17, 2017

Copy link to clipboard

Copied

OK so here is what worked. Thanks for all the suggestions:

document.getElementById("insert name of your button").onkeypress = function() {myFunction()};

function myFunction() {

var elem = document.getElementById("insert name of the item on the page you want to skip to");

$(elem).focus();}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 10, 2018 Jan 10, 2018

Copy link to clipboard

Copied

LATEST

Hi Yoncau,

I've the same issue with my 508 team in my agency. Could you give more details on where you used this script, did you used in advanced actions? What did you use for {myFunction()}?

Any tip will help a lot.

thanks

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Help resources