Partnering Dreamweaver with Drupal for Accessibility

| | Comments (1)

As many regular blog readers know, I'm still a big fan of Dreamweaver even in this brave new Web 2.0 world. But shouldn't I be exploring the new content management systems like Drupal and Movable Type...or even ANGEL?

Actually I have been, but I'm also finding that Dreamweaver has been an indispensable partner, especially for complex CMS pages - because Dreamweaver is the most flexible tool which still generates the cleanest, most accessible XHTML around.

If you can figure out how to cut and paste HTML (and what respectable Web master can't do that?), then Dreamweaver can still be a great time saver.

Here's a mini-tour of some useful Dreameweaver tools and how they've been helping me streamline a Drupal or Movable Type page.

Insert Headers

Long pages should have subheaders (e.g. H2,H3,H4) - even those in a CMS...but amazingly few editors I've encountered recognize this fact. They'll let you shrink and enlarge text or change colors...but they won't let you actually insert a correct level of header (unless you know the tag).

Dreamweaver not only lets you do that, but gives you a keyboard command - sweet.

Image Insertion & ALT Tags

Ever since Dreamweaver MX 2004, the software has been enabled with a key primal instinct. If you insert a picture - it asks for an ALT tag. You have to be pretty lazy to ignore it. Plus Dreamweaver captures the image size and image file name.

It's true, you can't just cut and paste the code into Drupal or Movable Type and expect an image to appear...but will have a record of the file name, ALT tag and size attributes. All you, the Webmaster, have to do is upload the images into Drupal and change the SRC path (which is always the same). You won't have to fill in the sizes or guess on the file name. And if you miss an image...the ALT Tag has been pre-filled in for you.

Data Tables

One school of thought says to avoid them, but sometimes they really are the best way to present data (see below). But few CMS WYSIWYG tools include good table tools, and even fewer let you set the SCOPE attribute.

  Drupal Default Movable Type 4 ANGEL 7
Tool Default setup does not include HTML Editor Six Apart.com FCK Editor + Equation Editor
Image Hand code (including path) Assign title to image Assign Alternative Text to image
Table Hand code. Must enable full HTML to use Hand code Table Editor, but no scope
B or STRONG STRONG enabled by default. Must enable full HTML to use B Either (depends on editor) STRONG
H tag Hand Code. Must enable full HTML to use Hand code Under Format menu (vs. Style).

 

In Dreamweaver, inserting the table prompts you to select a table layout with table headers (and the right SCOPE). If you get the initial set-up correct, your accessibility issues have been mostly solved. And if you need to tweak the table, Dreamweaver can do that too.

A Break is a P and not a Break

A basic accessibility mantra is to make sure that paragraphs are chunked into P tags and groups of sentences separated by BR tags. That is, blank lines between paragraphs should be caused by the P tag and not two BR tags. This allows screen readers to re-read single paragraphs as necessary. If it's all BR tags, then the HTML is just one giant text block structurally. Some HTML editors ensure that blank spaces between paragraphs really correspond to the P tag, but more than a few don't...

Bold or Strong

Want the bold command to be B or STRONG? Dreamweaver lets you choose either by default (and you can even activate commands to do both if you're really clever). The one thing you won't have to do is manually type in "<strong>" all the time - that one gets old very fast. Nor will Dreamweaver generate one of the scariest pieces of CMS code I ever did see - <span style="font-weight:bold">. This may validate, but if you're going the presentation route, surely <b> would save many bytes.

And it gives a Local Backup

Penn State is pretty good about backing up server files, but glitches do occur (sometimes I push the Delete button when I shouldn't), but Dreamweaver allows you to archive key content...if you're feeling paranoid.

Same Toolset for the Same HTML

As much as I like the concept of CMS, I've been exposed to enough of them that I'm starting to get a little disoriented. It really is nice to have one HTML generator that is independent of everything else. And if the HTML editor isn't working on a Mac (or IE 7) today, then Dreamweaver will come to the rescue

Any Drawbacks?

The two I can think of are that 1) Dreamweaver costs money and 2) Dreamweaver is complex for a WYSIWYG editor. Plus, you usually have to set your CMS HTML editor to view tags only when it comes time to cut and copy code (but you can ususally toggle back to WYSIWYG mode).

But if you are a Web saavy user and already have access to Dreamweaver and spent all that time getting up to speed in it, I would think it would make sense to leverage the tool.

This entry composed in Dreamweaver and pasted into Movable Type - with subheaders.

1 Comments

Brad Kozlek Author Profile Page said:

Your Drawback no. 2 resonates with me. Dreamweaver is really a professional-grade web development tool. I generally become befuddled when using the app.

I think it should be the job of the webmaster to make sure the wysiwyg interfaces on the website create appropriate html. I think it can be done, but generally isn't.


Leave a comment