Title: Extra issues found by the wpa11y test team
Author: Rian Rietveld
Published: March 15, 2015

---

 [  ](https://profiles.wordpress.org/rianrietveld/) [Rian Rietveld](https://profiles.wordpress.org/rianrietveld/)
11:49 am _on_ March 15, 2015      

# Extra issues found by the wpa11y test team

During the testing our [#wpa11y](https://make.wordpress.org/accessibility/tag/wpa11y/)
test team finds extra issues, not covered by the issue they are testing, but very
useful to report.

So here is a summary of issues found:

### Quicktags-toolbar with keyboard only:

Reported by [@gab-nino](https://profiles.wordpress.org/gab-nino/)

#### Buttons icons or labels

The present menu use 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.
language for the button labels for example: to add an unordered list, the button
label is represented by an “ul”. The issue here is that ul is only going to be understood
by the users that are familiar with HTML language. Someone that don’t know about
HTML won’t be able to know what ul, ol, li does. Asking them to write a comment 
in HTML and to order the attributes correctly (like making sure that a li inside
an ul or ol) is going to be difficult for people without disabilities (and more 
difficult for blind people). As a proposition, what about using icons that that 
are internationally understood? See the menu image at the bottom of this post.

#### Open < > versus close < / >

If the user want to add a list item, first thing to do is to select the li button
and then go back to the text area, then add some text and after come back to the
list item button to click on it again to close the item (/li).

The label button change from li to /li and the actions performed in each case are
different (open and close), I noticed that nor NVDA or Safari will announce the 
user the current button action to execute. If the label is /li, the user will listen
to “list item” instead of “close list item” (or some other text that explain better
the action). Please refer to the suggestion at the bottom of the message.

#### Adding and erasing

If the user add a list item and right after decides to erase it, the function does
not understand that the initial list item is not there anymore and the state of 
the action reminds on /li (close a list item). The user need to click on the button
to deactivate the function. This is evident for people without disabilities, but
screen reader will keep telling the user that the button is a list item (see the
previous comment and suggestion below).

#### Without using the mouse

It is impossible to select text on the area and come back to the menu to apply a
bold or italic option only using the keyboard. I could not move to the menu without
losing the focus on the selected text.

#### Suggestion

I know finding a solution for the previous comments is not going to be easy, but
I was thinking that something that might help is creating simultaneously the open
and close tags for the selected option. So if the user clicks on li button, both
< li > and < /li > tags will appear on the text area.

Remark Rian: worth a ticket to sort out what good solutions might be for this. Related
ticket: [#31522](https://core.trac.wordpress.org/ticket/31522).

### Skip link navigation and tab order

Reported by Tina Tedesco.

When I enter on the link skip to main content it always brings me to the Help link.
Not sure that is a big deal but I find it strange.

Remark Rian: worth a discussion in SlackSlack Slack is a Collaborative Group Chat
Platform [https://slack.com/](https://slack.com/). The WordPress community has its
own Slack Channel at [https://make.wordpress.org/chat/](https://make.wordpress.org/chat/).

### Heading structure: The H1 is missing

Reported by several testers.

The H1 element is missing from the Dashboard screens. We already had discussions
about this in Slack. If and where it should be added en what the content should 
be is point of discussion. The wpbody-content title is now an H2, that should be
the H1, but changing that would break the heading structure of the rest of the admin.
In the 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)
team we differ in opinion on how to solve this.

Remark Rian: open a ticket and discuss there further on how to change this and what
the implications are for the Admin and for plugins.

### The Dashboard menu tab order

Reported by Han Sinke.

Is it possible to optimize the Dashboard menu (or is there a screen reader option)
to first make a choice for a main menu item, and after that enter a sub menu item?
Now I want to go quickly to Plugins, but have to tab trough Appearance too (maybe
distinguish arrow down and tab), or add extra hidden links?

Remark Rian:  worth a discussion in Slack, is there an easy fix for this or does
this mean a complete rewrite of the menu?

### Loss of focus for screen readers after an action

Reported by several testers.

On several places in the admin the screen reader users looses focus after an action.

When updating a 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/](https://wordpress.org/plugins/)
or can be cost-based plugin from a third-party. the focus is not on the confirmation
message, so the user is not aware of the result of the action. She needs to “read”
the page from the beginning to listen to the announce.

Remark Rian: let the experienced screen reader testers explore the Admin for loss
of focus issues, so we can have an overview on where this occures and open a ticket
about that later.

### Summary:

Actions to take on the issues above:

 * Send an e-mail to the experienced 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) testers about the loss of focus 
   for screen readers after an action ([@rianrietveld](https://profiles.wordpress.org/rianrietveld/))
 * Discuss in Slack about where should the skip to content link go to and the Dashboard
   menu tab order (MWA team)
 * New ticket on: Quicktags-toolbar with keyboard only ([@cheffheid](https://profiles.wordpress.org/cheffheid/))
 * New ticket on: Missing H1 element in Dashboard screens ([@cheffheid](https://profiles.wordpress.org/cheffheid/))

### Share this:

 * [  Threads ](https://make.wordpress.org/accessibility/2015/03/15/extra-issues-found-by-the-wpa11y-test-team/?share=threads)
 * [  Mastodon ](https://make.wordpress.org/accessibility/2015/03/15/extra-issues-found-by-the-wpa11y-test-team/?share=mastodon)
 * [  Bluesky ](https://make.wordpress.org/accessibility/2015/03/15/extra-issues-found-by-the-wpa11y-test-team/?share=bluesky)
 * [  LinkedIn ](https://make.wordpress.org/accessibility/2015/03/15/extra-issues-found-by-the-wpa11y-test-team/?share=linkedin)
 * [  X ](https://make.wordpress.org/accessibility/2015/03/15/extra-issues-found-by-the-wpa11y-test-team/?share=x)
 * [  Facebook ](https://make.wordpress.org/accessibility/2015/03/15/extra-issues-found-by-the-wpa11y-test-team/?share=facebook)

 1. Pingback: [WordPress › This Week in 4.2: March 16 – 22 « Make WordPress Core](https://make.wordpress.org/core/2015/03/16/this-week-in-4-2-march-16-22/)
 2. ![](https://secure.gravatar.com/avatar/30656a03ae903df0e8d3802b9f73d2cb0f7269f2cc9a81e21f175ca1d19ef164?
    s=32&d=mm&r=g)
 3.  [Jeff de Wit](https://profiles.wordpress.org/cheffheid/)  10:35 am _on_ March 
    16, 2015
 4. Created a ticket for the missing h1, feel free to add any additional info or thoughts:
    [#31650](https://core.trac.wordpress.org/ticket/31650)
 5. Will go through the quicktags feedback today.

Comments are closed.

# Post navigation

[← Test Chat Summary, March 9](https://make.wordpress.org/accessibility/2015/03/10/test-chat-summary-march-9/)

[Test Chat Summary, March 16, 2015 →](https://make.wordpress.org/accessibility/2015/03/17/test-chat-summary-march-16-2015/)