That i’m quietly tinkering with my *new* WordPress version of this blog won’t exactly be news to many of you. I’ve mentioned it enough times in passing that you’d be forgiven for becoming very fed up with me. Development, once again, continues, but I thought I would post today about a couple of development issues i’ve had to consider in the last week.
The first, images. Designing websites with an awareness for degradation – especially when it comes to navigation – is old news really, and has crossed my path more than once in the last few years. Still, it’s surprising, given the wealth of posts on accessibility, that many blogs are just saturated with images. Personally, I dislike clutter anyway, so in my blog redesign I’m aiming for a minimalist look. Substance over style.
That said, there’s nothing wrong with spicing up webpages with some cool imagery, but we all need to be aware of the consequences. Now I’m no expert when it comes to accessibility – in fact I confess that i’ve read more about accessibility online in the last few months than I ever have before – but it should be obvious by now that we all have to be responsible designers.
So images then. As a test, I urge you to visit your favourite blogs, dare I say even your own, with images turned off in your browser. Aside from the, most likely, now bland-looking page you are presented with, you should be aware of a couple of things. Can you still see your sidebar navigation? What about your header title? If you’ve used images for any of your navigation, you should now see what i’m getting at. Thankfully, many ‘featured’ WordPress themes stick with lists for the navigation (which should still be visible, even if it doesn’t look pretty without background images), but still there are more custom themes that don’t and suffer for it. Incidentally, if you try it here, you’ll discover that my header image disappears and there’s no header text(**header text seems to show in FF but not in Safari – yet more accessibility considerations!). Yes, my bad, but I have the distinct impression that most Blogger themes haven’t a hope of validating – there are 213 errors in this theme alone!
The above test has hopefully shown you the problem of relying on images, both aesthetically for the look of your site, but especially from an accessibility viewpoint when it comes to navigation. Now you may expect that many users would view your webpage with images on anyway, but there is another concern here: Many visually impaired users use screen readers to access webpages. So what happens when the screenreader encounters images? Well, hopefully you’ve provided ‘alternative text’ for the image using the alt attribute of the img tag. If not, the screenreader may skip the graphic entirely or read the filename of the image.
Now consider all the images that may be used in a blog for example. It might not be so bad for images in posts since chances are you’ve named them appropriately. But what about all the miscellaneous images, the ones that control the look of the blog itself or those in the navigation? Again, the header image may be appropriately titled, but in many blogs a repeatable image is used to create the background of the page. In this blog alone there is outerwrap.gif and innerwrap.gif, what are those? (In this case, “outerwrap” is the dark gradient on either side of the blog, while “innerwrap” is the diagonal lines in the sidebar) Again, even if these were all named sensibly, there is still the chance that any of these images could be overlooked by a screenreader, which may or may not be desirable, depending on the image’s purpose. That’s why it’s important to use alternative text for images – either with an appropriate name if you want the screenreader to announce it, or with an alt attribute of “null” so that it will be skipped. I won’t force the issue since i’m retreading old ground, but WebAIM has a very useful article on screen readers and alternative text here, covering many of these points in more detail.
For these reasons, I hope you can see that it’s important to be aware of how your blog degrades across multiple environments. I’ve briefly mentioned images, but what if you’ve extensively used Javascript and the user has it turned off? By all means, lets design beautiful webpages, but I think it’s helpful to start from the ground up, using images only to embellish an already accessible and clearly laid out web page. That’s my intention in the future anyway.
Secondly, I want to mention something I hadn’t previously considered: bullet points. As I said, many blogs use lists for navigation, which is accessible simply because it’s text. However, aesthetically, it’s desirable to layout hierarchal lists with bullet points to clearly distinguish between parent and child items. What happens, then, when a screen reader encounters these bullet points? Standards Schmandards has a very helpful article on accessible title separators (you know, the symbols commonly found between the blog title and subtitle) that also applies to bullet styles in lists. The article stresses the importance of using a symbol that is concise and fit for purpose. So if it’s to be used as a separator, pick a symbol that sounds like it’s meant to be a seperator. Similar suggestions have been made in the article’s comments on the best symbol to use for list subitems. Many blogs use the raquo symbol » which the screenreader translates as “right double angle bracket”, so it’s easy to see how this could be confusing for visually impaired users.
Anyway, hopefully this little mention will prompt you to do some reading around. I know I need to do a lot more, but i’s certainly food for thought. Personally, i’m still pondering over the symbols I’ll end up using in my new blog, i’ll let you know how it turns out.
