Accessibility Priorities for 4.3

For the development of WordPress 4.3, we’ve got a handful of major issues we want to work on to create a smoother and more predictable experience for users with disabilities.

Reconcile Heading hierarchy throughout admin & clean-up heading contents

#31650: Missing H1 headings in admin (fixed)
#26601: Inappropriate content in headings on admin screens.

Use Semantic elements for non-link links

Tracking ticket: #26504
Individual tickets (so far): #31487, #31476
Related: #26550

Reconcile search methods

WordPress incorporates 5 different search interactions in the admin. For usability, accessibility, and maintenance reasons, this should be made more uniform. We’d like to see this reduced to two basic interactions.

#31818 Uniform Search Form Display/Experience

List table issues

We gathered a ton of data on the List table navigation experience during 4.2, and those are being turned into tickets.

#32028 List table pagination: text improvements for screen readers (fixed)
#32150 List table: better indication for “no taxonomy” (fixed)
#32152 List table: Comments column accessibility improvements (fixed)
#32147 List table: headings for pagination and views links
#31654 List tables: Select All shouldn’t be a column header (fixed)

Color contrast issues in admin:

#31548, #31713, #28599

Improve editor experience:

The editor is the single most frequently used part of most WordPress installations – and the experience with this interface should be more consistent.

#29838: Editor focus order issues.

Throughout the cycle, we’ll also be picking away at the dozens of other smaller tickets we want to fix, but these are large issues that will have a deep impact on WordPress, and will require a community effort to make progress.

#4-3-early, #core-2, #priorities

Let WordPress Speak: New in WordPress 4.2

Written by Andrea Fercia & Joe Dolson

WordPress 4.2 is shipping with a useful new JavaScript method: wp.a11y.speak(). This is a utility to make it easy for WordPress core to create consistent methods for providing live updates for JavaScript events to users of screen readers – with the side benefit that developers of plug-ins and themes can also make use of it either on the front or back end.

Why.

In modern web development, updating discrete regions of a screen with JavaScript is common. The use of AJAX responses in modern JavaScript-based User Interfaces allows web developers to create beautiful interfaces similar to Desktop applications that don’t require pages to reload or refresh.

JavaScript can create great usability improvements for most users – but when content is updated dynamically, it has the potential to introduce accessibility issues. This is one of the steps you can take to handle that problem.

What.

When a portion of a page is updated with JavaScript, the update is usually highlighted with animation and bright colors, and is easy to see. But if you don’t have the ability to see the screen, you don’t know this has happened, unless the updated region is marked as an ARIA-live region.

If this isn’t marked, there’s no notification for screen readers. But it’s also possible that all the region content will be announced after an update, if the ARIA live region is too large. You want to provide users with just a simple, concise message.

How.

That’s what wp.a11y.speak() is meant for. It’s a simple tool that creates and appends an ARIA live notifications area to the <body> element where developers can dispatch text messages. Assistive technologies will automatically announce any text change in this area. This ARIA live region has an ARIA role of “status” so it has an implicit aria-live value of polite and an implicit aria-atomic value of true.

This means assistive technologies will notify users of updates but generally do not interrupt the current task, and updates take low priority. If you’re creating an application with higher priority updates (such as a notification that their current session is about to expire, for example), then you’ll want to create your own method with an aria-live value of assertive.

How do I use this?

  • enqueue ‘wp-a11y’ from your plugin or theme or set it as a dependency of the script that generates updates
  • on DOM ready, pass a translatable string to wp.a11y.speak(): wp.a11y.speak( mystring );

add_action( 'wp_enqueue_scripts', 'yourprefix_a11y' );
function yourprefix_a11y() {
	wp_enqueue_script( 'wp-a11y' );
}

or


add_action( 'wp_enqueue_scripts', 'yourprefix_ajax' );
function yourprefix_ajax() {
	wp_enqueue_script( 'yourprefix.ajax', get_template_directory_uri() . '/js/ajax.js', array( 'wp-a11y' ) );
}

For an implementation example, take a look at wp-admin/js/updates.js. An important note: wp.a11y.speak() is only available after DOM ready, so be sure not to call it earlier!

If you’re intending to use this in your theme, you should take note that your theme should also support the core class .screen-reader-text, which is used in the inserted content. Read more about screen reader text.

References and further reading

#ajax, #aria, #javascript

Usertest: Link texts in the page with all posts (edit.php)

Question for the test team

We would like you to investigate the links and link texts on wp-admin/edit.php page and suggest better solutions for the link texts, how to make them understandable and unique, without overloading a screen reader user with a huge amount of extra text. Hidden text suggestions (screen reader only) are welcome and also visual text suggestions.
We hope to make this list of posts (and pages) understandable for everyone.

Test results

Geof Collis

