Accessibility 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 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.
Press This version 0.0.4.1 and 0.0.4.3
Also tested the Copy Press This code patch 3 from ticket #28873
- 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
Adding a bookmark with keyboard or a screen reader
Results from testers:
- Tab to “Copy Press This Code” press enter
- Copy the code
- Press Alt+B and go to “Bookmark this page” Or Press Ctrl+D and Bookmark it
- Now Press Alt+B and go to “Recently Bookmarked” menu item
- Tab and use Arrow key to locate the bookmarked item
- Press the Contextual key when focus is on the bookmarked item
- Select the property link
- Now we can see Editable popup dialog
- Change the Name to Press This
- Paste the code previously selected code in the Location field
- 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 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.-wise to combine it with the existing “Press This” button.
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.
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 A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org 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:
- 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:
- 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.
- Check for the length of the url: does it fit in a bookmark in different OS and browsers.
- Nor a11y 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) 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.