How to remove placeholder text from the browser's Reader View? | Community
Skip to main content
N
NadineRe1
New Participant
January 11, 2021
Solved

How to remove placeholder text from the browser's Reader View?

  • January 11, 2021
  • 1 reply
  • 5345 views

A few months ago we noticed that our MKTO pages, which use a Guided LP template, show the placeholder text of modules that are turned off/not live on the page when viewing the page in the browsers Reader View. The suggestion we got from MKTO support was to remove the placeholder content (Lorem Ipsum text) from all modules that we are not using on the live page which is doable but a bit cumbersome given how many landing pages we have and create on an almost daily basis. Essentially we want to prevent any modules that are not used on the page currently from showing up in the Reader View. I was wondering if anyone has run into that same scenario and maybe found a solution for it?

 

Nadine

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by NadineRe1

I've tried a few other approaches but still no luck.

 

Adding it to the DIV itself (works when just adding HIDDEN, but doesn't work with variable for some reason)

 

<div class="mktoText" id="article1" mktoName="Article1" ${article1Hidden}> <meta class="mktoBoolean" id="article1Hidden" mktoName="ReaderView: Article 1" default="false" true_value="" false_value="hidden" false_value_name="OFF" true_value_name="ON">

 

 

Adding variable to ID in the Style tag

 

#article1 {${article1Hidden}; } <meta class="mktoBoolean" id="article1Hidden" mktoName="ReaderView: Article 1" default="true" true_value="hidden" false_value="" false_value_name="OFF" true_value_name="ON">

 

 

Any ideas?

 


I found the solution to this! Use the aria-hidden attribute for anything you don't want the Reader View to pick up on.

 

aria-hidden="true"

 

  Replace true with a Boolean so you can toggle it on and off as needed.

 

<meta class="mktoBoolean" id="calloutHidden" mktoName="ReaderView: Callout" default="true" true_value="true" false_value="" false_value_name="Visible" true_value_name="Hidden">

 

 on the Guided LP it would look like this

 

<div class="container" id="showCallout" aria-hidden="${calloutHidden}">

 


Reference is here https://a11y-guidelines.orange.com/en/web/components-examples/accessible-hiding/

 

I tested it for our pages and it works great!

1 reply

SanfordWhiteman
SanfordWhiteman
New Participant
January 12, 2021

On a Guided LP — unlike in an email — "not used" can only mean that you're hiding the HTML element using CSS, right? So it's still in the page.

 

Reader View (using Firefox as an example)  is remarkably dependent on guesswork. It tries to distinguish your primary "article" content from content that's disposable in the context of reading (nav bars, comment sections, etc.). But it doesn't have one strict rule for what it includes and excludes; rather, it tries a few different heuristic, weight-based methods to find stuff to include.

 

Anyway — and I need to work up a blog post on this — you can start by having a mktoBoolean that adds the HTML hidden attribute to the element if it's not used. Yes, this means your authors need to set that boolean to really hide an element.

 

N
NadineRe1Author
New Participant
January 19, 2021

Thanks, Sanford. I will give that a try. Looking forward to reading you blog post on this.

SanfordWhiteman
SanfordWhiteman
New Participant
January 19, 2021
It's coming. But if you DM me I can show you the approach that'll be in the post. It would be good to have someone else test it before publication anyway.
Terms & ConditionsAccessibility statement

Loading footer...