Joe Dolson: Accessible Web Design

Wordpress isn’t really designed to be used as a CMS. It’s designed for blogging - nonetheless, it’s a surprisingly powerful little content management system, and with a little bit of tweaking you can pretty easily turn it into a nicely flexible system.

One of the challenges that needs to be dealt with is the use of Pages. A “Page,” in Wordpress parlance, is a document which sits outside the blog chronology. For the purpose of a CMS, you don’t really want all of your posts to be chronologically organized. You could rewrite the Post templates and the permalink format to eliminate all date information, which would provide you with a nice CMS-like organization - but would also eliminate the blog function. Realistically, you probably want both.

It’s very easy to create a large number of WordPress pages and sort them into a hierarchy. For presentation, the default WordPress function wp_list_pages creates a very nice nested group of unordered lists. This can be styled using CSS to create either a long list of pages with inset sub pages, or a fancy CSS-driven set of drop down or flyout menus.

So far, so good. If you’ve got 10 pages, a single list is fine. But for larger sites, you’re running into other challenges. A straight list of your 150 pages is ugly, difficult to use, and difficult to navigate.

But the classic drop down or flyout menu has some usability issues. For people with mobility impairments, for example, the ability to use a mouse may be limited - and it takes a fair amount of core source hacking in order to attach the javascript needed to make these menus completely keyboard navigable. It’s easy to make certain that the top level link in each category is usable from the keyboard - so your responsibility is to make certain that the top level category link will provide access to all sub pages.

Again, there’s an easy solution: write links to all your further pages into your document content.

Ick. This solution sucks. First of all, if you’re creating this site for a client, you can’t necessarily rely on them to retain the content you’ve carefully created. Second, it’s very awkward to have to hand-maintain links to every page on the site. Why are you using a CMS if you’re going to have to do this anyhow?

Thankfully, although it’s not immediately obvious, Wordpress does provide a way to access the children of pages programmatically. Using this code, you can simply create a secondary navigation section which provides easily keyboard-navigable links to all pages below those top level documents.

The Code

<h3>
<?php echo get_post_meta($wp_query->post->ID, 'category', true); ?>
</h3>
<?php 
if(get_the_title($post->post_parent) != the_title('' ,'',false)) {
echo "<ul>";
wp_list_pages("child_of=".$post->post_parent."&title_li=");
echo "</ul>";
}  
if(wp_list_pages("child_of=".$post->ID."&echo=0")) {
echo "<ul>";
wp_list_pages("title_li=&child_of=".$post->ID."&sort_column=menu_order"); 
echo "</ul>;";
} ?>

What’s going on here?

First up has really nothing to do with the navigation menu itself. This is a header for the category navigation menu, arbitrarily placed in a level 3 heading element. It’s a little oddly phrased - this is because WordPress doesn’t provide access to Category labels for Pages the same way they do for Posts. Therefore, this is actually sourcing a Custom Field - a feature available in WordPress which gives you the ability to attahc any custom information to a document. In this case, I’ve created a custom field named “category” which contains the phrase I wish to be considered the category for this item. Generally, it’s the link text of the top level link, although you could set it to be anything you wish.

We’re trying to talk about usability, however, so I’m inclined to suggest sticking to something appropriate.

