Press This: Accessibility user test result

Accessibility test results of the new Press This bookmarklet.

This is not an extended code review like we did on the Theme Switcher. The code itself is still in early development as we where told. We tested how to add the bookmark and the first impression of the press This functionality itself.

Tested:
Press This version 0.0.4.1 and 0.0.4.3
Also tested the Copy Press This code patch 3 from ticket #28873

Testers:

  • Michelle deYoung (NVDA on FireFox 35 Windows 8.1)
  • Malgorzata Mlynarczyk (NVDA on FireFox 35 Windows 8.1)
  • Chandra Shekar (Keyboard Windows Firefox)
  • Geof Collis (IE 11 and latest Firefox, JAWS 14 and NVDA 2011)
  • Greg Wocher (JAWS 16 on FireFox Windows 8.1)
  • Jeff de Wit (Keyboard on Chrome Linux)
  • Hyongsop Kim

The report is divided into:

  • Adding a bookmark with keyboard or a screen reader
  • Using the Press This functionality
  • Conclusion

Adding a bookmark with keyboard or a screen reader

Results from testers:

Windows Firefox:

  1. Tab to “Copy Press This Code” press enter
  2. Copy the code
  3. Press Alt+B and go to “Bookmark this page” Or Press Ctrl+D and Bookmark it
  4. Now Press Alt+B and go to “Recently Bookmarked” menu item
  5. Tab and use Arrow key to locate the bookmarked item
  6. Press the Contextual key when focus is on the bookmarked item
  7. Select the property link
  8. Now we can see Editable popup dialog
  9. Change the Name to Press This
  10. Paste the code previously selected code in the Location field
  11. Tab to save button and press enter

Chrome (and probably same for Safari) on Mac:

Use the Bookmark Manager (Ctrl+Shift+O or ⌘+Shift+O). From there, you need to tab to “Organize”, hit space, and select “Add Page”. The new “Copy Press This Code” button (From patch works well for me. It might be cleaner UI-wise to combine it with the existing “Press This” button.

IE 11

Unable to add the bookmarklet via keyboard. When added by right clicking on the icon, it was added to the Favorites list. When accessing the bookmarklet, it brought up a blank page.

Empty page in IE11

 

And Greg’s quest on how to add the button with JAWS:

First I am unable to find a way in either FireFox, Internet Explorer or Google Chrome to manually create a book mark. The only thing I have been able to do is to take an existing bookmark and alter its properties by using either shift + F10 or by pressing the applications key to bring up the right click context menu when in the favorites menu in IE. I have not been able to find a way to do this in FireFox or Chrome as of yet.

I need to test on my Windows 7 laptop. Once there I try and paste in the Java script code I retrieved by pressing the copy press this code button. However I am unable to paste all the code into the URL field because it is to long.

After doing some research I was able to find out how to add manual bookmarks into both FireFox and IE. Neither of which is very intuitive. In IE you need to create a text file with the url in it and save it to your favorites folder with a .url extension. In FireFox you first need to open up show all bookmarks. Next you need to tab around till you hopefully land on the navigation pane, which is not labeled as such to the screen reader. It is basically the list with all your folders in it. Next you need to either press the applications key, folders in it. Next you need to either press the applications key, perform a right click or use shift + F10 to bring up a context menu.

Once this menu is up you will see an option to create a new bookmark. Once I was able to create the bookmark in FireFox it seemed to work.

No label on the textarea field

Consider marking-up the instruction as a label for that field; in that way the instruction will be automatically read out to the users when they reach the field. Alternatively, ‘aria-labelledby’ could be used on the textarea field, associating that field with the paragraph which contains the instruction.

When a screen reader user selects the ‘Copy press this code’ button, the keyboard focus is moved immediately into the textarea field. That means that the screen reader user skip the instruction displayed above the field, and may not be even aware of it. Although in theory the users could switch off the application mode, go back to the document mode and then access the content above the field, I don’t think it’s the best solution. Also, the textarea field has no label.

Some users ended up bookmarking the Press This page itself.

The text “or right click it and add it to your favorites for a posting shortcut” is probably not enough.

Using the Press This functionality

Only two testers ended up testing the Press This functionality itself, both developers. Their remarks:

Using the actual Press This bookmarklet is a bit confusing compared to how it was before. I’m finding it hard to tell where my focus is at when I’m tabbing through the popup window.

Some specific issues using just the keyboard:

  • Selecting a new image after activating this thing:
    Press this button
  • The editor seems to expand below the footer bar with the Save Draft and Publish buttons. I need to press enter a few times to be able to see what I’m doing at the end of a post if it runs long:
    Press this below the fold

Other issues:

  • When the user tabs to the area to add the title of the post or to enter text, they have to highlight and delete the text or backspace to remove it so it is not added to the text they are typing.
  • When users add a url to be scanned, they are unable to access the editing items, or the textarea box. Not sure if this is intentional or not.
  • The icon, link and bottom of the page are voiced to the user as:Browse mode: (camera) “link add media” | “application clickable” (for rich text area) | “button save as draft button publish” Note: In the browse mode (virtual buffer mode), the link and button are read as one item.Forms mode: (camera) “add media link add media” | “application rich text area press alt plus h for help” | “button save as draft” | “button publish”Suggested: (camera) “add media link add media” | “rich text area, enter your text here, or press alt plus h for help” | “button save as draft” | “button publish”
  • When the user presses [Alt] + [H] for Help from the rich text editor in the sidebar, the help content is not able to be accessed via (browse mode) arrowing or (forms mode) tabbing.
  • Another tester: Two of the buttons are not labeled properly. One just says P and the other just says A. Also the text edit field is not labeled very well. All it says is Rich Text area. There is no indication for a screen reader user that it is an actual edit field.

Conclusion

  1. Adding a bookmark with a screen reader or keyboard only is hard to do, and different for every browser. Add more help and explanation.  Every browser does this differently and besides that with a screen reader is almost impossible to tell what you are doing. Some testers bookmarked the tools.php itself.
  2. Check for the length of the url: does it fit in a bookmark in different OS and browsers.
  3. Nor a11y related: These are results for experienced users and developers,  a usability test would also be useful for sighted users. A decent manual would also help.

#3-2, #accessibility-usertest