Sort of like they’ve done in the media section I’d like to be able to select the posts/pages in a list with just a link and checkbox for bulk edit an nothing else.
I’d also like a heading at the beginning.

Tobias Clemens Häcker

Tested with: Windows7, Chrome Browser, ChromeVox

Analysis

The link texts for the link itself the control box and the sublinks (edit, quickedit, trash and view) are well-done. The voice output is clear. However author, category and comments are only announced as link.

Suggestion

Links to author, categories and comments should add the type. Announcing “author mwa”, “category uncategorized” and “zero comments” instead of just “mwa”, “uncategorized” and “zero”.

YouTube demo

Jeffrey de Wit

NVDA (default settings, so includes reading out title) goes entirely nuts on this stuff. I’ll see if I can get a recording of it. Something that may be useful to change are the All/Published/Drafts/Trash links. These could probably use some screen reader text.

Something like this (Maybe use List instead of Display? Not sure):

[Display] All (13) [posts] / [Display only] Published (10) [posts] / [Display only post] Drafts (3) / [Display posts in] Trash (1)

Right now it gets read out by NVDA as:
“All 13 link”, “Published 10 link”, “Drafts 3 link”, “Trash 1 link”.

On a similar note, the column headers for sorting could probably use the same treatment. It just announces the link (“Title link”, “Comments link”, “Date link”).

Should probably be something like:

“[Sort ascending/descending by] Title link”
“[Sort ascending/descending by pending] Comments link”
“[Sort ascending/descending by] Date link”

Ascending is the “default” link for title and comments, that is, when you get on the page and you trigger one of these sort links the order will be ascending (A->Z, or 0->x).

For Date the default is descending, which means the newest comment will appear on top.

Neither the current sort order (if any), nor what the sort order will be when the link is used is conveyed by the screen reader. The suggested text in the list above would take care of what the link will do, but not what sort order is currently active.

I’m worried that adding additional text for what sort order is active may be too much, nor do I know of an elegant way to word what the current sort order is. Or even where the most appropriate place to put it is.

NB. NVDA + Chrome doesn’t announce the Comments header at all. Could possibly be because the screen reader text span is wrapped in two other spans.
Seems the craziness only happens with Chrome and NVDA. Firefox is a bit more sane.

Demo in Firefox + NVDA:

Demo in Chrome + NVDA:

John Sexton

I’ve done a quick check with Supernova V14 on a Win7 PC with IE11 and have the following comments:

When tabbing through links with supernova on all posts (starting from the h2) you get:

“Add New”, “All 13”, “Published 10”, “Drafts 3”, “Trash 1”, “Forms mode Search Posts blankline edit”, “Search Posts button”,

“Forms mode select bulk action Bulk Actions pull down list box”, “Apply button”, “Forms mode Filter by date All dates pull down list box”, “Forms mode Filter by category All categories pull down list box”, “Filter button”,

“visited link”, “link”, “Forms mode select page 1 edit”, “link”, “link”, “List View link”, “Excerpt View link”,

“table 14 rows by 7 columns selectall unchecked checkbox”, “title link”, “comments link”, “date link”,

“select no title unchecked checkbox”, “no title link”, “mwa link”, “uncategorized link”, “0 link”

Note: as the above is just using the tab navigation it skips over the empty tags and date columns. However, if using the Supernova table navigation controls the empty tags cell is just read out as “column 5 row 2”. This is because by default Supernova doesn’t read all punctuation.

Pagination links:

the symbols are not often read out by default and their purpose may not be immediately obvious.

add ” First”, ” Back”, ” Next” & ” Last” as screen reader text inside the link text.

alternatively add ” First Page”, ” Previous Page”, ” Next Page” & ” Last Page” as screen reader text inside the link text.

or ” Page 1″, ” Page n”, ” Page n” & Page n” where “n” is the page number that the link will go to.

Personally I prefer the first option as is short and to the point.

Data links in table:

It may be an idea to add ” tag” & “0 pending of 1 comments” (where 0 are the number of pending comments and 1 is the total comments), as screen reader text inside the link text after the displayed value.

It would also make it more usable if the pending & comments are shown as 0/1 or 0of1 or just add another column for pending just before the comments column. This way both values are visible without the need for title attributes.

For when there are no tags, adding ” no tags” as screen reader text inside the link after the – symbol may help for cases when the – is not read out by default.

You could add “author ” as screen reader text inside the link text before the authors name.

It may be an idea to add “Edit ” to the link text as screen reader text before the title link text.

The “Edit | Quick Edit | Trash | View” menu is not accessible without a mouse in list view. However, in excerpt view, the following works from a keyboard.

The “Edit | Quick Edit | Trash | View” links are not immediately obvious, to gain access with Supernova, first you have to switch to excerpt view then you have to use cursor navigation to find the  post excerpt text and press space while over this text.

