I looked at all of the various integration points for IDEs, or Content Management systems, but there would still be developers left out. Those developers like myself who are fans of VI or other superior editors.
So instead of trying to add another tool to the developer's software I went instead to the browser where most developers will test their pages. I say most because I have heard recently of sites that go live with minimal testing. How many times have we heard "It worked on my box".
Anyway back to the topic. The main goal of this integration is to have a simple button added to the toolbar that when clicked the page that the user is currently on (the URL) will be sent to Worldspace™ for analysis.
The first thing I did was check out the Google Toolbar API™: http://www.google.com/tools/toolbar/buttons/apis/howto_guide.html to find out what I needed to know to add our service as a button.
What I found out was that the Google™ button can submit the URL via a GET Request to the server. This request can contain the URL of the page that the developer is on.
So off to talk to our developers... Yes it can be done, but by default the service does not allow for that... so 1,000 days later after my feature request gets done. Kidding the feature was added very quickly and I'm back in business.
Worldspace Online™ now accepts a GET request for processing.
Next to create a test xml file, and link to it from a test page. You can add the buttons manually but easier to simply link to an xml file.
The link to the below xml file looked something like this:
http://toolbar.google.com/buttons/add?url=http://localhost/wsonline/worldspacetest.xml
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<title>Worldspace 508</title>
<site>http://worldspace.deque.com/wsservice/eval/analyze.htm?c=SECTION_508_ANAL&p=gb&uri={url}</site>
</button>
</custombuttons>
When I clicked on the link I noticed a few issues. There was no description, and the icon was not one I wanted.
So then I tested it. I found out by reading a little further in the documentation... who reads that anyway but I skimmed it, and the URL that is passed by the toolbar is escaped, and I had not prepared for that.
So I resolved the escaped url with
{url.noescape} and resolved the description by adding a description field.<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<title>Worldspace 508</title>
<description>Worldspace 508 Accessibility Analysis</description>
<site>http://worldspace.deque.com/wsservice/eval/analyze.htm?c=SECTION_508_ANAL&p=gb&uri={url.noescape}</site>
</button>
</custombuttons>
So now let me test it. Works like a charm... well one issue that as yet I have not solved. The page redirects to Worldspace Online™ and does not open in a new window. Doing a little more reading you need to either do a ctrl + left click or click with the middle mouse button. As my middle mouse button does not exist (track ball) I'll be doing a ctrl + left click on the button. If anyone knows how to change this with a Google™ button please let me know.
Now the next problem the icons... first I'm not a graphics person and second I'm not a graphics person... Oh I have Gimp installed and use it a lot, but I'm not a graphics person. A friend who is sent me some for Worldspace™ and they are very nice . So I'm going to use those.
You will need to base 64 encode the images. On the toolbar site there is a link to this one http://www.motobit.com/util/base64-decoder-encoder.asp. Which did a fine job for me.
The sample file with the 508 Icon Added:
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<title>Worldspace 508</title>
<description>Worldspace 508 Accessibility Analysis</description>
<site>http://worldspace.deque.com/wsservice/eval/analyze.htm?c=SECTION_508_ANAL&p=gb&uri={url.noescape}</site>
<icon mode="base64" type="image/x-icon">iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAAZiS0dE
AP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9gJCRIxDeXvFQgA
AAAjdEVYdENvbW1lbnQAQ29weXJpZ2h0IDIwMDggS2FyaW0gU2hhcmlmY8kyhwAA
AcdJREFUOMuVkz1oVEEUhb/7dnNjYi4hbho1xYrVFgGLJSSxSVArrVIIomIwCopYWm
hholYBKy0DFoJYWUQQCVikUQtRLIRBxT9W3GCISl4mQsJ7z2Z2WVezsBdOMRfmz
My53whtljkzoABMA5MR7VeucZFv8/R+YAIYAcbaNgA2gVPAKEBcigUAr5I1KvSGv
MrXoLI5i+YP5G8v9UnyrSDppcudlbptbVNjeZUnXuVk0II5O/S9V9LRB93JsVtdc2sqM
UCrEMvAw6AhYLCyK5I0Itr/IlkQ+FILJvMq2ZpK7FUqXmUi3CD1KuJVnnqVxJzNH77T
tb7SI6lXWfcq43UDc/ap/3XPtbmjHdNeZTkY/PIqvfseb59a6pPEnK1+2B35m2f0uFcpe5
V3jU8obnRw9dHB/IUkImfOBHgJHDl7b2P41WAuAqzwM8udv7v5FkiBnX+F6FWy9wN
Rdnp220dzdsKrDK92SrW6Q+Lx+90/zNn1N3ujK15lOegcgDSBUgnOFWAxtMeA58BUXI
pNyfdPIWLQBUoApNBRcAFiP6pZhKfASvAQENvJi7FN7aatWzBfA2sz3Ep3tOK7f+CVG
ccFs1Zy//yB1typqoPmKC5AAAAAElFTkSuQmCC
</icon>
</button>
</custombuttons>
So when I tested the new xml file you will notice the Title, Description, and new Icon.
Best of all when I tested the site the button worked like a charm. So feel free to download the Google Toolbar™ buttons for Section 508, and the Web Content Accessibility Guidelines 1.0 Level A, AA, and AAA. The reason for four buttons is simple... Some users will want to test with Section 508, and some the Web Content Accessibility Guidelines. You can add a button for the ones that you need. Don't forget to press the ctrl + left click until I solve that issue.
- Worldspace 508 Toolbar Button Link
- Worldspace Wcag Level 1 Toolbar Button Link
- Worldspace Wcag Level 1 and 2 Toolbar Button Link
- Worldspace Wcag Level 1, 2 and 3 Toolbar Button Link
If you need to submit a file or source code for analysis please visit: http://worldspace.deque.com/
-D
david.musser@deque.com
No comments:
Post a Comment