Specifying the language in the <HTML> Tag for Accessibility

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
ChrisBradley
Propeller Head
Posts: 55
Joined: Thu Dec 13, 2007 12:24 pm

Specifying the language in the <HTML> Tag for Accessibility

Post by ChrisBradley »

Greetings!
My company has a substantial prospect that is looking at our product and requires 508 compliance as well as WCAG 2.0. Both specifications are listed in Madcap's help, but not very well documented. Our prospect has done an in depth audit of our help and found a few issues. The first of which is Flare's HTML 5 Web Output does not specify the language in the <html> tag, like this <html lang="en"> This specification is listed here:
https://www.w3.org/TR/WCAG20-TECHS/H57.html

I can't seem to figure out where I can specify this for a build. My first thought was a master page, but that gets stripped out and replaced by the skin. So I went to edit the Skin thinking this would be easy to do, but I don't see where I can add this through the UI. Is there another place I can add this so it persists after every build?

Thanks in advance!
Madcap Advanced Developer
Nita Beck
Senior Propellus Maximus
Posts: 3667
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Specifying the language in the <HTML> Tag for Accessibil

Post by Nita Beck »

Caveat: I have no practical experience on this... Just trying to help.

Would it work to add the mc-language attribute to the <html> class? I see in the Stylesheet editor (under Unclassified) that there's an mc-language attribute. However, I have no idea what one is supposed to enter into the text box for this attribute.
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
ChrisBradley
Propeller Head
Posts: 55
Joined: Thu Dec 13, 2007 12:24 pm

Re: Specifying the language in the <HTML> Tag for Accessibil

Post by ChrisBradley »

Nita,
Thanks for the reply. Unfortunately that setting did not add the lang property to my output. Right now my only option is to manually add it to the default.htm and default_CSH.htm files that are generated when I build output.

I am somewhat disappointed in Flare this morning. There are quite a few issues that I'm going to have to send as feature requests. This customer needs all the menu's and buttons in Flare output to be accessible via keyboard. Each button, field, and link must also have an indicator that it has focus when the user tabs to it. Tri-pane navigation with some tweaks gets me closer to meeting their needs than Top-Nav. The Top-nav output doesn't seem to have a way to expand the hover over menu in the header using a keyboard, making those menus impossible for this audience to access.
Madcap Advanced Developer
Nita Beck
Senior Propellus Maximus
Posts: 3667
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Specifying the language in the <HTML> Tag for Accessibil

Post by Nita Beck »

ChrisBradley wrote:Tri-pane navigation with some tweaks gets me closer to meeting their needs than Top-Nav. The Top-nav output doesn't seem to have a way to expand the hover over menu in the header using a keyboard, making those menus impossible for this audience to access.
I've heard this complaint before from one of my fellow user group members. She's put in a bunch of feature requests as well.
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
Rene Severens
Sr. Propeller Head
Posts: 210
Joined: Mon Sep 19, 2011 2:06 am
Location: Netherlands - Zoetermeer
Contact:

Re: Specifying the language in the <HTML> Tag for Accessibil

Post by Rene Severens »

Hi,

The language is specified at project level. It can be overruled at the target level, if needed.
There is no need to add this to the <HTML>-tag manually.
When a build is done and opened the webpage, right-click and select View Source.
You will see:

<!DOCTYPE html>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" lang="en" xml:lang=en" data-mc-sea ..... >

