Web Accessibility Toolbar for Opera

Hot off the presses. Download the Web Accessibility Toolbar for Opera if you are an Opera user or develop for Opera as a supported browser.

The Web Accessibility Toolbar has been developed to aid manual examination of web pages for a variety of aspects of accessibility. It consists of a range of functions that:

  • identify components of a web page
  • facilitate the use of 3rd party online applications
  • provide links to references and additional resources.

The Paciello Group

Browser wars get the star geek treatment

The Web Sig in the Silicon Valley is putting together a very impressive meeting at the end of the month. Browser Wars, it’s a spoof of Star Wars and the dreaded browser wars of the 90’s.

Browser Wars
I’m the first to cringe when someone discusses Star Trek or Star Wars in reverential tones. The theme alone is enough for me to think twice about this event. However, this night at the Yahoo! campus will bring out the big guns of the browsers (Chris Wilson from IE, Mike Shaver from FireFox, and Håkon Wium Lie from Opera are members of W3C).

The three of them will discuss the DOM object, the future of browsers, and more. Here’s a snippet of the announcement.

Attack of the DOMs is very relevant in this Browser Wars Episode II as Web 2.0 increasingly utilizes AJAX in interface design, functionality and web applications. Each browser implements its supported DOM. IE7 is known to suffer in performance from memory leaks that are related to its inherited DOM architectural design. Firefox quickly gains popularity with its DOM strategy among Web 2.0 communities with faster loading time. DOM Level 2 CSS allows programs and scripts to dynamically access and update the content and of style sheets documents. No designers can deny the importance of the interaction between CSS and DOM in rendering site design properly across browsers.
Web Sig

If you are in the Silicon Valley, hurry up and reserve your seating today! This will fill up quickly and you shouldn’t pass up the opportunity to see Håkon Wium Lie, the inventor of CSS and one of the original creators of the “internet”. The event is free to attend and Yahoo! will provide snacks and free sodas.

2007 Web Development Predictions

The standardistas were abuzz a year ago with hopeful predictions for the coming year. Visions of sugar plums dropping rounded corners, AJAX, and alpha transparent pngs danced through their heads. 2006 has been a great year for web development. Did we get what we wanted? Did we get too much of what we wanted? Further, what lies ahead?

Getting drunk on the possibilities and waking up to sober reality

It could be argued that 2006 was the year of AJAX and DHTML. They matured this year and solid libraries were released. The Yahoo User Interface Library makes a JavaScript mangler like me seem downright competent. Not only that, it’s got some good accessibility and security built in. Gez Lemon and others have been tearing apart AJAX for a possible accessibility hook that makes all of us happy. JSON gave us new ways to transfer information.

Yes, we got giddy with the possibilities. I helped build Yahoo! Tech. It’s a great site, if I do say so myself. We launched with every flash, web 2.0, animation, AJAX driven widget imaginable. Someone even called it “an explosion of a web 2.0 factory.” The site was accessible, harnessed the powers of a web-service architecture, and was the first completely new site for Yahoo! Media in a long time. But the web 2.0-ification was the star in many people’s eyes.

A funny thing happened over the months after launching. We got rid of the flash on the home page. We removed the dynamic width widget. We removed some animations. We began removing these Web 2.0 stars because the users didn’t use them AND they made the site performance horrible. Yahoo Tech, like many other sites, learned an age-old lesson. Just because you can, doesn’t mean you should.

Prediction #1 – In 2007, AJAX and DHTML will be used reasonably.

I predict new sets of AJAX/DHTML libraries will be released with great features and accessibility. People will go gaga over a few sparkly ideas and ultimately settle with good sites that use the libraries reasonably. I predict AJAX will be used less often as commercial sites realize they need page refreshes for advertising revenue. AJAX will continue to be used for features that significantly help the user’s experience (Yahoo Finance Streaming Quotes) and not so much for page level mechanisms (Yahoo! Tech Search).

No More Rounded Corners

I hate rounded corners. They were fashionable for a year and everyone had to have them. You could build them with 15 nested divs, with javascript, with extra paragraphs, extra this, that and the other. Die rounded corners die!

Seriously, rounded corners add a bit of visual white space but they’ve gone overboard. They’ve hit the designer’s toolkit like a bad font and are being used because people feel like that have to use them. It’s time to be creative again and kill rounded corners. Please!

Prediction #2: Rounded Corners Replaced With Dancing Hamsters

Let’s look at alternate container variations. Put rounded corners on the shelf next to drop shadows and let’s explore line quality, tonality, texture, and contrast instead.

Accessibility is a big deal and then it isn’t

Accessibility for web sites will become a big deal in 2007 as the Target lawsuit comes back and someone figures out a way to make AJAX accessible and easy to implement. I’m putting my money on Gez Lemon finding a solution and the Yahoo! User Interface Library making it available.

Firefox, Apple, Yahoo!, Google, IBM, Sun, and who knows what other companies will come together and agree that there is a particular way that these things should be done and will create some resolutions. After these things happen, you will see more and more sites become accessible without even trying. Platforms such as WordPress have already made huge impacts in setting up sites to be accessible from the beginning. Look for more advances from Microsoft, Adobe, and more.

