WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: "Read more" links in WordPress

for

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

From: Whitney Quesenbery
Date: Fri, Apr 19 2013 7:25AM
Subject: "Read more" links in WordPress
No previous message | Next message →

I'm working on a site being built in WordPress. Posts are displayed in a
pretty normal way:


[LINK] Title of the Article
By [LINK] Author
Extract text about 25 words long [LINK] Read more


The problem is the repeated "Read more" links

The obvious solution is to change them to be the text of the article title,
but the titles are long (mostly 8-10 words). That makes them both visual
and auditory clutter.

I could just remove the links entirely. The position of the link is the
right one: immediately after the information about the article has been
presented.

Putting the title text in a TITLE attribute won't work because most screen
readers ignore it.

Are there any other ideas/tricks for how to customize this link so that it
does not repeat AND does not clutter up a the presentation?


If it makes a difference, the site is for design/IT/usability professionals

--
Whitney Quesenbery
www.wqusability.com | @whitneyq

From: Jacek Zadrożny
Date: Fri, Apr 19 2013 7:38AM
Subject: Re: "Read more" links in WordPress
← Previous message | Next message →

Hi,
You can use image with arrow or something like this with alt tekst "read
more about [article title]. It isn't solution for partially sighted,
because for them all images are this same.
Or use wp-accessibility plugin to add article title to "read more", but
it is wisible. I use it on my site: http://informaton.pl
Regards
Jacek

From: Jared Smith
Date: Fri, Apr 19 2013 7:51AM
Subject: Re: "Read more" links in WordPress
← Previous message | Next message →

On Fri, Apr 19, 2013 at 7:25 AM, Whitney Quesenbery wrote:

> Are there any other ideas/tricks for how to customize this link so that it
> does not repeat AND does not clutter up a the presentation?

If you're not concerned about the usability issue the "Read more" link
presents for all users, I probably wouldn't do anything special for
screen reader users. Everyone has to scan or browse previous to the
link to identify the context of these ambiguous links. If you're
consistent in your presentation of the previous header and link,
forcing a screen reader user to press Shift + Tab twice, or jump to
the previous heading, etc. isn't much more burdensome than forcing a
sighted user to visually scan previous to link to find what it's
about. Doing nothing would be a WCAG 2.0 Level AAA violation, but not
Level AA.

If you want to address only the screen reader issue, I'd add an
off-screen span to the link that contains the article title:
<a href="article">Read more<span class="offscreen">: Article title</span></a>.

This approach works, but any more I can't help but wonder if hearing
the extra repeated text (especially when navigating by links) is as
much of a hassle for screen reader users as simply dealing with the
ambiguous "Read more" link.

Jared

From: Whitney Quesenbery
Date: Fri, Apr 19 2013 8:47AM
Subject: Re: "Read more" links in WordPress
← Previous message | Next message →

Jared,
I want to push back a little bit on the claim that it's a general usability
problem.

In context, the link is a continuation of the text that was just read,
allowing you to continue reading from the same place, rather than moving on
to a different topic. It's when repeated links are seen out of context, in
a list of links for example, that they become problematic.

Removing the link seems to be more of a usability problem, forcing everyone
to back up to the link on the post title. Not having a link on the title
also seems less than ideal, especially if it's written to provide good
"scent of information." Adding a lot of repetitive words also seems to me
to be a problem for everyone.

I've certainly seen sites where duplicated links were difficult for
everyone - not positioned within the content in a meaningful way, for
example.

But the same problem applies to lots of pages that contain a series of
blocks of information. A trip itinerary, for example, might have a similar
block: identify the activity, then offer options to edit, delete, expand
the block. Wouldn't repeating the title of the activity be annoyingly
repetitive:

Reservation at MyPizza Parlour
6:30pm with May, Joe and Dave
Edit Reservation at MyPizza Parlour
Delete Reservation at MyPizza Parlour
Share Reservation at MyPizza Parlour
See all information about Reservation at MyPizza Parlour

vs.

Reservation at MyPizza Parlour
6:30pm with May, Joe and Dave
Edit | Delete | Share | See all information



On Fri, Apr 19, 2013 at 9:51 AM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:

