using the unorthodox `head {display: block}` to show text to user?


Tags: html,css,web-crawler,accessibility

Problem :

The following example shows that by using CSS pseudo-elements you can render into the browser some viewable text that is "embedded" in a <link> or <meta> tag.

http://codepen.io/SitePoint/pen/KporNg

This unusual technique will show text on a page, but the text doesn't seem to be selectable (in Chrome 49 at least) and my question is, is text displayed in this way scrape-able? … I mean:

  1. How would a screen reader see this text?

  2. How do spiders see this? ... like googlebot, for example? Do they?



Solution :

This should help answer your questions: http://www.sitepoint.com/is-generated-content-actually-content/

Based on the authors indication that:

Generated content is not content at all, it’s presentation.

I would assume that since the content generated from the pseudo-element is part of the presentation, rather than the structure of the page, spiders/bots might not pick it up.

A quick example fiddle and codebit:

.text:before  {
   content: "Hello World!";
}

also support this claim. If you inspect element and check the div, you will notice that ":before" is what is displayed in the html, rather than a direct output of the text from the pseudo-element (i.e: "Hello World!"). Since most bots aren't scanning through the stylesheets, it's likely that it won't be picked up.

Regarding Screen Readers, I believe that it depends on the type of reader and what it's set to interpret. Here is an interesting link from a popular reader called WebAim that appears to interpret part of the CSS as well: http://webaim.org/techniques/css/invisiblecontent/ The only way to be sure is to test it out for yourself and see but like one commenter said above, I do not believe that screen readers are standardized.


    CSS Howto..

    How to cover box shadow?

    How to make triangle shape in before a div in pure css?

    how to set the background color of the whole page in css

    How to change the look of a timer in javascript, css?

    How i can match multiple CSS selectors

    How to implement fluid font size using pure CSS

    Twitter Bootstrap 3 - how to properly replace glypicons with custom made icons?

    How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?

    How to align right-to-left the elements of css menu

    CSS how to align vertically center div floating elements of menu?

    How to add scroll to child of flex item?

    How to change elements display order in CSS?

    how to center horizontally div and span elements using css

    Css how to create navigation bar

    How to differentiate between two class of same name in different css on same page

    Need help understanding how to format inline CSS of Table data from a JS file

    How to make image hover in css?

    How to create square around glyphicon bootstrap?

    How does this drop-down have the ^ shown?

    How to hide element using Class; instead of using css function in JQuery? [closed]

    how to add class to razor form and give padding?

    How do I create tabs in vertical alignment?

    How to morph a plus sign to a minus sign using css transition?

    How to make a shape which is made using css borders responsive?

    How Can I Override Style Info from a CSS Class in the Body of a Page?

    How to get Bootstrap's “hero-unit” to fit across the entirety of top section?

    How to design resolution independent CSS elements?

    How can I force IE to keep some margin at left in it's browser window?

    How do i add a background image to my header?

    CSS: how to stop text from taking up more than 1 line?