Do It Myself Blog – Glenda Watson Hyatt

Motivational Speaker

What Makes a Blog Theme Accessible?

Filed under: Blog Accessibility — by at 2:23 pm on Thursday, August 6, 2009

For the past several months, I have been itching for a new theme (design and layout) for my blog. This theme is not as accessible as it should be. The code doesn’t validate and other accessibility features are lacking – and this is really frustrating me, given what I do when I’m sure not blogging.

I have tweaked this theme as much as possible without knowing any PHP programming. Learning to design my own themes is definitely on my to-do list, eventually. Until then, I need a theme that is more accessible – accessibility is a continuum, not an absolute – than this one.

I’ve searched and searched for accessible WordPress themes, with very little success. Then I began thinking, “What is an accessible theme? What criteria should a theme meet and what features should a theme have to be considered ‘accessible’?“

Before an accessible theme can be designed, the necessary requirements must be identified. Here’s a list that instantly came to mind:

  • The code validates with no errors.
  • A fluid design that displays correctly at different resolutions and on various monitors from large screens to small handheld devices.
  • Maximized colour contrast between the text and background to enhance readability.
  • Relative sized fonts, rather than fixed size, enabling readers to increase font size when needed.
  • “skip to content” and/or “skip to navigation” features to assist those using screen readers and keyboards to navigate the page more easily.
  • An attractive layout and design with plenty of white space.

However, this list is only a beginning. Allow this post to spark a discussion between blog readers with various disabilities, theme designers, web accessibility gurus, and whomever else is interested. Share your ideas and thoughts on:

  • What an “accessible” theme means to you?
  • What features does an accessible theme need to have?
  • What features would be nice to have?
  • What do theme designers need to know about creating accessible themes?
  • What questions do theme designers have about web accessibility? What information and resources do you need?

The floor is open. Let’s talk! All that I ask is that you be respectful of one another.

If you enjoyed this post, consider buying me a chai tea latte. Thanks kindly.

Related Posts

Trackbacks

  1. Do It Myself Blog – Glenda Watson Hyatt » Top 10 Most Engaging Posts of 2009

20 Comments »

Comment by Joseph Karr O'Connor

August 6, 2009 @ 4:29 pm

My blog site Blacktelephone has a fairly accessible theme. In reviewing it just now I see that the heading levels need a bit of sorting out and it fails validation on three items. Your site fails validation on 98 errors with 32 warnings and you have a similar issue with heading levels but it is fairly accessible. This is a question for us all: how important is valid code if the site is accessible? We’ve chosen to use XHTML 1.0 Strict, if we’d chosen Transitional we wouldn’t have any code validation errors. I’ve always maintained that valid code is the proper foundation for accessible pages. I think we’ll fix the headings and go with Transitional RSN (Real Soon Now:-) Thanks for the wake up call!

Comment by Glenda

August 6, 2009 @ 4:59 pm

Welcome Joseph and thank you for kick starting this discussion!

That is a good point about how valid or error free needs to be accessible. Personally, I’m anal about having as valid as possible code. I’m really frustrated with having 98 errors and 32 warnings; this blog’s code isn’t up to my own standard. But, from my understanding, some errors are more serious than others in terms of accessibility and affect how various technologies render the page.

The heading order is important requirement for accessible themes. And doesn’t Google prefer headings correctly nested?

Comment by DouglasT

August 7, 2009 @ 4:51 am

A solid and valid structure, good contrast, relative font size, correct use of headings, and easy to use skip links are on the must have list.

My blog usually validates, but I see that a new plugin I added yesterday is using invalid links. Figures. I’ll be fixing that this weekend.

Comment by David Clark

August 7, 2009 @ 6:38 am

Hi Glenda,
Fnrst and foremost, I should say that I am not a designer – I am a php guy that has been dabbling in wordpress since 1.2.
Most themes (rightfully) focus on asthetics/visual looks. The problem is that a themer can make a beautiful product without having a clue how things work programmaticlly.
IMHO its best to start with a “framework theme” like http://carringtontheme.com/ or http://www.plaintxt.org/themes/sandbox/

Comment by S Emerson

