Extra issues found by the wpa11y test team

During the testing our #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

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.

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/. The WordPress community has its own Slack Channel at 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/ 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)
  • 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)
  • New ticket on: Missing H1 element in Dashboard screens (@cheffheid)