ADA Templates from Flare

[Jess77]

I am wondering, does Flare offer any sample ADA templates along with the Accessibility Guide?
Some of these requirements are hard to interpret without a coded example.

As more and more and more and MORE of these requirements become unfeasible for a lone writer with a heavy content load, I am wondering if anyone has just pulled the trigger and abandoned the webhelp output in favor or the old CHM files or other help delivered with the software. Just as a stop-gap measure until a staff can be hired ... or something...

[Mishou6779]

Hi Jess,

We suffer similar pains. I too am a lone writer. I too shoulder a huge load (1,300 help topics and counting). And I must ensure that my output (currently WebHelp and PDF) is Section 508 compliant. I've never even thought to look for an ADA template in Flare. Good idea! Since I don't think they have anything like that, I will share with you my methodology since I have been working with this for about the last 5 years. Please forgive me if all of this is stuff you already know.

I am fortunate enough to have a coworker on our QA team who is in charge of using multiple screen readers on our product to find issues. We keep our licenses current on our screen reader software. My understanding from talking to my coworker is that screen readers are pretty much linear. This might change in the future as software collectively gets more sophisticated, but for now, it seems screen readers "read" in much the same way that standard English readers do--left to right, top to bottom, etc.

Much of what makes online help compliant is inherent in good writing. For example, never put a Heading 1, Heading 2, or Heading 3 without some text after it--I learned that rule back in 7th grade English. Tables must have column headings, and all cells in the table must contain text. No "invisible" tables, no "empty cells." Pictures must have an introductory sentence/paragraph or alt text. Alt text should make sense if read aloud in the context of the help topic you're writing.

Contrast and color are also easily fixed. You must use high contrast. And color can't be the lone indicator. In other words, you can't use a yellow highlight in a picture unless you also add alt text to explain it. Also helpful to know about color is that sometimes people with low vision set up an external style sheet to use on web pages that will change everything to a white font on a black background, so they can see it more easily. Our style sheets cannot prohibit the user from doing so.

Also, a good/easy check for contrast is to either look at your output in black and white. So either view your online help in black and white with your monitor settings, or print out a PDF in black and white and see whether all of the elements are easily visible. There are several free 508 color testing websites out there that you can use to test your content. I like WebAIM, Level Access, and Color Safe, to name a few.

If you do a search in the Flare help for 508, several helpful topics come up. The Flare help has an entire Accessibility section. My son has red-green color blindness. To understand how the world looks to him, I did several web searches to find out. If you do a little research into color blindness, you will have a little better understanding about why contrast and use of color are so important. Like everything else in life, color blindness has a "spectrum." My father had red-green color blindness and he couldn't tell green from red. His case was severe. My son's case seems (so far) to be much milder, so for example, he uses the labels on grey and pink color crayons to tell them apart.

You can also use the PDF tester in Adobe Acrobat to see whether your PDF output passes 508 compliance tests.

Anyway, I'll stop here because I'm afraid I sound preachy. I hope at least some of this was helpful. I remember being in your place several years ago and it wasn't fun!

Michelle

[Jess77]

Wow, Michelle! Thank you for typing all that out.

How do you get around the structure errors from the skin?
For example, the language tag needs to be on the first HTML tag. I cannot get the tripane skin to do this. I have a case open with Support because I cannot manually add the language tag into thousands of topics after publish. The language tag shows up on the topic but not the frame, which is controlled by the skin.

Do you know where the skip navigation code goes?
My developer gave me the skip navigation code, but I have no idea where to put it in the Flare source files so that the publish process puts it in the right place. The skip navigation code tells the screen reader to skip the navigation bar and header and go right to the topic. If you have a solution, I would love to hear it.


I had to laugh when I read your message about the contrast and all your tips. The reason for the laughter is that I just ran topics through a tester and they were flagged for contrast. I use black Verdana font on a white background. Isn't that the highest contrast?

Sometimes the algorithms in these testing tools make my head spin... ¯\_(?)_/¯

[Mishou6779]

Hi Jess!

Thanks for your patience with my "over-talking" problem.

I don't know about the skip navigation code--let me ask that QA guy I was talking about. He's a cleverchops so he might know.

That is funny about the black and white not passing for contrast! Go figure, right?! I do wonder though if maybe the letters are too skinny? Would be interesting to stay with the same color, font, and font size and see if it works if you change it up to boldface. Sometimes I think 508 will be the death of me.