August 7, 2009 @ 9:20 am

Glenda, yes Google recommends nesting headings properly.

Proper heading hierarchy not only helps your search engine results, it makes your page more accessible and user friendly.

Heading structure plays an important part of on page search engine optimization. The search engine spider checks for heading tags as it looks at your web page. Each search engine spider will prioritize the importance of the headings in a different way.

Comment by Gordie Rogers

August 8, 2009 @ 12:52 am

I”m not familiar with the term “the term validates”. Does that mean the code works?

Comment by Susan L. Gerhart

August 8, 2009 @ 9:17 am

This great discussion will move blog accessibility ahead. Thanks.

I’m partially sighted, use wordpress for my blog, read using NVDA. Generally I find wordpress themes usable with reasonable effort if (1) the posts precede the sidebar and (2) posts follow a regular Heading order.

The “sidebar to the right” rule means returning to a web page for a blog goes most directly to latest post, not lists of latest posts, comments, metadata, tag clouds, etc. I can simply repeat the h key through posts to sidebar if I want its overview, navigation, and indexing.

However, I rarely read blogs in a browser but rather in an RSS client on my Levelstar Icon PDA. I have nearly 150 feeds of news, podcasts, etc. about half on accessibility Nicely arranged in trees by topic. Hierarchically ivided, I read faster, by TTS, than in Google Reader or any other RSS client I’ve tried. Seriously this simple Linux -based RSS client may be fastest on the planet. BTW, I’ll be glad to export and share my OPML list of feeds.

Do you consider the format of articles received in an RSS client as part of the accessibility issue? I do, since RSS clients deliver the article as a stripped-down web page, retaining the sidebar and non-post content. This invisible use of themes ruling order of reading dictates my #1 concern: ”

“sidebars to the right, content first, please”.

Just now retrying “Do it myself” brings out the distinction between “to the right” vidually and in HTML/screenreader order. It looks like a layout table places the sidebar we see before the content. Try NVDA using h key (in Firefox) to see what happens. Also, I’m not a fan of skip links, as (1) useless in a literal RSS client, (2) too often don’t work, and (3) try to substitute for logical headings, and eventually ARIA landmarks. My blog talks about “It’s the headings, stupid” which applies especially well to .gov websites :-).

Regarding the dashboard, editing and managing blog stuff, I can muddle through with the current implementation as long as the headings divide the form fields well enough that I can memorize the pattern. In fact, WordPress does pretty well with Headings. Dragging and ropping widgets to the sidebar, well, this requires all my vision and more. A sighted co-blogger is also having trouble getting our gravatars to show, but I personally can live without these if noted properly with ALT. So there remain accessibility problems for blog writers as well as readers, whether at the web site or in some RSS client.

I’m betting on our grass-roots accessibility hero Dennis of webaxe and http://accessibletwitter.com to sort this out, wit input like ours. In the end, our choice of theme can be more rational if we understand better the issues and trade-offs among accessibility, development, and other design factors.

Comment by DouglasT

August 9, 2009 @ 7:22 am

Ms. Gerhart, you like the sidebar to fall after content in code order? So that you don’t have to use headings to gt past it?

I don’t think I understand how you’re viewing web pages. You refer to an RSS client, but also to “stripped-down web page, retaining the sidebar and non-post content”. A traditional RSS client can’t see the web page, stripped down or otherwise. It can only see the RSS feed, which is an XML file of content only. Can you describe more of what you’re using?

I do accessibility work and I want to make sure that I address your type of use in the future. I use screen readers and screen reader simulators to test my work, but I may be missing the technology that you’re using.

Comment by Karen

August 9, 2009 @ 11:28 pm

Did you hear about the discussion list concerning WordPress accessibility:
http://lists.automattic.com/mailman/listinfo/wp-accessibility
It’s been mentioned on Twitter the last few days. I haven’t tried it myself, but I wanted to share the news here.

Comment by Richard - Accessible Web Design

August 10, 2009 @ 1:49 am

Glenda,

I know that Mike Cherim has produced an accessible WordPress theme (can’t remember the name off the top of my head though).