> On Fri, Apr 19, 2013 at 7:25 AM, Whitney Quesenbery wrote:
>
> > Are there any other ideas/tricks for how to customize this link so that
> it
> > does not repeat AND does not clutter up a the presentation?
>
> If you're not concerned about the usability issue the "Read more" link
> presents for all users, I probably wouldn't do anything special for
> screen reader users. Everyone has to scan or browse previous to the
> link to identify the context of these ambiguous links. If you're
> consistent in your presentation of the previous header and link,
> forcing a screen reader user to press Shift + Tab twice, or jump to
> the previous heading, etc. isn't much more burdensome than forcing a
> sighted user to visually scan previous to link to find what it's
> about. Doing nothing would be a WCAG 2.0 Level AAA violation, but not
> Level AA.
>
> If you want to address only the screen reader issue, I'd add an
> off-screen span to the link that contains the article title:
> <a href="article">Read more<span class="offscreen">: Article
> title</span></a>.
>
> This approach works, but any more I can't help but wonder if hearing
> the extra repeated text (especially when navigating by links) is as
> much of a hassle for screen reader users as simply dealing with the
> ambiguous "Read more" link.
>
> Jared
> > > >



--
Whitney Quesenbery
www.wqusability.com | @whitneyq

Storytelling for User Experience
www.rosenfeldmedia.com/books/storytelling

Global UX: Design and research in a connected world
@globalUX | www.amazon.com/gp/product/012378591X/

From: Jared Smith
Date: Fri, Apr 19 2013 9:51AM
Subject: Re: "Read more" links in WordPress
← Previous message | Next message →

On Fri, Apr 19, 2013 at 8:47 AM, Whitney Quesenbery wrote:

> In context, the link is a continuation of the text that was just read,
> allowing you to continue reading from the same place, rather than moving on
> to a different topic.

I don't think there would be much difference in this interaction
between sighted and screen reader users.

> It's when repeated links are seen out of context, in
> a list of links for example, that they become problematic.

Again, I don't see how this would be much more problematic for screen
reader users navigating by links than it would be for sighted users
simply looking for clickable things in the page, which is quite common
for blog landing pages. I don't think seeing "Article title" then
"Read more" is much different than hearing it read in a link list.

It would be an issue if a screen reader user alphabetized or somehow
changed the order of the link list, but I wouldn't think this to be
common.

> A trip itinerary, for example, might have a similar
> block: identify the activity, then offer options to edit, delete, expand
> the block. Wouldn't repeating the title of the activity be annoyingly
> repetitive:

But you're suggesting that it isn't annoying repetitive to add it to a
"Read more" link? That's the problem - it seems the only solution to
the ambiguity is to add repetition. And because adding the repetition
is more work, perhaps keeping it as is is the best solution.

Jared

From: Cliff Tyllick
Date: Fri, Apr 19 2013 10:27AM
Subject: Re: "Read more" links in WordPress
← Previous message | Next message →

I'll chime in quickly on Whitney's side.

The typical design in WordPress and comparable platforms offers uniquely worded links to each target (as well as the "Read more..." link) in the title of each item, and that title is also a heading.

