Admin plugin pages and Shiny Updates: Accessibility user test result

Tested on WordPress 4.2-alpha
Summary of the result at the bottom of this post.

Testers:

  • Kim van Iersel
  • Gabriela Nino de Rivera
  • Tina Tedesco
  • Malgorzata Mlynarczyk
  • Greg Wocher
  • Jeff de Wit
  • Petra de Jong

Test:

Go to Dashboard > Plugins > Add New
Add a new pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party (any plugin, witch one doesn’t matter)
Can you add a plugin and also is it clear what happens for a screen reader user.

Go to Dashboard > Plugins > Installed plugins
Can you also test updating an already uploaded plugin.

Test results

Kim van Iersel

Jaws 15.

When I clicked on a plugin, after the name appeared some message which implied that the plugin should be installed. I thought it was not clear because I’m used to read this info below/with the heading. Now there was no notice that plugin was downloaded and installed. I went to the plugins, the list of installed plugins and there it was, activated and all!
For me personally, there is little information about the process and results.

Gabriela Nino de Rivera:

NVDA for Windows XP and FireFox, VoiceOver OS X Yosemite 10.10.2 and Safari. Extensions for Firefox: WAVE toolbar, Web developer toolbar and Jim Thatcher favelets. Firefox Inspector for manual code review.

From Dashboard > Plugins > Add New page, there are two ways for adding a new plugin: first one is clicking on the “Install now” button available with the plugin information.

The second one is to chose “more details” where an “Install now” button is at the bottom of the popup frame.
Before adding a plugin, the user needs to search for it. The user might or might not know the plugin’s name. I’m not sure if the process for searching a plugin is in the scope of this test, so I’ll try to be short.
Searching for a plugin

To search for a plugin, the user can sort by categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. or use the search tool on the page.
A list of five categories are available for the user (featured, popular, recommended, favorites and BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. testing). After being redirected to the category page, the user it is not notified where she is. The focus is moved at the beginning of the page, the user need to come back where she were. There is only a visual indication so NVDA and VoiceOver can’t tell the user current location.

Plugin categories

The search tool form it is a little bit confusing. When using the search tool, NVDA and VoiceOver will recognize that there is an input text, but it seems that the association between the label and the input is missing. This could be maybe occasioned by the hidden objects on the form.

<form class="search-form search-plugins" method="get">
<input type="hidden" value="search" name="tab"></input> <label><span class="screen-reader-text">Search Plugins</span>
input class="wp-filter-search" type="search" placeholder="Search Plugins" value="" name="s"></input></label>
input id="search-submit" class="button screen-reader-text" type="submit" value="Search Plugins" name=""></input></form>
  • Inputs are missing an id attribute
  • Label is missing the for attribute to make the association with the input.

There is a select menu on the search form that it appears when a search is done. This select menu is missing a label, so when the focus is on this element, NVDA and VoiceOver won’t give any extra information than “keyword popup button” or “select menu keyword”.
<select id=”typeselector” name=”type”>
<option selected=”selected” value=”term”></option>
<option value=”author”></option>
<option value=”tag”></option> </select>

Adding a plugin
Clicking on the “Install now” button available with the plugin information
When adding a plugin from the button “install now”, even if the focus on this element, none of the two screen readers notifies the user about the progress or the installation confirmation. The feedback is only visual.

Plugin installed

Clicking on the “Install now” button at the bottom of the “More details” popup information

If the user decides to add a plugin from the “install now” button on more details, she will be redirected to a confirmation page where she can easily have feedback about the installation.

Install via more details

When an error happens the focus is not moved to the error element, so the user can not know about it unless she moves to the top and read again the page with the screen reader. Errors are only identified visually: by a red line at the left of the text.
When the error is written in other languages, it does not seems to be using the lang attribute to specify the language of the text.

Error message in another language

Tina Tedesco

I tried installing a plug in and received no information from my screen reader.  It did not seem like anything happened.  I received no message or additional information.

Malgorzata Mlynarczyk

I was able to add a plugin using keyboard only, and using a screen reader (NVDA in Firefox and Chrome). However, I did notice few issues:
There’s a missing <h3> heading. I’d probably place this heading somewhere at the beginning of <div class=”tablenav top”> container, and set its value to a currently selected plugins category (as shown in <ul class=”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.-links”>). So, for example, if the page is showing “Popular” plugins, this heading should be <h3>Popular plugins</h3> (this heading can be hidden from sighted users).
At the moment the selected category of plugins (‘Featured’, ‘Popular’, ‘Recommended’, etc) is only indicated using visual cues (border-bottom and different text colour). Screen reader users don’t know which page they are viewing when browsing through that list of links. The currently viewed page shouldn’t really be a link (because it’s only linking to itself), and/or maybe it would be useful to add some text to the selected one (hidden from sighted users).
For example, on the page showing ‘Popular’ plugins, the list could look like this:
<ul class="filter-links">
  <li class="plugin-install-featured"><a class="" href="[..]/wp-admin/plugin-install.php?tab=featured">Featured</a></li>
  <li class="plugin-install-popular"><span class=" current"><span class="screen-reader-text">Selected: </span>Popular</span></li>
  <li class="plugin-install-recommended"><a class="" href="[..]/wp-admin/plugin-install.php?tab=recommended">Recommended</a> </li>
  [etc.]
