Enviar artigo por e-mail:

Nome do remetente:

E-mail de destino:

Comentário:
§
Restam-lhe  caracteres

|Sair

Increasing word press accessibility, according to the W3C – WCAG www.w3.org/TR/?WCAG/

One of the many things automatic validations will immediately pick upon is the repetition of different hyperlinks with the same link text.

This happens every time you use the <!– more -> link to continue reading excerpted posts.

The links actually will lead you to a complete different page, but the link text will always be the repetitive “read more” or similar.

Now this is an accessibility obstacle since it will confuse readers about where to go.

Hyperlinks should clearly indicate their targets, so that users know in advance what to expect, should they choose to open them.

To avoid this repetition, we need different text links to different content. This tutorial is about achieving that in a straightforward way.

Let’s start.

We need to replace the default “read more” with something dynamic so all text links look different.

The obvious way to do it, is by adding the post title to the default text “read more” and end up with something like “read more about your-post-title”.

Step 1.

We need to find where that default text is defined inside the WP core, and add (concatenate) our variable (the post title) to it.

File to edit: wp-includes/post-template.php

Go to line 185 or spot the chunk bellow: (if by version change, these chunks have moved, just browse the code to find it. Beware that probably the code syntax might have changed too, and might not look exactly the same as well. Use common sense.)

if ( null === $more_link_text )

$more_link_text = __( ‘(more…)’ );

If you have no custom text defined, this assigns a value to the variable $more_link_text and defines what your users will read.

We will concatenate (add) our post title to it, and the final markup should look like this: (off course you can change the text between ” to fit your needs)

The Simple method:

if ( null === $more_link_text )

$more_link_text = _( ‘Read all about -> ‘.get_the_title() );

If you want to limit the number of character from the title to appear in the hyperlink, use the code bellow instead. (Where 0 is the first character and 25 the last to appear, customize at your will.)

The Advanced method 1:

if ( null === $more_link_text )

$more_link_text = _( ‘Read all about -> ‘.substr(get_the_title(), 0, 25).’…’);

Or if you prefer to abbreviate by word count and not by character count – It makes more sense – Use the code block bellow:

The Advanced method 2:

if ( null === $more_link_text )

$titulo = get_the_title();

$excerto = explode(” “,$titulo);

$cena = $excerto[0].” “.$excerto[1].” “.$excerto[2];

$more_link_text = _( ‘Read all about -> ‘.$cena.’…’);

The above code was written step by step so you could understand the idea. However you should use this similar but shorter version of the above:

The Advanced, recommended method:

if ( null === $more_link_text )

$excerto = explode(” “, get_the_title() );

$more_link_text = _( ‘Read all about -> ‘.$excerto[0].” “.$excerto[1].” “.$excerto[2].’…’);

Where $excerto[0] to $excerto[2] are the first to the 3rd Words to show in your excerpt. The .” “. are the blank spaces between those words.

Again you can customize the number of words to show, at your will.

Step 2.

Upload the file post-template.php to the wp-includes/ folder and have fun!

Now you are a step closer to having a fully accessible word-press website.

ToDo: This method isn’t perfect. On every word-press upgrade you will be likely to do these actions allover again.

I will think of something more permanent, but for now this satisfies me, and should do it to for most of you too.

However, should you know a better way to do it, please let me know!