508 compliance for icons in Navigation panel

This is the place to discuss Help & Manual 4 issues. Please don't post questions on any other versions here!

Moderators: Alexander Halser, Tim Green

jradeni
Posts: 17
Joined: Mon Mar 10, 2008 1:47 pm

508 compliance for icons in Navigation panel

Unread post by jradeni »

Hi, I'm working to make our browser based help guide 508 compliant, and our consultant tells me that I need to apply null alt text (alt="") to all of the icons in the navigation pane. These are the icons that are selected when the topic is set up, and appear in the exported file as "cicon10.gif". Can this be accomplished in Help and Manual before the export?
Or, if it has to be done after the export, where can I make this change? I beleive this is my last big 508 obstacle, and I can't figure it out. Any help that you can offer would help a great deal!

Jaclyn Radeni
User avatar
Tim Green
Site Admin
Posts: 23153
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Unread post by Tim Green »

Hi Jaclyn,

There is no need for you to do this, all the icons in the navigation pane already have alt="" attributes applied by Help & Manual. :)
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
jradeni
Posts: 17
Joined: Mon Mar 10, 2008 1:47 pm

Unread post by jradeni »

I was hoping that you were right, because it was such an easy answer. BUT, unfortunately, the screen reader is reading these file names, and including them in the links list as "cicon2". I do have the setting enabled to have file names used as alt text when there is not a caption present so that my other images are compliant. Is this setting the reason these images are showing up? is there anyway around it with the setting enabled?

Also, On a related note, when a user selects the 'cicon2' link, it doesn't change the content frame to the page associated with that icon. They have to choose the text link next to it to have the content frame change. Is there a way around this as well?

Thanks again for all your help!

Jaclyn Radeni
User avatar
Tim Green
Site Admin
Posts: 23153
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Unread post by Tim Green »

Hi Jaclyn,

The icons all have an empty alt="" attribute -- if your text reader is having a problem with that it is the text reader's problem... :?

These icons are not the links to the topics, they are used for expanding and collapsing the nodes in the TOC, so clicking on them directly or virtually will not take you anywhere. In fact, the icons are in a separate table cell. The actual link that takes you to the topic is in the next cell.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
jradeni
Posts: 17
Joined: Mon Mar 10, 2008 1:47 pm

Unread post by jradeni »

Tim, thanks so much for the response. Can I also confirm with you that the alt tag is null even though I have the selection for file names to be added as alt text in the absence of caption text enabled?

Thanks,

Jaclyn Radeni
User avatar
Dean Whitlock
Posts: 577
Joined: Thu Sep 01, 2005 5:59 pm
Location: Thetford Center, Vermont USA
Contact:

Unread post by Dean Whitlock »

Hi Jaclyn,

To be absolutely sure that the alt tags are null, you can compile the project and take a look at the resulting htm files yourself. Any text editor will work. Simply do a Find Next for "alt". The file names will be based on the topic IDs. Find one that you know has graphics. You can also check the index.html and other files that support the frame structure.

Then exit without saving (although this is just for a test so any changes you might make by accident will be overwritten the next time you compile).

Good luck,
Dean
jradeni
Posts: 17
Joined: Mon Mar 10, 2008 1:47 pm

Unread post by jradeni »

Dean, thanks much for the response. I was able to check and did confirm that they are null.

However, it now seems as though I need to add 'meaningful' alt text to those that expand the topic tree, as those are the icon names it is reading, as they are links with functionality.

Is there a way inside of Help and Manual to edit the alt text associated with the icons?
OR
Is there a way to remove the icons entirely and have standard Windows + sign (like in file explorer) to eliminate the issue all together?

Thanks,

Jaclyn Radeni
User avatar
Dean Whitlock
Posts: 577
Joined: Thu Sep 01, 2005 5:59 pm
Location: Thetford Center, Vermont USA
Contact:

Unread post by Dean Whitlock »

Hi Jaclyn,

I couldn't find a place to change the alt content of the TOC icons. In Project Properties > Browser Based Help > Table of Contents, you have the option to Edit the Html directly, but I didn't see any code that related to the actual placement of the icons. The TOC position is marked by a variable that is replaced by the actual TOC during the compile process.

If you go to Project Properties > Browser Based Help > Navigation, you will find a radio button that allows you to specify custom icons for the TOC. I don't know what would happen if you left the three filename fields blank, but you could give it a try. However, I don't believe you would get a plus sign or other expand-here indicator, because those are the icons you'd be leaving out. If the compile actually completed, you have a TOC of headings with no icons at all. Depending on your other Navigation settings, this might work for you. Or not. Tim will have to weigh in on this one.

Sorry I can't be more helpful,
Dean
User avatar
Alexander Halser
EC-Software Support
Posts: 4098
Joined: Mon Jun 24, 2002 7:24 pm
Location: Salzburg, Austria
Contact:

Unread post by Alexander Halser »

You could do this with a tiny javascript in the TOC template. Click Project > Project Propeties, and navigate to Browser based help > Table of contents. Check the box "Let me edit HTML code directly".

In the HTML code, place the following javascript before the closing </body> tag:

Code: Select all

...
<!-- Place holder for the TOC - this variable is REQUIRED! -->
<%TABLE_OF_CONTENTS%>

<hr size="1" /><p style="font-size: 8pt"><%COPYRIGHT%></p>

<script type="text/javascript">
<!--
var icons = document.getElementById("tree").getElementsByTagName("img");
for (var i = 0; i < icons.length; i++) { 
  icons[i].alt = "Expand or collapse chapter"; 
}
-->
</script>