The need for relative sizing of fonts is becoming much less of an issue now that the major browsers all support page zooming. There are still issues around it though and it is something of a hot topic among web designers, some of whom are assertively making the move back to fixed fonts. Not sure where I stand yet (probably on the fence still).

Comment by Glenda

August 10, 2009 @ 1:49 pm

Hi Gordie and welcome!

Validating code is similar to grammar and spell checking a word document. Using a checker, such as the W3C Validation Service, finds errors in the code. Some errors can cause technologies, like text-to-speech screen readers used by individuals who are visually impaired, to render the page incorrectly.

Comment by Glenda

August 10, 2009 @ 2:01 pm

Welcome Susan and thanks for your detailed response! Your experience and your insights are valuable.

Sounds like you have a streamlined system set up as your RSS reader. And great point about keeping sidebars to the right; another reason I’m itching for a new theme. Although both of the sidebars on this blog visually appear to be on the right; the actual order is not so.

And yes, the WordPress admin panel has accessibility issues of its own!

Comment by Glenda

August 10, 2009 @ 2:05 pm

Thanks Karen for mentioning the new WordPress accessibility discussion list. I’m looking forward to seeing the discussion that result from there.

Comment by Glenda

August 10, 2009 @ 3:59 pm

Richard, thanks for mentioning the debate regarding relative font size. I was unaware it had become an issue again. How is fixed font sizes with small devices, such as Blackberries? The Web Content Accessibility Guidelines 2.0 still requires relative sizing, if I’m reading that correctly. I’d still lean that way, until I hear a very convincing argument against the need for still using relative font size.

Comment by DouglasT

August 10, 2009 @ 4:14 pm

It’s easy to say that modern browsers don’t need relative sizing, but there are other factors. Browsers as old or older than IE6 still have a significant following for instance. While page zoom is nice, just choosing a larger default font size is a nice option too. Fixed font sizes can still come back to bite you in many ways.

One of the many reasons I’ve really started to like the Drupal CMS is that you control the theme of the admin pages. It can be the same theme as the site, or completely different.

Comment by Karen

August 10, 2009 @ 4:37 pm

Hi Glenda

While looking for a particular link (that I cannot find), I came across these other links that might prove valuable in the typography discussion:

Typography and accessibility:
http://21picas.co.uk/?p=364

Typografphy and the aging eye:
http://www.aiga.org/content.cfm/typography-and-the-aging-eye

I ned to ask the twitterverse’s help in finding that other link! 🙂

Comment by Tony

August 14, 2009 @ 2:20 am

Hi Glenda, I downloaded the WordPress.org program or whatever it’s called to try & use it but it was all a bit of a mystery to me so I ended up just going with a WordPress.com blog & just picking what I liked out of the available themes. I would love to be able to have different themes but I’m not computer savvy enough for that so I just stick with what I have.

Comment by Glenda

August 14, 2009 @ 1:43 pm

Hi Tony, there’s always much to learn when you’re blogging. The key is to get started, like you’ve done. Congrats! The rest is learn as you go. Good luck and welcome to the blogosphere!

Comment by Dot

August 19, 2009 @ 7:28 am

Interesting discussion so far. I hope that if there’s a consensus, at some point someone will contact the folks behind WordPress, Blogger, etc. and offer some guidelines for theme developers to meet.

As a theme lover and theme browser, I’ve learned that theme developers fall into two broad categories — those who code well and those who design artistically. Rarely do the creators excel in both. Of the two, coding is far more important. What I’m hoping to do, therefore, although I’m not good at it, is take a well-coded theme and move into it beautiful graphics from a theme that allows that in its license.

Well-coded themes can often be identified on the WordPress site by the number of stars given to the theme by a large number of users, and also by reviews and even by the author’s comments, such as “validated XHTML and CSS.”

In terms of needs, I have low vision and can’t use a screen resolution higher than 800 x 600, so I’d prefer fluid width so I don’t have to scroll to the right all the time, and making sure that the width adjusts in a usable way. The WordPress editor screen can be made to fit a small screen, for example, but the right-hand column of options then overlaps the editing window, which is not useable. You have to select a different option to put the options at the bottom.

RSS feed for comments on this post. TrackBack URI

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>