Accessibility Usertest Create and edit links inline

In WordPress version 4.5 there will be a new way of adding links in the content: create and edit links inline. The URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org input and the search field are now one and the same.
This is similar to what Google Docs does. Search results are shown as an autocomplete dropdown.
Related ticket: #33301.
The test are done from Februari 18 until Februari 24 2016.

Conclusions are at the bottom of this post.

To test this for 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) we set up a WordPress 4.5-alpha nightly install.
And asked our testers:

• Can you access the little window with the input field for the link
• Can you understand how to add a link using this inline window
• Can you understand how to search for a page using a search word using this inline window
• Is this usable with your assistive technologyAssistive technology Assistive technology is an umbrella term that includes assistive, adaptive, and rehabilitative devices for people with disabilities and also includes the process used in selecting, locating, and using them. Assistive technology promotes greater independence by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks. https://en.wikipedia.org/wiki/Assistive_technology?
• If you use a screen reader: can you hear the search result if you enter a search word instead of an URL
• Are you missing functionality to make this work for you
• Which browser and operating system did you use (for example Safari on Mac)
• Which assistive technology did you use for this test

Testers who joined: Jeff de Wit, Geoff Collis, Tobias Clemens Hacker, Reagan Lynch, Ruth Niesenbaum, Gabriela Nino, Michele DeYoung, Sirisha Gubba, Wim Moons and Marco Zehe.

Test results for keyboard

Wim Moons: Windows7 & FireFox with loupes.
If you type a word, a list appears. If you walk through the list with the arrow keys the text in the search field disappears. I found this confusing.

Geoff Collis: JAWS 14.5 IE 11
A bit confusing at first but I managed to do it. I wasn’t sure what happened, all I heard was “apply” after doing it so moved around and found out I could type the url, needs some work to let me know where I was after the keystroke command.

Of note:, when I first typed in the url and used tab to go to the apply button it didn’t work, took me right out of the edit box, when I came back I was able to get to it by tabbing this time.

Jeff de Wit: In Firefox, with just a keyboard:
You specifically have to tab to the submit button to add the link without issues. If you press Enter on the input field, it will also add a linebreak where the cursor is when you opened the link dialog (in addition to adding the link). Here’s a video of that:

What I’m doing in the video:

• Select some text
• Hit Ctrl + K to open the link dialog
• Type in the URL for Google
• Press Enter
• Press Ctrl + Z to “revert” the random line break that appears

Also not super clear how to remove the link this way, since you can’t actually get to the pencil / remove icons. It’s not impossible to remove links though, but not sure how “obvious” it is that you can also remove the URL text and hit apply to remove the link.

Michele DeYoung: Firefox 44.0.2 and Windows 10.
Using the spacebar instead of Enter when creating a link using the keyboard will make it so a line break does not occur after the text link.

Test results for screen reader

Jeff de Wit: In Firefox, with NVDA enabled:
It seems to announce really well. It even makes it clear when you’re moving your cursor to a link. Not sure if it’s a good idea here to also announce what URL it’s linking to (Not what links usually do, and it may add too much noise, but it’s editing content and it may help with spotting broken/mistyped links).

One thing I did notice though, is when I hit the “Advanced” button NVDA only announced “alert” for me. It doesn’t say anything about the text field I have focus on (even though it’s supposed to, and I do see it in the NVDA speech log, so it may be related to my NVDA settings).

Gabriela Nino: Mac + Safari + VoiceOver

• After using cmd + k to open the window: The window opens but Voice Over does not announce it. So is not clear for a non sighted user what exactly is happening.
  Right after the window is opened, the focus is supposed to be on the URL input text. But this behavior is not consistent, the focus is sometimes on the input text and sometimes not. When is not on the input text, I managed to give it focus using the tab key. But a non sighted user might not be able to figure this out.
• Voice Over is sometimes announcing the input text placeholder, but mostly of the times it does not.
• On the advanced window, when searching for existing content, Voice Over does not announce the results found.
• It was impossible to access to pencil / remove icons, tried using cmd+k but instead of allowing me to access the pencil and remove icons, it opens the little window with the input field for the link. Without mouse or when using Voice Over, I’m not able to select those icons.

Michele DeYoung: Firefox 44.0.2 and Windows 10.

I can understand how to add a link using this inline window, but only if the focus is in the url input field. After adding multiple links, when other text is selected to create a link, the inline window focus was on the last element in the window that was used, for example – the Advanced button. This will be confusing for screen reader users when the window launches and it voices “Advanced” or “Apply.”

Note: When the inline window opens and the last focus was on the Advanced button or Apply button, and Advanced is selected, the pop-up for the Advanced selection will open, however, the keyboard focus remains in the window behind it. Keyboard focus is correctly in the pop-up when the starting focus point in the inline window is in the input field.
The pop-up is not announced as a dialog, and a heading should be announced with it.

Advanced Pop-up: When the search is entered, if I tabbed I would go to the results container, however, NVDA would just voice that number of items in the list. It would be helpful to know that it is the results list. When arrowing through the list each item was voiced.