</body>
</html>
jradeni
Posts: 17
Joined: Mon Mar 10, 2008 1:47 pm

Unread post by jradeni »

Wow you guys are a big help. Unfortunatley, this didn't work.

I tried it as is, and then removed the <!-- --> around the script and it still didn't work. My icons are still the ones I selected in HM4.

Maybe if I explain my issue in a little more detail you will know of a solution that I'm not thinking of.

The Book and Folder Icons that I use have null alt text, they aren't read by the screen reader when it reads the page. Because they do have toggle functionality to collapse and expand the tree, when using the screen reader software to show all links, the image name appears as a link because it is a icon you can select to use the expansion/compact functionality.

my 508 team is telling me that we either need to add Alt Text, so that when going through all the links manually the alt text reads "click to expand,/collapse topic",

OR we need to remove the expand/collapse functionality all together, so that these are just static icons that do not provide a function, and therefore do not show up on the list of links.

Thank you so much for your help on this. Without you all in the forum, I'd be lost!!

Jaclyn Radeni
User avatar
Alexander Halser
EC-Software Support
Posts: 4098
Joined: Mon Jun 24, 2002 7:24 pm
Location: Salzburg, Austria
Contact:

Unread post by Alexander Halser »

my 508 team is telling me that we either need to add Alt Text, so that when going through all the links manually the alt text reads "click to expand,/collapse topic",
The icons are still the same, but the script should apply an ALT-text to the icons. I wonder how the screen reader works: it obviously handles Javascript, so it should execute the script when the page is loaded, assigning the ALT text. If it doesn't do Javascript, the browser displays an entirely different TOC page (a static one, without Javascript).

From your explanation, it appears to me as if the screen reader does not really execute the script when the page is loaded. Otherwise the image should have ALT tags assigned.

How about a different approach: you can define custom icons for the TOC. When you give those icons descriptive names like "IcoExpandCollapseHeading.gif", would that do the job? I just try to find a solution for you that doesn't make it too complicated.
Alexander Halser
Senior Software Architect, EC Software GmbH
jradeni
Posts: 17
Joined: Mon Mar 10, 2008 1:47 pm

Unread post by jradeni »

Alexander! WOW!! I completely missed the boat.

You're right, the script worked. I just didn't realize that was what it was supposed to do.
I have one more problem.

My help guide has three levels. With the script that you provided, it's reading the Alt Text for all three types of icons, even those on the third level that don't have the expand/collapse functionality. I don't know Java well enough to edit it, can you provide me with code that reads the alt text for the Book (cicon2.gif) and the Folder (cicon5.gif), but not the page (cicon11.gif)?

Thank you so much. Because of you I'm going to sleep better tonight. This is Great! Great!!
User avatar
Alexander Halser
EC-Software Support
Posts: 4098
Joined: Mon Jun 24, 2002 7:24 pm
Location: Salzburg, Austria
Contact:

Unread post by Alexander Halser »

Not tested... but you get the idea:

Code: Select all

...
for (var i = 0; i < icons.length; i++) { 
  if (icons[i].src != "cicon11.gif") {  icons[i].alt = "Expand or collapse chapter"; }
} 
...
Alexander Halser
Senior Software Architect, EC Software GmbH
jradeni
Posts: 17
Joined: Mon Mar 10, 2008 1:47 pm

Unread post by jradeni »

Oh dear. I don't know Java at all. I thought I could just paste in the section that you gave.

This is what I have in.

Code: Select all

<script type="text/javascript"> 
var icons = document.getElementById("tree").getElementsByTagName("img"); 
for (var i = 0; i < icons.length; i++) { 
  if (icons[i].src != "cicon5.gif") {  icons[i].alt = "Expand or collapse chapter"; } 
}
for (var i = 0; i < icons.length; i++) { 
  if (icons[i].src != "cicon2.gif") {  icons[i].alt = "Expand or collapse chapter"; } 
}
 
</script>
It's still reading "Expand or Collapse chapter" for cicon11.gif too.

Can someone help me with the Java?

Thanks!

Jaclyn Radeni
jradeni
Posts: 17
Joined: Mon Mar 10, 2008 1:47 pm

Unread post by jradeni »

Sorry I'm still posting about this, but I'm unable to get it to work. I've been trying to figure out Java enough to be self-sufficient on this, but so far, I'm not finding what I need.

When I put in the code I pasted above, it was reading the alt text for the all of the images, 'cicon2', 'cicon5', and 'cicon11' even though there was no conditional statement (if...) that addressed 'cicon11'. I figured that if I addressed 'cicon11' to have null alt text it might work. I used this code:

Code: Select all

<script type="text/javascript"> 
var icons = document.getElementById("tree").getElementsByTagName("img"); 
for (var i = 0; i < icons.length; i++) { 
  if (icons[i].src != "cicon5.gif") {  icons[i].alt = "Expand or collapse chapter"; } 
} 
for (var i = 0; i < icons.length; i++) { 
  if (icons[i].src != "cicon2.gif") {  icons[i].alt = "Expand or collapse chapter"; } 
}

for (var i = 0; i < icons.length; i++) { 
  if (icons[i].src != "cicon11.gif") {  icons[i].alt = ""; } 
} 
  
</script>
When I compiled the file with the new 'cicon11' file, it did not read the alt text for any of the images in the navigational frame.

All I was able to demonstrate is that I clearly don't understand Java. Can someone please help me straighten out the java code so that "Expand or collapse chapter" is the alt text for 'cicon2.gif' and 'cicon5.gif' but not 'cicon11.gif'

Thanks!
Post Reply