Accessibility in Azure Template in Adobe FrameMaker

[Nikita_Rochiramani3157]

When I export a Framemaker file as Responsive HTML, the Microsoft Azure template uses icons for page. Is there a way for me to write alt text or solve for overall accessibility errors in this template within Frame Maker? 

Any support will be appreciated

[FrameMaker-dk]

I am not quite sure I understand the issue properly. This is what I get with a sample page:

There is a alt text on the TOC. Can you possibly share a screenshot detailing where the alt text are missing?

I believe one will probably have to edit the Screen Layout in source in order to replace Icons with text. IF that is what you are suggesting?

[Nikita_Rochiramani3157]

Thanks for the response. I can give you a visual example of what I mean. The screenshot is of a document exported as a responsive HTML file within Adobe Framemaker.
Goal: The red dotten line around the search icon needs a text alternative for screen readers to know what the icon is about, or what it's doing.

Problem: Right now, I don't see the ability to add an alt text within the Azure template when I am exporting the xml file as Responsive HTML.

Ask: Is there a way I can edit the Azure template within FrameMaker to add an alt text?

Please let me know if you need more details.

[Jeff_Coatsworth]

Check to see if there's any Section 508 flag you can select. Did you mention what version of FM you're running? 

[Nikita_Rochiramani3157]

I'm using the lastest trial version. Version 17, I assume

[Jeff_Coatsworth]

There's been 4 patches so far - you should show 17.4.something

[FrameMaker-dk]

Yes, I see what you mean. And it is a bit odd, because there IS an alt text on the search icon in SOME views. If one minimizes the window for mobile display, there is an alt text on the Search icon. So the challenge here, probably is to locacte the place in the template where the alt code must be, and insert it. I am not too sure about the workings of the HTML5 templates, though.

[Nikita_Rochiramani3157]

Oh, I didn't know it was doing that for the mobile version. Thanks for sharing this with me. 

Yeah, I thought my best bet would be to alter the code, but if there was an easier way to accomplish this within Framemaker while editing the template, then I'd prefer going that route (there are some high level editing options)

[FrameMaker-dk]

I guess you can edit  the code in the published version, but then the patch will be overwritten as soon as you republish. I am not supersmart with this stuff. The templates reside in slz format. If you rename the *.slz files to *.zip, you can open them in Explorer and do the edits. If you can find the proper place, that is....

[Nikita_Rochiramani3157]

Okay, thanks so much for helping 🙂 Code it is, I guess!

[Winfried Reng]

In the Publish pod in the General tab there is Manage Layout with the current template.

When you click the icon right of the template name, you can open a page to change almost everything in your template.

Does this help?

[Nikita_Rochiramani3157]

I tried that option too. I don't see an option to add an alt text in there

[Jeff_Coatsworth]

What does the Search (All) and Search (Mobile) choices show you? Have you tried experimenting with another layout design? You also might go hunting for a file that ends in .lng - those files in RoboHelp (which FM is using under the hood) set the terms that elements use in the output.

[Nikita_Rochiramani3157]

Let me try a different layout. Also, where can I find the .lng files?

[FrameMaker-dk]

Not entirely sure about this recipe, but I believe you need to edit these files:

C:\Program Files\Adobe\Adobe FrameMaker 2022\fminit\Publisher\ResponsiveHelpExt\Layouts\en_US

"Azure_Blue.slz". Rename the slz file to zip. Open the zip file and head to the layout.css.

Find the proper line for for search_desktop.... and hopefully you can add an alt tag there. Rename the zip file to slz and try creating a new html5 file. No guarantees given! 🙂

[Nikita_Rochiramani3157]

Thanks for the suggestion. Sure, I could try that. But will that be a permanent solution for all HTML exports moving forward? Or I'll have to manually make these edits in the .slz everytime I export a Responsive HTML?

[Jeff_Coatsworth]

If you make a change to the .slz file in that location Bjorn mentioned, then you would only lose it when you updated FM - that's a "factory" location.

[FrameMaker-dk]

Yes, I believe this will fix the issue permanently or as long that you are working with this installation of FM. What happens when you publish to HTML , is that FM creates an HTML5 version of you document and sends it along with a copy of the skin. You will probably have modified the copy using FMs builtin css editor which you can find in the Publish dialogue.  The skin in FMs directory is not modified when you publish. But as I said - I may be wrong here and there are slz files for the main languages and slz files for both mobile and desktop, so you may be in for a bit of detective work. Might be an idea to upload the css to ChatGpt and have it advise you.

[Nikita_Rochiramani3157]

Awesome!! Then we can refrain from updates (they are anyway manual unlike Adobe CC) unless there's something more concrete Adobe launches to towards accessibility. I'll try making edits to the .slz and get back to you if I have any more questions.

Thanks so much guys! I truly appreciate your help. 

@Jeff_Coatsworth Sorry I missed seeing the RoboHelp part of your comment. 

[FrameMaker-dk]

You're welcome. I design premade FrameMaker templates, and they come with a settings file, where I include all the settings which will allow the user to consistenly output to various formats. Using the settings file, all design customizations are included. BUT not stuff like the accessibility issue we have just discussed.

This is for instance a customized HTML5 version of the sample manual:

https://framemaker.dk/images/2024/TequilanaSampleResponsive%20HTML5/index.html#t=Omnis_Tempus_Vendin...

[Nikita_Rochiramani3157]

That's a great template. Looks easy to navigate and uses a structured theme for organizing content.