To "highlight" the current tab position, in the stylesheet, select a, and expand (Pseudo Classes) and click focus, and , for example, specify a border (solid 1px #ff0000).
Note that in the output folder of the project, where the resulting website files are generated, you will find in ..\Skins\Default\Stylesheets a "Topic.css" in which the next line is active:

/* Css to prevent Chrome's automatic border around active fields*/

*:focus
{
outline: none;
}

This prevents the border outline to be visible in the buttons used in the skin. If you comment out these lines, you will see a dotted line when tab has focus on the buttons in the skin. It is not very beautiful but it works.

Hope this helps.

Greetings,
René Severens
"The numbers are strange today; they somehow do not seem to add up."
ChrisBradley
Propeller Head
Posts: 55
Joined: Thu Dec 13, 2007 12:24 pm

Re: Specifying the language in the <HTML> Tag for Accessibil

Post by ChrisBradley »

Thanks for the info. I see the language declaration in the topics. I need to see it in the skin. The html in the skin is built with this:
<html class="defaultSkin left-layout _Skins_HTML5" data-mc-runtime-file-type="Default;TriPane">
I need the lang="en" in both places to satisfy this customer request.

I will look into the other options you provided. I've already add the border to focus styles, but this might help me identify the buttons and fields that are still missing.

Thanks again!
Madcap Advanced Developer
nima
Jr. Propeller Head
Posts: 3
Joined: Thu Dec 22, 2016 2:52 am

Re: Specifying the language in the <HTML> Tag for Accessibil

Post by nima »

Hi Chris
We have been working in Flare as well to ensure accessibility compliance and found several limitations.

I don't know if this will work, but to add properties to the Skin not via the UI, you can open the Skin in a text editor, and add a language property. I am not sure exactly where.
We had to add the tab index property, and I added it to the Topic Container:
<Style
Name="Topic Container">
<Properties>
<Property
Name="BackgroundColor">#0c99C9</Property>
<Property
Name="tabindex">0</Property>
</Properties>
</Style>
Adding it here means that you don't need to post process the output.
Hope this helps.
If you can share your experience with accessibility compliance in Flare Tripane that would be great.
ChrisBradley
Propeller Head
Posts: 55
Joined: Thu Dec 13, 2007 12:24 pm

Re: Specifying the language in the <HTML> Tag for Accessibil

Post by ChrisBradley »

Hi Nima,
Thanks for the advice. I attempted to implement the tab index property that you specified in to my skin, but that didn't seem to have any affect on my output. Maybe I added it within the wrong element?

Madcap Support responded to my issues with a work around for the lang element to the HTML output. This needs to be set in the default htm pages that flare uses to build all help.

Here is thier response:
After testing in the program files for Flare, we have found that the changes that are made to the output, are able to be added to the "Default_Tripane.htm" file. Making the change in the following path will allow for all projects built in this current version of Flare to have the desired changes. This would eliminate to have to add the code to the output because it will show automatically.

C:\Program Files\MadCap Software\MadCap Flare 13\Flare.app\Resources\WebHelp2\Desktop
Madcap Advanced Developer
nima
Jr. Propeller Head
Posts: 3
Joined: Thu Dec 22, 2016 2:52 am

Re: Specifying the language in the <HTML> Tag for Accessibil

Post by nima »

Hi Chris
I guess I didn't make myself clear. I found a language declaration in the skin:
<Stylesheet
lang="en-us">
Did you try to change this?
If that doesn't work, try adding a property for language in the Topic container.
<Property
Name="lang">en-us</Property>

Let me know how it goes.

Nima
ArmandFrvr
Propeller Head
Posts: 29
Joined: Tue Jan 08, 2013 9:48 am

Re: Specifying the language in the <HTML> Tag for Accessibil

Post by ArmandFrvr »

I think a lot of us would like to see this change to tripane. If we set the language for the project, it should set it in the html tag for the entire project, not just for the iframed topics. Don't think this is an issue in top nav since there aren't any iframes to worry about.
lil
Jr. Propeller Head
Posts: 4
Joined: Tue Aug 18, 2015 2:38 pm

Re: Specifying the language in the <HTML> Tag for Accessibil

Post by lil »

[quote="ChrisBradley"]

"There are quite a few issues that I'm going to have to send as feature requests."

Chris - a couple of months ago our company did an extensive accessibility audit on our Flare HTML5 WebHelp output and it failed miserably. Our auditor noted over 40 separate issues and included how to address them. We sent MadCap the entire list, with the recommended fixes. Unfortunately, all they did was add the issues to their bug list, and tell us it would be 12-24 months before they could address any of them. It may be necessary for us to seek another HAT as our content MUST be accessible.

Good luck with your request. Maybe MadCap will move accessibility issues to the top of the list if enough of us request it!
GeorgeBell
Sr. Propeller Head
Posts: 114
Joined: Thu Nov 22, 2012 3:27 am

Re: Specifying the language in the <HTML> Tag for Accessibil

Post by GeorgeBell »

We are 100% behind you readarding accessibility.

Without mentioning names, we have been authoring the Help structure for probably the world's most commonly used braille production software. Catering for over 140 different languages presents many challenges, and accessibility of various types of output is essential.

Up to now the software has been for Windows, but recently an Apple Mac version was produced. But Help for Mac requires HTML5. No problem, or so we thought. After all Flare has been able to do this since at least version 8.

See https://www.madcapsoftware.com/articles ... e2012.aspx where is says:-

"MadCap Flare 8: a tool for the 21st century
HTML5 output
The new HTML5 output format supports the HTML5 specification defined by the Web Hypertext Application Technology Working Group (WHATWG, http://whatwg.org) and World Wide Web Consortium (W3c, http://w3.org)."

Faced with issues we decided to check the HTML5 output using the "Nu Validator" referred to by both of the aforementioned organisations.

The result was over 13,000 items in the audit report from around 1,700 Topics.

I shall spare details of the 3-4 weeks of calls and e-mails, but we did get down by about 1,000.

I finally got heavy with MadCap Support last night, and the upshot was an e-mail which included:-

Unfortunately, the upshot is that Flare 2013 r3 does not produce HTML5 output that validates with W3C.

Further (politely worded) comment defies me :evil:
wfranz
Propeller Head
Posts: 10
Joined: Wed Dec 06, 2017 9:37 am

Re: Specifying the language in the <HTML> Tag for Accessibil

Post by wfranz »

I have started to run into similar issues with some accessibility compliance as we are having to be a bit more firm in our accessibility compliance for our documentation. Are there feature/bug tickets available that I could vote on? I'd be more than happy to add my name to the list of interested parties if that can help up the priority.
Jess77
Sr. Propeller Head
Posts: 154
Joined: Thu May 01, 2014 3:19 pm
Location: Florida
Contact:

Re: Specifying the language in the <HTML> Tag for Accessibil

Post by Jess77 »

I'm responding because I am still having this problem in 2019 while using Flare 2018 r2.

Has anyone been able to find a solution that works for every topic at runtime? Other than adding the language tag to every topic?

This is what the HTML tag looks like at the top of my output:
<!DOCTYPE html>
<html class="defaultSkin left-layout _Skins_LightHTML5" data-mc-runtime-file-type="Default;TriPane">
I have a language tag in the Master Page and in the skin.

The only thing I could think of was to figure out a way to add a post build event command that adds the language tag to the HTML tag at the top of every topic.
PostBuildEvents.png
Has anyone had success with this method?
You do not have the required permissions to view the files attached to this post.
Jessica N.
Certified MadCap Advanced Developer for Flare
Jess77
Sr. Propeller Head
Posts: 154
Joined: Thu May 01, 2014 3:19 pm
Location: Florida
Contact:

Re: Specifying the language in the <HTML> Tag for Accessibil

Post by Jess77 »

Nita Beck wrote:Caveat: I have no practical experience on this... Just trying to help.

Would it work to add the mc-language attribute to the <html> class? I see in the Stylesheet editor (under Unclassified) that there's an mc-language attribute. However, I have no idea what one is supposed to enter into the text box for this attribute.
Hi Nina,
From what I can see the mc-language attribute is something you can set per style not per project. I am guessing that this attribute helps if you have multi-lingual output in the same project?

I cannot find this for an entire project... but it was a great idea!
Jessica N.
Certified MadCap Advanced Developer for Flare
Jess77
Sr. Propeller Head
Posts: 154
Joined: Thu May 01, 2014 3:19 pm
Location: Florida
Contact:

Re: Specifying the language in the <HTML> Tag for Accessibil

Post by Jess77 »

Just a follow up to this in case my experience helps someone struggling with the same issue.
I actually logged an issue with Madcap because the language tag is automatically in the right place in the side nav output using the side nav skin. And I cannot figure out why ... meaning, I cannot figure out where the language code is in the master page and/or skin and/or programming that makes this work. I suspect it's just something madcap fixed in the side nav output but not in the tripane output.

For some background, I created a new side nav project and imported files from another project.

1. I added a side nav skin and published (that's it) and the language tag is on the first HTML tag for every topic.
2. Out of curiosity, I added a tripane skin to the side nave project and published. The language tag is not there.

That tells me that the issue is in the skin.

The issue I logged with support was the way to make it so the language tag is where it needs to be in the tripane output.

I hope this helps!
Jessica N.
Certified MadCap Advanced Developer for Flare
Jess77
Sr. Propeller Head
Posts: 154
Joined: Thu May 01, 2014 3:19 pm
Location: Florida
Contact:

Re: Specifying the language in the <HTML> Tag for Accessibil

Post by Jess77 »

I just received a reply from Support that works!! I want to share in case this helps anyone who is struggling.
Please follow the outlined steps below:
1. Open up Windows File Explorer and navigate to this location: C:\Program Files\MadCap Software\MadCap Flare 14\Flare.app\Resources\WebHelp2\Desktop
2. Right-click Default_TriPane.htm and open in a text editor
3. Add in the relevant code here, like lang="en-US" xml:lang="en-US"
4. Save the file and rebuild. Open the output.
I'm assuming that you could get into issues for translation projects; however, I have not arrived at that crossroads yet, so this works for me.

I hope this helps anyone struggling with this issue.
Jessica N.
Certified MadCap Advanced Developer for Flare
Post Reply