Skip to main content
Known Participant
Jul 10, 2020 11:00 PM UTC
Question

Question about creating accessible TOC

Hi,

 

I am trying to create an accessible TOC that can be used by keyboard navigation. Can someone please help how to do it. I created HTML 5 help and most part it works, but when i colapse an expanded topic it stops working. Any help is appreicated.

 

thanks

Gagan

This topic is closed to new replies. Start a new post to keep the conversation going.

9 replies

Peter Grainge
Community Expert
Community Expert
Aug 1, 2020 8:22 AM UTC

When I opened the frameless page I found pressing the tab key did nothing. I had to click a book and then press Enter. You said "from Welcome, when i click tab to Copyrights" so click tab caused a little confusion. Hopefully I did what was expected.

 

  • When I clicked the Copyrights page the topic opened so there is nothing further that Enter can do.
  • On the Console page, pressing Enter did expand the book but tabbing didn't appear to do anything useful.
  • On the Search page, pressing Enter did nothing. There must be a difference in how those books are set up.

 

Please comment on what is right and wrong in accessibility terms. First though take a look at the RoboHelp Tour on my site. I have just upgraded that to 2020 as I know Adobe have done a lot of accessibility work in this release.

 

What appears to happen there is you click on a topic in the TOC to access a page. None of the books are set up to open a topic so Enter will not work there. Then the tab key takes the user all around the page so make all the options available, including the browser options.

 

I don't know enough about accessibility but that seems to make some sense. If it is wrong, then please comment.

 

Hope that helps.

Translate
Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Peter Grainge
Community Expert
Community Expert
Jul 31, 2020 1:41 PM UTC

I am not familiar with what is required to meet accessibility requirements.

 

Please set out step by step from the moment the help is opened what you are doing and where it goes wrong.

 

Translate
Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Known Participant
Jul 31, 2020 11:21 PM UTC

On this view, i am trying to tab through the tree using the tab key: https://ussuhvvm0350.egdemo.info/ad/welcome.htm

So from Welcome, when i click tab to Copyrights, the copyrights topic should be highlighted and when i press enter on keyboard it should open the topic i am on. and when i tab to say the book "search" and hit enter it should open the list of topics under it.

It works for HTML5 version with minor issues: https://ussuhvvm0350.egdemo.info/html5/start.htm#t=welcome.htm

In html5 version - the only issue i had was that when i used to close the book by clicking enter, the tabbing used to go through all items in the book, before reaching the next book. the correct hehavior would be - it should just go the next book.

 

thanks.

Translate
Peter Grainge
Community Expert
Community Expert
Jul 21, 2020 7:29 AM UTC

As accessibility is an issue you might want to try the New UI version version. It takes a copy of your Classic version and upgrades that so your Classic project remains untouched and can be reverted to in its current form.

 

It is a very different interface so there's a learning curve. However, going forward you will need to learn it as Classic does not ship with 2020.

 

Going forward I think Frameless is where Adobe will focus their efforts in both design and functionality so that's another reason for looking at frameless. If you use URLs for calls they will be different. The difference is explained in the RoboHelp Tour on my site.

 

Translate
Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Known Participant
Jul 30, 2020 7:11 PM UTC

Thanks, Peter. I moved to Frameless version and still get the tabbing to work properly for accessibility in the TOC. You can access the sample version of help here: https://ussuhvvm0350.egdemo.info/ad/index.htm?

do i need to change something in project to make it work?

 

thanks

gagan

Translate
Community Expert
Jul 21, 2020 1:30 AM UTC

I think you're on update 5 and we're now up to update 14, so you probably want to update to the latest patch. You can also check the release notes here to see if there are accessibility issues addressed in newer updates.

 

https://helpx.adobe.com/robohelp/kb/fixed-issues.html

Translate
Known Participant
Jul 13, 2020 5:14 PM UTC

Hi,

 

Thanks for getting back. I am using RoboHelp Classic 2019 - 14.0.5001.

The skin i am using is -  Azure and for CSS rules XP Blue

The keyboard keys i am using the navigate the TOC is Tab key to go across the topics and Enter to open and close the Topics. Once i open and close a topic, the Tab key does not work consistently.

 

Translate
Peter Grainge
Community Expert
Community Expert
Jul 11, 2020 9:27 AM UTC

You haven't said which version of RoboHelp you are using. 

  • If you are using a Classic version please go to File Help > About and confirm the version shown. If it is 2019 Classic, please add "Classic" when advising the version number.
  • If you are using the New UI, the version number will  be found in Help > About. Please add "New UI" if the version number starts 14.

 

Which skin are you using and which keys are you using to work the TOC with keys?

 

 

 

Translate
Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Known Participant
Jul 20, 2020 8:59 PM UTC

No my problem is not solved :(. Also, i did not know there was a new UI for RoboHelp, i was happily using the Classic mode so far. Is there any value to switching to the reimagined UI? does it give anything new that classic mode does not?

 

thanks

Gagan

Translate