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:
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.
November 29th, 2005 02:37
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?
November 29th, 2005 04:35
This is way too far out there for moi. I think I have to sleep now.
November 29th, 2005 11:12
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 :) .
November 29th, 2005 11:24
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… :-)
November 29th, 2005 12:28
for displaying code etc., I always just use the entity names…
so > is displayed by writing >
< is displayed by writing <
Therefore, your code above would (for example) look like
<? ?>
Oh, and the &? It’s done by using & Which was a sod to write…
November 29th, 2005 12:56
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?
November 29th, 2005 13:55
This should do the trick but I still just search & replace (or avoid code).
November 29th, 2005 14:22
Ian, you’re a champion! Online and done in the blink of a leprachaun’s eye.
November 29th, 2005 21:10
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.
November 29th, 2005 21:19
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*
November 29th, 2005 21:27
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 :-)
July 10th, 2007 16:54
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?