The GW Micro blog has been discontinued. For instant updates on GW Micro products and events, follow us on Twitter, and like us on Facebook.
Climb Aboard the Dreamweaver CS3 Train
by Aaron Smith on Thursday, April 26 2007I had the opportunity to sit down with Window-Eyes and Dreamweaver CS3 recently, and I have to say that I am pleasantly surprised at the level of accessibility in this latest version. It's sad, really, that I experience surprise when I encounter an accessible, mainstream application, but that's a rant for another day.
So what is Dreamweaver? According to Adobe, you can "Quickly and easily design, develop, and maintain websites and web applications — from start to finish — with Adobe® Dreamweaver® CS3 software. Built for both designers and developers, Dreamweaver CS3 offers the choice of working in an intuitive visual layout interface or a streamlined coding environment."
For beginner users interested in creating web pages, DW offers an intuitive interface, with the ability to insert and modify many web page elements without needing to know exactly how the underlying code works. If you want big, bold text in the center of your page, type the text, and change the font attributes and position just like you would in a word processor. If you want to add an image, use the Insert -> Image option.
My biggest complaint about applications that generate code behind the scenes in WYSIWYG applications has been that the resulting code is often bloated and littered with validation errors. And if you don't know anything about the code, you can't fix the problems. Applications that generate this kind of balderdash (I'm looking at you, Microsoft Word and FrontPage) should be taken out and shot. They're lazy, and they create unnecessary accessibility problems when they could so easily be avoided.
DW, thankfully, does not fall into this crappy software category. Not only is the resulting code efficient, it validates. You can even check your markup as you go. In addition to clean code, accessibility features are in the forefront when inserting elements. Take, for example, inserting images. The first dialog that pops up after selecting an image to insert contains both alternative text and long description options. The only bad thing about this dialog is the text that states, "If you don't want to enter this information when inserting objects, change the Accessibility preferences." That option shouldn't even exist. But at least the options are on by default.
Speaking of Accessibility preferences, they're another indication that DW is, at the very least, aware of accessibility issues, and that's another positive.
For more advanced users who are familiar with code, DW's code editor speaks right out of the box. Since this is code, turning on various punctuation options makes it read better. You can have multiple files open at the same time in different tabs, and CTRL-TAB moves focus between them. You can also opt to have both the code window and design window open at the same time so that you can monitor your changes in real-time (with CTRL-`).
An interesting thing about DW's approach is that the design window doesn't use an IE or Firefox engine for rendering. Instead, it's much like a rich text editor. There is an option, however, to view the project in an external browser. I really like this because, as powerful as Browse mode is, sometimes you just want a quick view at a line or two. Being able to jump right from code to result and then back again with a quick hot key is a really nice feature.
As much as I'm impressed by DW's accessibility, there are a few things that don't speak, and those I would like to see fixed. For example, when DW first opens, you're presented with a Flash dialog that lets you choose from various options like creating a new file, opening an existing file, opening a recent file, etc. Currently, Window-Eyes only receives data from a Flash object while in Browse mode. This is a limitation of Flash because Flash doesn't expose anything outside of Browse Mode. It would be nice to either have that issue resolved, or see them use a standard dialog for these options.
Even though the Flash dialog doesn't speak, you can still press standard hot keys to open or create new documents. CTRL-O brings up a standard file/open dialog. CTRL-N, for new, however, brings up a dialog with some problems. You're initially presented with what Window-Eyes calls a list box, but when you arrow up and down, you hear nothing. This, however, is probably a Window-Eyes bug, so I can get that logged and investigated. There are two other lists in this dialog that don't read quite right, but it looks like a small increase in cursor delay solves the problem. So we may want to think about some sets for DW, even though they're not really necessary.
Another annoyance is that task panels don't seem to have any keyboard navigation options. As I mentioned earlier, CTRL-` moves between design and code windows, and CTRL-TAB is used for moving between tabs in the focused window, but there's no key to move between the task panels and any other window, like F6 does in Word to move between the document area and the task pane. This isn't a huge deal because you can get to all of the options in the task panels through menu items. But it would be nice to be able to access them quickly without doing a lot of hunting.
There's one other annoying thing that has nothing to do with accessibility, but it drives me crazy nonetheless. If you go to the beginning of a line in the code editor that contains blank space, followed by text, you should be able to press CTRL-DELETE to clear the spaces, and move the text to the left edge of the editor. Most editors do that, but they also include punctuation characters, such as the dollar sign. That's unbelievably annoying when you're dealing with code, such as PHP, that uses those punctuation marks to designate variables and such. I've searched the Internet over for editors that do not have this problem (i.e. that will remove the blank space, but will not delete punctuation), and I've only found three that are worth my time: the Visual Studio IDE, the ActiveState Komodo IDE , and Notepad++ . That's just sad. But I digress.
Adobe Dreamweaver CS3 is a good, accessible web development tool that I will begin recommending, despite the few problems I found. It's robust, it's efficient, it's packed with options and support for multiple web based languages (including style sheets) and it speaks right out of the box with Window-Eyes. Those are winning combinations.