So there are two ways for people using screen readers to discover those links and their destinations:
* List all links (Skimming through this list, I'd skip to "S" at the first "Read more" and back up one to see if there are any other "R"s after the "Read more.")

* List headings (I'd skip to the heading, read the blurb below it, and then, just as anyone else does, "Read more.")

For people who are reading the blurb, it is somewhat more difficult to return focus to the title (if the "Read more" link is not added) and, as Whitney pointed out, repeating the title at the end adds unnecessary clutter.

I guess you could make the "Read more" an image with its alt text being the title, but then people who turn images off for a less distracting interface would see the same visual clutter.

As is often the case, there is no perfect solution, so we need to find a solution that offers the least inconvenience to the most people.


Cliff Tyllick
AT&T Corporate Accessibility Technology Office
(but speaking for myself)



From: Whitney Quesenbery < = EMAIL ADDRESS REMOVED = >
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Sent: Friday, April 19, 2013 9:47 AM
Subject: Re: [WebAIM] "Read more" links in WordPress


Jared,
I want to push back a little bit on the claim that it's a general usability
problem.

In context, the link is a continuation of the text that was just read,
allowing you to continue reading from the same place, rather than moving on
to a different topic. It's when  repeated links are seen out of context, in
a list of links for example, that they become problematic.

Removing the link seems to be more of a usability problem, forcing everyone
to back up to the link on the post title.  Not having a link on the title
also seems less than ideal, especially if it's written to provide good
"scent of information." Adding a lot of repetitive words also seems to me
to be a problem for everyone.

I've certainly seen sites where duplicated links were difficult for
everyone - not positioned within the content in a meaningful way, for
example.

But the same problem applies to lots of pages that contain a series of
blocks of information. A trip itinerary, for example, might have a similar
block: identify the activity, then offer options to edit, delete, expand
the block.  Wouldn't repeating the title of the activity be annoyingly
repetitive:

Reservation at MyPizza Parlour
6:30pm with May, Joe and Dave
Edit Reservation at MyPizza Parlour
Delete Reservation at MyPizza Parlour
Share Reservation at MyPizza Parlour
See all information about Reservation at MyPizza Parlour

vs.

Reservation at MyPizza Parlour
6:30pm with May, Joe and Dave
Edit | Delete | Share | See all information



On Fri, Apr 19, 2013 at 9:51 AM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:

> On Fri, Apr 19, 2013 at 7:25 AM, Whitney Quesenbery wrote:
>
> > Are there any other ideas/tricks for how to customize this link so that
> it
> > does not repeat AND does not clutter up a the presentation?
>
> If you're not concerned about the usability issue the "Read more" link
> presents for all users, I probably wouldn't do anything special for
> screen reader users. Everyone has to scan or browse previous to the
> link to identify the context of these ambiguous links. If you're
> consistent in your presentation of the previous header and link,
> forcing a screen reader user to press Shift + Tab twice, or jump to
> the previous heading, etc. isn't much more burdensome than forcing a
> sighted user to visually scan previous to link to find what it's
> about. Doing nothing would be a WCAG 2.0 Level AAA violation, but not
> Level AA.
>
> If you want to address only the screen reader issue, I'd add an
> off-screen span to the link that contains the article title:
> <a href="article">Read more<span class="offscreen">: Article
> title</span></a>.
>
> This approach works, but any more I can't help but wonder if hearing
> the extra repeated text (especially when navigating by links) is as
> much of a hassle for screen reader users as simply dealing with the
> ambiguous "Read more" link.
>
> Jared
> > > >



--
Whitney Quesenbery
www.wqusability.com | @whitneyq

Storytelling for User Experience
www.rosenfeldmedia.com/books/storytelling

Global UX: Design and research in a connected world
@globalUX | www.amazon.com/gp/product/012378591X/

From: Joseph K O'Connor
Date: Fri, Apr 19 2013 1:17PM
Subject: Re: "Read more" links in WordPress
← Previous message | Next message →

Whitney,

I recommend WP Accessibility by Joe Dolson. Among other things it fixes the "Read more" links. I also recommend using short titles, but that is a religious issue I won't debate here.

http://www.joedolson.com/articles/wp-accessibility/

Thanks,

Joseph

On Apr 19, 2013, at 6:25 AM, Whitney Quesenbery < = EMAIL ADDRESS REMOVED = > wrote:

> I'm working on a site being built in WordPress. Posts are displayed in a
> pretty normal way:
>
>
> [LINK] Title of the Article
> By [LINK] Author
> Extract text about 25 words long [LINK] Read more
>
>
> The problem is the repeated "Read more" links
>
> The obvious solution is to change them to be the text of the article title,
> but the titles are long (mostly 8-10 words). That makes them both visual
> and auditory clutter.
>
> I could just remove the links entirely. The position of the link is the
> right one: immediately after the information about the article has been
> presented.
>
> Putting the title text in a TITLE attribute won't work because most screen
> readers ignore it.
>
> Are there any other ideas/tricks for how to customize this link so that it
> does not repeat AND does not clutter up a the presentation?
>
>
> If it makes a difference, the site is for design/IT/usability professionals
>
> --
> Whitney Quesenbery
> www.wqusability.com | @whitneyq
>

From: Steven
Date: Fri, Apr 19 2013 1:25PM
Subject: Re: "Read more" links in WordPress
← Previous message | Next message →

I'd personally use just a description and add read mire about as css content for visual tidyness and use css to position your accessible descriptions to not be visible but accessible to screen readers (with benefit if not actually reading the read more about on every link). Everyone wins.

From: Whitney Quesenbery
Date: Fri, Apr 19 2013 2:03PM
Subject: Re: "Read more" links in WordPress
← Previous message | Next message →

Joseph,

The length of titles is perhaps more based on context and genre than on
being a "religious war"

If you look at newspapers and magazines, their story titles are designed to
encapsulate the essence of the article and capture the reader's attention.
The average length is 6-8 words, more if you include subtitles on the NY
Times, The Atlantic and others like them.

All,

In a way, it's such a positive sign that we're having a discussion that
hinges on usability, rather than access at all.

I find these discussions very helpful. For example, the recent discussion
of what to use as alt on a photo in a bio led us to think about how to
write them in the future, so that the title, photo and bio text all flow
together well.

From: Ryan E. Benson
Date: Fri, Apr 19 2013 3:37PM
Subject: Re: "Read more" links in WordPress
← Previous message | No next message

Whitney,

One misconception of WordPress is that it creates some magical stage, when
it really doesn't. That being said, you could snip the title after a
certain point. There are some issues with this, but an example can be found
at http://wordpress.org/support/topic/limit-chars-in-the_title

--
Ryan E. Benson