Nice tip.

Another alternative is to customise the 'read more' text for each article. Wordpress and others have plugins to make this super easy. If you're using modx a custom field will sort you out.

You could simply set up your blog to display "read more about [blog post title]". I usually advocate front-loading the key terms but I've not seen adverse results from this approach.

Thanks Rachel

Super stuff. Makes sense when you think about it.

Nice work, Mike. I'll be using this one.

Hi Mike,

Nice reminder.

One of the points of expanding the semantic nature of the "Read More" text is to give it context for all readers.

People with the ability to scan the entire page (thats most of us) will have no issue in determining what the read more link is for. That's a given, one of the reasons they work and test so well - sadly. Yeah it is a sad fact that people do respond to "read more", "click here" and the like very well in testing.

However it all falls apart with anyone with a visual disability from screen zooming to screen readers. Here you need to know what the link is about. The more semantic information for the link the better.

Hence I would recommend against using display:none. In favour of moving the to be hidden text to the left off the visual screen.

Still better to have to full semantic meaning of the link. But business reality doesn't often allow for this.

Thanks Gary.

That's something I've always wondered but can never find a clear answer on. I could understand a problem if display:none was used inline, but in an external style sheet is there still an issue?

Using the text-indent method would have the same effect unless I'm mistaken.

Screen read will treat the page as if style sheet doesn't exist hence you not to use inline css for anything. Use text-indent or display-none or visibility:hidden if its in style sheet shouldn't matter for this method.

Mike,

Any property works the same, no matter where you reference it from, be that inline, embedded in the page or externally linked.

Display:none will appear to you and me to just remove the element. What it in fact does its more than just remove a visual display. The element is forced to not generate a box at all. Also any children can't generate a box. So it removes the element and its descendants from the scope of the readable DOM. Hence a search engine will not see a display:none element. And as extensive testing has shown the same goes for screen readers or even page reading software.

Hence it is established practice not to use display:none on small runs of text that you want a search engine to see, but want hidden to the general able bodied public.

However there are good cases to use display:none. Like large menu systems.

The text-indent property just moves the element off the visual page, but still on the virtual page. So it is readable as the box of the element has not been forced to collapse.

@carlos

Some braille readers tend to only read the page as it is presented, as raw semantic data. As did some of the older screen readers.

However current screen readers (like Jaws) are attached to a browser. What the they see (read) is what the browser outputs, So this includes javascript manipulation of style or content, css content inserts, and in this case removal.

Some screen readers also process the Aural media types and the related properties. However this is limited.

If an element doesn't have a box generated (see my previous comment) the reader can see then it will just ignore it as a non informational, visual only, element.

Yes you can screen readers can use javascript too.

I just wanted to say welcome back and I love what you've done with place.

Thanks web guy,

Keep these good ideas flowing. We watch with interest!

Stanze.

I do the same thing but I hide the entire text bit and use a background image. But only when I need more control over the design (when a fancy button or font is needed) otherwise this is still a perfect solution.

Cheers for that Stanze.

@Angelina: That's perfectly acceptable and I do it sometimes for the exact same reasons.