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

[NadineRegan]

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

[SanfordWhiteman]

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.

[NadineRegan]

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

[SanfordWhiteman]

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.

[NadineRegan]

Hey Sanford,

I've tried to implement the HIDDEN attribute but I can't seem to get it to work. For example one of our modules looks like this.

<meta class="mktoBoolean" id="boolean2" mktoName="Show Articles 1&2" default="false" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">

 Changing the false value to HIDDEN  didn't work.

 When I added the HIDDEN attribute to the module itself it came up as hidden="" so I added a variable in there and set up a Boolean for it with True/False values but that only worked partially. It was hidden from ReaderView but when I changed the slider to show it in ReaderView (value to False), it remained hidden. There's probably something super simple I am missing here, I just can't wrap my head around it.

[NadineRegan]

Sanford,

please disregard my first part of the previous message. Apparently I wasn't logged into the community to see the DM option but hey, at least I tried to track you down 🙂

Nadine

[NadineRegan]

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?

[NadineRegan · Accepted solution]

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!

[SanfordWhiteman]

Yep, that's pretty much it, but you need one other step as you'll see in the blog post when it comes out.