E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 9 (In chronological order)

From: Birkir R. Gunnarsson
Date: Tue, Dec 06 2011 4:30PM
Subject: the "Read More" links vs elipsis
No previous message | Next message →

Hi guys

Curious if there are any opinions on this.
Most sites that carry news stories and articles often have the title
of the news story as a link, then a few lines from the article,
followed by a "read more" link, that points to the same target as the
title of the news story.
This makes it a bit cumbersome to employ the list of links feature in
most screen readers, which allow the user to bring up all the links on
the page in a listbox and select a link from there.

Another approach I have seen is simply to end the displayed part of
the news story with an elipsis (...), indicating there is more but it
is not displayed unless a user clicks on the link. This does require
screen reader users to scroll up a few lines to find the title of the
news story (or use shift-tab to get to the previous link).

A third approach, employed by Groupon for instance, is to have a "rad
more" link that is simply a Javascript that displays the rest of the
text on the same page, that way the user does not have to open a new
page to read the rest of the story.
Are there any thoughts on this, pros and cons of each approach.
I like either of the latter two approaches, as a screen reader user.
I do want to recommend the second approach to people whose web pages I
evaluate, but not unless I get some input from the real experts in the
field (I am aspiring to be one but definitely not there yet).
Thanks
-B

From: Jared Smith
Date: Tue, Dec 06 2011 4:57PM
Subject: Re: the "Read More" links vs elipsis
← Previous message | Next message →

