Using aria-hidden to help provide better link context in WordPress Admin screens

Published: Nov 26th, 2013 | Author: Graham Armfield | 2 Comments

Reading Time: 5 minutesThere are some outstanding WordPress trac tickets concerned with providing more meaningful link text within the WordPress admin screens. The idea here is to improve the situation for screen reader users.

Edit and browse links in Publish box – could aria-hidden help here?

One example is trac ticket 25459  which covers the Edit, Edit, Browse, Edit links in the Publish box when you are creating or amending a page or post. These links allow user to:

• edit the status of the page/post (published, draft, etc)
• edit the visibility of the page/post (public, password protected, private)
• browse the list of revisions for the post/page
• edit the publish date for the page/post

Screen reader users often use functionality within their screen reader to list the links on a page. They can navigate through this list and action the links directly from the list.  On their own, these links do not provide sufficient context to help screen readers know what they are for – since they just sequentially read out Edit, Edit, Browse, Edit.

The best solution

The obvious best solution here would be to just change the link text to be more meaningful – Edit status, Edit published date, etc. But this has run up against some WordPress people who are very resistant to what they believe is the addition of ‘redundant’ visible link text.

Realistically, after some debate I don’t believe a change to the visible text will be implemented for the foreseeable future.

So an alternative solution will need to be found to make life easier for screen reader users.

What about text for screen readers only?

Attempts were made at WordCamp Europe by Rian Rietveld (@rianrietveld), Emanuel Blagonic (@eblagonic) and others to create a solution to this using extra link text that was available to screen reader users only and hidden from sighted users. See Text for Screen Readers Only for an explanation of how to do that.

The link text would then become (for example) ‘Edit post date’, but the words ‘post date’ would be accessible by screen readers only – leaving just ‘Edit’ visible.

However this wasn’t a watertight solution for full internationalisation, as in some languages the verb edit changes form depending on the whether it stands alone or with some accompanying text.

An alternative word order was considered – eg ‘Post date: Edit’ – once again with ‘Post date:’ being accessible by screen readers only. Whilst still not perfect in some languages, this was considered to be a potential solution going forward.

Enter aria-hidden

However, at WordCamp London contributor day, John Blackbourn (@johnbillion) suggested that the links could contain both the short form (Edit) and the long form (Edit post date) and that these would be selectively made available based on users’ capabilities and browsing choices. This solution would provide better internationalisation support as the translations into other languages would always be correct and grammatical.

Hiding screen reader text from sighted users is well documented but the opposite idea – hiding text from screen readers but making it visible was a technique I’d not come across before. But in theory it can be done using the aria-hidden attribute. More details about this ARIA attribute and others can be found in the World Wide Web Consortium pages on ARIA states and properties.

The proposed solution

Starting at comment 24 on trac ticket 25459 John has proposed the technical solution, which also includes the necessary function calls to enable the translations to be added.

To summarise, the short form of each link (eg Edit) will be wrapped in a span with an attribute of aria-hidden="true" which will mean that it is visible on the page, but in theory inaccessible by screen readers and other assistive technology. The long form of each link (eg Edit post date) will be wrapped in a span with a class of screen-reader-text (the WordPress standard class for this purpose). This longer text will be accessible by screen readers but will not visible unless the stylesheet is not available for some reason.

But does it work with screen readers?

Using a test page created outside of a WordPress environment, I tested the concept with an array of screen readers on different platforms and with different browsers.

The links on the test page had the following structure:

<a href="#">
   <span aria-hidden="true">Edit</span>
   <span class="screen-reader-text">Edit post date</span>
</a>

The results were largely positive, but with a couple of exceptions.

Using Windows 7 laptop

Two screen readers – NVDA 2013.2 and JAWS 14 were each tried with 3 up-to-date browser versions – IE10, Firefox 25 and Chrome 31.

Voiceover on iOS7 iPad using Safari

Voiceover is obviously interpreting the aria-hidden attribute correctly as it announces the long form of the link “Edit post date”. The short form “Edit” is visible on the screen.

One other feature noted here is that the outline that Voiceover places round any screen item with focus is missing from the visible short form link. Further investigations reveal that the focus outline is placed only around the longer form of the link.

This could inconvenience sighted users who rely on Voiceover to help them interact with web pages.

Talkback on Samsung Android 4.2.2 phone

The current version of Talkback obviously doesn’t support aria-hidden, so Talkback users get both the ‘short’ and ‘long’ link texts voiced one after the other. This might be confusing for those using Talkback.

The current item focus is present and visible though.

What about other assistive technologies?

Dragon Naturally Speaking is voice recognition software marketed by Nuance. Although Nuance don’t themselves see Dragon as assistive technology, it is extensively used by some people with motor impairments to control their entire machines, not just browse the web.

Dragon documentation states that it works best with Internet Explorer so Dragon version 12 was tested with that browser on a Windows 7 laptop.

The results were good. It is possible to action the links using the visible short form link text. In fact it is also possible to action the links using the long form text as well. This is a bonus for those who do use screen readers alongside Dragon. But this bonus is probably a result of the fact that Dragon does not feature support for ARIA attributes. If Dragon should ever support the aria-hidden attribute, then the short form of the link would no longer be available to Dragon users.

So is this a viable solution?

As I write this, developers are working on trac tickets ready for the scheduled code-freeze on WordPress 3.8 at the beginning of December (believed to be 5th December). Given the internationalisation considerations mentioned above, I believe this solution could satisfy the needs of the visual design people as well as users of screen readers and other AT.

But what do you think? Are there other issues that we’re not taking into account here?

This change could still get into WordPress 3.8 if enough people think it’s the right pragmatic solution.

Please leave your thoughts in the comments section below, or directly into the WordPress trac ticket if you’d rather. I shall also be starting discussion on Make WordPress Accessible blog and on LinkedIn and Facebook.

Ready for more? Try this

Another two accessibility presentations in November - Nov 8th, 2013
I’m currently preparing for another two accessibility presentations during November 2013. It’s been a busy autumn so far on my tour of meetups and other events.

Categories: Accessibility, Assistive Technology, Browsers, WordPress | Tags: Screen Reader, Speech Recognition | 2 Comments

2 Responses to “Using aria-hidden to help provide better link context in WordPress Admin screens”

1. From: November 29, 2013: Weekly Roundup of Web Development and Design Resources on November 29th, 2013 at 5:32 pm

   […] Using aria-hidden to help provide better link context in WordPress Admin screens: In this post, Graham Armfield explains how using the aria-hidden attribute provides assistive technology with more meaningful “Publish” links as well as provide better internationalization support. […]

2. From: Graham Armfield on November 30th, 2013 at 7:15 pm

   A patch has now been submitted to fix the issue for these links using the aria-hidden=”true” solution. Hopefully it can be included in WordPress 3.8.

Like to leave a comment?

Please note: All comments are moderated before they will appear on this site.

Previous post: WordCamp London – A great experience

Next post: Specification for an accessible video/media player