Web Accessibility
PageSpinner 4.6.3: Quirky and Erratic
I am on a quest to find inexpensive applications that are capable of creating accessible Web pages. Web professionals need to know a lot to create truly accessible sites to the strictest levels of compliance, but I’m interested in the ordinary user.
I want to know whether these applications allow ordinary folk to achieve basic tasks such as adding alternate text to an image, marking up paragraphs, headings, and lists with the correct HTML tags, and using a good title for the page. These are the sorts of common things anyone creating a Web page, at whatever level, should be able to do. And they shouldn’t have to fight the software to do it.
PageSpinner
PageSpinner costs $30. It works with Mac OS X 10.2, 10.3, 10.4, and even Mac OS 9.1 and higher. Version 5 has been announced and supports Intel Macs. The PageSpinner package can be used free for up to 21 days to try it out.
The Process
I opened PageSpinner and chose a New Empty HTML Page from the Starting Points dialog. PageSpinner created a new HTML 4 page with a relevant doctype and <head> tags, and the cursor ready in the <body> portion of the page.
Aside: I was on my third or fourth visit to the Starting Points before I noticed that the button is actually labelled “New Emtpy HTML Page.” I wonder how long that typo has been there?
I pasted in a few paragraphs of text and clicked the Live Preview button. As expected, my text had all run together, as it wasn’t marked up with paragraph tags.
Paragraphs
It was easy enough to select each paragraph in turn and add <p> tags, either using the default Command-Return keystroke or the Toolbar button or menu item.
Another option was to select the text, choose Edit ‣ Convert ‣ Text to HTML… and then to choose between various combinations of <p> and <br> tags.
It’s an interesting quirk that when entering text by typing you can use Command-Return to create new paragraph tags as you type, but the new tags are created at the cursor. If your cursor is already inside an existing paragraph tag, then an invalid nest of tags is created. You must either press the arrow key four times (to move the insertion point past each character of the </p>) or click to move outside the existing closing tag.
This makes the shortcut almost useless. It would be a nice feature if the software could figure out where you were and what you were doing and allow you to just type fluidly, creating correct paragraph tags as you typed.
Character Encoding
The default character encoding seems to be iso-8859-1. I prefer UTF-8, but was unable to find any way at all to set PageSpinner to use it. If I used the New Page Assistant I could type in UTF-8 and PageSpinner would remember it for the session, but that memory would not survive restarting the application. The only other choice built in to PageSpinner is SHIFT_JIS.
Headings
Next I added a heading and came across a stumbling block: how to mark it up from the available tools. Finally I found it in the last place I’d think to look: under the Size menu.
It’s been many years since I saw any strong connection between heading level and size—that’s truly old-fashioned thinking. Thanks to stylesheets, we can make any level heading appear however we want it: big, small, green. While the size of a heading may decrease as its importance diminishes, these days it’s arguably more common that we’ll use similar sizes for the lesser headings and use color, font, or a style such as italics to distinguish heading levels.
I’d certainly expect to be able to assign headings from a toolbar button, but there isn’t one. There is a button on the Toolbar to call up the HTML Assistant where you can make numerous choices, including selecting headers of various levels, but it’s long-winded for something that should be simple.
Emphasis
On the other hand, the Toolbar has the now-rather-redundant buttons for bold and italics. Under General Preferences it’s easy to set the bold and italics buttons to enter <strong> and <em> tags, enhancing their usefulness.
Lists
Adding a list was interesting: I added a few list items, selected them, and clicked the List button on the toolbar. Each list item was correctly marked up with <li> tags, but the list tag itself (probably <ul> or <ol>) wasn’t added. To add the list tags I had to select my text and use the List topic in the HTML Assistant. Making a list is therefore a two-step procedure, with the commands you need in two very different places. Odd.
At least I was able to create my properly marked-up list.
There is an option in the Preferences to enable a List menu, but a list remains a two-step procedure. Moreover, PageSpinner happily marks up empty lines with <li> tags, creating empty bullet points in the output.
As a Web professional, I hand code my pages, using a text editor and downloaded or homegrown AppleScripts to help. Perhaps I’m spoiled that my scripts remove empty lines from a list, but if I can do it with a small AppleScript then software people are paying for should certainly do it.
Photos
Next up was adding a photo. When I clicked the Toolbar button, the HTML Assistant dialog box appeared. It was easy to browse for my image, set various attributes, and Insert the image. Unfortunately, PageSpinner was happy to allow me to insert my picture without entering anything in the Text Description text box. The resulting code also didn’t include the empty alt tag that might be appropriate in this circumstance.
When I undid the insertion, added alt text, and clicked Insert, the alt text appeared as expected.
Not every image requires a text equivalent, but every image does require alt text. It’s simply a matter of what you choose to enter: sometimes a description of the image, sometimes wording reflecting the function of the image, sometimes a space or a empty string, i.e. no text. The alt text attribute, however, must not be omitted.
PageSpinner needs to handle this differently.
Good alt Text
Alt text is also not the same as a “text description,” and it doesn’t actually help anyone to equate the two.
If I were writing a page about how to distinguish a cat from a dog, I may have photos of both, and the alt text may be appropriately “cat” and “dog” respectively.
If I used those same cat and dog photos simply as decoration, the appropriate alt text may well be “ ” (a space).
If I used a cat photo as a button for “next page,” then appropriate alt text would be “next page,” not “photo of a cat.” It’s the function of the image that’s crucial. Occasionally that may require describing the image, but often it does not.
Honestly, the best way to really grasp what alt text is and how it needs to work is to spend a day or a week surfing the Web with the images turned off (mimicking the experience of a blind visitor, or Google). You’ll soon understand two things:
- what alt text is and why it’s absolutely necessary.
- how incredibly frustrating the Web can be without correctly marked-up images.
What you won’t understand is the experience of the blind visitor. If there is no alt text at all, then a blind visitor often hears the path and filename instead. Here’s a genuine path and filename example from a CMS I use daily:
/NR/rdonlyres/E1D2C882-5CE3-46A8-950A-6D14EC70FD08/0/david.jpg
Just imagine listening to that even once or twice per page!
For a truly enlightening experience, download the video of Darren Fittler’s presentation at the Webstock conference held in Wellington, May 2006.
Miscellaneous Tools
PageSpinner makes it easy to preview the document, with a built-in viewer or in a browser. This is very handy for seeing how the page is coming along.
The globe in the menu bar is the icon for Web Tools, including several validators. Make a choice and confirm you wish to open the link in your Web browser. The validator’s page opens up and you can proceed from there.
PageSpinner also has an AppleScript menu, with some supplied scripts. You can also create your own scripts and add them to the menu. When I tried the script to paste a text file into an existing XHTML Strict document it stepped me through a sequence of about three operations. The last was to convert the text to HTML. Unfortunately, while PageSpinner added <p> tags, it didn’t add the closing tags required by XHTML, creating an invalid page.
My Conclusion
PageSpinner 4.6.3 is quirky and erratic. Version 5 has been announced, and I would hope it’s been substantially overhauled. While PageSpinner allows its users to create the kind of basic, accessible Web page this series has been aiming for, it doesn’t make it very easy, and it sometimes work against the user. My quest continues.
Useful Links
- Guidelines on alt texts in img elements The fundamentals: replacement, not description, Jukka “Yucca” Korpela.
- Alt text is an alternative, not a tooltip Roger Johansson, 456 Berea St.
Related Articles
- Web Accessibility: Nvu: impressive and powerful, ATPM 12.10, October 2006.
- Web Accessibility: RapidWeaver: A Useful Tool in Need of Sharpening, ATPM 12.09, September 2006.
- Web Accessibility: Sandvox: Sand in the Eyes, ATPM 12.08, August 2006.
- Web Accessibility: The Clayton's Web, ATPM 12.07, July 2006.
- Web Accessibility, ATPM 10.01, January 2004.
Copyright © 2006 Miraz Jordan, http://mactips.info. Miraz is a
co-author of the recently published book: WordPress 2: Visual
Quickstart Guide.
Also in This Series
- What Browsers Can Do, Part 2 · May 2007
- What Browsers Can Do · April 2007
- The Flip Side of the Coin · March 2007
- SeaMonkey 1.0.6 · December 2006
- PageSpinner 4.6.3: Quirky and Erratic · November 2006
- Nvu: Impressive and Powerful · October 2006
- RapidWeaver: A Useful Tool in Need of Sharpening · September 2006
- Sandvox: Sand in the Eyes · August 2006
- The Clayton’s Web · July 2006
- Complete Archive
Reader Comments (11)
Though I use BBEdit most of the time, I spent a few months on a different Mac and was not willing to put out the cash for another license. I found skEdit, a steal at $20.
Code completion, bracket matching, drag and drop image insertion from a site pane and custom snippets make it very handy. There's no hand holding for a novice but for someone who already knows HTML and CSS it's an extremely efficient tool.
Pagespinner doesn't get in my way. True, I suppose part of the appeal is that I can use it on my G4 or my little G3 laptop and it zips along. I thought that it would take a back seat after I bought Dreamweaver, but PageSpinner is still my main tool for editing and creating web pages.
Some things you did not have time to find were:
Include tags, which allow you to edit something like a footer or a navigation menu, and have it updated in all pages that use it. They can also insert the date or other useful things. The ordinary user would appreciate not having to run around a folder full of pages, updating them all.
PageSpinner includes AppleScripts that will work with a database to create pages from the data. This is like having a database running on your server, but you can serve the pages from any webserver. If your data don't change often, this could be a huge benefit. Your Aunt Minnie could have a catalog of her embroidered potholders hosted on SpyMac. This struck me as a feature for the little guy, because while it does require you to know AppleScript, that is much nicer that having to learn PHP and find a hosting service that will let you use it.
You didn't mention the semi-WYSIWYG nature of PageSpinner. Of course, you can't anticipate how somebody's browser is going to render your page, but it is nice to see headings that look like headings, bold that's bold, etc. This was a huge help when I was starting out building web sites. As you mentioned, it's a matter of one click to preview your page in PageSpinner's live preview (which is a lot like BBEdit's) or in a browser. You can have (IIRC) eight web browsers in your list of browsers to use, so you can try your web page in all of them. It strikes me that this would be very useful to ordinary folk, as not all browsers handle HTML the same way, and you'd want to see any lack of accessibility before your visitors did.
I was surprised at your comment about how, if you're just typing along, you can hit Command-Return to create the paragraph tags, but they include the cursor. Of course, you're correct in saying that if you finish writing one paragraph, then type Command-Return, you then have a paragraph within a paragraph, which is bad HTML. But I don't encounter that problem, and I wondered why. So I started PageSpinner and started typing and realized that I have been typing a down-arrow when I get to the end of a paragraph. I don't enter tons of text this way, so I don't run out of blanks lines
Since you appreciate AppleScript, I would think you would really like PageSpinner. I write AppleScripts for PageSpinner all the time; one will take a folder full of photos and a list of captions and turn it into a slideshow. The authors really believe in the value of AppleScript, and there's even a website to support the use of AppleScript in PageSpinner. This goes far beyond the token, reluctant access some apps give you via AppleScript.
If I didn't have to get back to work, I'd write a quick one to add alt=" " to any image tags that lacked an alt text.
I hope you've sent your comments (especially the one about the alt=" " missing from image tags) to Optima. You may not want to use PageSpinner, but they are very responsive to suggestions, and correcting that omission would result in better access for many.
I recommend PageSpinner to people interested in creating efficient, hands-on web pages because I find it strikes a good balance between ease of use and power. I hope you haven't chased away any potential users.
Over the past year I've been reforming my sites to use css. At last the web has the tools to make fast elegant-looking pages. It is worth the effort to learn how to use the new tools.
So here is my problem. To work on a web site there are 3 components to manage. 1. each page of html; 2. each css page of text; and 3. the files and folders that make up the site.
I am using PageSpinner to write the html, Style Master to generate css files, and my Mac OS to manage the files and folders. Even with 2 monitors, I find that I am often buried in open windows. I really would like to have these 3 components combined in one app.
And I don't want the app to automatically generate code any more than PageSpinner and Style Master. I really do like those programs.
BTW, I don't want the design program to upload directly to my web host. I prefer to do that myself with a separate FTP client. I have a folder on my computer with the 'original' files of the current web sites. I also maintain files of the old legacy versions of my sites.
If you can manually code CSS, then skEdit, will handle file management in the finder and give you syntax coloring and code completion for HTML, JavaScript and CSS.
Both programs allow you to have multiple pages open in tabs, as do BBEdit, Smultron and TextMate. Tabs work just like they do in modern web browsers, which takes care of the clutter of multiple open windows. I wouldn't consider trying to maintain a site without this feature.
In Pagespinner, after I edit and save my CSS file, I switch to the html file and hit the preview button which shows me the page in my web browser more accurately than Dreamweaver.
I'm not demanding the interface be changed to suit me. I simply found that the current interface makes it harder to create a basically accessible page.
Correctly using paragraphs, headings, lists and alt text is the very least that one can do to create an accessible page.
Miraz offered a "useful link" that said, "Alt text is an alternative, not a tooltip." Following that logic, a space character is not an appropriate alternative for an image.
Personally, I have taken to simply typing anything I feel like in the little alt field when setting up an IMG tag just so that PageSpinner includes the alt attribute. Then, I immediately erase that character after the tag is rendered.
But, instead of a space, remember that a null is an acceptable value for the alt attribute. In other words, instead of alt=" " you would have alt="". This is the way, for example, to have an image on your web page that makes up part of the visual design but has no useful purpose for someone who is blind and listening to a utility read the web page. When said utility sees the null alt attribute, it would simply skip it.
I'm rather appalled by this statement, especially from a staff member of an online magazine. The alt tag is there for a purpose, a very good purpose, to provide alternative content for people who for, whatever reason, can't see the image. That includes: the visually impaired, those of us who use a have our new read out loud from web pages, those of us who use alternative devices like cell phones and PDA's, and those of us who sometimes don't get the images downloaded from the server for various reasons. In various places you could be sued for excluding people with disabilities for not filling out alt tags.
That's the reason that the alt attribute is presented to us by Page Spinner, BBEdit and other editors. It's to be filled in. It's a feature, an important one.
There's a second very good reason for including alt tags. Search engines don't read images. Alt text gives Google, Yahoo!, etc. somethng to chew on. With some careful keyword choices, alt text can dramatically improve search engine placement.
Don't claim that empty alt attributes are useful for spacer GIF's either. Those are so 1990's. Modern semantic markup works best when only elements that actually contribute to the actual content of the page are included. CSS does such a better job of layout than spacer GIF's.
I agree that tool tips are not what the alt attribute was invented for but lots of people use it that way. Personally, I often take the time to fill out the title attribute on images to deliberately choose my tool tip text. Don't fight a large percentage of the web browsing public that use the "feature".
So, we have two very good reasons for filling out the alt attribute and one more pretty good one balanced against what? Simple laziness. It just doesn't take that long to type a couple of words. If you are providing a public service make sure that it is a quality one.
The value of a space as against an empty value for alt text has been widely debated in various places. It's very common to use graphics that offer no actual content - for example a decorative border around an area of the page. You don't want to be using something like "decorative border" as the alt text as that's simply annoying and adds no actual value. For such images no value or a space is appropriate.
What's not appropriate is to omit the alt attribute.
As Miraz said above, you don't want to be using something like "a decorative border" as the alt text. It would be annoying and adds no value.
Once again, I never suggested omitting the alt attribute and I even said so at the beginning of my original comment. "I agree with Miraz that PageSpinner should include alt attributes every time it places an image tag." You seem to have mistaken my comment that the alt attribute can contain a null value for meaning that the alt attribute could be omitted. No, it should not be omitted.
Add A Comment