Apple will release their new OS with extended assistive technologies built-in. Existing screen reader companies will have to deal with a big new competitor. Watch for Jaws, et al to scurry around fixing outstanding issues to hold onto their audience.

Prediction #3 – Accessibility for All

Even if JaneDoe43 is simply dragging images into her MyLinkedInSpace page, it will have the hooks necessary to be accessible. Platforms and libraries will make it easier for people to worry more about content and less about rules. The web will be a better place for novice and advanced programmers. It will certainly be better for those that need assistive technologies.

IE7 opens the possibilities

Internet Explorer 7 has been released and will soon see adoption rates increase significantly. Vista is ready to also increase the graphic processing potential for millions of users. As web developers, we have new tools in our kit to work with. Start studying your attribute selectors, pseudo selectors, and playing with alpha transparencies. 2007 will see the death of Internet Explorer 6. It will still sit on a small percentage of machines, but IE7 will take over and with it comes hope.

Prediction #4: CSS2 and CSS3 Get Used

Start looking at progressive enhancements with your CSS. Give Firefox, Opera, Safari, and IE7 the best possible experience. You may have to dumb down some of the IE6 images but go for the beauty and simplicity that advanced CSS offers.

Where’s the new blood?

The standardistas of the past are busy working on big projects now. Sure, they’re still doing some innovative stuff. But where are the young guns inventing wonders like Son of Suckerfish, Microformats, CSS Zen Garden,Image Replacement, SIFR, and god-forbid the image-free rounded corners? Seriously, it’s time for some exciting developments to come from people recently discovering web standards and bringing a new approach to solving issues. Who knows who will be the next Erik Meyer, Big John, Andy Budd, Shaun Inman, PPK, etc. Who’s gonna carry Joe Clark’s torch for being the genius with a cattle prod as he solves the captioning dilemna next year?

Prediction #5 – New Standardistas Rock The House

Further, these new standardistas are going to come from Asia, India, South America, and possibly the United States and Europe. They’ll have us on the edge of our seat as AListApart releases the latest tools to completely change the way we build sites. My number one pick for standardista of the future goes to Hedger Wang who tirelessly experiments and publishes little teasers on a regular basis.

I can picture the @media 2008 conference in Singapore with Molly, Andy, PPK, et al lining up for a chance to rub shoulders with the new greats.

Internet Explorer is officially released

Back in the dark days, programmers battled with a forgotten browser. It was good for its time, like a 4-cyl Fiero. But time marched on and this browser stagnated, forcing those working in the internet world to jump through programming hoops to make their pages work.

There were a few heroes that made this work a bit easier. Big John and Holly started a virtual library. There even became an “IE7” long before Microsoft got off their asses. The IE7 javascript was a library designed to fix the annoying issues in Internet Explorer 6. Zeldman began touring the world preaching the horrors of bad browsers.

And then something magical happened. Firefox was released with great support for standards-based programming. Quick on their heels came Safari and new versions of Opera that made life much easier. Instantly, Microsoft began losing their monopoly on the browser. Something had to be done!

IE7 logoChris Wilson must have been summoned to the all mighty Gates and given the go ahead to build the new beast: IE7. “Go forth and build a browser that fixes as many IE6 bugs as possible. Add tons of security fixes. Add new RSS and open-source features. And whatever you do… make it backwards compatible for our customers.” It was a big order to fill.

Internet Explorer 7 was on the road map.

To show good faith, they released a very early version – IE7 Beta 1. This browser was so meager that it generated even more bad press for the hard working group. Standardistas were up in arms over the remaining bugs. The team began to reach out even further to the developer pool. They made nice with the Web Standards Project, they went to conferences, worked with the web dev teams of large websites, they even gave out really cool shwag.

All of this led to some big promises and regular releases of subsequently better products. Bugs were squashed and developers began to learn how to deal with IE6/IE7 differences. I personally found a bug with transparent png sprites that I was happy to see fixed for the final release.

Internet Explorer Hits The Streets

This is the week we’ve all waited for. Internet Explorer 7 is officially released. Download it now. Microsoft will be actively pushing this browser as a security and feature upgrade. You can expect to see large numbers of your audience using IE7 over the next six months. I wouldn’t be surprised if IE6 is a grade B browser within a year.

Internet Explorer 7 is not as good as Firefox. It’s not as good as Safari. It’s arguably not as good as Opera, only because Opera users love to argue. But it is much, much, much better than IE6.

More importantly, this release finally allows us to use CSS2 rules. IE7 recognizes things like link[ahref=”fr”], div>p, li:hover, and ul:first-child. It doesn’t recognize generated content, that is my biggest complaint about the browser.

Web standard design seems to be stagnating lately as we’ve gotten fat and lazy creating rounded corners without thinking twice. AJAX took over some of our creativity. Now it’s time to go back to the CSS2 specifications and really begin re-inventing web design.

We’ve not only seen the light at the end of the IE6 tunnel, we’re standing out in the sun throwing pinecones at each other and running through the fields like drunk rabbits. Hats off to the IE7 team for delivering a browser we’ve been asking for. It’s not the one we begged and pleaded for, but maybe that’s what IE8 is for.

