Do It Myself Blog – Glenda Watson Hyatt

For the most part, when a ‘traditional’ website is developed, a team comes together to complete the task. Sometimes the team consists of the proverbial me, myself and I; other times the team is several people, with potentially an outsider with a specific expertise brought in. Either way, the team works together on the common goal and, when done correctly, accessibility is considered and implemented at each phase of development.

Blogs, on the other hand, differ in development in that four distinct yet separate parties are involved; they very rarely, if ever, come together and work as a team. However, each party impacts a blog’s accessibility (or inaccessibility), oftentimes without even realizing it:

1. Blogging platforms – such as WordPress, TypePad and LiveJournal – have a double duty in terms of accessibility. First, the code produced by the platform, which is actually a content management system, should meet the Web Content Accessibility Guidelines 2.0 (or other appropriate guidelines). Accessible code benefits the blog’s readers. Second, the blogging platform interface – the part bloggers use when writing posts and such – should meet the Authoring Tool Accessibility Guidelines 1.0. Accessible blogging platforms benefits bloggers with various disabilities (from mild to severe).
2. Theme designers control the blog’s layout, colour scheme, font sizing and such, which greatly impacts accessibility. If designers do not consider accessibility, many readers will be excluded from the community.
3. Plugin and widget developers create functionality and ‘shiny objects’,enhancing blogs’ interaction and interest for readers. However, once again, if accessibility is not considered when developing these plugins, many readers are limited or restricted from benefitting from them.
4. Bloggers begin blogging largely to share a expertise or a experiences or to create a voice for themselves. Bloggers blog to create content and to build a community.  Unlike website designers, many bloggers do not have training in html or style sheets. Further, some blogging platforms restrict bloggers’ access to their themes. These two factors limit bloggers’ impact on the accessibility of their own blogging community. Yet, there still ways in which bloggers can improve accessibility.

My goal is to work with each party to increase accessibility within their specific territory of the blogosphere. I’d love to begin with bloggers and to work with them to build the most accessible blogs possible within the constraints of being a blogger.

Here is where I’d love your input by taking this very quick poll:

Your input will help me to decide on the name for an upcoming project. Thanks!

I have been home from Chicago for a week and I still have SOBCon: Biz School for Bloggers on the brain. For me, the experience was more about the people than what I learned from the content.

Interacting with people via blog comments or 140 characters at a time on Twitter and recognizing them by their tiny avatar is one thing, but being together in three-dimensions and being able to talk, laugh or cry together is something much more powerful; something that is often missing when we become more and more connected online.

The one thing that really awed me while I was looking around and taking in all of who was in the room: most of us were there because of one person. We either knew her directly, we knew someone who knew her or we admired what she does. Liz Strauss has built such a strong and connected community online, one relationship at a time, that 125 of us did whatever was necessary to come together at the same time, at one location, in the same room. Now, that is trust! And inspiring.

As for my presentation “How POUR is Your Blog", well, I kinda rocked SOBCon! But, don’t take my word for it. Here’s what others were saying:

• Tweets during and shortly after my presentation
• making me cry by Jon Swanson
• What I learned at SOBcon (Day 1) – video by Jen Chicago (Unfortunately its not yet captioned.)
• Whrrl: SOBCon Blog Conference, Glenda Watson Hyatt by WhiteTrashMom
• Glenda Watson Hyatt: Is Your Blog Disabled? by Lorelle VanFossen
• You can be on Oprah and Larry King by Giovanna Garcia
• Accessibility isn’t hard once you’re aware by Richard Reeve
• Inspired by Glenda Watson Hyatt at SOBCon09 by Lorelle VanFossen
• Glenda can change your life!! Just give her a chance by Beth Rosen

Thanks everyone!

Finally, my trip photos are now available on Flickr. As soon as I figure out how to collect the photos others took of me, I will post that link too.

Now, to implement what I actually did learn…

With all of this talk about monetizing your blog and using your blog to generate business, and hence, generate an income, how POUR is your blog?

Fresh from SOBCon09: Biz School for Bloggers in Chicago, my awesome presentation is now available as an ebook!

This free ebook:

• Defines web accessibility,
• Outlines four key characteristics of accessible blogs,
• Provides three ways to increase accessibility with your next blog post, and
• Lists additional resources.

Download How POUR is Your Blog? Tips for Increasing Your Blog’s Accessibility and discover how POUR your blog truly is. (You will need Adobe Acrobat Reader to view the ebook.)

Chicago, here I come!

Last May, I announced my goal of attending SOBCon 09: Business School for Bloggers. I am going!

And…I am presenting! Even better, I will have the pleasure of presenting with my yet-to-meet-face-to-face friend Karen Putz. Our presentation will be on various aspects of web accessibility for bloggers. My portion will address the question, “How POUR is Your Blog?”

Please join us in Chicago for an amazing line up of speakers.

More details soon.

In my blogging, I use both the blogging platform WordPress 2.7 and the offline editor Windows Live Writer 2009 for writing the posts. I have been amazed by how differently the two applications handle images. In fact, I have often wondered, usually late at night, which one is most accessible in terms of the images.