Options could be to add a show/hide link for these four links this can have the same action of as you show one it hides previously shown menus. This way there’s only one “Edit | Quick Edit | Trash | View” menu visible at any one time.

When these links are visible you can tab through them. It may be an idea to add the post title as screen reader text to the end of each of the four menu links, so it reads “Edit post title | Quick Edit post title | Trash post title | view post title” (where post title is the name of the post that is being acted upon.

It is probably worth considering removing either the “Edit |” link or the title edit link. As these are duplicated links one following the other. Perhaps while in excerpt view, the title link could be used to show/hide the menu links instead of performing the Edit link.

Another interesting thing I noticed is when using Supernova’s list links function while in excerpt view with one “Edit | Quick Edit | Trash | View” menu visible you get:

  • The pagination links are shown with the title text “Go to the first page «”, “Go to the previous page ‹”, “Go to the next page ›”, “Go to the last page »”.
  • The comments link has “c o m m e n t s”, would be better as “Comments”
  • The post titles have “Edit ” preceding the title text.
  • The post comment fields have “0 pending 1” (where 0 are the number of pending comments and 1 are the total comments).
  • The menu “Edit | Quick Edit | Trash | View” is only listed once for the currently visible menu and the links are listed as:
  • Edit this item “Edit” (where “Edit” is the actual link text and the first part is the title text).
  • Edit this item inline “Quick Edit” (where “Quick Edit” is the actual link text and the first part is the title text).
  • Move this item to the trash “Trash”, (where “Trash” is the actual link text and the first part is the title text).
  • View [post title] (where [post title] is the post title to view.

 

Gabriela

I used VoiceOver and Safari.

Comments:

All/Published/Draft/Trash links

I agreed with Jeffrey’s idea of adding a “post” word to links to provide a better context to the user. In my opinion, the context for this group of links for a sighted user is more than clear, so maybe only adding this information for the screen reader should be better.

Column headers for sorting

I agreed with Jeffrey’s suggestion to add extra info to let the user know the sort ascending/descending order. To tell you the truth, if Jeffrey did not mentioned that those links are to change the sorting order, they had gone unnoticed for me. I suggest to show by default the black triangle instead of only making it visible when the user does a mouse over or a click on the object.

First, previous, next, last page links

The title for these links already contain the information describing the action of each one of the links, is a shame that that browsers don’t announce it.
So to make them accessible, I see two options:

  1. Add the information in a span same technique than the one used for list view and excerpt view;
  2. Converting the symbols and background color to images and adding the information with the ALT attribute.
Edit | Quick Edit | Trash | View links

In my case, it was not difficult to access these links only using the TAB key. I tried on list view and excerpt view.

Since edit/quick/trash/view are all in the same cell as the title of the post I think the user gets a good idea that those actions apply to the current post.

My only concern with these links is that they appear only when the post title gets the focus. VoiceOver and NDVA let the user to open a window dialog containing a list with all links available on the page. But these links won’t appear on the list because the title post don’t have the focus on. So the user won’t be able to use these links from the link list window.

Tags information

I would suggest to add a text for the screen reader so instead of listening to a “end dash” the user will hear something like “not tags for this post”.

Data table

The table used for the posts is a data table type. But not all the data cells are associated with their corresponding head (th) cells. This could create confusion for the screen readers and affect the way the cells are read to the user.

Shaun Everiss,

NVDA latest version, firefox and internet explorer latest builds and windows7.

I have looked at the links having the title of the posts and the date on when it was posted works for me thats how it has been in 4.1 what is the issue of keeping it that way.

Reagan Lynch

Test Environment: Windows 7 64 bit, Internet Explorer 11, JAWS 16

I did this test on just the main listing you first go to when you click on All Posts. This focus is on links and what feedback you get with a screen reader.

After the bulk action combo box you get the unlabled links.

The first is links that I think are for navigating back and forward among the posts. In JAWS 16 these are not labled. I know that one is two left double angle brackets, but that is because I did a jaws command (insert+up arrow twice quickly) The next thing I see as I arrow down is a unlabled link that I cannot even determine because nothing is labled and JAWS cannot read the character that is there.

These links are repeated in opposite after the edit field to select the page. For these unlabled links it would be nice to here prev and next for the links that move you page to page, and maybe first page and last page for the links that go to the first and last page. Just labeling these page nav links would make the all posts/pages pages more usable with a screen reder.

In the table of posts I don’t really know what you can do to make the links that are numbers that take you to comments more accessible. Since we now have the wp speak function how hard would it be to use that function to tell a screen reader when it sees that link to report 1 comments or 0 comments. I know if you use I think a title attribute you can read that with a say line command twice quickly, but screen reader users are not really going to take the extra time to issue that command. Using WP speak or something else might be the best solution especially if you don’t want to impact the sighted experience.

Sebastien Massy

Use of title attribute

Not all browser/screen-reader combinations will convey the title attribute to the user. For instance, Firefox/Orca/Linux conveys the
title attribute, but Chrome/ChromeVox/Linux does not. What this means is that the user might wind up having or not having the information
depending on his A-T choice. (Example, if there are comments pending moderation for a post, Firefox/Orca might say “7 pending” while Chrome/ChromeVox would just say
“7”.)

The screen-reader-text class

In Firefox/Orca/Linux all text belonging to this class winds up being stretched out to one letter per line of the virtual buffer, presumably
in an attempt to represent the text as it would appear if formatted according to the class. The end result is that using down or up arrow to
scroll rapidly through a list of posts (or any other list employing this class) is at best tedious and at worst impossible. Chrome/ChromeVox,
which tends to promote structural navigation over layout reproduction does not exhibit this problem. I would be curious to hear whether other
firefox users on other platforms are experiencing this issue.

Not all information is displayed

Using either browsers, I ran into the simple fact that not all information would be spoken reliably. In particular, such things as
publication dates and attached taxonomies were not always spoken. For example, in Chrome/ChromeVox, I found that navigating forward would
speak the quick action links but omit the information mentioned, whilst navigating backwards would speak the whole information but the action
links were not there. I am wondering whether this has to do with the fact that the action links appear on hover, i.e when focused (for us):
could it be that they mask some information when they appear?

All in all, I found that neither browser/A-T combination provided a good experience when attempting to scroll rapidly through a list of posts.

Tina Tedesco

Jaws 15
After arrowing down past the #13 it said “link left double bracket.” It did not indicate the type of link. Arrowed down again and it just said “link” no type of link or no dataspoken. Arrowed after #2 after select page and there is a blank link; arrowed down again and another blank link.
Some sort of data link or labeled tags need to be added.

The table was very confusing for someone using a screen reader. To much text is being spoken in each column.
As a user of a screen reader, I was able to go into table navigation mode which enabled me to navigate through the table. However, even using that, it was confusing.

Amy Li

I have some suggestions and they may not related to Accessibility but usuability issues. Hope it helps. Please see below:

Too much links and caused confusion
Remove non-important information on default, remove “Author”, “Categories”, “Tag” and “Date” since those items are in Filter list.
Add icon-style for Tagging, add alt-text for tagging and other icons
Links button need be less, combining View with Edit. Quick Edit should be default, adding “More” to extend functions like “Edit”
“Trash” is better to be selectable in the front so that admin can bulk-select and delete together, instead of one by one clicking.

Mocked screenshot in default page with removed extra links:Mocked screenshot in default page with removed extra links

Issues and actions:

Overall impression

  • For screen reader users this page is overwhelmed with links and hard to get an overview of.
  • There is a need for a quick overview with links to all posts (or pages).
  • A lot more screen reader text should be added to explain what the links are about.

Page navigation

Page navigation

  • The page navigation should have a heading to make clear what it is about: ticket @afercia
  • The page navigation is missing decent screen reader labeling: ticket @afercia
  • The previous links are still links on the first page , and the next links on the last page. They should not be links. Also the colour contrast of the >> and > is to low for these “inactive” links.  Ticket @rianrietveld

Post filter

post filter

The links like Published, Sticky etc. are missing decent screen reader labeling: ticket @Cheffheid #31965 and #31966

Comments

Comments

The amount of pending comments are included in the title attribute of the comments link and only visible on hovering, this is not clear for screen reader users but also not clear for sighted users. Ticket @rianrietveld

Tags

Tags

A “—” ( “end dash”) for no tags needs screen reader labeling or a better explanation.  Ticket @rianrietveld

Post link and row-actions

Below the link for the post title there are action like: Edit, Quick Edit, Trash and View.

  • The link to the post title and the Edit link are double.
  • Some screen reader have difficulties entering the row-actions, we should review the way this is done now.
  • The | seperator could be included into the css or made invisible for screen readers by ARIA
  • Remove the explaining text out of the title attribute and add screen reader text
  • The quick edit link should be a button is now href=”#”

Screen reader text needs to reset word-wrap

In Firefox/Orca/Linux all text belonging to this class winds up being stretched out to one letter per line of the virtual buffer. This is due to the word-wrap: break-word; applied on an element Ticket @afrecia

No feedback on sort order of a column

  • The way a column is sorted should be added for screen readers
  • The only way you can see if a column is sortable is by the colour of the table header text and by hovering over the link

To consider

How to decrease the number of links and make a post quicker selectable for a screen reader user

One more thing to consider

Edit by Andrea. We missed the format links: when a post has a specific format set, a small icon is prepended to the post title, see screenshot:
video post format
the image is linked to a screen with all the post belonging to that post format. Read out by screen readers as: “video link video”.

#accessibility-usertest