Specifying the language in the <HTML> Tag for Accessibility
-
- Propeller Head
- Posts: 55
- Joined: Thu Dec 13, 2007 12:24 pm
Specifying the language in the <HTML> Tag for Accessibility
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!
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
-
- 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
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.
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](http://forums.madcapsoftware.com/download/file.php?id=2449)
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
-
- Propeller Head
- Posts: 55
- Joined: Thu Dec 13, 2007 12:24 pm
Re: Specifying the language in the <HTML> Tag for Accessibil
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.
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
-
- 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
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.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.
Nita
![Image](http://forums.madcapsoftware.com/download/file.php?id=2449)
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
-
- 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
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 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."
-
- Propeller Head
- Posts: 55
- Joined: Thu Dec 13, 2007 12:24 pm
Re: Specifying the language in the <HTML> Tag for Accessibil
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!
<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
Re: Specifying the language in the <HTML> Tag for Accessibil
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.
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.
-
- Propeller Head
- Posts: 55
- Joined: Thu Dec 13, 2007 12:24 pm
Re: Specifying the language in the <HTML> Tag for Accessibil
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:
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
Re: Specifying the language in the <HTML> Tag for Accessibil
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
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
-
- Propeller Head
- Posts: 29
- Joined: Tue Jan 08, 2013 9:48 am
Re: Specifying the language in the <HTML> Tag for Accessibil
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.
Re: Specifying the language in the <HTML> Tag for Accessibil
[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!
"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!
-
- Sr. Propeller Head
- Posts: 114
- Joined: Thu Nov 22, 2012 3:27 am
Re: Specifying the language in the <HTML> Tag for Accessibil
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 or Very Mad :evil:](./images/smilies/icon_evil.gif)
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 or Very Mad :evil:](./images/smilies/icon_evil.gif)
Re: Specifying the language in the <HTML> Tag for Accessibil
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.
Re: Specifying the language in the <HTML> Tag for Accessibil
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:
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. Has anyone had success with this method?
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:
I have a language tag in the Master Page and in the skin.<!DOCTYPE html>
<html class="defaultSkin left-layout _Skins_LightHTML5" data-mc-runtime-file-type="Default;TriPane">
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. 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
Certified MadCap Advanced Developer for Flare
Re: Specifying the language in the <HTML> Tag for Accessibil
Hi Nina,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.
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
Certified MadCap Advanced Developer for Flare
Re: Specifying the language in the <HTML> Tag for Accessibil
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!
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
Certified MadCap Advanced Developer for Flare
Re: Specifying the language in the <HTML> Tag for Accessibil
I just received a reply from Support that works!! I want to share in case this helps anyone who is struggling.
I hope this helps anyone struggling with this issue.
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.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 hope this helps anyone struggling with this issue.
Jessica N.
Certified MadCap Advanced Developer for Flare
Certified MadCap Advanced Developer for Flare