All of these options work, though none are optimal. While you prefer
options 2 or 3 as a screen reader user, option 1 (having the "Read
more" link at the end of the summary) is more standard and probably
more friendly for sighted users. A good approach is to make the "Read
More" link so that it makes sense outside of its context, perhaps by
using off-screen text so that sighted users see "Read more", but
screen reader users hear "Article Title - Read More". This would
provide two links with the same initial text, though this is less
burdensome than several "Read more" links.

Another options is to use a combination of the approaches - having a
visual "Read More" link that is not a true link (and thus omitted from
the tab order and links list), but that uses JavaScript to trigger the
page change. This would, of course, require JavaScript, but without
JavaScript you could have the presentation be as Option 2 (no link,
user must backtrack to activate the link).

Option 3 (dynamic "Read more" option) would also require JavaScript
and would have limited applicability. It would also require that focus
be controlled so that the user's place within the article is not lost
when the link is activated and the rest of the story appears.

Of these, I think the first approach of using off-screen text so that
all links make sense is the easiest to implement and most friendly.

Jared Smith
WebAIM.org

From: John Foliot
Date: Tue, Dec 06 2011 5:06PM
Subject: Re: the "Read More" links vs elipsis
← Previous message | Next message →

Jared Smith wrote:
>
> A good approach is to make the "Read
> More" link so that it makes sense outside of its context, perhaps by
> using off-screen text so that sighted users see "Read more", but
> screen reader users hear "Article Title - Read More". This would
> provide two links with the same initial text, though this is less
> burdensome than several "Read more" links.
>
> I think the first approach of using off-screen text so that
> all links make sense is the easiest to implement and most friendly.

Hear, hear.

I just finished writing an email less than an hour ago to a 3rd party
contractor that suggested the very same thing. While the "must work
without JavaScript" requirement is fading into the sunset (finally) it
remains true that some users will not have JavaScript enabled and thus JS
solutions could fall over. For those users who do not have CSS enabled (on
the other hand) there is no design, but the presence of the additional
text (initially placed off-screen via CSS) adds no "harm" - it's not like
it's ruining a visual design at this point.

Gets my vote!

JF

From: Jeevan Reddy
Date: Tue, Dec 06 2011 11:45PM
Subject: Re: the "Read More" links vs elipsis
← Previous message | Next message →

Hi Birkir,
i do agree with Jaradh's suggestion which is the universal solution
for Read more links..
you can do it automatically by appending title of the article to read
more via the sthcripting and screen off that with CSS.

The other approach is by using ARIA-labelledby, which will work in modern
browsers like IE 8+, FF 3.6+ etc..

Consider the following Example, when the read more link get focus, screen
readers say the read more+title of the article. it'll work in linklist mode
also..
Example: <a href="thehindu/cricket" onclick="details() ><h3
*id="cricket"*>India
lost the Third ODI against West Indies</h3></a>
the victory oscilated between the two nations, Rohit Sharma's invincible
battle didn't reach india to victory...
<a href="thehindu/cricket" onclick="details()
ARIA-labelledby="cricket">read more</a>

Hope this helps..
On Wed, Dec 7, 2011 at 5:28 AM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:

> All of these options work, though none are optimal. While you prefer
> options 2 or 3 as a screen reader user, option 1 (having the "Read
> more" link at the end of the summary) is more standard and probably
> more friendly for sighted users. A good approach is to make the "Read
> More" link so that it makes sense outside of its context, perhaps by
> using off-screen text so that sighted users see "Read more", but
> screen reader users hear "Article Title - Read More". This would
> provide two links with the same initial text, though this is less
> burdensome than several "Read more" links.
>
> Another options is to use a combination of the approaches - having a
> visual "Read More" link that is not a true link (and thus omitted from
> the tab order and links list), but that uses JavaScript to trigger the
> page change. This would, of course, require JavaScript, but without
> JavaScript you could have the presentation be as Option 2 (no link,
> user must backtrack to activate the link).
>
> Option 3 (dynamic "Read more" option) would also require JavaScript
> and would have limited applicability. It would also require that focus
> be controlled so that the user's place within the article is not lost
> when the link is activated and the rest of the story appears.
>
> Of these, I think the first approach of using off-screen text so that
> all links make sense is the easiest to implement and most friendly.
>
> Jared Smith
> WebAIM.org
>

From: Angela French
Date: Wed, Dec 07 2011 10:15AM
Subject: Re: the "Read More" links vs elipsis
← Previous message | Next message →

I have read the various suggestions and while they are great if you get to hand code a page, for a site that is maintained by content editors using a CMS where writing any code at all is impossible, I have to resort to a more "spelled-out" solution for the typical "read more" approach.

Angela French


>Most sites that carry news stories and articles often have the title of the news
>story as a link, then a few lines from the article, followed by a "read more" link,
>that points to the same target as the title of the news story.
>This makes it a bit cumbersome to employ the list of links feature in most screen
>readers, which allow the user to bring up all the links on the page in a listbox
>and select a link from there.
>
>Another approach I have seen is simply to end the displayed part of the news
>story with an elipsis (...), indicating there is more but it is not displayed unless a
>user clicks on the link. This does require screen reader users to scroll up a few
>lines to find the title of the news story (or use shift-tab to get to the previous
>link).
>
>A third approach, employed by Groupon for instance, is to have a "rad more" link
>that is simply a Javascript that displays the rest of the text on the same page,
>that way the user does not have to open a new page to read the rest of the story.
>Are there any thoughts on this, pros and cons of each approach.
>I like either of the latter two approaches, as a screen reader user.
>I do want to recommend the second approach to people whose web pages I
>evaluate, but not unless I get some input from the real experts in the field (I am
>aspiring to be one but definitely not there yet).
>Thanks
>-B
>

From: Nancy Johnson
Date: Wed, Dec 07 2011 11:48AM
Subject: Re: the "Read More" links vs elipsis
← Previous message | Next message →

I've used the javascript "View more/View less" a number of times...
but sometimes that doesn't work visually as a large news story needs
to open on it's own page. Even on sites I control manually, I have
a difficult time coming up with some text that makes sense and is not
"read more"... I like the hidden view approach just so it doesn't
interfere with search engines.

For dynamic sites
If it is a large dynamic environment, the backend developers could
easily pull a title of some sort into the arialabelledby text.

for the smaller dynamic sites like Wordpress,... it would be difficult
for some like me to hand build a plug-in to do the same task. I
would need to find a tutorial...

Nancy.


On Wed, Dec 7, 2011 at 12:15 PM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> I have read the various suggestions and while they are great if you get to hand code a page, for a site that is maintained by content editors using a CMS where writing any code at all is impossible, I have to resort to a more "spelled-out" solution for the typical "read more" approach.
>
> Angela French
>
>
>>Most sites that carry news stories and articles often have the title of the news
>>story as a link, then a few lines from the article, followed by a "read more" link,
>>that points to the same target as the title of the news story.
>>This makes it a bit cumbersome to employ the list of links feature in most screen
>>readers, which allow the user to bring up all the links on the page in a listbox
>>and select a link from there.
>>
>>Another approach I have seen is simply to end the displayed part of the news
>>story with an elipsis (...), indicating there is more but it is not displayed unless a
>>user clicks on the link. This does require screen reader users to scroll up a few
>>lines to find the title of the news story (or use shift-tab to get to the previous
>>link).
>>
>>A third approach, employed by Groupon for instance, is to have a "rad more" link
>>that is simply a Javascript that displays the rest of the text on the same page,
>>that way the user does not have to open a new page to read the rest of the story.
>>Are there any thoughts on this, pros and cons of each approach.
>>I like either of the latter two approaches, as a screen reader user.
>>I do want to recommend the second approach to people whose web pages I
>>evaluate, but not unless I get some input from the real experts in the field (I am
>>aspiring to be one but definitely not there yet).
>>Thanks
>>-B
>>

From: John Foliot
Date: Wed, Dec 07 2011 1:03PM
Subject: Re: the "Read More" links vs elipsis
← Previous message | Next message →

Angela French wrote:
>
> I have read the various suggestions and while they are great if you get
> to hand code a page, for a site that is maintained by content editors
> using a CMS where writing any code at all is impossible, I have to
> resort to a more "spelled-out" solution for the typical "read more"
> approach.
>

Hi Angela,

How about something like this:

.offscreen {
position:absolute;
left:-999px;
top:-999px;
}

<h3>$Title</h3>
<p>$teaser</p>
<p><a href="$Link"><span class="offscreen">$Title :</span>Read
More</a></p>

(pseudo code used to illustrate the idea)

From: Jared Smith
Date: Wed, Dec 07 2011 1:33PM
Subject: Re: the "Read More" links vs elipsis
← Previous message | Next message →

On Wed, Dec 7, 2011 at 1:05 PM, John Foliot wrote:

> How about something like this:
>
> .offscreen {
>   position:absolute;
>   left:-999px;
>   top:-999px;
> }

You'll want to use top:auto; in this case, otherwise the browser will
have focus on an element that is partially on the screen and partially
way above the top left corner of the screen. This can cause some weird
behavior like having the browser scroll to the top of the page.
top:auto moves the element directly to the left of where it would be
on the screen.

Jared

From: Angela French
Date: Wed, Dec 07 2011 1:39PM
Subject: Re: the "Read More" links vs elipsis
← Previous message | No next message

Yes, I suppose that might work for my circumstances. However, I have noticed that in Contribute it can be difficult to apply spans to selected text. I'll put it on my to-try list. Thanks.

>