I'll come back and post again after I hear back from our 508 QA guy. You said you're on webhelp--we're on webhelp too, so this will be an interesting conversation.

Michelle

[Jess77]

I'm using HTML5 output. I've noticed that there is a difference in the 508 options between the two outputs sometimes.
Out of curiosity, I created a Webhelp target and it inserts the language tag in the correct place.

The tripane skin seems to be the only one that doesn't put the language tag in the right place.

And yes, 508 may be the death of us all! LOL!

[Mishou6779]

Well that is really interesting that you're using HTML5 output because my manager has me doing the research about that. I'll have to add this to my list of "cons."

Okay, so my favorite 508 buddy at work read my email message, in which I copied and pasted your original questions, and here's what he had to say (he's verbose too, it runs in the company).

=====================================================================================================================================

Technically for all web pages to be 508 compliant they need a language tag. [html:en] or lang=“en”[code]

This should probably be within the first few lines of the HTML page. It actually only needs to be before any Text on the page especially if the page suddenly changes language.

Example:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>

I just looked at [our help] and it has en-US.

I don’t think we have web pages in any other language or a page that suddenly changes from English to some other language. As a result, I think we are fine. If it was Spanish, you would want that tag for JAWS to correctly identify the language. This could be within the same page.

For example: it could have English instructions and then suddenly have the same instructions in Spanish (like what you would find in a tech manual of some kind). In that case you would want the lang attribute to change.

Here is [our company's] guidance on the Coding Standards Guide for Developers in [Our Software]:

A language attribute and direction are is required on the <html tag. For now all of our products are in English so we will declare as lang=“en” and dir=“ltr”.

Example: <html language=“en” dir=“ltr”

I think that particular user is worried about where the language tag is or perhaps, they want to change it, they should be fine if it is before any text. I think this only really applies to help that is in multiple languages.

As for skip navigation, 508 suggests / requires that there be an easy way [for the] user to navigate using anchors or some kind of drop down / skip nav link. (ex. #header1, #header2) (For example if they load a page and it has 10 links at the top and they click a link does it refresh the page and make them tab through all 10 links before they reach the content again?)

Example:
https://webaim.org/techniques/skipnav/
https://jimthatcher.com/skipnav.htm

Sometimes this is a skip navigation link so you can go straight to the page’s contents. It is designed to skip a repetitive navigation bar. I think with our help, the fact that you can search the help and you have topics, and that the page refreshes within a frame rather than reloading the whole webpage, I think we are fine.

I think the fact that you have contents, index, and search makes it easy for anyone to navigate to a particular section and understand how it is organized. The fact that you have suggested links at the bottom is good too. More importantly the fact that content is in its own frame, while the left frame is navigation makes it easier for users to navigate. The whole skip link is more so when it is a single page.

[Our Software] doesn’t actually have a skip nav option.

Summary:

I think [you're] fine on both accounts. The old help (.ASP) may have issues, but [in] the new one [he means our online help for our .NET software] I think navigation is really easy to use, and you don’t have to click multiple pages to get to a section, as you can just search for a term or click an item from the index.

For the most part everything looks good. If we ever go multiple languages, it is something we need to keep in mind for MadCap. (For example, I believe Canada requires both English and French on all government webpages, or at the very least a resource that French users can use that is equivalent to the English one.)


==========================================================================================================================================

I have NO idea whether any of that will be helpful to you or not, but there it is. I've also attached two pictures to illustrate some of what he's talking about. The first picture is our "old" or "classic" or ".ASP" help style. The second picture is our "new" or ".NET" help style. (Both styles reside in the same help project. Don't get me started.)

Example One - Old Style

OLD Example.png

Example Two - New Style

NEW Example.png

I hope some of this was helpful...if not, I did find interesting topics in this forum just by doing a web search for Flare 508 compliance.

Good luck with this--it seems challenging!!!

Michelle

[Jess77]

Thank you so much for the information. Those articles are very helpful - especially about skip navigation. I found out that part of the error I'm getting is a ... known bug in the testing tool. So, we may need to write an exception. However, I would like to know if we can do it... somehow.

Support sent me a solution to the language tag, which I posted here: viewtopic.php?f=9&t=28696&p=135945#p135945