Related ticket: https://core.trac.wordpress.org/ticket/30914
Result: Taborder footer is fixed, see also the summary at the bottom of this post.
Further: A lot of other issues where found using the table with a screen reader/keyboard.
We asked the testers:
- Go to Dashboard – Posts – All posts
- On this page there is a table with the current posts, you can edit/quick edit/Trash 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 posts from here
- We are testing a fix, so that the tab order is right for this table.
- Is the tab order logical for this page, can you tab through the post table and do you understand where you are and is everything read out well or clearly visible.
Testers:
- Kim van Iersel (Jaws 15)
- Suzanne van den Bercken – Boonacker (Jaws 16)
- Geof Collis (Windows 7 JAWS 14.09 NVDA 2011 IE11)
- Anna Natorilla (Desktop Windows 7, IE 11, and JAWS 16)
- Tina Tedesco (Jaws 15)
- Greg Wocher (JAWS and NVDA on my Windows 8.1)
- Malgorzata Mlynarczyk (code review and screen readers)
- Michelle DeYoung (Windows 8.1 using FF/IE/Chrome)
- Bram Duvigneau (code review and screen readers)
- Chandra Shekar (Windows + Firefox + Keyboard + NVDA Screen Reader)
Testresults:
Kim:
The comments are read out as 1 or 2, adding the word Comment to that would make it clearer
Geof:
I initially found that navigating worked with moving through the cells with control, alt and the arrow keys, arrow keys and the tab key but later found they didn’t line up properly.What I did find a little redundant was having the name of the post, name of post with checkbox, followed by the post name again then quick edits when tabbing through the cells (JAWS only)
When I arrow through the cells I only get the quick edit link not the others but when I enter the quick edit cell i can arrow through them, a little confused here, I expected arrow and tab to do the same thing, my normal navigation is to arrow not tab so we have a mismatch here.
Suzanne:
Compliment: Column headers and row headers are labeled correctly. Jaws tells me that I am focusing on a column / row header 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. when tabbing through the table.
Column headers: Tabbing the column headers using the tab key brings up information in a different order than displayed on the braille display.
Spoken order: Checkbox SelectAll; title; comments; date
Braille display: checkbox SelectA;;, Title (link); author; categories; tags; comments (link); date (link).
Conclusion: Seems that column headers that are not containing a link are skipped by the tab order. Sounds logical, though all column headers are valuable to comprehend the way the table is constructed and to know the information that can be found.
Tabbing rows: Again the tab order by using the tab key on the keyboard differs from what is shown on the braille display.
Spoken order (first row for example): checkbox SelectNewPost; Title New Post (link); Edit (link); quick Edit (link); Trash (link); View (link); Date published; categories “uncategorized”(link); Comments “2” (link).
Braille display: Checkbox SelectNewPost; New Post (link); mwa (link); uncategorized (link); –; 2 (link); 2015/02/09 published.
Spoken order tabbing backward (using Shift+Tab) differs from tabbing forward (using Tab).
Spoken order backward (first row for example): Comments 2 (link); categories “uncategorized” (link); author “mwa”; Title “New Post”; checkbox SelectNewPost
Conclusions:
- A. The action links (edit, quick edit, trash and view) are not visible in the table reading by braille, but are in the tab order when going through te table.
- B. Tabbing forward the order of columns spoken seems to differ from the order in which the same columns are shown in braille / on screen.
- C. Tabbing to the Date Column only tellsyou the post is published, does not pronounce the date (2015/02/10).
- D. The tab order forward and backward differs. Forwards 4 action links are brought to focus that are not visible in the table reading by braille and not brought to focus tabbing backward.
- E. Tabbing forward (using TAB) does not bring focus to the Author column. The column is brought to focus tabbing backward from the date column using Shift+Tab.
- F. Tabbing backward the Date column is not brought to focus, therefore the Author Column is brought to focus.
Anna
Helpful Information: Some JAWS 16 users may not know that Trash, and View links which are related to each title link exist as users of screen reader do not have to tab to the title link to read the table information. Users of screen reader can read the table title link and its associated hidden Quick Edit link even without tabbing on the title link.
Steps to read a table: While JAWS 16 is turned on, go to the table and press the T key. To navigate between cells, hold down Ctrl + Alt and use ↑, ↓, ←, or → to move from cell to cell.
Tina:
When using tab through the table it did not read the column headers or row location.
When using Ctrl+alt+any arrow key, The row in the first column would say row. I was confused a few times when I arrowed left/right or up/down the row was not spoken. That made it a little more difficult to figure out where I was.
Greg:
In the first test the tab order is just fine. I like how that when I tab to select it actually tells me what post I am selecting.
One thing I would like to see is that instead of hearing move this item to trash, it would say the name of the item like it does when I move to the select this item checkbox.
Another issue I am finding is that when you tab past the select checkbox it will say the name of the post and edit name of post. If you arrow this should just be a link for the post. The edit item link is the next item you tab to.
Michelle DeYoung
The tab order of the tables has greatly improved from the last check! YEAH!
Allow screen reader users to know that the Bulk Action selections and Filter 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. selections can be applied to the items they select in the table. Either visually add a description, or hide it, but still allow screen readers to access the text. Also create a data association between the descriptive text and inputs elements. Should apply to all screens with similar tables.
Suggested:
- Add paragraphs of descriptive/instructional text to that screen readers can voice to the user so the inputs and their purpose are more understandable.
- Use aria-describedby to tie the select elements to the associated paragraph with matching id value for more clarity of the purpose of the element.
- Add aria-label to the input buttons so they are more descriptive.
<div class="alignleft actions bulkactions">
<p id="bulk-actions-options" class="screen-reader-text">You may choose a Bulk Action item to apply to the posts you select from the table below.</p>
<label class="screen-reader-text" for="bulk-action-selector-top">Select bulk action</label>
<select id="bulk-action-selector-top" name="action" aria-describedby="bulk-actions-options">
<option selected="selected" value="-1">Bulk Actions</option>
<option class="hide-if-no-js" value="edit">Edit</option>
<option value="trash">Move to Trash</option>
</select><p id="bulk"></p>
<input id="doaction" class="button action" type="submit" value="Apply" name="" aria-label="Apply selected bulk action">
</div>
<div class="alignleft actions">
<p id="filter-choices" class="screen-reader-text">You may select a filter options to apply to the table of posts below.</p>
<label class="screen-reader-text" for="filter-by-date">Filter by date</label>
<select id="filter-by-date" name="m" aria-describedby="filter-choices">
<option value="0" selected="selected">All dates</option>
<option value="201502">February 2015</option>
</select>
<label class="screen-reader-text" for="cat">Filter by category</label>
<select id="cat" class="postform" name="cat" aria-describedby="filter-choices">
<option value="0">All categories</option>
<option class="level-0" value="1">Uncategorized</option>
</select>
<input id="post-query-submit" class="button" type="submit" value="Filter" name="filter_action" aria-label="Apply selected filter choices">
</div>
For inputs under table:
<div class="alignleft actions bulkactions">
<p id="bulk-actions-options-bot" class="screen-reader-text">You may choose a Bulk Action item to apply to the posts you select from the table above.</p>
<label class="screen-reader-text" for="bulk-action-selector-bottom">Select bulk action</label>
<select id="bulk-action-selector-bottom" name="action2" aria-describedby="bulk-actions-options-bot">
<option selected="selected" value="-1">Bulk Actions</option>
<option class="hide-if-no-js" value="edit">Edit</option>
<option value="trash">Move to Trash</option>
</select>
<input id="doaction2" class="button action" type="submit" value="Apply" name="" aria-label="Apply selected bulk action">
</div>
Screen readers voice the sortable table headers as: (Italicized is the screen reader voicing the table column)
- “Column two Title Link”
- “Column six Comments link”
- “Column seven Date link”
The sortable headers should be voiced as sortable and ideally whether they area ascending or descending.
Perhaps something like, “click to sort”
- “Column two Title link click to sort”
- “Column six Comments link click to sort”
- “Column seven Date link click to sort”
The Select All heading (label for checkbox) is being announced by the screen readers at the start of the first data cell in each row of the table.
- “Row one column one Select All checkbox not checked”
- “Row two Select All column one Select NV Access checkbox not checked”
This could possibly be confusing for screen reader users to hear “Select All” and then Select…checkbox.
If the column heading was just “Select All” I don’t think it would be that much of an issue, but since the column heading is Select All with a checkbox, that seems to make it more specific to that item (the select all checkbox) and not as a header for the whole column. Although, the user is to select whatever items/posts they want to apply an action too.
Suggested:
Either leave as is and get some user testing feedback, or try this:
<span id="add" class=”screen-reader-text”>All</span>
</div><!--end for tabletopnav-->
<!--<label class="screen-reader-text" for="cb-select-all-1">Select All</label>-->
<table class="wp-list-table widefat fixed striped posts">
<thead>
<tr>
<th scope='col' id='cb' class='manage-column column-cb check-column' style=""><label class="screen-reader-text" for="cb-select-all-1">Select</label><input id="cb-select-all-1" type="checkbox" aria-describedby="add" /></th>
Screen readers will voice it as:
- “Row one column one Select checkbox All not checked”
- “Row two Select column one Select NV Access checkbox not checked”
TinyMCE documentation:
There’s a typo in the TinyMCE documentation where it says “Jump to Tool Buttons Alt-F1” should be “Jump to Tool Buttons Alt-F10” (http://www.tinymce.com/wiki.php/TinyMCE3x:Accessibility)
You can try here: Alt-F1 does nothing, Alt-F10 works. (http://www.tinymce.com/tryit/full.php)
Bram Duvigneau
The various edit/delete links have title attributes. These attributes are all the same (Edit this post, delete this post etc). Either remove them or make them describtive (like “Edit post Test”). However, the View link has a better title attribute.
The select all checkbox shouldn’t be marked as column header. This causes NVDA, and probably other screenreaders as well, to announce (Select all, select Test) when tabbing through the table
Chandra Sekar
Header row:
Expected Tab order/sequence for the All post Table
- Check Box
- Mobile test <Title>
- Edit | Quick Edit | Trash | View <On Tab sub menu for Title>
- mwa <Author>
- Uncategorized <Category The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.>
- Ally test, Keyboard test, screen reader test <Tags *added this for test purpose>
- 0 <Comments>
- 21 mins ago, Published <Date>
Current Tab order
- Check Box (Works)
- Mobile test <Title> (Works)
- Edit | Quick Edit | Trash | View <On Tab sub menu for Title> (Works)
- mwa <Author> (Works)
- Uncategorized <Category> (Works)
- Ally test, Keyboard test, screen reader test <Tags *added this for test purpose> (Works)
- 0 <Comments> (Works)
- 21 mins ago, Published <Date> (Skips to next content row, avoiding the Date column)
Conclusion:
The tab order of the tables has greatly improved from the last check!
Summary testresults
Taborder footer is fixed. Moving the tab order of the footer was a good idea it works of keyboard and screen reader
But while testing a lost of other issues where found. like:
- Allow screen reader users to know that the Bulk Action selections and Filter selections can be applied to the items they select in the table.
- The Select All heading (label for checkbox) is being announced by the screen readers at the start of the first data cell in each row of the table. This could possibly be confusing for screen reader users to hear “Select All” and then Select…checkbox.
- The checkbutton was reason for much confusion
- The comments are read out as 0, 1 or 2, adding the word Comment to that would make it clearer
- The double link to edit post is confusing (also for sighted users)
- Tab key and arrow keys don’t match up, arrow key skips the quick edit links unless you are in the cell
- Some testers also added remarks about the colour contrast, we will open a new ticket on that.
#accessibility-usertest
