home

Making extended posts more accessible in WordPress

Ever since reading that using the “more” button in the WordPress dashboard results in accessibility issues I’ve been meaning to find a way round it. But with so many other things to fix (resizable fonts!), I’d put it on the back burner and stopped writing extended posts. Then tonight I fell upon a solution by accident.

First up, why is it a problem? Well, the W3C Web Content Accessibility Guidelines (WCAG) state that

If more than one link on a page shares the same link text, all those links should point to the same resource. Such consistency will help page design as well as accessibility.

If a page on this blog has, say, 10 posts and two or more of those posts contain extended text, then two or more of those posts will have a “more” link leading to two different places.

Reading Bruce Lawson‘s post, “WordPress PHP help wanted“, a comment from Derek Featherstone led me to try this method and by jingo it works.

In the index file (index.php) you’ll see some code like this:

<div class="entry">
<?php the_content('<br /><br />[more...]'); ?>
</div>

It might vary slightly, depending on the theme you’re using but you want to change the content of the php statement, i.e. everything except:

<?php

at the start and
?>

at the end (these are the opening and closing tags, just like, for example, the <h1> and </h1> tags of html.

You replace that with:

the_content("Continue reading " . the_title('','',false), 0);

And your finished line is now:

<?php the_content("Continue reading " . the_title('','',false), 0); ?>

I’ve had to put spaces in the code above so that it’s visible but you can see screenshots of the code as follows:

the old code
the new code

If you’re not confident about editing the index.php file, ask a friendly neighbourhood php geek and make a copy of the file before you start!

Next question: what’s the best way to display code (php, html, css) here without having to add spaces? I tried installing CodeSnippet a little while ago but not had much success. Maybe I’ll look at it again tomorrow. For now, to bed!

Update: thanks to Ian‘s suggestion, I’ve encoded the above as entities with the WordPress encoder widget.

12 Responses to “Making extended posts more accessible in WordPress”

  1. daisy
    November 29th, 2005 02:37
    1

    For tomorrow:

    add a line break tag so that “Continue reading…” starts on a new line?

    make the title of the post stand out more from the words “Continue reading” – quote marks?

  2. Mary
    November 29th, 2005 04:35
    2

    This is way too far out there for moi. I think I have to sleep now.

  3. Neil T.
    November 29th, 2005 11:12
    3

    Weird. I’d have thought WordPress would have done this long ago, what with their use of structured, semantic HTML. Movable Type has been doing it for a long time now :) .

  4. daisy
    November 29th, 2005 11:24
    4

    Neil, I’d also like them to add a title option to the “create a link” button and an alt tag option when inserting images. Once I’ve finished tidying up here I’ll start making some noise. I came across a free wordpress mu service the other day that has the first one in place (will dig out the url and post about it) but haven’t seen the second one yet.

    And as for movable type, give me php over mt tags any day of the week… :-)

  5. Lyle
    November 29th, 2005 12:28
    5

    for displaying code etc., I always just use the entity names…

    so > is displayed by writing &gt;
    < is displayed by writing &lt;

    Therefore, your code above would (for example) look like

    &lt;? ?&gt;

    Oh, and the &? It’s done by using &amp; Which was a sod to write…

  6. daisy
    November 29th, 2005 12:56
    6

    Ah thank you Lyle. Duh, I’d forgotten that (it being nearly 2 a.m. when I was writing it). So is there a nifty little something that’ll convert text or do I take the safe route and manually search & replace?

  7. Ian
    November 29th, 2005 13:55
    7

    is there a nifty little something that’ll convert text

    This should do the trick but I still just search & replace (or avoid code).

  8. daisy
    November 29th, 2005 14:22
    8

    Ian, you’re a champion! Online and done in the blink of a leprachaun’s eye.

  9. Em³
    November 29th, 2005 21:10
    9

    I don’t want to worry you, but you’ll have to create lots of “Leave a comment on XXXXX” links too or your accessibility’ll still be borked.

    I agree with the suggestions that quotes or something to highlight the post title in the link would be a good thing too.

    Sorry.

  10. Gordon
    November 29th, 2005 21:19
    10

    Ohhh fab idea. I don’t use the “More” link often except on my search pages…

    *heads off to start coding.. realises he’s supposed to be on the cross trainer… curses*

  11. daisy
    November 29th, 2005 21:27
    11

    Em³ thank you – it’s in the Top Ten of things to do (must update the Nag-o-Meter to sync with the list on the desktop) but thank you for reminding me. The whole theme needs a good accessifying to be honest, am trying not to become Very Overwhelmed By It All… :-)

    Gordon, I am wearing a big soppy proud smile that you’ll be using this (*cough* admittedly accidental) discovery :-)

  12. Aani
    July 10th, 2007 16:54
    12

    Ah thank you Lyle. Duh, I’d forgotten that (it being nearly 2 a.m. when I was writing it). So is there a nifty little something that’ll convert text or do I take the safe route and manually search & replace?

Leave a Reply

For added zing, you can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

But you can also just type in the box and hit the Submit button. Easy peasy lemon squeezy.

Your email address is not displayed and will NEVER, EVER be shared with any other party. We hate spam mail as much as you do.

Spotlight on...

Delicious links

These links are updated frequently thoroughout the day. Should you miss any they're all stored on my Delicious pages.

What I'm listening to