Opera Customization for Free Accessibility Analysis

First I would like to say that I'm a fan of Opera... now not the kind of Opera that you would have to listen to. No I would not go that far. Where I live we are not big fans of that type of Opera. Opera of that sort to us would be Lynyrd Skynyrd but back to the Opera Browser™ and Deque's free accessibility analysis (http://worldspace.deque.com).

In my last post I covered creation of Google™ Button for the toolbar. In this I will cover modifying a menu for Opera to give you a nice right click option to start the analysis.

The way I want this integration to work is that when a user in on a web page they can right click and a new menu choice for the free analysis will be added.

So starting off with a fresh install of Opera™ 9.52 on Mandrivia™ Linux.

Opera™ 9.52 Gotta love the Speed Dial

Next and to start this off I should say that I can not guarantee that this does not destroy your computer, your house, your car or anything else. This is what worked for me, so someone if these modifications prove the existence of alien life please let me know. So far they simply work for me.

So next select tools > preferences > toolbars.

Preferences Toolbars Menu

Select the Duplicate option under Menu setup, and then select rename on the newly created one. Rename to compliance.

Select OK.

Now with your favorite editor open standard_menu_1.ini. The file you need to find is standard_menu_1.ini on my linux box this is located in /home/username/.opera/menu. On my Windows XP box this is in C:Documents and SettingsusernameApplication DataOperaOperaprofilemenu.

You will need to add the following lines:


Item, "Validate_508" = Go to Page, "javascript:window.open('http://worldspace.deque.com/wsservice/eval/analyze.htm?c=SECTION_508_ANAL&p=op&uri='+ escape('%u'))"
Item, "Validate_WCAG 1" = Go to Page, "javascript:window.open('http://worldspace.deque.com/wsservice/eval/analyze.htm?c=PRIORITY_1&p=op&uri='+ escape('%u'))"
Item, "Validate_WCAG 1 and 2" = Go to Page, "javascript:window.open('http://worldspace.deque.com/wsservice/eval/analyze.htm?c=PRIORITY_12&p=op&uri='+ escape('%u'))"
Item, "Validate_WCAG 1, 2, and 3 " = Go to Page, "javascript:window.open('http://worldspace.deque.com/wsservice/eval/analyze.htm?c=PRIORITY_123&p=op&uri='+ escape('%u'))"

Each Item is on one line, and I added them just before this line: Item, M_DOCUMENT_POPUP_MENU_VALIDATE=Validate frame source

Now close your editor and restart Opera. If you navigate to a web site you should now have a new menu option when you right click on the page.

Opera™ with New Menu Choices

I added these menu choices to the one section of the ini file, and I'm sure that you can add to others. Where I added allows you to get this menu when you are not right clicking over an image or link.. I'm sure that you can add the choices to other sections but for this post it simply works when you select in an empty content area on the browser.

When you select Validate_508 or the Web Content Accessibility Guidelines Levels this will open new tab and send the current url to Worldspace™ for analysis.

If you have any problems with this or any suggestions please let me know.

-D
david.musser@deque.com

Creation of a Google Toolbar™ Button for Free Accessibility Analysis

When Deque launched our free accessibility analysis service: http://worldspace.deque.com/ I wanted to make sure that it was as easy to use, and as widely available as possible for developers who need to analyze a page at a time for accessibility.

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&amp;p=gb&amp;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&amp;p=gb&amp;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&amp;p=gb&amp;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

I am interested to hear about any feedback on these buttons. During the next post I will be covering some of our other integrations. The Bookmarklets, and the Firefox developer toolbar tools.

If you need to submit a file or source code for analysis please visit: http://worldspace.deque.com/

-D
david.musser@deque.com