</ul>
On most of the ‘Add Plugins’ pages the search area only contains one input field (‘Search plugins’). However, on the ‘Search results’ page there’s an extra field, a dropdown list. That dropdown list has no label. It should be labeled, for example:
<label for="typeselector"><span class="screen-reader-text">Search plugins by: </span></label>
<select id="typeselector" name="type">
  <option selected="selected" value="term">Keyword</option>
  <option value="author">Author</option>
  <option value="tag">Tag</option>
</select>
<label for="search-text"><span class="screen-reader-text">Enter word or phrase:</span>
  <input type="search" value="form" name="s" ffpdm="gff6ot1hm6l5m5fe7xst3o">
</label>
dropdown
‘Search plugins’ button is hidden. This means that from sighted keyboard users point of view the focus disappears from view when the focus is moved away from the ‘search plugins’ input field. Focusable elements shouldn’t be hidden from view, as this can be confusing to sighted people who use keyboard.
For every listed plugin there’s an image link without text or an ‘alt’ attribute. This means that the purpose of those links will be unknown to screen reader users. NVDA read out for each of them ‘plugin-install tab=plugin-info”. I don’t think it’s necessary to wrap a link around those images, as there is an adjacent text link to the same page right next to it. I personally would remove the <a> element and add an empty ‘alt’ attribute to each of those images.
image link without text or an 'alt' attribute
When the text of the ‘Install Now’ button changes to ‘Installed’, the colour contast ratio between the text and the background is not sufficient – only 2.07:1, which is below the required minimum (4.5:1).
colour contrast installed plugin button
‘Install Now’ button and screen readers:
  • This button should be marked-up using <button> element, rather than <a>, as it is not a link (it doesn’t take the user to a different location). From a screen reader user point of view, selecting that link doesn’t do anything – the user stays on the same page.
  • for me, the value of ‘aria-label’ attribute on that element was not read out by NVDA. Perhaps ‘aria-describedby’ would work better? It could point at the preceding heading, which contains the name of the plugin
  • I was also wondering if perhaps screen reader users should be given some feedback as to what is happening on the page after the ‘Install Now’ button has been pressed. I’d try adding ‘aria-live=”polite”‘ on that button (or a <span> inside that button, containing the button text). In that way whenever the text of that button changes (‘Install Now’ -> ‘Installing…’ -> ‘Installed!’), it should be automatically announced to screen reader users. However, please bear in mind that I haven’t tested it, so I can’t guarantee it will work as expected. I would try it though.

Greg Wocher

JAWS and NVDA on my Windows 8.1
I was unable to install any plugin. I would click on the link that said install this
plugin and nothing happened.

Petra de Jong

Screenreader Supernova
No problems with adding a plugin. I knew which plugin I installed and that the install was successful.

Jeff de Wit

Adding plugins seems to function fine. There’s a lot of tabbing involved in selecting a plugin though. No different from how it is with 4.1, it’s 5 links per plugin blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. after all. Though 3 of them (image, title, more details) open the same modal.

Updating seems to work fine as well with just a keyboard. I was having some minor issues with updating Jetpack, but it’s probably because Jetpack auto-updates. 🙂
NVDA doesn’t actually tell me that the update or installation of the plugin is complete though. It also seems to announce table rows and stuff as I go through the installed plugin page (I think that’s a known issue).

Comment by Rian

Regarding the missing visible submit button in search plugins: I can see and I often find myself installing a featured plugin instead of doing a search. With out thinking, I expect a submit button, and therefor I press the nearest submit button in sight. Maybe for usability (don’t make me think?) a visible submit button would be nice with the search plugin form.

Summary a11yAccessibility 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) test plugin pages and Shiny Updates

Overall: And this doesn’t only count for the plugin pages: The heading structure is not semantic, a missing H1 and there are skipped levels in the admin pages.

Search plugin:

  • Screen reader users get no feedback on what catagory they are seaching in
  • ‘Search plugins’ button is visually hidden, not usable
  • The search plugin form has no label (added a comment: #26600)
  • Select menu on the search form with search results : missing a label

Adding a plugin:

  • Screen reader users get no feedback if a plugin is installed or not
  • When an error happens in /wp-admin/update.php?action=install-plugin the focus is not moved to the error element (related: #31368)
  • When the error is written in other languages, it does not seems to be using the lang attribute to specify the language of the text.
  • When the text of the ‘Install Now’ button changes to ‘Installed’, the colour contast ratio between the text and the background is not sufficient.

Updating a plugin:

  • Screen reader users get no feedback if a plugin is updated or not

Comment by Andrea

I would like to add one thing no one reported, may I? 🙂 The Install Now “button” (should be a real button) has an aria-label attribute that should be updated together with the button text updates, so when the button text changes to “Installed!” the aria-label should be updated too, currently it’s not:

<a ... aria-label="Install Getty Images 2.3.0 now">Install Now</a>
<a ... aria-label="Install Getty Images 2.3.0 now">Installed!</a> <-- conflicting infos

Just after a page refresh the button is correctly changed to a span with correct information but it uses a title attribute that should be avoided, see “Title attributes galore” https://core.trac.wordpress.org/ticket/24766

<span ... title="This plugin is already installed and is up to date ">Installed</span>

Additional notes

  • keyboard focus may be lost, for example on the Installed Plugins screen, when you activate the “update now” link, the whole HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. of that section is updated via JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. and the link removed, so keyboard users will be lost.
  • Errors handling (failed update, failed install) and feedback could be improved. Additionally, in some cases like a failed update, you have no UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. controls available to take any further action, your only option is to refresh the page.

#accessibility-usertest