A Plugin for a Friend
Screenshot showing initial DFW
I have a friend with multiple disabilities who is learning to work with WordPress. Two of his disabilities are poor vision and challenges with his motor skills. He relies on two things to navigate the interface: Visual Cues, and Dragon Naturally Speaking. The awesome people at WordPress have been working on a new user interface for the TinyMCE editor, and these changes have in part greatly improved the working situation for him by removing so much visual cruft from the screen.
The problem is that once he is in that screen, there are no visual cues to lead him to his next step. The expectation is that one would be able to discover next steps by tabbing or moving his mouse, but this is not something to be taken lightly. Using a mouse is very problematic, and even tabbing can be an intimidating process.
Screenshot showing DFW with button
A Hopeful Solution
I would like to try and make a plugin for my friend so that it is easier for him to navigate within the TinyMCE editor. The plugin has to be able to put a functional "Publish" button in a location that is obvious and easy for him to get to once he is in the TinyMCE editor.
To the left is a screenshot showing the first attempt. It has plenty of shortcomings, such as only working when the DFW button is clicked, and it is a html division styled to look like a button rather than a real button, which of course is an accessibility fail, but one thing at a time. I am going after VISUAL cues here, to help him navigate.
Validators, Tools, and Reference Links:
Validators:W3C Markup Validation Service
Documentation for tenon.io
Dragon Naturally Speaking
Fangs Screen Reader Emulator
Chrome Extensions:Chrome Extension for Tenon
Chrome Extension No Coffee Vision Simulator
Chrome Extension Responsive Websites
WebAIMWebAim Article on Forms
W3CTutorials on Accessibility
CAPTCHACAPTHA Google Accessibility Efforts
Tab OrderEvent handlers and screen readers
WAI article on creating logical tab order
HTML5 Sequential focus navigation
Tab Index and ARIA
Focusable Order with Tab Index (Makes focusable with mouse, not tabbable)
Roving Tab Index
Web WorkerMDN article
HTML5 Rocks article
The Blob Scratch Site
Need to check the headers! Where is the REDIRECT coming from?
Layout and StylesheetsGSS Scratch Site
Apple Auto Layout Guide
HTML CMS.gov layout
Scratch scratch scratch site
Old bootstrap v2
Authentication ResourcesWordPress OAuth2
Proxy IssuesUsing WordPress Behind a Proxy
WordPress and Drupal Test Sites
The Moving Target...
I want to use this for a plugin for Robert
When I can get it to work for me....which I have not yet...
The second set of test code puts a diagonal across the entire background, and it is not contained with the division. In terms of a fade, I got it wrong. That said, like the diagonal background, and will keep it.
Loved the math solution to this, but it put a square right in the middle of the page (see the image to the right). Still, the solution was so elegant, I want to save it forever.
Note: html overflow hidden had to be removed from css file to enable scrollbar