Today is the day to put the two applications in a byte-to-byte, no holds barred smackdown!

Round #1: Inserting an Image

The first step in inserting an image into a post is to identify the image.

In the Live Writer corner: the keyboard shortcut Ctrl + L opens the “Insert Picture” dialog box to choose the image from either my computer or from the web.

In the WordPress corner: after some poking around, I found the keyboard shortcut Alt + Shift + M for inserting an image. This option is for an image that is already online.

If, however, the image needs to be uploaded, I must use the “Add an Image” button on the Upload/Insert toolbar:

After some more poking around and reading Using Images in Posts, I could not find a way to activate the “Add an Image” button using the keyboard. Even by tabbing, I couldn’t reach the button.

According to the Authoring Tool Accessibility Guidelines (ATAG) 2.0 – Working Draft, which applies to both WordPress and Live Writer, “Authors with a wide range of abilities must be able to operate the functions and components of the authoring tool user interface.” Unless I missed finding a way to access the “Add an Image” button using the keyboard, this function is not available to bloggers relying solely on the keyboard.

Round #2: Using the Interface

The next step in inserting images into a post is to set the positioning or alignment, and to enter the alternative text (alt) to benefit individuals using screen readers and to make it searchable by search engines.

In the Live Writer corner: a straightforward interface in a sidebar for manipulating images. After poking around for at least half an hour, I could not find a way to get from the main Writer window to Picture side panel using the keyboard. That doesn’t mean a way doesn’t exist; I simply didn’t find it. Once in the side panel, the settings are operable via the keyboard. However, switching between the three tabs – Picture, Advanced, and Effects – using the keyboard also remains a mystery.

Under the Advanced tab, the alt text can be entered. Advanced? Alternative text is crucial to accessibility. One penalty point!

In the WordPress corner: the dialog box is not straightforward:

I am presented with four text boxes (or fields) without a clear understanding of what they are for. The Title box is marked with a red asterisk, likely indicating a required field; yet a note under the Caption box says “Also used as alternate text for the image. The Title is required, but the Caption is the alt? One penalty!

William Lawrence kindly explained the four fields in a comment on WordPress 2.7: A Brief Accessibility Review:

When inserting an image with WordPress all that is required is the Title which then gets used for the title and alt attribute of the image element. This is kind of good, because it kind of meets ATAG requirements, however because the content in the title and alt attributes are duplicated, this is inappropriate as it duplicates the context of the content. In addition, if one does not change the title of the image from an improper file name, the meaning is lost.

When one adds caption text, this additional text is placed next to the image and alt attribute of the image, while the title attribute of the image remains the title, or filename, of the image. This is kind of okay because now the image element no longer has duplicate content for these attribute, however the alternative text for the image now repeats what duplicated in the content of the article: inappropriate and repetitive.

Meanwhile, the description text is used as content for Attachment post page if one chooses to publish each image as a separate attachment post. More information can be found on their Codex for Using Image and File Attachments.

I need a flow chart to follow that! Another penalty.

Tip for bloggers: Because these two applications and many others do use the filename for the default alt text, make the filename more descriptive (and use a hyphen or underscore between words) when originally saving the image on your computer. This may not be the ideal alt, but it might prompt you to then revise the text when inserting the image.

Round #3: Validating the Code

Besides being accessible to me – the blogger, the application must also output content that is accessible to the blog readers. One way of measuring the content’s accessibility is to see whether the published code validates using a tool such as the W3C Markup Validation Service. 

In the Live Writer corner: the published code –

<img title="Glenda’s avatar" style="border-right: 0px; border-top: 0px; display: inline; margin-left: 0px; border-left: 0px; margin-right: 0px; border-bottom: 0px" height="178" alt="Glenda’s avatar" src="http://www.doitmyselfblog.com/wp-content/uploads/2009/02/glendabooksbyglendacom_ 102c1971.jpg" width="178"  align="left" border="0" />

– validates with no errors!

In the WordPress corner: the published code –

<div id="attachment_559" class="wp-caption alignleft" style="width: 188px"><img class="size-full wp-image-559" title="Glenda’s avatar" src="http://www.doitmyselfblog.com/wp-content/uploads/2009/02/glendabooksbyglendacom_ 102c1971.jpg" alt="Cute chick!" width="178" height="178" /><p class="wp-caption-text">Cute chick!</p></div>

– validates with no errors!

Frankly, I am surprised by this round’s results. This round was the one that had me wondering late at night. I thought the deprecated elements (code no longer used) and the repetitiveness of the title (in Live Writer) and the Caption (in WordPress) would have been marked as errors.

Bonus Round: Additional features

Although not directly related to accessibility, having extras for manipulating images are quite handy. It saves having yet another application open and switching between the two.

In the Live Writer corner: a variety of borders and actions (i.e. rotate, crop and watermark) that can be applied to images to add interest.

In the WordPress corner: zilch! WordPress is down. Its a knockout!

In terms of the accessibility of using images in posts, the winner is…Windows Live Writer!