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, trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days. and view) are well-done. The voice output is clear. However author, categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. 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 headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. 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 FilterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. 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”, “ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. 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 AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/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”, “TagTag Tag is one of the pre-defined taxonomies in WordPress. Users can add tags to their WordPress posts along with categories. However, while a category may cover a broad range of topics, tags are smaller in scope and focused to specific topics. Think of them as keywords used for topics discussed in a particular post.” 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:

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

• 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

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

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

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:

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