Add OpenSearch to your web site

Chris Wilson, the main guy behind IE7 (and older versions) discussed several new features of Internet Explorer 7 at the @media conference in London. One feature in particular that stood out for me was the OpenSearch protocol. Adding this to your site can be easy, it can also be a headache.

What is OpenSearch?

OpenSearch was developed by Amazon’s A9 search engine to enable aggregators to easily acquire content and make more robust search result pages. Internet Explorer 7 is using this protocol to give users the ability to search a site via the integrated search box.  It’s a two step process: create an XML document that defines your site’s search engine methods and then place a link to that XML in your page header. It sounds simple enough lets see it in action and then learn how to build the XML document.

Using OpenSearch

Yahoo! Tech recently added OpenSearch. If you have Internet Explorer 7 on your computer, you can enjoy the OpenSearch experience right away.  If you don’t have IE7 yet, download it now!

Yahoo! Tech and OpenSearch
Internet Explorer 7 has a built in search box in the top right of the page. If you have added OpenSearch to your site you will notice the box has an orange down arrow. Clicking on this arrow will expose a new menu. You can now search this site via the box and add the site to your favorite search engines.

If your site offers search results in RSS or Atom format, you’ll get enhanced functionality in your search results. Yahoo! Tech only features HTML results, so we give you the option of using the built in search box. 

At this point you may be saying… Is that all there is?  Well, yes. With a little bit of work, you are giving your visitors the ability to search from the built in search box and you are making it easier for A9 and other search engines to spider your content and surface your site in their results.  Let’s look at how easy it is to implement.

The OpenSearch XML

The XML document is fairly simple, you define the site’s name, description, attributions, favicon, and other simple elements. The important element is the Url.  This is where you define the location of your search engine and the parameter passed to define the query.

On Yahoo! Tech, the search page is tech.yahoo.com/sp and the query is passed as prod=search+term.  The OpenSearch XML expects you to use this specific markup {searchTerms} where you want the engine or IE7 search box to insert the query terms. Further, I found it much easier to write the url as a whole string, rather than setting the prod parameter as a sub-element. You can also allow the search engines to narrow the results by number {count} and more.

Let’s look at the XML in depth.




Start off the xml file with the standard opening. We then open the OpenSearchDescription element. There is a link to a9.com to define the namespace.


Yahoo! Tech
Search for the best gadgets and how to use your tech gear on Yahoo! Tech
tech gadgets technology cameras phones shopping

Define a short name for your site. Give it a description and the tags that define your site.





Yahoo! Tech is only providing an HTML version of the search results; you can visit the search result page. If we provided an RSS version the type would be application/rss+xml. The template is the location of the final search page. Notice how the searchTerms variable is inline. Ideally, I could have left ?prod=… out of the url and defined it as a parameter, but this caused inconsistent implementation.

We then define another parameter, the results and the value is the OpenSearch variable for the number of results returned. You can see a full list of parameters on the A9 OpenSearch web site.


Yahoo! Tech Search
Yahoo! Tech
Copyright © 2006 Yahoo! Inc. All rights reserved.
http://www.yahoo.com/favicon.ico

We are now providing a longer name where it is appropriate to display it. The developer is Yahoo! Tech. The attribution is how we want results credited. We are using  the standard copyright information. We also define  the location of our favicon. You can define multiple icons for inside the box and if you have RSS, on the results page.



open
false
en-us
UTF-8
UTF-8

Finally, we add some extra information about the display, search content, and close the XML. Overall, it’s a fairly small, simple bit of XML(tech-opensearch.xml).  There’s a full list of parameters you can add to your search query and elements to define your xml at: http://opensearch.a9.com/spec/1.1/

Do you want to make it even easier?

Go over to Enhance IE and use their simple OpenSearch generator to build the XML for you! Simply do a search for TEST on your site and copy that url into their form. Voila, you’ve got a basic OpenSearch XML file.

Activating your OpenSearch XML

If you provide an RSS or Atom feed, you can log in to A9 and register your site. Internet Explorer 7 also needs to know where your XML document is located as well.  Simply add a link to it in the head of your document:

While Chris was busy hyping the latest features of Internet Explorer 7, the OpenSearch protocol will also be supported by Firefox 2.0. That’s two for the price of one!.

WordPress and OpenSearch

If it’s so easy, why doesn’t it work on this blog? WordPress blogs are setup to use the index page as the search page.  This is the results page for a search of XML on this blog: http://last-child.com/index.php?s=xml

I’ve tried setting up the XML to point towards index.php and get the subsequent errors.  Chris Fairbanks has released an OpenSearch plugin for WordPress (http://www.williamsburger.com/wb/archives/opensearch-v-1-0).  It’s not a simple procedure and I simply haven’t had time to implement it.

With the introduction of Microformats and the OpenSearch protocol, the (lowercase!) semantic web is getting closer to being a reality. This bit of xml is fairly easy to generate and opens your site to new audiences and functionality. Spend an hour or two getting acquainted with the OpenSearch concept and activate your site today.

Related Information