Apple VoiceOver screen reader link list
I ran into another accessibility issue with WordPress in how it adds “Continue Reading” links to posts. I started inserting “More” tags so the front page just shows a paragraph and then shows a link to read the full article. This reduces cognitive load as users can skim through what’s new before diving in. Unfortunatly the default behavior of wordpress is to use the exact same “Continue reading” link after every article. This may seem innocuous to some but for a screen reader it not only ruins one of the handy quick navigation solutions, the link list, but it also violates WCAG 2.0 2.4.4 by obfuscating the link’s purpose.
Rather than wade through an entire page of stuff most screen readers provide a way to pull up a list of all the links on a page and then sort/search that list to reach the place desired. This works great, unless the links lack context and just say “Continue reading” over and over again. “Continue reading what?” is the unanswered question.
To resolve this we modified loop.php to not only say “Continue reading” but to also add the post title. I’m running the WordPress “Twenty Ten” theme so if you are using another theme you might need to make the same modification elsewhere. Inside loop.php was this line:
the_content(__('Continue reading<span>→</span>','twentyten'));
which I simply modified to append the post title after the Continue reading text:
the_content(__('Continue reading '.get_the_title(),'twentyten'));
You might notice that I also got rid of the goofy right arrow symbol which is not a familiar or necessary idiom. With my update implemented and saved I get what you see on our site today – a nice contextual link.