Another way: when using the down arrow to move from the search entry, I can move into the search results list (still not clear that it is the results list), but when I arrow to each item in the list I just hear the search entry repeated for each one.

Tobias Clemens Hacker: Chrome Vox/ Chrome on Windows 7
The buttons have no distinguished voice output. I don’t know which one is “Apply” and which one is “Advanced”. For some reason the aria-label in the containing div is not being output.
I miss distinguished voice output for the buttons.

Reagan Lynch: Windows 7 running IE 11 with JAWS 17.
If I paste a link into the text field the raw link appears in the text of the post, but the word I highlighted is a link with the link pointing to <a href=”http://example.com”>highlited text</a>
I was unable to insert a link using the new method. I was able to get into the advanced dialog like we currently have, but only after pressing ctrl+k and then arrowing right and exiting forms mode, and then my text highlight was gone.

Sirisha Gubba: IE and FireFox with NVDA

• I can access the window with keyboard in FF but not in IE. AT with short cut keys provided
• I can’t understand with NVDA as it announces “Toolbar” and focus is taken to the apply button.
• I can see the placeholder in FF. With NVDA it is not announcing as soon as the small window gets opened but if user uses back arrow it reads the instruction.

Ruth Niesenbaum: Chrome and NVDA with Windows 10.
It was not clear how to enter data: I started entering a word and it did not tell me that it found options, when I went down to the options it did not read them loud so it does not say the When I press the down arrow and enter the list of urls it says : unknown 2 of 7 and it does not read the name of the post

Conclusions

Some issues are already fixed in the current version, using these test results.

 

The issues that remain are according to @afercia (Andrea Fercia)

Reagan Lynch Using Windows 7 running IE 11 with JAWS 17:

If I paste a link into the text field the raw link appears in the text of the post, but the word I highlighted is a link with the linnk pointing to
highlited text

Andrea: after last changes I’m not even able to insert a link with IE 11

Jeff de Wit:

If you press Enter on the input field, it will also add a linebreak

Andrea: maybe fixed, but I’m pretty sure it still happens when *pasting* a link in the input field and then pressing Enter

Also not super clear how to remove the link

Andrea: totally agree

Michele DeYoung: NVDA Firefox 44.0.2 and Windows 10.

Using the spacebar instead of Enter when creating a link using the keyboard will make it so a line break

Andrea: it’s a legitimate expectation since it’s announced as “Button” it should work also with spacebar

Jeff de Wit: In Firefox, with NVDA enabled:

when I hit the “Advanced” button… (it’s about the Advanced modal dialog)

Andrea: yeah, the link modal dialog still needs some 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) treatment. We should fix that but it’s a bit unrelated

Gabriela Nino: Mac + Safari + VoiceOver

It was impossible to access to pencil / remove icons, tried using cmd+k but instead of allowing me to access the pencil and remove icons, it opens the little window with the input field for the link. Without mouse or when using Voice Over, I’m not able to select those icons.

Andrea: we should make more clear the Alt+F8 shortcut, maybe it’s a bit confusing now

Gabriela Nino: Mac + Safari + VoiceOver

After using cmd + k to open the window: The window opens but Voice Over does not announce it. So is not clear for a non sighted user what exactly is happening.
Right after the window is opened, the focus is supposed to be on the URL input text. But this behavior is not consistent, the focus is sometimes on the input text and sometimes not. When is not on the input text, I managed to give it focus using the tab key. But a non sighted user might not be able to figure this out.
Voice Over is sometimes announcing the input text placeholder, but mostly of the times it does not.

Michele DeYoung: NVDA Firefox 44.0.2 and Windows 10.

I can understand how to add a link using this inline window, but only if the focus is in the url input field. After adding multiple links, when other text is selected to create a link, the inline window focus was on the last element in the window that was used, for example – the Advanced button. This will be confusing for screen reader users when the window launches and it voices “Advanced” or “Apply.”

Andrea: totally agree, already in my list

When using the down arrow to move from the search entry, I can move into the search results list (still not clear that it is the results list), but when I arrow to each item in the list I just hear the search entry repeated for each one.

Andrea: works for me using Firefox + NVDA

Andrea: additionally:

• after 36703 in IE 11 can’t insert a link
• we’d recommend to add an audible confirmation message when a link is successfully inserted from the inline toolbar; also, when a link is successfully selected in the advanced modal dialog; of course messages need to be different since in the modal the link is inserted only after users press the “Update” button

And further: For next tests we will ask the test team not to test with ChromeVox anymore. This screen reader is too limited in functionality. And if a tester uses NVDA: the preferred browser to use with this screen reader is FireFox.

Update March 2, 2016: additional tests

Marco Zehe: Safari and Chrome on OS X with VoiceOver. That is, Chrome + VoiceOver, not ChromeVox.

I can confirm the brokenness of the search results when arrowing up and down. I do get the focus into the combobox consistently, though. And here’s the thing: In Chrome, while that has a nasty bug with no text being read out when typing or arrowing, the search result widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. works. So whatever is going wrong has something to do specifically with Safari’s interpretation of WAI-ARIA.

#a11y-audit, #accessibility-usertest, #testing