The second block of code is a tricky bit. This if query is checking to see whether the current page is a subpage of any other page. In general, Wordpress has great built-in conditional functions - you can very easily check whether something is a page (is_page() or whether it’s a category page (is_category(). There isn’t, however, an is_subpage() condition. So, this is the workaround - checking whether the current page is not it’s own parent. In Wordpress, pages at the top level of the hierarchy are their own parents. (Let’s not get into genetics, here…I’m concerned.)

Next we’ll use the normal wp_list_pages() function. Again, we’re using the information about the post’s parent in order to determine what pages to list, using the child_of argument to retrieve only the Pages which are children of the current page.

Whoa, there! I see a problem!

Yep, you sure do. At this point, we’re only retrieving child navigation if we’re not on the top level page itself. Well, that’s great. You can get between child pages if you can find your way there!

So that second block of code comes into play. Same idea, except this time we’re fetching children of the current page, without checking whether the page is top level. If it’s got children, great - we’ll display ‘em. If it doesn’t - also great - we won’t.

This sytem does also work for multiple hierarchy levels, although it’s a bit awkward. Here’s what you’ll get with three levels in the hierarchy:

• Top level page, no children: displays category heading, no children. (The category heading could be removed using another conditional statement; I just haven’t done it.)
• Top level page, with children: displays all descendants (children and grandchildren.) Grandchildren will be in a nested unordered list inside the list item for their parent.
• Second level page, no children: displays all sibling pages (pages with the same parent).
• Second level page, with children: displays all sibling pages AND displays the children of the current page, in a nested unordered list inside the list item for that page.
• Third level page, no children: display all sibling pages at the grandchild level.

And so on. This code functions in Wordpress versions 2.01 and above.

I’ve published my first article at Cre8tive Flow, the Cre8asite Forums blog - Creating Accessible Navigation. In the article I discuss the idea that providing access to content is the overriding goal for the creation of an accessible content and caution against getting too wrapped up in making accessible methods.

Providing a path around an awkward accessibility obstacle may be far more effective than constructing a bridge over it or carving a tunnel through it. And don’t you just love structural engineering analogies?

Well, the title says it all, methinks. I’ve been interviewed by Elizabeth Able, Cre8asite’s chief blogger-in-residence and a moderator in the forums.

First time I’ve ever been interviewed, I think - it was a good experience, though! Thanks, Elizabeth and Cre8asite!

So, the general shape of blog posting around this time of the year is in the form of “my five predictions for 2007” and in discussing site statistics for the calendar year. I’m not going to bother with predictions; but I’m going to walk through my statistic through the year and talk about what I was doing in the way of marketing and how those activities impacted my site traffic.

It’s been an eventful year, as these statistics fairly clearly demonstrate:

Although any set of site statistics should be taken with a big fat grain of salt, these do seem to show a teensy trend towards more traffic. In the month of January: 156 unique visitors. In December: 4940 unique visitors. What caused this increase?

To be entirely honest, it was a bit of careful planning and intentional personal marketing. Let’s be honest: I’m in business doing accessibility consulting and web design, and I though that increasing traffic to this site might help me in pursuit of that goal.

Month by Month

January

In January, I received, as I mentioned, 156 unique visitors. This is generally along the vein of the traffic I’d receive during the previous year as well, based on, essentially, no marketing at all. I’ve been listed in DMOZ for quite a long time, but as of January that was the extent of my marketing activities.

February

In February, traffic doubled to 300 uniques. This was the result of my authoring a brief tutorial on Blogger. Using the interface, etc. Although most of this information can be found on Blogger’s help pages, this tutorial summarized things nicely. It also mentioned explicity information on uploading documents to Blogger: apparently, a very common question.

This was my first taste of search-based traffic, really: people finding what they want on your site.

March and April

March and April get grouped together because I didn’t really do much more with this site during that time. Instead, I started a second site: inter:digital strategies, a search marketing consultancy. I joined Cre8asite Forums and began to maintain a search marketing blog. Both of these things increased my overall industry profile, but didn’t directly associate with http://www.joedolson.com.

May

In May I authored a pair of articles on Boolean searching with PHP and MySQL, which accompanied a PHP script doing that very task. These were highly strategic: I knew full well that this was a highly specific search query which was currently lacking any valuable search results. I filled it. The articles were posted in mid May: my traffic doubled that month.

June, July and August

During the summer months, I continued to let things grow. I began a blog at JoeDolson.com and backfilled it with a few of my older announcements and articles. I continued posting heavily at Cre8asite Forums and in both blogs. I took a month’s vacation (all of July). I moved from Vienna, Austria to Saint Paul, MN. Traffic kept growing, a mixture of the greater search traffic spawned from my PHP/MySQL articles and the higher profile which was gaining valuable in bound links.

In August, I became a site grader for Accessites, an awesome accessible design showcase, thanks to the invitation of Mike Cherim.

September through December

Kept on writing. Ultimately, this is the key: find an article that needs to be written and write it. Overall, this technique caused my traffic to multiply 35-fold over the course of this year. I spent practically nothing on any other kind of marketing: a couple of quality directory submissions which were probably completely unnecessary, but otherwise my only expense was my own time.

And what has this meant?

At the beginning of the year, my job queries were very slow: I knew a few people who might need websites, and would talk to them and let them know I was available. Every once in a while, I’d receive a cold contact: 90% of this proved to be unqualified leads. This week, I’ve been contacted 7 times so far through my website. Two job proposals, four “thank you” notes for articles, and one offer to become a moderator at Cre8asite Forums. (Thanks, Kim!).

No question in my mind: business profile is the key to success on the web. In my industry, this has meant writing useful articles, helping people out through Cre8asite Forums, and letting people know I’m out here. The key has been writing with people in mind: being friendly, approachable, and responsive. Do I think that my writing alone has made this much of an impact? No, frankly. I think the fact that I’ve also made a concerted effort to respond to blog comments, to respond to every query I receive through my contact form, and that I’ve helped people is what’s ultimately been the most effective marketing tool I could wield.

Barry Welford and Liana Evans tagged me. (For separate blogs; but I’m combining the response into just one post. Duplicate content be damned. What am I going to do? Give away 10 facts about myself?)

1. In high school and college I was a pretty serious goth. Lots of makeup, all black clothing, the whole 9 yards. I varyingly had extremely long hair (to the lower back, usually) and a completely shaved head.
2. I never owned or lived with a computer before 2001. I’d never worked with any kind of programming language; knew nothing whatsoever about this “command prompt” thingamajig or “objects”. I’ve never held a full-time job in anything in the computer industry. On a related note; I’ve never designed a website using tables for layout.
3. Before going into computers and web development, I pursued classical history and music composition. I’ve been accepted to grad school on a number of occasions for each, but never actually went. Schools I’ve been accepted to include Boston University, the University of Colorado at Boulder, and University College London. I still play classical music regularly and read on classical topics, but don’t particularly intend to pursue them academically.
4. I don’t drive. I did finally get my driver’s license two years ago, but have not actually been behind the wheel since sometime in early 2005. I will eventually drive, because it’s an unfair burden on my girlfriend for me not to, but I haven’t managed to take that step yet. Driving scares the hell out of me.
5. I grew up in Montana. My mother grew up on a farm in western North Dakota; my father on a ranch in eastern Montana. My girlfriend is a professional horse trainer. Everybody asks me whether I ride: No, I don’t. I’m a city boy: growing up in Montana is not equivalent to growing up in the country.

I’m going to have to tag some new people, here…let’s see — Mike Cherim, Jack Pickard, Emma Sax, Nadir Garouche, and Michael Jensen. (He says he hasn’t been tagged yet - but he started the whole thing! Seems only fair.)

Yesterday, I installed a great little plugin which tracks my top 10 viewed posts. Unsurprisingly, this gives me a greater sense of what posts people are visiting as well as providing a means for other people to see my more popular writings.

But it came with some surprises…

Currently, and by a HUGE margin, my most popular post is a post announcing Jim Byrne’s latest book. It’s a nothing post: a paragraph saying who Jim Byrne is (founder of GAWDS, a brief sentence saying something nice about the book, and a link to the book’s sale page on LuLu.com.

And yet, it was visited 100 times in the last 24 hours. I’d known that this page received an unusually high amount of traffic; but this is well beyond what I expected.

And, of course, now that it’s in my top 10 (really, top 5 - I edited the plugin), it’s creating a bit of a feedback loop: curious people will continue to visit it to try and see what’s so special.

My assumption is that most of these visitors are looking for review information: advice about the book, etc. So I’ve added to the post. Hopefully, I’ll be giving these visitors what they’re looking for: I didn’t expand the article into a huge review — it’s not a huge book, after all! But it’s a more meaningful article now than it was before.

It’s a good thing, knowing what pages people most frequently visit on your site. Those are good pages to pay close attention to: if they aren’t already, change them to try and deliver what your visitors are looking for.

I enjoy reading; so a literary meme seemed like a fun thing to participate in. And it’s a great excuse to talk about one of my favorite authors, so I’m taking the liberty of going thoroughly off topic. This one, I picked up from Emma, who picked it up from ThePickards.

The rules:

1. Grab the nearest book.
2. Open the book to page 123.
3. Find the fifth sentence.
4. Post the text of the next 4 sentences on your blog along with these instructions.
5. Don’t you dare dig for that “cool” or “intellectual” book in your closet! I know you were thinking about it! Just pick up whatever is closest.

And here it is:

He looked a total tyrant.

“Wipe that smile off your face, Smedley,” he said, “and get you gone back to that hoeing.”

When the whole gang had gone sucurrying out again, Mr. Maxim pranced forward. He was almost as full of himself as Christopher was.

It’s unlikely anybody reading this is going to get that one…it’s “Conrad’s Fate”, the latest addition (minus 1) to Diana Wynne Jones’ “Chrestomanci” collection. Diana Wynne Jones is, for what it’s worth, the absolute best in juvenile fantasy. That’s the category she’s most commonly put in, at any rate - although I consider most of her work to be quite sophisticated and unquestionably well worth reading.

Recommended reading for Diana Wynne Jones (all affiliate links, FYI):

• Howl’s Moving Castle (also the movie by Miyazaki)
• Dogsbody
• Fire and Hemlock
• The Dalemark Quartet
  • Cart and Cwidder (Vol 1) & Drowned Ammet (Vol 2)
  • The Spellcoats (Vol 3) & The Crown of Dalemark (Vol 4)
• Eight Days of Luke
• Archer’s Goon
• The Homeward Bounders