Keep Your Sidebars Organized
Widgets and blogrolls and badges, oh my! Your post content may be great, but chances are there's a bunch of cool stuff in your blog's sidebar too. Most blog tools start out with organized sidebars. Every section has a title, and behind the scenes it's coded in a way that makes it easy for people with disabilities to navigate your blog.
As we add things, though, it can get a little murky. Here are a few tips about how to add sidebar bling without making it hard on your visitors.
Make Titled Groups For Similar Elements
You default blog template probably included a few elements like a list of recent posts, archives, and a link to your blog's feed. Behind the scenes, the titles of each of those sections were labeled as headings. Headings make the titles look different, so those of us who can see the screen take one look and "get" how the sidebar is organized.
Visitors using a screen reader get the same information, because their software will announce that the text they're about to hear is a header. Those folks, as well as people using other kinds of assistive technology, can also use headers to skip sections. If they're looking for your archives, for example, they don't have to get through your entire blogroll - they can just skip to the next heading.
As you add items, though, you may not have thought to keep up that structure. Take a minute to review your sidebar elements and decide if any of them could be grouped. Awards for your blog, groups you've joined, links about a particular topic - almost anything can be a group.
If you want to group some of your sidebar bling,
When you add a Page Element to your Blogger sidebar, it uses what you enter in the Title field as the heading. If you add elements to your sidebar using the HTML/JavaScript Page Element, you can actually put the title in for your group, then copy the code for any number of items into this box one after the other.
WordPress blogs operate the same way as Blogger when you use the Text widget.
If you create a new Movable Type widget, use one of the existing widgets as a model do you get the headings, divs, and all that jazz correct.
If you add sidebar content to your Typepad blog using a Notes TypeList, the name of the TypeList will be used as the heading. If you're using Advanced Templates, make sure your heading for your sidebar element uses the same formatting as the sidebar elements provided by TypePad.
The Title of a Custom Text element in LiveJournal will be used as the heading.
When you're embedding a widget in your Vox sidebar, it says the Title field is optional, but that's what created a heading. I haven't played around with it enough, but I think you could still use this to create groups of widgets if you code the titles within the widget code box. Email me at skyekilaen@gmail.com if you want to be a guinea pig.
When Your Section Titles Are Images
If you've replaced your section titles with pictures of words, you can add markup behind the scenes that make it clear what's a heading. You'll need to determine what level of heading your blog's default template uses - h1, h2, h3, etc. If you still have one of the default sidebar elements on your blog, great! If not, you may need to add a fake one temporarily to inspect it.
Using IE, Firefox, Opera, or Safari, choose View from the browser menu and then choose Source or Page Source. Now you can see the code that makes up your blog's page. (This will probably make you even more grateful for your blog software than you were before, since it wrote all that code for you.) You can look through it visually, or use whatever Find tool is available in your browser, to locate the heading of the default sidebar element.
On either side of that element should be a set of tags that have the letters h2, h3, or possibly even h4 in them. There may be other elements in the brackets, but you're looking for the h with a number. That tells you what "outline" level your headings are using.
Once you know, find the image that's your section title and put tags on each side of it, like this:
<h2><img src="contact-me.jpg" height="48" width="171" alt="Contact Me"></h2>
The only danger you face is that there may be styling that will show up behind or around your image. If so, you may need to back out and get some help with this step from someone who is familiar with CSS and can keep that styling from kicking in.
Label Images
When you add an image or badge by copying and pasting code into your sidebar, you may need to tweak it a little bit to make sure it's accessible. Without a text label behind the scenes, people who use screen readers to read your blog to them may hear a jumble of letters. This is especially important if you've replaced the text headings on your blog with images.
(Note: This does not apply to movies, Flickr badges that continually update with recent photos, and other types of "images" that are actually javascript or some other flavor. If the code you're looking at doesn't look like the example below, this isn't the right set of instructions for it. I'll be working on those instructions later and will update this post when I finish them.)
When you look at the HTML code for an image or badge, it looks something like this:
<img src="http://blogher.org/system/files?file=images/120x60going07_0.gif" alt="I'm Goiung to BlogHer '07" />
The alt=" " part is what supplies a text label behind the scenes if someone can't read the image. The text that goes in between the quotes is what a person using a screen reader will hear.
If an image is being used to replace text, it needs alt text that says the same thing or as close to it as possible. If an image is a link to something, then alt text should be included that tells what the image links to. You don't have to include the word link, because the screen reader will say it's a link.
One thing to watch for when using images that someone else has made is whether the alt text is appropriate. The maker of the image, badge, or button may have their own agenda for the button, because alt text is used by Google. People have been known to include completely unrelated information in alt text to try and gain page rank. So even if you check the code and see alt text, make sure it serves as a true alternative to the image.
Advertisements
